add basic OTA Update fucionality

firmware/fsdata/fs/index.html

@@ -16,9 +16,48 @@
     <label for="bmenub" class="burger pseudo button">&#9776;</label>
     <div class="menu">
         <a href="/#" class="button icon-picture">Dashboard</a>
+        <a href="/#ota" class="button icon-picture">System</a>
     </div>
 </nav>
 <main id="page">
+    <section id="ota">
+        <h2>System</h2>
+        <article class="card">
+            <header>
+                <h3>Firmware Update</h3>
+            </header>
+            <div class="table">
+                <div class="row">
+                    <span><input id="firmware_file" type="file" onchange="load_firmware(event)"/></span>
+                </div>
+                <div class="row">
+                    <span><input id="transmit_firmware" disabled type="submit" value="Upload"
+                                 onclick="transmit_firmware(event)"></span>
+                </div>
+            </div>
+        </article>
+        <article class="card">
+            <header>
+                <h3>Restart</h3>
+            </header>
+            <div class="table">
+                <div class="row">
+                    <span><input type="submit" value="Restart" onclick="wsWrite('R')"></span>
+                </div>
+            </div>
+        </article>
+        <article class="card">
+            <header>
+                <h3>Reset Config</h3>
+            </header>
+            <div class="table">
+                <div class="row">
+                    <span><input type="submit" class="warning" value="Reset" onclick="wsWrite('X')"></span>
+                </div>
+            </div>
+        </article>
+
+    </section>
     <section id="dashboard">
         <h2>Status</h2>
         <div class="flex">
@@ -133,19 +172,18 @@
 <div id="unused_values" style="display:none;"></div>
 <script type="text/javascript" src="js/smoothie_min.js"></script>
 <script>
-    var section = document.getElementById("page");
     var menu = document.getElementById("bmenub");
     var voltage = document.getElementById("out_voltage");
 
     var unused_values = {};
 
-    DataView.prototype.setChar = function(pos, char) {
+    DataView.prototype.setChar = function (pos, char) {
         this.setInt8(pos++, char.charCodeAt(0));
         return pos;
     };
 
-    DataView.prototype.setString = function(pos, str) {
-        for(var i = 0; i < str.length; i++) {
+    DataView.prototype.setString = function (pos, str) {
+        for (var i = 0; i < str.length; i++) {
             this.setInt8(pos++, str.charCodeAt(i));
         }
         this.setInt8(pos++, 0);
@@ -175,6 +213,9 @@
         chart.streamTo(canvas, 500);
     }
 
+    var receive_chunk_confirmation = () => {
+    };
+
     function onMessage(evt) {
         retries = 0;
         if (typeof evt.data == 'string') {
@@ -196,7 +237,9 @@
 
             if (cmd === 'G')
                 console.log("LED switched", val);
-            else if (cmd === 'V') {
+            else if (cmd === 'F') {
+                receive_chunk_confirmation(dv);
+            } else if (cmd === 'V') {
                 voltage.innerHTML = (val * 13 / 1024).toFixed(2);
                 series.append(new Date().getTime(), val);
             } else
@@ -233,7 +276,7 @@
     }
 
     function wsWrite(data) {
-        console.info(buf2hex(data));
+        //console.info(buf2hex(data));
         if (ws.readyState === 3 || retries++ > 5)
             wsOpen();
         else if (ws.readyState === 1)
@@ -252,6 +295,105 @@
         startPolling();
     }
 
+    var makeCRCTable = function () {
+        var c;
+        var crcTable = [];
+        for (var n = 0; n < 256; n++) {
+            c = n;
+            for (var k = 0; k < 8; k++) {
+                c = ((c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1));
+            }
+            crcTable[n] = c;
+        }
+        return crcTable;
+    }
+
+    var crc32 = function (buf) {
+        const bufview = new DataView(buf);
+        var crcTable = window.crcTable || (window.crcTable = makeCRCTable());
+        var crc = 0 ^ (-1);
+
+        for (var i = 0; i < bufview.byteLength; i++) {
+            crc = (crc >>> 8) ^ crcTable[(crc ^ bufview.getInt8(i)) & 0xFF];
+        }
+
+        return (crc ^ (-1)) >>> 0;
+    };
+
+    var firmware_file;
+
+    function load_firmware(evt) {
+        var file = evt.target.files[0];
+        if (!file) {
+            return;
+        }
+        var reader = new FileReader();
+        reader.onload = function (e) {
+            firmware_file = e.target.result;
+            document.getElementById("transmit_firmware").disabled = false;
+        };
+        reader.readAsArrayBuffer(file)
+    }
+
+    const chunk_size = 512;
+
+    function transmit_firmware_chunk(buf, i) {
+        return new Promise((resolve, reject) => {
+            const begin = i * chunk_size;
+            const end = Math.min((i + 1) * chunk_size, buf.byteLength);
+            const slice = buf.slice(begin, end)
+            var header = new ArrayBuffer(12);
+            var headerview = new DataView(header);
+            headerview.setChar(0, 'F');
+            headerview.setInt16(4, i);
+            headerview.setInt16(6, (end - begin));
+            headerview.setInt32(8, crc32(slice));
+            var frame = new Uint8Array(12 + slice.byteLength);
+            frame.set(new Uint8Array(header), 0);
+            frame.set(new Uint8Array(slice), 12);
+            receive_chunk_confirmation = (dv) => {
+                setTimeout(() => {
+                    resolve(i);
+                }, 50);
+            }
+            setTimeout(() => {
+                reject(i);
+            }, 2000);
+            wsWrite(frame.buffer);
+        });
+    }
+
+    function transmit_firmware_final(buf, hash) {
+        return new Promise((resolve, reject) => {
+            var frame = new ArrayBuffer(12);
+            var headerview = new DataView(frame);
+            headerview.setChar(0, 'C');
+            headerview.setInt32(4, buf.byteLength);
+            headerview.setInt32(8, hash);
+            receive_chunk_confirmation = (dv) => {
+                resolve(i);
+            }
+            setTimeout(() => {
+                reject(i);
+            }, 500);
+            wsWrite(frame);
+        });
+    }
+
+    function transmit_firmware(evt) {
+        console.log("transmit_firmware begin");
+        if (firmware_file) {
+            (async () => {
+                const ash = crc32(firmware_file);
+                for (var i = 0; i * chunk_size < firmware_file.byteLength; i++) {
+                    await transmit_firmware_chunk(firmware_file, i);
+                }
+                await transmit_firmware_final(firmware_file, crc32(firmware_file));
+            })().then(() => {
+                console.log("transmit_firmware done");
+            })
+        }
+    }
 </script>
 </body>
 </html>