Browse Source

Huge rewrite to make ampel more dynamic and more responsive

master
sqozz 2 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™).
6 6
 
7 7
 The main porpuse is intendet for 2-3 lights indicating the availability of employees.
8 8
 
9
+## Installation
10
+1. `virtualenv -p python3 venv`
11
+2. `source ./venv/bin/activate`
12
+3. `pip3 install -r requirements.txt`
13
+4. `python3 ampel.py`
14
+
9 15
 ## Technical stuff
10 16
 Ampel is build with python, flask, html5 with canvas, css3 and also some javascript.
11 17
 

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

@@ -2,22 +2,34 @@ window.onload = function() {
2 2
 	setInterval(updateDashboard, 500)
3 3
 }
4 4
 
5
+oldEmployeeCount = -1
6
+maxLightWidth = 100
7
+
5 8
 function updateDashboard() {
6
-	//document.body.innerHTML = ""
7 9
 	currentStatus = getEmployeeStatus()
8 10
 	currentStatus.then(function(data) {
9 11
 		jsonData = data
12
+		employeeCount = 0
10 13
 		for (var employee in jsonData) {
14
+			employeeCount += 1
11 15
 			if (!jsonData.hasOwnProperty(employee)) continue;
12 16
 
13
-			name = jsonData[employee][0]
14
-			room = jsonData[employee][1]
17
+			employeeName = jsonData[employee][0]
18
+			employeeRoom = jsonData[employee][1]
15 19
 			available = jsonData[employee][2]
16
-			//document.body.innerHTML += jsonData[employee][0] + " is available: " + jsonData[employee][2] + "<br />"
17
-			drawLight(available, name.replace(" ", "_"), name)
20
+			light_id = employeeName.replace(" ", "_")
21
+			light_label = employeeName
22
+			room_id  = "room_" + employeeRoom.replace(" ", "_")
23
+			room_label = employeeRoom
24
+			drawLight(available, light_id, light_label, room_id, room_label)
25
+		}
26
+		if (employeeCount != oldEmployeeCount) {
27
+			console.log("employee count changed, recalculate max size")
28
+			oldEmployeeCount = employeeCount
29
+			maxLightWidth = findSmallestBoundBox()
18 30
 		}
19 31
 	}).catch(function(err) {
20
-		console.log("err")
32
+		console.log(err)
21 33
 	})
22 34
 }
23 35
 
@@ -31,13 +43,25 @@ function getEmployeeStatus() {
31 43
 	});
32 44
 }
33 45
 
