Feat: reconnect display after issues instead of restarting

Author: dorianim

display/include/display.h

@@ -41,6 +41,7 @@ class Hub75_Display : public Display {
   virtual void loop() override;
 
 private:
+  uint16_t _packColor(uint8_t r, uint8_t g, uint8_t b);
   void _setTextColor(uint32_t c);
   void _setTextColor(uint8_t r, uint8_t g, uint8_t b);
   void _printBrandAnimationLetter(char letter, uint8_t &brightness,

display/src/display.cpp

@@ -1,6 +1,7 @@
 #include "WiFi.h"
 
 #include "display.h"
+#include "socket.h"
 #include "time.h"
 #include "wifi.h"
 
@@ -73,6 +74,9 @@ Hub75_Display::Hub75_Display(MatrixPanel_I2S_DMA *matrix)
 
 void Hub75_Display::setup() {}
 
+uint8_t wifiIcon[] PROGMEM = {B01111110, B10000001, B00111100,
+                              B01000010, B00011000, B00011000};
+
 void Hub75_Display::loop() {
   _matrix->clearScreen();
   _matrix->setCursor(0, 0);
@@ -172,15 +176,21 @@ void Hub75_Display::loop() {
       _setTextColor(0xff, 0xff, 0xff);
       _matrix->setCursor(49, 54);
 
-      _matrix->printf("%02d:%02d", time->tm_hour, time->tm_min);
+      _matrix->printf("%02d:%02d:%02d", time->tm_hour, time->tm_min,
+                      time->tm_sec);
     }
 
     break;
   }
   }
 
-  // if ((millis() / 1000) % 2)
-  //   _matrix->drawPixel(0, 0, _matrix->color333(0xff, 0xff, 0xff));
+  if (!wifi::connected()) {
+    _matrix->drawBitmap(118, 2, (uint8_t *)&wifiIcon, 8, 6,
+                        this->_packColor(255, 0, 0), 0);
+  } else if (!WebSocket::connected()) {
+    _matrix->drawBitmap(118, 2, (uint8_t *)&wifiIcon, 8, 6,
+                        this->_packColor(255, 150, 0), 0);
+  }
 
   _matrix->flipDMABuffer();
   vTaskDelay(10);
@@ -204,12 +214,15 @@ void Hub75_Display::_printBrandAnimationLetter(char letter, uint8_t &brightness,
   }
 }
 
+uint16_t Hub75_Display::_packColor(uint8_t r, uint8_t g, uint8_t b) {
+  return ((uint16_t)(r & 0xF8) << 8) | ((uint16_t)(g & 0xFC) << 3) | (b >> 3);
+}
+
 void Hub75_Display::_setTextColor(uint32_t c) {
   _setTextColor(c >> 16, c >> 8, c);
 }
 void Hub75_Display::_setTextColor(uint8_t r, uint8_t g, uint8_t b) {
-  uint16_t packed =
-      ((uint16_t)(r & 0xF8) << 8) | ((uint16_t)(g & 0xFC) << 3) | (b >> 3);
+  uint16_t packed = this->_packColor(r, g, b);
 
   _matrix->setTextColor(packed);
 }

display/src/main.cpp

