Made it more pretty

index.js

@@ -159,11 +159,26 @@ app.post("/stopprojector", (req, res) => {
 	res.json({ status: 'ok' });
 });
 
+function projectorNumberToText(number) {
+	switch (status1) {
+		case '01':
+			return 'On';
+		case '02':
+			return 'Starting/Stopping';
+		case '03':
+			return 'Starting/Stopping';
+		case '04':
+			return 'Off';
+		default:
+			return 'Unknown';
+	}
+}
+
 app.get("/projectorstatus", async (req, res) => {
 	const res1 = await fetch('http://192.168.1.93/api/v01/control/escvp21?cmd=PWR?');
-	const status1 = await res1.text();
+	const status1 = projectorNumberToText(await res1.text());
 	const res2 = await fetch('http://192.168.1.67/api/v01/control/escvp21?cmd=PWR?');
-	const status2 = await res2.text();
+	const status2 = projectorNumberToText(await res2.text());
 	res.json({ status1, status2 });
 });
 

public/index.html

@@ -29,48 +29,66 @@
         <input type='submit' value='Upload!' />
     </form>
 
+    <hr>
+
     <h2>Background video</h2>
     <div id="videos"></div>
     <div>Currently selected video:</div>
     <div id="selectedvideo"></div>
 
+    <hr>
+
     <h2>Overlay video</h2>
     <div id="overlayvideos"></div>
     <button id="play" onclick="fetch(`/playoverlay`, { method: 'POST' });">Play Overlay now</button>
     <div>Currently selected video:</div>
     <div id="overlayvideo"></div>
 
+    <hr>
+
     <h2>Delete videos</h2>
     <div id="deletevideos"></div>
 
+    <hr>
+
     <h2>Projector status 1</h2>
     <div id="projectorstatus1"></div>
 
+    <hr>
+
     <h2>Projector status 2</h2>
     <div id="projectorstatus2"></div>
     <button onclick="fetch(`/startprojector`, { method: 'POST' });">Start projectors</button>
     <button onclick="fetch(`/stopprojector`, { method: 'POST' });">Stop projectors</button>
 
+    <hr>
+
     <h2>Relay 1</h2>
     <div id="relay1"></div>
-    <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/19`);">On relay 1</button>
-    <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/19`);">Off relay 1</button>
+    <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/19`);">Relay 1 ON</button>
+    <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/19`);">Relay 1 Off</button>
+
+    <hr>
 
     <h2>Relay 2</h2>
     <div id="relay2"></div>
-    <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/13`);">On relay 2</button>
-    <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/13`);">Off relay 2</button>
+    <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/13`);">Relay 2 ON</button>
+    <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/13`);">Relay 2 Off</button>
+
+    <hr>
 
     <h2>Relay 3</h2>
     <div id="relay3"></div>
-    <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/6`);">On relay 3</button>
-    <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/6`);">Off relay 3</button>
+    <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/6`);">Relay 3 ON</button>
+    <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/6`);">Relay 3 Off</button>
+
+    <hr>
 
     <h2>Relay 4</h2>
     <div id="relay4"></div>
-    <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/5`);">On relay 4</button>
-    <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/5`);">Off relay 4</button>
-    
+    <button onclick="fetch(`https://steady.bpfilip.dk/relay/on/5`);">Relay 4 ON</button>
+    <button onclick="fetch(`https://steady.bpfilip.dk/relay/off/5`);">Relay 4 Off</button>
+
 	<script src="/main.js"></script>
 </body>
 </html>

public/main.js

@@ -44,6 +44,12 @@ async function main() {
 	status1.textContent = status.status1;
 	status2.textContent = status.status2;
 
+	const selectedvideoDiv = document.getElementById('selectedvideo');
+	const overlayvideoDiv = document.getElementById('overlayvideo');
+
+	selectedvideoDiv.innerText = await (await fetch("/selectedvideo")).text();
+	overlayvideoDiv.innerText = await (await fetch("/overlayvideo")).text();
+
 	const relay1Div = document.getElementById('relay1');
 	const relay2Div = document.getElementById('relay2');
 	const relay3Div = document.getElementById('relay3');
@@ -53,12 +59,6 @@ async function main() {
 	relay2Div.innerText = await (await fetch("https://steady.bpfilip.dk/relay/status/13")).text();
 	relay3Div.innerText = await (await fetch("https://steady.bpfilip.dk/relay/status/6")).text();
 	relay4Div.innerText = await (await fetch("https://steady.bpfilip.dk/relay/status/5")).text();
-
-	const selectedvideoDiv = document.getElementById('selectedvideo');
-	const overlayvideoDiv = document.getElementById('overlayvideo');
-
-	selectedvideoDiv.innerText = await (await fetch("/selectedvideo")).text();
-	overlayvideoDiv.innerText = await (await fetch("/overlayvideo")).text();
 }
 
 main();