87 lines
2.3 KiB
JavaScript
87 lines
2.3 KiB
JavaScript
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
|
|
red = "rgba(87, 00, 00, 0.2"
|
|
} else {
|
|
green = "#0030004D"
|
|
green = "rgba(00, 48, 00, 0.2"
|
|
red = "#cc0000"
|
|
}
|
|
cxt.strikeStyle = "#FFFFFF";
|
|
|
|
cxt.lineWidth = 6;
|
|
|
|
// 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)
|
|
lightsContainer = roomContainer.getElementsByClassName("lights")[0]
|
|
}
|
|
if (light.length > 0) {
|
|
return light[0]
|
|
} else {
|
|
light = createLight(light_id, light_label)
|
|
if (typeof room_id !== 'undefined') {
|
|
lightsContainer.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("light")
|
|
trafficLight.appendChild(canvas)
|
|
|
|
return trafficLight
|
|
}
|
|
|