Added screen timer toggle to WebUI

data/package.json

@@ -5,19 +5,19 @@
     "build": "node esbuild.mjs"
   },
   "dependencies": {
-    "esbuild": "0.18.0"
+    "esbuild": "0.19.4"
   },
   "devDependencies": {
     "@chialab/esbuild-plugin-html": "^0.17.2",
     "@craftamap/esbuild-plugin-html": "^0.5.0",
     "@esbuilder/html": "^0.0.6",
-    "autoprefixer": "^10.4.14",
-    "bootstrap": "^5.3.0",
+    "autoprefixer": "^10.4.16",
+    "bootstrap": "^5.3.2",
     "esbuild-plugin-clean": "^1.0.1",
     "esbuild-plugin-handlebars": "^1.0.2",
-    "esbuild-sass-plugin": "^2.9.0",
+    "esbuild-sass-plugin": "^2.16.0",
     "handlebars": "^4.7.7",
-    "postcss": "^8.4.24",
-    "typescript": "^5.1.3"
+    "postcss": "^8.4.31",
+    "typescript": "^5.1.6"
   }
 }

data/src/css/style.scss

@@ -113,4 +113,8 @@ nav {
 
 #customText {
     text-transform: uppercase;
+}
+
+#toggleTimerArea {
+    cursor: pointer;
 }

data/src/index.html

@@ -44,7 +44,19 @@
             {{#each ledStatus }}
               <div style="background: #{{ this }}">&nbsp;</div>
             {{/each}}
+            
             {{/if}}
+            <div>
+              <p>Screen cycle: 
+                <span onclick="toggleTimer({{ timerRunning }})" id="toggleTimerArea">
+                {{#if timerRunning}}
+                &#9205;
+                {{else}}
+                &#9208;
+                {{/if}}
+                </span>
+              </p>
+            </div>
           </div>
         </div>
       </script>
@@ -146,7 +158,8 @@
             <div class="row">
               <label class="col-sm-6 col-form-label" for="ledBrightness">LED brightness</label>
               <div class="col-sm-6">
-                  <input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0" max="255">
+                <input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0"
+                  max="255">
               </div>
             </div>
             <div class="row">
@@ -215,7 +228,7 @@
   <footer>
     <small>
       <span id="gitRev"></span>
-      <span id="lastBuildTime"></span>  
+      <span id="lastBuildTime"></span>
     </small>
   </footer>
   <script src="/js/script.js"></script>

src/lib/webserver.cpp

@@ -73,6 +73,8 @@ void onApiStatus(AsyncWebServerRequest *request)
 
     DynamicJsonDocument root(1024);
     root["currentScreen"] = String(getCurrentScreen());
+    root["timerRunning"] = timerRunning;
+
     JsonArray data = root.createNestedArray("data");
     JsonArray rendered = root.createNestedArray("rendered");
     String epdContent[7];