Merge branch 'devel' of git.knacki.info:isundil/homespeakersServer into devel

main.js

@@ -9,12 +9,26 @@ function notFound(res) {
 	res.end(res.statusMessage);
 }
 
+function getMime(filename) {
+	const suffix = (/(.*\.)[^.]+/).exec(filename),
+		ext = filename.substr(suffix ? suffix[1].length : 0),
+		mime = require("mime");
+	if (!mime)
+		return null;
+	return mime.getType(ext);
+}
+
 function serveFile(url, res) {
-	require("fs").readFile("./public/" +(url || "index.html").replace('/\//g', ''), (err, data) => {
-		if (err)
+	const filename = "./public/" +(url || "index.html").replace('/\//g', '');
+	require("fs").readFile(filename, (err, data) => {
+		if (err) {
 			notFound(res);
-		else
+		} else {
+			const type = getMime(filename);
+			if (type)
+				res.setHeader("Content-Type", type);
 			res.end(data);
+		}
 	});
 }
 

public/batteryalmostcharged.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px"><title>Artboard 1 copy 32</title><rect x="10.23" y="36.73" width="16.24" height="26.94" rx="1.23" ry="1.23"/><rect x="28.33" y="36.73" width="16.24" height="26.94" rx="1.23" ry="1.23"/><rect x="46.42" y="36.73" width="16.24" height="26.94" rx="1.23" ry="1.23"/><path d="M93.28,37.26H85.82V32.93a1.71,1.71,0,0,0-1.72-1.71H6.72A1.71,1.71,0,0,0,5,32.93V67.42a1.72,1.72,0,0,0,1.72,1.72H84.1a1.72,1.72,0,0,0,1.72-1.72V63.09h7.46A1.72,1.72,0,0,0,95,61.37V39A1.72,1.72,0,0,0,93.28,37.26ZM82.39,65.71h-74V34.65h74Zm9.18-6H85.91v-19h5.66Z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Jose Flores</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 20 100 55" x="0px" y="0px"><title>Artboard 1 copy 32</title><rect x="10.23" y="36.73" width="16.24" height="26.94" rx="1.23" ry="1.23"/><rect x="28.33" y="36.73" width="16.24" height="26.94" rx="1.23" ry="1.23"/><rect x="46.42" y="36.73" width="16.24" height="26.94" rx="1.23" ry="1.23"/><path d="M93.28,37.26H85.82V32.93a1.71,1.71,0,0,0-1.72-1.71H6.72A1.71,1.71,0,0,0,5,32.93V67.42a1.72,1.72,0,0,0,1.72,1.72H84.1a1.72,1.72,0,0,0,1.72-1.72V63.09h7.46A1.72,1.72,0,0,0,95,61.37V39A1.72,1.72,0,0,0,93.28,37.26ZM82.39,65.71h-74V34.65h74Zm9.18-6H85.91v-19h5.66Z"/></svg>

public/batteryfullycharged.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px"><title>Artboard 1 copy 33</title><rect x="10.12" y="35.61" width="15.88" height="26.34" rx="1.2" ry="1.2"/><rect x="27.81" y="35.61" width="15.88" height="26.34" rx="1.2" ry="1.2"/><rect x="45.5" y="35.61" width="15.88" height="26.34" rx="1.2" ry="1.2"/><rect x="63.2" y="35.61" width="15.88" height="26.34" rx="1.2" ry="1.2"/><path d="M91.32,36.13H84V31.89a1.67,1.67,0,0,0-1.67-1.67H6.68A1.68,1.68,0,0,0,5,31.89V65.62a1.68,1.68,0,0,0,1.68,1.67H82.35A1.67,1.67,0,0,0,84,65.62V61.38h7.3A1.68,1.68,0,0,0,93,59.7V37.81A1.68,1.68,0,0,0,91.32,36.13ZM80.67,63.94H8.36V33.57H80.67Zm9-5.91H84.11V39.49h5.53Z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Jose Flores</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 20 100 55" x="0px" y="0px"><title>Artboard 1 copy 33</title><rect x="10.12" y="35.61" width="15.88" height="26.34" rx="1.2" ry="1.2"/><rect x="27.81" y="35.61" width="15.88" height="26.34" rx="1.2" ry="1.2"/><rect x="45.5" y="35.61" width="15.88" height="26.34" rx="1.2" ry="1.2"/><rect x="63.2" y="35.61" width="15.88" height="26.34" rx="1.2" ry="1.2"/><path d="M91.32,36.13H84V31.89a1.67,1.67,0,0,0-1.67-1.67H6.68A1.68,1.68,0,0,0,5,31.89V65.62a1.68,1.68,0,0,0,1.68,1.67H82.35A1.67,1.67,0,0,0,84,65.62V61.38h7.3A1.68,1.68,0,0,0,93,59.7V37.81A1.68,1.68,0,0,0,91.32,36.13ZM80.67,63.94H8.36V33.57H80.67Zm9-5.91H84.11V39.49h5.53Z"/></svg>

public/charging.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px"><title>Artboard 1 copy 35</title><path d="M93.28,35.48H85.82V31.14a1.72,1.72,0,0,0-1.72-1.71H44.34L39.21,14.36a2,2,0,0,0-4,.66V29.43H6.72A1.72,1.72,0,0,0,5,31.14V65.63a1.72,1.72,0,0,0,1.72,1.72H49.45l3.88,15.08a2,2,0,0,0,2,1.57h.2a2,2,0,0,0,1.85-2l.27-14.65H84.1a1.72,1.72,0,0,0,1.72-1.72V61.3h7.46A1.72,1.72,0,0,0,95,59.58V37.19A1.71,1.71,0,0,0,93.28,35.48ZM8.43,63.92V32.86H35.24V52.3a2,2,0,0,0,2,2H46.1l2.46,9.58Zm45.69,7.8L53,67.35l-.88-3.43-3-11.44a2,2,0,0,0-2-1.57H38.68V23.44l2,6,1.17,3.43,2.48,7.29a2,2,0,0,0,1.93,1.39h8.39l-.42,22.39-.06,3.43Zm28.27-7.8H57.69l.45-23.75a2.06,2.06,0,0,0-.59-1.46,2,2,0,0,0-1.45-.61H47.29L45.5,32.86H82.39Zm9.18-6.05H85.91v-19h5.66Z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Jose Flores</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 20 100 55" x="0px" y="0px"><title>Artboard 1 copy 35</title><path d="M93.28,35.48H85.82V31.14a1.72,1.72,0,0,0-1.72-1.71H44.34L39.21,14.36a2,2,0,0,0-4,.66V29.43H6.72A1.72,1.72,0,0,0,5,31.14V65.63a1.72,1.72,0,0,0,1.72,1.72H49.45l3.88,15.08a2,2,0,0,0,2,1.57h.2a2,2,0,0,0,1.85-2l.27-14.65H84.1a1.72,1.72,0,0,0,1.72-1.72V61.3h7.46A1.72,1.72,0,0,0,95,59.58V37.19A1.71,1.71,0,0,0,93.28,35.48ZM8.43,63.92V32.86H35.24V52.3a2,2,0,0,0,2,2H46.1l2.46,9.58Zm45.69,7.8L53,67.35l-.88-3.43-3-11.44a2,2,0,0,0-2-1.57H38.68V23.44l2,6,1.17,3.43,2.48,7.29a2,2,0,0,0,1.93,1.39h8.39l-.42,22.39-.06,3.43Zm28.27-7.8H57.69l.45-23.75a2.06,2.06,0,0,0-.59-1.46,2,2,0,0,0-1.45-.61H47.29L45.5,32.86H82.39Zm9.18-6.05H85.91v-19h5.66Z"/></svg>

public/halfbattery.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px"><title>Artboard 1 copy 31</title><rect x="10.18" y="36.15" width="16.06" height="26.64" rx="1.21" ry="1.21"/><rect x="28.07" y="36.15" width="16.06" height="26.64" rx="1.21" ry="1.21"/><path d="M92.3,36.68H84.92V32.4a1.7,1.7,0,0,0-1.7-1.7H6.7A1.7,1.7,0,0,0,5,32.4V66.5a1.7,1.7,0,0,0,1.7,1.7H83.22a1.7,1.7,0,0,0,1.7-1.7V62.22H92.3a1.7,1.7,0,0,0,1.7-1.7V38.38A1.7,1.7,0,0,0,92.3,36.68ZM81.53,64.81H8.39V34.09H81.53Zm9.08-6H85V40.07h5.6Z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Jose Flores</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 20 100 55" x="0px" y="0px"><title>Artboard 1 copy 31</title><rect x="10.18" y="36.15" width="16.06" height="26.64" rx="1.21" ry="1.21"/><rect x="28.07" y="36.15" width="16.06" height="26.64" rx="1.21" ry="1.21"/><path d="M92.3,36.68H84.92V32.4a1.7,1.7,0,0,0-1.7-1.7H6.7A1.7,1.7,0,0,0,5,32.4V66.5a1.7,1.7,0,0,0,1.7,1.7H83.22a1.7,1.7,0,0,0,1.7-1.7V62.22H92.3a1.7,1.7,0,0,0,1.7-1.7V38.38A1.7,1.7,0,0,0,92.3,36.68ZM81.53,64.81H8.39V34.09H81.53Zm9.08-6H85V40.07h5.6Z"/></svg>

public/index.html

@@ -1,6 +1,8 @@
 <!DOCTYPE html5>
 <html><head><title>Mediaki Sound Control Center</title></head><link rel="stylesheet" type="text/css" href="style.css"><body>
   <div id="outputs"></div>
-  <p class="credits">Battery icons by Jose Flores from the Noun Project</p>
-  <p class="credits">Wifi and Volume icons by Adrien Coquet from the Noun Project</p>
+  <div class="credits">
+    <p>Battery icons by Jose Flores from the Noun Project</p>
+    <p>Wifi and Volume icons by Adrien Coquet from the Noun Project</p>
+  </div>
 <script src="script.js"></script></body></html>

public/lowbattery.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px"><title>Artboard 1 copy 29</title><path d="M10.64,63.26h4.59c.23,0,.41-.55.41-1.23V37.55c0-.68-.18-1.23-.41-1.23H10.64c-.22,0-.41.55-.41,1.23V62C10.23,62.71,10.42,63.26,10.64,63.26Z"/><path d="M93.28,36.85H85.82V32.52a1.71,1.71,0,0,0-1.72-1.71H6.72A1.71,1.71,0,0,0,5,32.52V67a1.72,1.72,0,0,0,1.72,1.72H84.1A1.72,1.72,0,0,0,85.82,67V62.68h7.46A1.72,1.72,0,0,0,95,61V38.57A1.72,1.72,0,0,0,93.28,36.85ZM82.39,65.3h-74V34.24h74Zm9.18-6H85.91v-19h5.66Z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Jose Flores</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 20 100 55" x="0px" y="0px"><title>Artboard 1 copy 29</title><path d="M10.64,63.26h4.59c.23,0,.41-.55.41-1.23V37.55c0-.68-.18-1.23-.41-1.23H10.64c-.22,0-.41.55-.41,1.23V62C10.23,62.71,10.42,63.26,10.64,63.26Z"/><path d="M93.28,36.85H85.82V32.52a1.71,1.71,0,0,0-1.72-1.71H6.72A1.71,1.71,0,0,0,5,32.52V67a1.72,1.72,0,0,0,1.72,1.72H84.1A1.72,1.72,0,0,0,85.82,67V62.68h7.46A1.72,1.72,0,0,0,95,61V38.57A1.72,1.72,0,0,0,93.28,36.85ZM82.39,65.3h-74V34.24h74Zm9.18-6H85.91v-19h5.66Z"/></svg>

public/quarterbattery.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px"><title>Artboard 1 copy 30</title><rect x="11.08" y="36.49" width="16.08" height="26.67" rx="1.22" ry="1.22"/><path d="M93.3,37H85.91V32.73a1.7,1.7,0,0,0-1.7-1.7H7.59a1.7,1.7,0,0,0-1.69,1.7V66.88a1.7,1.7,0,0,0,1.69,1.7H84.21a1.7,1.7,0,0,0,1.7-1.7V62.59H93.3a1.7,1.7,0,0,0,1.7-1.7V38.72A1.7,1.7,0,0,0,93.3,37ZM82.51,65.18H9.29V34.43H82.51Zm9.09-6H86V40.42h5.6Z"/><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Jose Flores</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 20 100 55" x="0px" y="0px"><title>Artboard 1 copy 30</title><rect x="11.08" y="36.49" width="16.08" height="26.67" rx="1.22" ry="1.22"/><path d="M93.3,37H85.91V32.73a1.7,1.7,0,0,0-1.7-1.7H7.59a1.7,1.7,0,0,0-1.69,1.7V66.88a1.7,1.7,0,0,0,1.69,1.7H84.21a1.7,1.7,0,0,0,1.7-1.7V62.59H93.3a1.7,1.7,0,0,0,1.7-1.7V38.72A1.7,1.7,0,0,0,93.3,37ZM82.51,65.18H9.29V34.43H82.51Zm9.09-6H86V40.42h5.6Z"/></svg>

public/script.js

@@ -22,9 +22,9 @@
 		var statusDiv = document.createElement("div");
 		statusDiv.className = "status";
 		if (data.status) {
-			console.log(data.status.status);
 			if (data.status.status.plugged) {
 				var pluggedIcon = document.createElement("img");
+				pluggedIcon.className = "icon"
 				pluggedIcon.src = "charging.svg";
 				statusDiv.appendChild(pluggedIcon);
 			}
@@ -32,11 +32,20 @@
 				var batteryLvl = document.createElement("span"),
 					batteryIcon = document.createElement("img"),
 					batteryRes = [ "lowbattery.svg", "quarterbattery.svg", "batteryalmostcharged.svg", "batteryfullycharged.svg" ];
-				batteryIcon.src = batteryRes[Math.floor((data.status.status.battery * batteryRes) / 100)];
+				batteryIcon.src = batteryRes[Math.min(batteryRes.length -1, Math.floor((data.status.status.battery * batteryRes.length) / 100))];
+				batteryIcon.className = "icon";
 				batteryLvl.appendChild(batteryIcon);
 				batteryLvl.innerHTML += data.status.status.battery +"%";
+				statusDiv.appendChild(batteryLvl);
 			}
 			if (data.status.ping) {
+				var ping = document.createElement("div"),
+					icon = document.createElement("img");
+				icon.className = "icon";
+				icon.src = "wifi.svg";
+				ping.appendChild(icon);
+				ping.innerHTML += data.status.ping.duration +"ms";
+				statusDiv.appendChild(ping);
 			}
 		} else {
 			statusDiv.classList.add("no-status");

public/style.css

@@ -20,3 +20,19 @@
 .output .input.input-disabled:before {
 	background-color: red;
 }
+
+.icon {
+	max-height: 1em;
+	max-width: 2em;
+	vertical-align: -15%;
+}
+
+.credits {
+	text-align: center;
+	margin-top: 5em;
+}
+
+.credits p {
+	margin: 0;
+}
+

public/wifi.svg

@@ -1 +1 @@
-<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><switch><foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"/><g i:extraneous="self"><g><path d="M96.9,30.3C84.3,18.2,67.7,11.6,50,11.6c-17.6,0-34.2,6.6-46.9,18.7c-0.7,0.7-0.7,1.8,0,2.5l5.4,5.4     c0.7,0.7,1.8,0.7,2.4,0c10.6-10,24.4-15.5,39.1-15.5c14.7,0,28.5,5.5,39.1,15.5c0.7,0.7,1.8,0.6,2.4,0l5.4-5.4     C97.7,32.2,97.7,31,96.9,30.3z"/><path d="M50,31.5c-12.2,0-24.1,4.7-32.8,13c-0.7,0.7-0.7,1.8,0,2.5l5.5,5.4c0.7,0.7,1.7,0.7,2.4,0c6.7-6.2,15.7-9.7,25-9.7     c9.4,0,18.2,3.4,25,9.7c0.7,0.6,1.8,0.6,2.4,0l5.4-5.4c0.7-0.7,0.7-1.9,0-2.5C73.9,36.1,62.3,31.5,50,31.5z"/><path d="M50,51.4c-7,0-13.6,2.5-18.8,7.1c-0.8,0.7-0.8,1.8-0.1,2.6l5.4,5.4c0.6,0.6,1.6,0.7,2.3,0.1c6.3-5.2,15.9-5.2,22.1,0     c0.7,0.6,1.7,0.5,2.3-0.1l5.4-5.4c0.7-0.7,0.7-1.9-0.1-2.6C63.6,53.9,57,51.4,50,51.4z"/><path d="M50,71.3c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5c4.7,0,8.5-3.8,8.5-8.5C58.5,75.1,54.7,71.3,50,71.3z"/></g></g></switch><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Adrien Coquet</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
+<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 10 100 80" style="enable-background:new 0 0 100 100;" xml:space="preserve"><switch><foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"/><g i:extraneous="self"><g><path d="M96.9,30.3C84.3,18.2,67.7,11.6,50,11.6c-17.6,0-34.2,6.6-46.9,18.7c-0.7,0.7-0.7,1.8,0,2.5l5.4,5.4     c0.7,0.7,1.8,0.7,2.4,0c10.6-10,24.4-15.5,39.1-15.5c14.7,0,28.5,5.5,39.1,15.5c0.7,0.7,1.8,0.6,2.4,0l5.4-5.4     C97.7,32.2,97.7,31,96.9,30.3z"/><path d="M50,31.5c-12.2,0-24.1,4.7-32.8,13c-0.7,0.7-0.7,1.8,0,2.5l5.5,5.4c0.7,0.7,1.7,0.7,2.4,0c6.7-6.2,15.7-9.7,25-9.7     c9.4,0,18.2,3.4,25,9.7c0.7,0.6,1.8,0.6,2.4,0l5.4-5.4c0.7-0.7,0.7-1.9,0-2.5C73.9,36.1,62.3,31.5,50,31.5z"/><path d="M50,51.4c-7,0-13.6,2.5-18.8,7.1c-0.8,0.7-0.8,1.8-0.1,2.6l5.4,5.4c0.6,0.6,1.6,0.7,2.3,0.1c6.3-5.2,15.9-5.2,22.1,0     c0.7,0.6,1.7,0.5,2.3-0.1l5.4-5.4c0.7-0.7,0.7-1.9-0.1-2.6C63.6,53.9,57,51.4,50,51.4z"/><path d="M50,71.3c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5c4.7,0,8.5-3.8,8.5-8.5C58.5,75.1,54.7,71.3,50,71.3z"/></g></g></switch></svg>