From 1681bcc41ed2a6119f02fbf7bb67b7b04c4dc16c Mon Sep 17 00:00:00 2001 From: sqozz Date: Mon, 26 Jun 2017 20:03:13 +0200 Subject: [PATCH] Huge rewrite to make ampel more dynamic and more responsive --- README.md | 6 +++ assets/js/mainDisplay.js | 79 +++++++++++++++++++++++++++++------- assets/templates/display.tpl | 51 +++++++++++++++++++---- bearbeiter.txt | 5 ++- 4 files changed, 115 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index cb8ff4d..405eed8 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/assets/js/mainDisplay.js b/assets/js/mainDisplay.js index 0ccde8d..bc417f1 100644 --- a/assets/js/mainDisplay.js +++ b/assets/js/mainDisplay.js @@ -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] + "
" - 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; diff --git a/assets/templates/display.tpl b/assets/templates/display.tpl index 6233f80..842ab34 100644 --- a/assets/templates/display.tpl +++ b/assets/templates/display.tpl @@ -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; + + } + diff --git a/bearbeiter.txt b/bearbeiter.txt index 522d90b..5f1bbaf 100755 --- a/bearbeiter.txt +++ b/bearbeiter.txt @@ -1,3 +1,4 @@ Hans Maier|251 -Ypsilon|252 -Xanthippe|253 +Ypsilon|251 +Xanthippe|252 +Foobar|252