Fix visibility of lights

This commit is contained in:
sqozz 2017-06-29 18:42:34 +02:00
parent cfc72396af
commit 8af63207d8
3 changed files with 25 additions and 9 deletions

View File

@ -25,12 +25,15 @@ function drawLight(available, light_id, light_label, room_id, room_label) {
if (available == true) {
green = "#00f300" //turned on
red = "#570000" //turned off
red = "rgba(87, 00, 00, 0.2"
} else {
green = "#003000"
green = "#0030004D"
green = "rgba(00, 48, 00, 0.2"
red = "#cc0000"
}
cxt.strikeStyle = "#999999";
cxt.lineWidth = 3;
cxt.strikeStyle = "#FFFFFF";
cxt.lineWidth = 6;
// Draw green light
cxt.beginPath()
@ -51,13 +54,14 @@ 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') {
roomContainer.appendChild(light)
lightsContainer.appendChild(light)
} else {
document.body.appendChild(light)
}
@ -74,7 +78,7 @@ function createLight(id, labelText) {
label.innerHTML = labelText
trafficLight.appendChild(label)
canvas = document.createElement("canvas")
canvas.classList.add("lights")
canvas.classList.add("light")
trafficLight.appendChild(canvas)
return trafficLight

View File

@ -60,8 +60,11 @@ function createRoomContainer(room_id, room_label) {
roomContainer.classList.add(room_id)
label = document.createElement("div")
label.classList.add("label")
label.innerHTML = "Raum " + room_label
label.innerHTML = "Zimmer " + room_label
light = document.createElement("div")
light.classList.add("lights")
roomContainer.appendChild(label)
roomContainer.appendChild(light)
return roomContainer
}

View File

@ -2,6 +2,11 @@
<head>
<title>Anzeige</title>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
display: flex;
justify-content: center;
@ -53,9 +58,13 @@
margin-bottom: 1%;
}
canvas.lights {
background-color: gray;
canvas.light {
background-color: #4b4b4b;
}
div.lights {
display: flex;
width: 100%;
}
</style>