From 72315d2b34f6d2c12484aae67d23b6b9e96c0cd9 Mon Sep 17 00:00:00 2001
From: stweedo <108593831+stweedo@users.noreply.github.com>
Date: Tue, 9 May 2023 15:28:54 -0500
Subject: [PATCH] Update interface.html

Lots of fixes, fairly reliable now.

GadgetBridge throws a "Malformed JSON from Bangle.js: No value for t"
---
 apps/shadowclk/interface.html | 146 ++++++++++++++++++----------------
 1 file changed, 76 insertions(+), 70 deletions(-)
diff --git a/apps/shadowclk/interface.html b/apps/shadowclk/interface.html
index b914e0163..fd29b7cee 100644
--- a/apps/shadowclk/interface.html
+++ b/apps/shadowclk/interface.html
@@ -2,6 +2,7 @@
 <html>
 
 <head>
+  <meta charset="UTF-8">
   <link rel="stylesheet" href="../../css/spectre.min.css">
   <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap" rel="stylesheet">
@@ -79,12 +80,16 @@
       margin-top: 20px;
     }
 
-    #message {
+    #message-container {
+      height: 40px;
+      /* adjust the height based on your desired fixed height */
+      margin-top: 20px;
       text-align: center;
     }
   </style>
 </head>
 
+
 <body>
   <script src="../../core/lib/interface.js"></script>
   <div class="main-container">
@@ -95,9 +100,12 @@
       <canvas id="preview-canvas" width="176" height="176"></canvas>
     </div>
     <button id="upload" class="btn btn-primary">Upload</button>
-    <div id="message"></div>
+    <div id="message-container">
+      <div id="message"></div>
+    </div>
   </div>
   <script>
+    const messageDiv = document.getElementById('message');
     let colors = ['#000', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff'];
     let colorButtonsContainer = document.getElementById('color-buttons-container');
     colors.forEach((color, i) => {
@@ -139,8 +147,8 @@
     }
 
     function toggleBackground() {
-      let previewBox = document.getElementById("preview-box");
       isDarkBg = !isDarkBg; // Toggle the background state
+      let previewBox = document.getElementById("preview-box");
       previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
       drawText(selectedColor); // Redraw the text with updated color
     }
@@ -148,6 +156,8 @@
     function drawText(color) {
       let canvas = document.getElementById("preview-canvas");
       let ctx = canvas.getContext("2d");
+      let previewBox = document.getElementById("preview-box");
+      previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
 
       // Clear the canvas
       ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -265,41 +275,38 @@
     let selectedColor = "#0ff";
     let isDarkBg = false;
 
-    function loadSettings() {
-      Puck.eval('require("Storage").readJSON("shadowclk.json", true)', (data) => {
-        if (data && data.color && data.theme) {
-          // Apply color and theme from JSON
-          const { color, theme } = data;
-          selectedColor = color;
-          isDarkBg = theme === "dark";
-        } else {
-          // Use default values if there is no data for color and theme
+    function loadSettings(callback) {
+      // Set a timeout for loading the settings
+      const timeout = new Promise((_, reject) =>
+        setTimeout(() => reject(new Error("Timeout occurred")), 500)
+      );
+
+      const loadSettingsFromStorage = new Promise((resolve) => {
+        Puck.eval('require("Storage").readJSON("shadowclk.json", true)', (data) => {
+          if (data) {
+            // Apply color and theme from JSON
+            const { color, theme } = data;
+            selectedColor = color;
+            isDarkBg = theme === "dark";
+            displayMessage("Previous settings loaded.", 3000);
+          } else {
+            // Use default values if there is no data for color and theme
+            selectedColor = "#0ff";
+            isDarkBg = false;
+          }
+          resolve();
+        });
+      });
+
+      Promise.race([loadSettingsFromStorage, timeout])
+        .then(() => callback())
+        .catch((error) => {
+          console.error(error);
+          // Use default values in case of a timeout or error
           selectedColor = "#0ff";
           isDarkBg = false;
-        }
-
-        // Update UI with loaded settings
-        let previewBox = document.getElementById("preview-box");
-        previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
-
-        (function () {
-          // Load fonts before drawing for the first time
-          function loadFont(font) {
-            return document.fonts.load(font);
-          }
-
-          Promise.all([
-            loadFont('81px Londrina Solid'),
-            loadFont('81px Londrina Shadow'),
-            loadFont('19px DotGothic16')
-          ]).then(() => {
-            drawText(selectedColor);
-          });
-        })();
-
-        // Start updating the time every second after loading the settings
-        updateTime();
-      });
+          callback();
+        });
     }
 
     function updateTime() {
@@ -308,7 +315,24 @@
       }, 1000);
     }
 
-    const messageDiv = document.getElementById('message');
+    function displayMessage(text, timeout) {
+      // Remove any existing message
+      while (messageDiv.firstChild) {
+        messageDiv.removeChild(messageDiv.firstChild);
+      }
+
+      // Create a new message element
+      const message = document.createElement('p');
+      message.innerHTML = text; // Use innerHTML instead of textContent
+      message.style.fontSize = '24px';
+      messageDiv.appendChild(message);
+
+      // Remove the message element after the timeout
+      setTimeout(() => {
+        messageDiv.removeChild(message);
+      }, timeout);
+    }
+
     document.getElementById("upload").addEventListener("click", function () {
       // Save theme settings to Bangle.js
       let themeColors = createThemeColors(isDarkBg);
@@ -323,42 +347,24 @@
         console.log('Color saved:', result);
       });
 
-      // Remove any existing message
-      while (messageDiv.firstChild) {
-        messageDiv.removeChild(messageDiv.firstChild);
-      }
-
-      // Create a new message element
-      const message = document.createElement('p');
-      message.innerHTML = 'Configuration sent...<br>Hold button on Bangle.js';
-      message.style.fontSize = '24px';
-      messageDiv.appendChild(message);
-
-      // Remove the message element after the timeout
-      setTimeout(() => {
-        messageDiv.removeChild(message);
-      }, 5000);
+      // Display the message using displayMessage function
+      displayMessage('Configuration sent...<br>Hold button on Bangle.js', 5000);
     });
 
-    // Call loadSettings when the page loads
-    loadSettings();
+    function loadFonts() {
+      return Promise.all([
+        document.fonts.load('81px Londrina Solid'),
+        document.fonts.load('81px Londrina Shadow'),
+        document.fonts.load('19px DotGothic16')
+      ]);
+    }
 
-    // Fallback to defaults if we can't load settings
-    (function () {
-      // Load fonts before drawing for the first time
-      function loadFont(font) {
-        return document.fonts.load(font);
-      }
-
-      Promise.all([
-        loadFont('81px Londrina Solid'),
-        loadFont('81px Londrina Shadow'),
-        loadFont('19px DotGothic16')
-      ]).then(() => {
-        drawText(selectedColor);
-      });
-    })();
+    async function init() {
+      await loadFonts(); // Load fonts before drawing for the first time
+      loadSettings(updateTime); // Pass updateTime as the callback function to loadSettings
+    }
+    init();
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
