|
|
@@ -177,6 +177,20 @@
|
|
|
background-color: #242424;
|
|
|
}
|
|
|
|
|
|
+ /* status blinker */
|
|
|
+ #statusBlinker{
|
|
|
+ position: absolute;
|
|
|
+ left: 1em;
|
|
|
+ bottom: 1em;
|
|
|
+ width: 1em;
|
|
|
+ height: 2px;
|
|
|
+ background-color: rgb(95, 95, 95);
|
|
|
+ }
|
|
|
+
|
|
|
+ #statusBlinker.interval{
|
|
|
+ background-color: rgb(235, 235, 235);
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -199,7 +213,13 @@
|
|
|
<td>
|
|
|
<div>WLAN IP<br></div>
|
|
|
</td>
|
|
|
- <td>0.0.0.0</td>
|
|
|
+ <td id="wlanip"></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div>mDNS Address<br></div>
|
|
|
+ </td>
|
|
|
+ <td id="mdnsaddr"></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>Power Status<br></td>
|
|
|
@@ -228,13 +248,14 @@
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-122q-121-15-200.5-105.5T160-440q0-66 26-126.5T260-672l57 57q-38 34-57.5 79T240-440q0 88 56 155.5T440-202v80Zm80 0v-80q87-16 143.5-83T720-440q0-100-70-170t-170-70h-3l44 44-56 56-140-140 140-140 56 56-44 44h3q134 0 227 93t93 227q0 121-79.5 211.5T520-122Z"/></svg>
|
|
|
</div>
|
|
|
<div class="leds">
|
|
|
- <div class="ledlabel">HDD <div class="led"></div></div><br>
|
|
|
- <div class="ledlabel">PWR <div class="led"></div></div>
|
|
|
+ <div class="ledlabel">HDD <div class="led hddled"></div></div><br>
|
|
|
+ <div class="ledlabel">PWR <div class="led powerled"></div></div>
|
|
|
</div>
|
|
|
<div id="pwrbtn" title="Power On / Off">
|
|
|
<svg id="pwricon" fill="#eb4034" xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="M440-440v-400h80v400h-80Zm40 320q-74 0-139.5-28.5T226-226q-49-49-77.5-114.5T120-480q0-80 33-151t93-123l56 56q-48 40-75 97t-27 121q0 116 82 198t198 82q117 0 198.5-82T760-480q0-64-26.5-121T658-698l56-56q60 52 93 123t33 151q0 74-28.5 139.5t-77 114.5q-48.5 49-114 77.5T480-120Z"/></svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div id="statusBlinker"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
@@ -243,11 +264,33 @@
|
|
|
computer. By default, it update the status LED every seconds. When the
|
|
|
remote is powered on, it update with 100ms delay between response and new requests.
|
|
|
*/
|
|
|
- let updateInterval = 1000;
|
|
|
+ let updateInterval = 1000;
|
|
|
+ let statusBlinker = false; //Just an indicator to show connection is established
|
|
|
+
|
|
|
//Set the power status and hdd led status to off
|
|
|
togglePowerState(false);
|
|
|
toggleHDDLED(false);
|
|
|
|
|
|
+ /* Get the device ip and mdns */
|
|
|
+ function initIPInfo(){
|
|
|
+ fetch('/ipaddr', {
|
|
|
+ method: 'GET'
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ if (!response.ok) {
|
|
|
+ throw new Error('Network error');
|
|
|
+ document.getElementById("wlanip").innerText = "192.168.4.1";
|
|
|
+ document.getElementById("mdnsaddr").innerText = "Unknown";
|
|
|
+ }
|
|
|
+ return response.json();
|
|
|
+ })
|
|
|
+ .then(data => {
|
|
|
+ document.getElementById("wlanip").innerText = data.ipaddr;
|
|
|
+ document.getElementById("mdnsaddr").innerText = data.mdns;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ initIPInfo();
|
|
|
+
|
|
|
/* Read the status from server */
|
|
|
function updateLEDStatus(){
|
|
|
fetch('/status', {
|
|
|
@@ -272,26 +315,41 @@
|
|
|
setTimeout(updateLEDStatus, updateInterval);
|
|
|
//Update the hdd led
|
|
|
toggleHDDLED(data.hdd);
|
|
|
+
|
|
|
+ //Update the status blinker
|
|
|
+ statusBlinker = !statusBlinker;
|
|
|
+ var blinker = document.getElementById("statusBlinker");
|
|
|
+ if (statusBlinker){
|
|
|
+ blinker.classList.add("interval");
|
|
|
+ }else{
|
|
|
+ blinker.classList.remove("interval");
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
setTimeout(updateLEDStatus, updateInterval);
|
|
|
|
|
|
/* Status LED Rendering */
|
|
|
function togglePowerState(powerIsOn = true){
|
|
|
+ var powerLedIndicator = document.querySelectorAll('.powerled')[0];
|
|
|
if (powerIsOn){
|
|
|
document.getElementById("powerLED").innerHTML = "🟢 ON";
|
|
|
document.getElementById("pwricon").setAttribute("fill", "#7fe38b");
|
|
|
+ powerLedIndicator.style.backgroundColor = '#16c60c';
|
|
|
}else{
|
|
|
document.getElementById("powerLED").innerHTML = "⚫ OFF";
|
|
|
document.getElementById("pwricon").setAttribute("fill", "#eb4034");
|
|
|
+ powerLedIndicator.style.backgroundColor = '#383838';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function toggleHDDLED(hddLEDOn = true){
|
|
|
+ var hddLedIndicator = document.querySelectorAll('.hddled')[0];
|
|
|
if (hddLEDOn){
|
|
|
document.getElementById("hddStatus").innerHTML = "🔵 R/W";
|
|
|
+ hddLedIndicator.style.backgroundColor = '#0078d7';
|
|
|
}else{
|
|
|
document.getElementById("hddStatus").innerHTML = "⚫ IDLE";
|
|
|
+ hddLedIndicator.style.backgroundColor = '#383838';
|
|
|
}
|
|
|
}
|
|
|
|
Toby Chui