34
-function createOrGetLight(id, label) {
35
-	light = document.querySelectorAll(".trafficLight." + id)
46
+function createOrGetRoomContainer(room_id, room_label) {
47
+	roomContainer = document.querySelectorAll(".room." + room_id)
48
+	if (roomContainer.length > 0) {
49
+		return roomContainer[0]
50
+	} else {
51
+		roomContainer = createRoomContainer(room_id, room_label)
52
+		document.body.appendChild(roomContainer)
53
+		return roomContainer
54
+	}
55
+}
56
+
57
+function createOrGetLight(light_id, light_label, room_id, room_label) {
58
+	light = document.querySelectorAll(".trafficLight." + light_id)
59
+	roomContainer = createOrGetRoomContainer(room_id, room_label)
36 60
 	if (light.length > 0) {
37 61
 		return light[0]
38 62
 	} else {
39
-		light = createLight(id, label)
40
-		document.body.appendChild(light)
63
+		light = createLight(light_id, light_label)
64
+		roomContainer.appendChild(light)
41 65
 		return light
42 66
 	}
43 67
 }
@@ -57,17 +81,42 @@ function createLight(id, labelText) {
57 81
 	return trafficLight
58 82
 }
59 83
 
60
-function drawLight(available, id, label) {
61
-	container = createOrGetLight(id, label)
62
-	//clearCanvas()
63
-	//container = document.querySelectorAll(".trafficLight." + id)[0]
84
+function createRoomContainer(room_id, room_label) {
85
+	roomContainer = document.createElement("div")
86
+	roomContainer.classList.add("room")
87
+	roomContainer.classList.add(room_id)
88
+	label = document.createElement("div")
89
+	label.classList.add("label")
90
+	label.innerHTML = "Raum " + room_label
91
+	roomContainer.appendChild(label)
92
+
93
+	return roomContainer
94
+}
95
+
96
+function findSmallestBoundBox() {
97
+	allLights = document.querySelectorAll(".lights")
98
+	smallestBox = 1000
99
+	if (allLights.length > 0) {
100
+		for (i = 0; i < allLights.length; i++) {
101
+			if (allLights[i].parentElement.getBoundingClientRect().width < smallestBox) { smallestBox = allLights[i].parentElement.getBoundingClientRect().width }
102
+		}
103
+	}
104
+	
105
+	return smallestBox;
106
+}
107
+
108
+function drawLight(available, light_id, light_label, room_id, room_label) {
109
+	container = createOrGetLight(light_id, light_label, room_id, room_label)
64 110
 	canvas = container.children[1]
65
-	//canvas = document.querySelectorAll(".trafficLight." + id + ">canvas")[0];
66 111
 	canvas.width = container.getBoundingClientRect().width
112
+	canvas.width = maxLightWidth
67 113
 	canvas.height = container.getBoundingClientRect().height - 80
114
+	canvas.height = maxLightWidth * 1.5
68 115
 	cxt = canvas.getContext("2d");
69 116
 	cHeight = canvas.getBoundingClientRect().height
117
+	cHeight = canvas.height
70 118
 	cWidth =  canvas.getBoundingClientRect().width
119
+	cWidth = canvas.width
71 120
 	centerX = cWidth / 2;
72 121
 	centerRedY = cHeight / 4;
73 122
 	centerGreenY = (cHeight / 4) * 3;

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

@@ -5,26 +5,59 @@
5 5
 			body {
6 6
 				display: flex;
7 7
 				justify-content: center;
8
-				align-items: center;
8
+				align-items: stretch;
9
+				height: 100%;
10
+			}
11
+
12
+			div.room {
13
+				display: flex;
14
+				flex-direction: row;
15
+				flex-wrap: wrap;
16
+				justify-content: center;
17
+				flex-grow: 1;
18
+				padding-top: 2%;
19
+				margin-left: 1%;
20
+				margin-right: 1%;
9 21
 			}
10 22
 
11 23
 			div.trafficLight {
12
-				display: inline-block;
13
-				height: 765px;
14
-				width: 415px;
15
-				background-color: black;
16
-				margin-right: 100px;
17
-				margin-left: 100px;
24
+				display: flex;
25
+				width: 215px;
26
+				flex-grow: 1;
27
+				flex-wrap: wrap;
28
+				justify-content: center;
29
+				align-items: flex-start;
30
+				align-content: flex-start;
31
+				padding-left: 10px;
32
+				padding-right: 10px;
18 33
 			}
19 34
 
20
-			div.label {
35
+			div.room>.label {
36
+				white-space: nowrap;
21 37
 				height: 60px;
22 38
 				padding-bottom: 20px;
23 39
 				font-size: 4em;
24 40
 				font-weight: "bold";
25
-				background-color: white;
26 41
 				text-align: center;
42
+				flex-basis: 100%;
43
+				border-bottom: 2px solid black
44
+			}
45
+
46
+			div.trafficLight>.label {
47
+				overflow: hidden;
48
+				white-space: nowrap;
49
+				display: flex;
50
+				justify-content: center;
51
+				font-size: 4em;
52
+				flex-basis: 100%;
53
+				margin-bottom: 1%;
27 54
 			}
55
+
56
+			canvas.lights {
57
+				background-color: gray;
58
+				
59
+			}
60
+
28 61
 		</style>
29 62
 	</head>
30 63
 	<body>

+ 3
- 2
bearbeiter.txt View File

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

Loading…
Cancel
Save