Browse Source

Huge rewrite to make ampel more dynamic and more responsive

master
sqozz 3 years ago
parent
commit
1681bcc41e
4 changed files with 115 additions and 26 deletions
  1. +6
    -0
      README.md
  2. +64
    -15
      assets/js/mainDisplay.js
  3. +42
    -9
      assets/templates/display.tpl
  4. +3
    -2
      bearbeiter.txt

+ 6
- 0
README.md View File

@@ -6,6 +6,12 @@ but not yet tested (comming soon™).
The main porpuse is intendet for 2-3 lights indicating the availability of employees.
## Installation
1. `virtualenv -p python3 venv`
2. `source ./venv/bin/activate`
3. `pip3 install -r requirements.txt`
4. `python3 ampel.py`
## Technical stuff
Ampel is build with python, flask, html5 with canvas, css3 and also some javascript.

+ 64
- 15
assets/js/mainDisplay.js View File

@@ -2,22 +2,34 @@ window.onload = function() {
setInterval(updateDashboard, 500)
}

oldEmployeeCount = -1
maxLightWidth = 100

function updateDashboard() {
//document.body.innerHTML = ""
currentStatus = getEmployeeStatus()
currentStatus.then(function(data) {
jsonData = data
employeeCount = 0
for (var employee in jsonData) {
employeeCount += 1
if (!jsonData.hasOwnProperty(employee)) continue;

name = jsonData[employee][0]
room = jsonData[employee][1]
employeeName = jsonData[employee][0]
employeeRoom = jsonData[employee][1]
available = jsonData[employee][2]
//document.body.innerHTML += jsonData[employee][0] + " is available: " + jsonData[employee][2] + "<br />"
drawLight(available, name.replace(" ", "_"), name)
light_id = employeeName.replace(" ", "_")
light_label = employeeName
room_id = "room_" + employeeRoom.replace(" ", "_")
room_label = employeeRoom
drawLight(available, light_id, light_label, room_id, room_label)
}
if (employeeCount != oldEmployeeCount) {
console.log("employee count changed, recalculate max size")
oldEmployeeCount = employeeCount
maxLightWidth = findSmallestBoundBox()
}
}).catch(function(err) {
console.log("err")
console.log(err)
})
}

@@ -31,13 +43,25 @@ function getEmployeeStatus() {
});
}

function createOrGetLight(id, label) {
light = document.querySelectorAll(".trafficLight." + id)
function createOrGetRoomContainer(room_id, room_label) {
roomContainer = document.querySelectorAll(".room." + room_id)
if (roomContainer.length > 0) {
return roomContainer[0]
} else {
roomContainer = createRoomContainer(room_id, room_label)
document.body.appendChild(roomContainer)
return roomContainer
}
}

function createOrGetLight(light_id, light_label, room_id, room_label) {
light = document.querySelectorAll(".trafficLight." + light_id)
roomContainer = createOrGetRoomContainer(room_id, room_label)
if (light.length > 0) {
return light[0]
} else {
light = createLight(id, label)
document.body.appendChild(light)
light = createLight(light_id, light_label)
roomContainer.appendChild(light)
return light
}
}
@@ -57,17 +81,42 @@ function createLight(id, labelText) {
return trafficLight
}

function drawLight(available, id, label) {
container = createOrGetLight(id, label)
//clearCanvas()
//container = document.querySelectorAll(".trafficLight." + id)[0]
function createRoomContainer(room_id, room_label) {
roomContainer = document.createElement("div")
roomContainer.classList.add("room")
roomContainer.classList.add(room_id)
label = document.createElement("div")
label.classList.add("label")
label.innerHTML = "Raum " + room_label
roomContainer.appendChild(label)

return roomContainer
}

function findSmallestBoundBox() {
allLights = document.querySelectorAll(".lights")
smallestBox = 1000
if (allLights.length > 0) {
for (i = 0; i < allLights.length; i++) {
if (allLights[i].parentElement.getBoundingClientRect().width < smallestBox) { smallestBox = allLights[i].parentElement.getBoundingClientRect().width }
}
}
return smallestBox;
}

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 = document.querySelectorAll(".trafficLight." + id + ">canvas")[0];
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;

+ 42
- 9
assets/templates/display.tpl View File

@@ -5,26 +5,59 @@
body {
display: flex;
justify-content: center;
align-items: center;
align-items: stretch;
height: 100%;
}

div.room {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
flex-grow: 1;
padding-top: 2%;
margin-left: 1%;
margin-right: 1%;
}

div.trafficLight {
display: inline-block;
height: 765px;
width: 415px;
background-color: black;
margin-right: 100px;
margin-left: 100px;
display: flex;
width: 215px;
flex-grow: 1;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
padding-left: 10px;
padding-right: 10px;
}

div.label {
div.room>.label {
white-space: nowrap;
height: 60px;
padding-bottom: 20px;
font-size: 4em;
font-weight: "bold";
background-color: white;
text-align: center;
flex-basis: 100%;
border-bottom: 2px solid black
}

div.trafficLight>.label {
overflow: hidden;
white-space: nowrap;
display: flex;
justify-content: center;
font-size: 4em;
flex-basis: 100%;
margin-bottom: 1%;
}

canvas.lights {
background-color: gray;
}

</style>
</head>
<body>

+ 3
- 2
bearbeiter.txt View File

@@ -1,3 +1,4 @@
Hans Maier|251
Ypsilon|252
Xanthippe|253
Ypsilon|251
Xanthippe|252
Foobar|252

Loading…
Cancel
Save