Home Explore Help
Sign In
TC
/
ESPWoL
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

ui finalized

Toby Chui 1 year ago
parent
d86bb7fc85
commit
d741884581
3 changed files with 82 additions and 6 deletions
Unified View Show Diff Stats
  1. 62 4
      espwol/data/index.html
  2. 8 2
      espwol/espwol.ino
  3. 12 0
      espwol/webserver.ino

+ 62 - 4
espwol/data/index.html
View File 

@@ -177,6 +177,20 @@
 
 			background-color: #242424;

 			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>

 	</style>

 </head>

 </head>

 <body>

 <body>

@@ -199,7 +213,13 @@
 
 							<td>

 							<td>

 								<div>WLAN IP<br></div>

 								<div>WLAN IP<br></div>

 							</td>

 							</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>

 						<tr>

 						<tr>

 							<td>Power Status<br></td>

 							<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>

 					<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>

 				<div class="leds">

 				<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>

 				 <div id="pwrbtn" title="Power On / Off">

 				 <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>

 					<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>

 			</div>

+			<div id="statusBlinker"></div>

 		</div>

 		</div>

 	</div>

 	</div>

 	<script>

 	<script>

@@ -243,11 +264,33 @@
 
 			computer. By default, it update the status LED every seconds. When the 

 			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.

 			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

 		//Set the power status and hdd led status to off

 		togglePowerState(false);

 		togglePowerState(false);

 		toggleHDDLED(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 */

 		/* Read the status from server */

 		function updateLEDStatus(){

 		function updateLEDStatus(){

 			fetch('/status', {

 			fetch('/status', {

@@ -272,26 +315,41 @@
 
 				setTimeout(updateLEDStatus, updateInterval);

 				setTimeout(updateLEDStatus, updateInterval);

 				//Update the hdd led 

 				//Update the hdd led 

 				toggleHDDLED(data.hdd);

 				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);

 		setTimeout(updateLEDStatus, updateInterval);

 

 

 		/* Status LED Rendering */

 		/* Status LED Rendering */

 		function togglePowerState(powerIsOn = true){

 		function togglePowerState(powerIsOn = true){

+			var powerLedIndicator = document.querySelectorAll('.powerled')[0];

 			if (powerIsOn){

 			if (powerIsOn){

 				document.getElementById("powerLED").innerHTML = "🟢 ON";

 				document.getElementById("powerLED").innerHTML = "🟢 ON";

 				document.getElementById("pwricon").setAttribute("fill", "#7fe38b");

 				document.getElementById("pwricon").setAttribute("fill", "#7fe38b");

+				powerLedIndicator.style.backgroundColor = '#16c60c';

 			}else{

 			}else{

 				document.getElementById("powerLED").innerHTML = "⚫ OFF";

 				document.getElementById("powerLED").innerHTML = "⚫ OFF";

 				document.getElementById("pwricon").setAttribute("fill", "#eb4034");

 				document.getElementById("pwricon").setAttribute("fill", "#eb4034");

+				powerLedIndicator.style.backgroundColor = '#383838';

 			}

 			}

 		}

 		}

 

 

 		function toggleHDDLED(hddLEDOn = true){

 		function toggleHDDLED(hddLEDOn = true){

+			var hddLedIndicator = document.querySelectorAll('.hddled')[0];

 			if (hddLEDOn){

 			if (hddLEDOn){

 				document.getElementById("hddStatus").innerHTML = "🔵 R/W";

 				document.getElementById("hddStatus").innerHTML = "🔵 R/W";

+				hddLedIndicator.style.backgroundColor = '#0078d7';

 			}else{

 			}else{

 				document.getElementById("hddStatus").innerHTML = "⚫ IDLE";

 				document.getElementById("hddStatus").innerHTML = "⚫ IDLE";

+				hddLedIndicator.style.backgroundColor = '#383838';

 			}

 			}

 		}

 		}

+ 8 - 2
espwol/espwol.ino
View File 

@@ -15,6 +15,7 @@
 
 

 

 #include <ESP8266WiFi.h>        

 #include <ESP8266WiFi.h>        

 #include <WiFiManager.h>

 #include <WiFiManager.h>

+#include <ESP8266mDNS.h>

 #include <ArduinoJson.h>

 #include <ArduinoJson.h>

 #include <LittleFS.h>

 #include <LittleFS.h>

 

 

@@ -34,7 +35,8 @@ ESP8266WebServer server(80);
 
 

 

 /* Discovery */

 /* Discovery */

 #include <ESP8266mDNS.h>

 #include <ESP8266mDNS.h>

-String MDNS_NAME = "espwol" + WiFi.macAddress();

+//To prevent collision, the device MAC will be appended to this name

+String MDNS_NAME = "espwol";

 

 

 /* Global Variables */

 /* Global Variables */

 bool hddLedState = 0;

 bool hddLedState = 0;

@@ -73,10 +75,13 @@ void setup() {
 
   Serial.println("[INFO] LittleFS started");

   Serial.println("[INFO] LittleFS started");

 

 

   /* Start mDNS Discovery Service */

   /* Start mDNS Discovery Service */

+  String deviceMAC = WiFi.macAddress();

+  deviceMAC.replace(":", "");

+  MDNS_NAME = MDNS_NAME + "-" + deviceMAC;

   if (!MDNS.begin(MDNS_NAME)){

   if (!MDNS.begin(MDNS_NAME)){

       Serial.println("[ERROR] mDNS start failed. Skipping.");

       Serial.println("[ERROR] mDNS start failed. Skipping.");

   }else{

   }else{

-      Serial.println("[INFO] mDNS started. Connect to your webstick using http://" + MDNS_NAME + ".local");

+      Serial.println("[INFO] mDNS started. Connect to your device using http://" + MDNS_NAME + ".local");

       MDNS.addService("http", "tcp", 80);

       MDNS.addService("http", "tcp", 80);

   }

   }

   

   

@@ -90,4 +95,5 @@ void loop() {
 
   server.handleClient();

   server.handleClient();

   handleCustomButtonEvents();

   handleCustomButtonEvents();

   updateFrontPanelLEDStatus();

   updateFrontPanelLEDStatus();

+  MDNS.update();

 }

 }

+ 12 - 0
espwol/webserver.ino
View File 

@@ -14,6 +14,7 @@ void registerServeEndpoints() {
 
   server.on("/reset/press", handleResetBtnPress);

   server.on("/reset/press", handleResetBtnPress);

   server.on("/reset/release", handleResetBtnRelease);

   server.on("/reset/release", handleResetBtnRelease);

   server.on("/status", handleStatus);

   server.on("/status", handleStatus);

+  server.on("/ipaddr", handleGetIPAddr);

   

   

   /* RESTFUL API */

   /* RESTFUL API */

   server.on("/api/status", handleStatus);

   server.on("/api/status", handleStatus);

@@ -69,6 +70,17 @@ void handleStatus(){
 
   server.send(200, "application/json", jsonString);

   server.send(200, "application/json", jsonString);

 }

 }

 

 

+//Return the ip address and mDNS name of the device

+void handleGetIPAddr(){

+  String ipAddrStr = WiFi.localIP().toString();

+  StaticJsonDocument<128> jsonDoc;

+  jsonDoc["ipaddr"] = ipAddrStr;

+  jsonDoc["mdns"] = MDNS_NAME + ".local";

+  String jsonString;

+  serializeJson(jsonDoc, jsonString);

+  server.send(200, "application/json", jsonString);

+}

+

 //Handle power up sequence

 //Handle power up sequence

 void handlePowerSequence() {

 void handlePowerSequence() {

   if (server.method() == HTTP_POST) {

   if (server.method() == HTTP_POST) {