LCDOTA HTML

ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/display.html

@@ -0,0 +1,144 @@
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
+    <h1>ESPMega PRO</h1>
+    <h3>LCD Display Management</h3>
+    <hr>
+    <h3>Upload TFT Firmware</h3>
+    <input type="file" name="update" id="file" onchange="sub(this)" style="display: none" />
+    <label id="file-input" for="file">Choose file...</label>
+    <input type="button" class="btn" value="Upload" onclick="uploadFirmware()" /><br /><br />
+    <div id="prg"></div>
+    <br />
+    <div id="prgbar">
+        <div id="bar"></div>
+    </div>
+    <br />
+    <b>SIWAT SYSTEM 2023</b>
+</form>
+<script>
+    function sub(obj) {
+        var fileName = obj.value.split("\\");
+        document.getElementById("file-input").innerHTML =
+            "   " + fileName[fileName.length - 1];
+    }
+
+    function uploadFirmware() {
+        var file = document.getElementById('file').files[0];
+        var reader = new FileReader();
+        var path = window.location.pathname;
+        reader.onload = function (e) {
+            var data = new Uint8Array(e.target.result);
+            var size = data.length;
+            var chunkSize = 4096;
+            var index = 0;
+
+            // Begin the update
+            $.post(path + '/ota/begin', JSON.stringify({ size: size }), function () {
+                // Send the data in chunks
+                function sendNextChunk() {
+                    if (index < size) {
+                        var chunk = data.subarray(index, index + chunkSize);
+                        var chunkArray = Array.from(chunk);
+                        $.post(path + '/ota/write', JSON.stringify({ size: chunk.length, data: chunkArray }), function () {
+                            index += chunkSize;
+                            sendNextChunk();
+                        });
+                    } else {
+                        // End the update
+                        $.post(path + '/ota/end');
+                    }
+                }
+                sendNextChunk();
+            });
+        };
+        reader.readAsArrayBuffer(file);
+    }
+</script>
+
+<style>
+    hr {
+        display: block;
+        color: #aaaaaa;
+        background-color: #aaaaaa;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+        margin-left: auto;
+        margin-right: auto;
+        border-style: inset;
+        border-width: 0px;
+        height: 3px;
+    }
+
+    #file-input,
+    input {
+        width: 100%;
+        height: 44px;
+        border-radius: 4px;
+        margin: 10px auto;
+        font-size: 15px;
+    }
+
+    input {
+        background: #f1f1f1;
+        border: 0;
+        padding: 0 15px;
+    }
+
+    body {
+        background-image: url("https://fs.siwatsystem.com/arona_bg.png");
+        background-size: cover;
+        font-family: sans-serif;
+        font-size: 14px;
+        color: #777;
+    }
+
+    #file-input {
+        background-color: #CCCCCC;
+        color: #5E5E5E;
+        padding: 0;
+        border: 1px solid #ddd;
+        line-height: 44px;
+        text-align: center;
+        display: block;
+        cursor: pointer;
+    }
+
+    #bar,
+    #prgbar {
+        background-color: #D9D9D9;
+        border-radius: 10px;
+    }
+
+    #bar {
+        background-color: #29CD1F;
+        width: 0%;
+        height: 10px;
+    }
+
+    form {
+        background: rgba(255, 255, 255, 0.95);
+        max-width: 258px;
+        margin: 75px auto;
+        padding: 30px;
+        border-radius: 15px;
+        text-align: center;
+    }
+
+    .btn {
+        background: #CA3D3D;
+        color: #fff;
+        cursor: pointer;
+    }
+
+    .conf {
+        background: #417df3;
+        color: #fff;
+        cursor: pointer;
+        width: 100%;
+        height: 44px;
+        border-radius: 4px;
+        margin: 10px auto;
+        font-size: 15px;
+        border: 0;
+    }
+</style>