function drawLight(available, light_id, light_label, room_id, room_label) { container = createOrGetLight(light_id, light_label, room_id, room_label) canvas = container.children[1] canvas.width = container.getBoundingClientRect().width canvas.width = maxLightWidth canvas.height = container.getBoundingClientRect().height - 80 canvas.height = maxLightWidth * 1.5 cxt = canvas.getContext("2d"); cHeight = canvas.getBoundingClientRect().height cHeight = canvas.height cWidth = canvas.getBoundingClientRect().width cWidth = canvas.width centerX = cWidth / 2; centerRedY = cHeight / 4; centerGreenY = (cHeight / 4) * 3; halfHeight = cHeight / 2 if (halfHeight < cWidth) { radius = halfHeight / 2 } else { radius = cWidth / 2 } radius -= 20 //margin if (available == true) { green = "#00f300" //turned on red = "#570000" //turned off } else { green = "#003000" red = "#cc0000" } cxt.strikeStyle = "#999999"; cxt.lineWidth = 3; // Draw green light cxt.beginPath() cxt.arc(centerX, centerGreenY, radius, 0, 2 * Math.PI); cxt.fillStyle = green; cxt.fill(); cxt.stroke(); // Draw red light cxt.beginPath() cxt.arc(centerX, centerRedY, radius, 0, 2 * Math.PI); cxt.fillStyle = red; cxt.fill(); cxt.stroke(); } function createOrGetLight(light_id, light_label, room_id, room_label) { light = document.querySelectorAll(".trafficLight." + light_id) if (typeof room_id !== 'undefined') { roomContainer = createOrGetRoomContainer(room_id, room_label) } if (light.length > 0) { return light[0] } else { light = createLight(light_id, light_label) if (typeof room_id !== 'undefined') { roomContainer.appendChild(light) } else { document.body.appendChild(light) } return light } } function createLight(id, labelText) { trafficLight = document.createElement("div") trafficLight.classList.add("trafficLight") trafficLight.classList.add(id) label = document.createElement("div") label.classList.add("label") label.innerHTML = labelText trafficLight.appendChild(label) canvas = document.createElement("canvas") canvas.classList.add("lights") trafficLight.appendChild(canvas) return trafficLight }