Static web pages:

thess · thess · commit 27a97dec16cd · 2023-04-16T15:53:07.000-04:00
- Move loading .js scripts from &lt;head&gt; to &lt;body&gt; for faster rendering
   - Enable back-button support for file system/editor navigation
   - Close WebSocket when navigating away from /cp/serial
   - Use better looking Blinka icon.
diff --git a/supervisor/shared/web_workflow/static/blinka_16x16.ico b/supervisor/shared/web_workflow/static/blinka_16x16.ico
diff --git a/supervisor/shared/web_workflow/static/blinka_32x32.ico b/supervisor/shared/web_workflow/static/blinka_32x32.ico
diff --git a/supervisor/shared/web_workflow/static/directory.html b/supervisor/shared/web_workflow/static/directory.html
@@ -3,7 +3,6 @@
 <head>
     <title></title>
     <meta charset="UTF-8">
-    <script src="/directory.js" defer=true></script>
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="http://circuitpython.org/assets/css/webworkflow-8.css">
 </head>
@@ -21,4 +20,5 @@ <h1><a href="/"><img src="/favicon.ico"/></a>&nbsp;<span id="path"></span></h1>
     <label>Upload progress:<progress value="0"></progress></label>
     <hr>
     +📁&nbsp;<input type="text" id="name"><button type="submit" id="mkdir">Create Directory</button>
+    <script src="/directory.js" defer=true></script>
 </body></html>
diff --git a/supervisor/shared/web_workflow/static/directory.js b/supervisor/shared/web_workflow/static/directory.js
@@ -267,3 +267,13 @@ new_directory_name.oninput = () => {
 }
 
 window.onhashchange = refresh_list;
+
+window.addEventListener("pageshow", function (event) {
+  var historyTraversal = event.persisted ||
+                         (typeof window.performance != "undefined" &&
+                              window.performance.navigation.type === 2);
+  if (historyTraversal) {
+    // Handle page restore.
+    window.location.reload();
+  }
+});
diff --git a/supervisor/shared/web_workflow/static/serial.html b/supervisor/shared/web_workflow/static/serial.html
@@ -4,7 +4,6 @@
   <title>Simple client</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script src="/serial.js" defer=true></script>
   <link rel="stylesheet" href="/style.css">
   <link rel="stylesheet" href="http://circuitpython.org/assets/css/webworkflow-8.css">
 </head>
@@ -16,11 +15,13 @@
   <div id="controls" style="flex: none; display: flex;">
     <fieldset style="display: inline-block; padding: 0;">
       <legend>Ctrl</legend>
+      <button id="b">B</button>
       <button id="c">C</button>
       <button id="d">D</button>
     </fieldset>
     <textarea id="input" rows="1" spellcheck="false" wrap="off" style="resize: none; flex: auto; font-size: 1rem;" autocapitalize="none" autocomplete="off" autocorrect="off"></textarea>
     <button onclick="onSubmit(); return false;">Send</button>
   </div>
+  <script src="/serial.js" defer=true></script>
 </body>
 </html>
diff --git a/supervisor/shared/web_workflow/static/serial.js b/supervisor/shared/web_workflow/static/serial.js
@@ -72,6 +72,17 @@ input.addEventListener("beforeinput", function(e) {
   }
 });
 
+window.addEventListener("unload", function() {
+    if (ws.readyState == WebSocket.OPEN) {
+        ws.close();
+    }
+});
+
+let ctrl_b = document.querySelector("#b");
+ctrl_b.onclick = function() {
+  ws.send("\x02");
+}
+
 let ctrl_c = document.querySelector("#c");
 ctrl_c.onclick = function() {
   ws.send("\x03");
diff --git a/supervisor/shared/web_workflow/static/welcome.html b/supervisor/shared/web_workflow/static/welcome.html
@@ -4,7 +4,6 @@
     <title>CircuitPython</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="/welcome.js" defer=true></script>
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="http://circuitpython.org/assets/css/webworkflow-8.css">
 </head>
@@ -30,5 +29,6 @@ <h2>Device Info:</h2>
     <h2>Here are other CircuitPython devices on your network:</h2>
     <ul id="devices">
     </ul>
+    <script src="/welcome.js" defer=true></script>
 </body>
 </html>
diff --git a/supervisor/shared/web_workflow/web_workflow.c b/supervisor/shared/web_workflow/web_workflow.c
@@ -1002,7 +1002,7 @@ STATIC_FILE(edit_js);
 STATIC_FILE(style_css);
 STATIC_FILE(serial_html);
 STATIC_FILE(serial_js);
-STATIC_FILE(blinka_16x16_ico);
+STATIC_FILE(blinka_32x32_ico);
 
 static void _reply_static(socketpool_socket_obj_t *socket, _request *request, const uint8_t *response, size_t response_len, const char *content_type) {
     uint32_t total_length = response_len;
@@ -1303,7 +1303,7 @@ static bool _reply(socketpool_socket_obj_t *socket, _request *request) {
         } else if (strcmp(request->path, "/favicon.ico") == 0) {
             // TODO: Autogenerate this based on the blinka bitmap and change the
             // palette based on MAC address.
-            _REPLY_STATIC(socket, request, blinka_16x16_ico);
+            _REPLY_STATIC(socket, request, blinka_32x32_ico);
         } else {
             _reply_missing(socket, request);
         }