@@ -108,7 +108,7 @@ void refreshDisplay() {
 void loop() {
   wifi::loop();
   if (!wifi::connected()) {
-    ESP.restart();
+    // ESP.restart();
   }
 
   WebSocket::loop();

display/src/socket.cpp

@@ -22,6 +22,7 @@ TIME _latestOffsets[10] = {0};
 TIME _latestFluctuations[10] = {0};
 
 unsigned long _lastGetTimeSent = 0;
+unsigned long _lastGetTimeReceived = 0;
 int _error = 0;
 timer::TimerData *_timerData;
 
@@ -162,10 +163,13 @@ void _handleMessage(JsonDocument &doc) {
     JsonObject data = doc["data"];
     _loadTimerData(data);
   } else if (type == "Timestamp") {
-    unsigned long now = millis();
-    unsigned long getTimeRoundtrip = now - _lastGetTimeSent;
+    _lastGetTimeReceived = millis();
+    unsigned long getTimeRoundtrip = _lastGetTimeReceived - _lastGetTimeSent;
+    Serial.printf("Roundtrip: %dms\n", getTimeRoundtrip);
+
     long long serverTime = doc["data"];
-    TIME timeOffset = serverTime - now + getTimeRoundtrip / 2;
+    TIME timeOffset =
+        serverTime + (getTimeRoundtrip / 2) - _lastGetTimeReceived;
     _handleNewOffset(timeOffset);
   } else if (type == "Error") {
     _error = doc["data"][0];
@@ -238,8 +242,8 @@ void init(String timerId) {
   _websocketConfig.path = "/api/ws";
   _websocketConfig.port = 80;
   _websocketConfig.disable_auto_reconnect = false;
-  _websocketConfig.disable_pingpong_discon = false;
-  _websocketConfig.keep_alive_enable = true;
+  _websocketConfig.disable_pingpong_discon = true;
+  _websocketConfig.keep_alive_enable = false;
   _websocketConfig.transport = WEBSOCKET_TRANSPORT_OVER_TCP;
   _websocketConfig.cert_pem = NULL;
   _websocketConfig.cert_len = 0;
@@ -252,7 +256,15 @@ void init(String timerId) {
 }
 
 void loop() {
-  if (connected() && millis() - _lastGetTimeSent >= 1000) {
+  bool lastGetTimeReceivedOneSecondAgo =
+      _lastGetTimeReceived > _lastGetTimeSent &&
+      millis() - _lastGetTimeReceived >= 1000;
+  bool lastGetTimeReceivedTimeout = _lastGetTimeReceived < _lastGetTimeSent &&
+                                    millis() - _lastGetTimeSent >= 10000;
+
+  if (connected() &&
+      (_lastGetTimeSent == 0 || lastGetTimeReceivedOneSecondAgo ||
+       lastGetTimeReceivedTimeout)) {
     _lastGetTimeSent = millis();
 
     String payload = "{\"type\": \"GetTime\"}";

web/src/routes/t/[timerId]/+page.svelte

@@ -22,6 +22,7 @@
 	let soundEnabled: boolean;
 	let timerData: TimerType | undefined;
 	let lastGetTimeSent = 0;
+	let lastGetTimeReceived = 0;
 	let socket: WebSocket | undefined;
 
 	const pushValueAndCaluclateAverage = (values: number[], newValue: number) => {
@@ -108,9 +109,10 @@
 					timerData = timer;
 					break;
 				case 'Timestamp':
-					const now = performance.now();
-					const getTimeRoundTrip = now - lastGetTimeSent;
-					let newOffset = data.data + getTimeRoundTrip / 2 - now;
+					const lastGetTimeReceived = performance.now();
+					const getTimeRoundTrip = lastGetTimeReceived - lastGetTimeSent;
+					console.log('roundtrip', getTimeRoundTrip);
+					let newOffset = data.data + getTimeRoundTrip / 2 - lastGetTimeReceived;
 					handleNewOffset(newOffset);
 					break;
 				case 'Error':
@@ -124,6 +126,18 @@
 			socket?.send(JSON.stringify({ data: data.params.timerId, type: 'Hello' }));
 
 			setInterval(() => {
+				let lastGetTimeReceivedOneSecondAgo =
+					lastGetTimeReceived > lastGetTimeSent && performance.now() - lastGetTimeReceived >= 1000;
+				let lastGetTimeReceivedTimeout =
+					lastGetTimeReceived < lastGetTimeSent && performance.now() - lastGetTimeSent >= 10000;
+
+				if (
+					lastGetTimeSent !== 0 &&
+					!lastGetTimeReceivedOneSecondAgo &&
+					!lastGetTimeReceivedTimeout
+				) {
+					return;
+				}
 				lastGetTimeSent = performance.now();
 				socket?.send(JSON.stringify({ type: 'GetTime' }));
 			}, 1000);

web/src/routes/t/[timerId]/Timer.svelte

@@ -94,6 +94,7 @@
 	const update = () => {
 		currentSegment = calculateCurrentSegment();
 		const { timerText, label, color, seconds } = currentSegment;
+		console.log(new Date(currentSegment.currentTime).toLocaleTimeString());
 
 		if (timerSpan !== null && timerSpan.innerText !== timerText) {
 			timerSpan.innerText = timerText;
@@ -115,7 +116,7 @@
 	onMount(() => {
 		setInterval(() => {
 			update();
-		}, 100);
+		}, 10);
 	});
 
 	$: {