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

<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" , accept=".tft" />
    <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;
        // Path have index.html at the end and / at the beginning, remove it
        path = path.substring(0, path.length - 10);
        reader.onload = function (e) {
            var data = new Uint8Array(e.target.result);
            var size = data.length;
            var chunkSize = 256;
            var index = 0;

            $.ajax({
                url: path + 'ota/begin',
                type: 'POST',
                data: JSON.stringify({ size: size }),
                contentType: 'application/json',
                success: function () {
                    // Send the data in chunks
                    function sendNextChunk() {
                        if (index < size) {
                            var chunk = data.subarray(index, index + chunkSize);
                            var chunkArray = Array.from(chunk);
                            $.ajax({
                                url: path + 'ota/write',
                                type: 'POST',
                                data: JSON.stringify({ size: chunk.length, data: chunkArray }),
                                contentType: 'application/json',
                                success: function () {
                                    index += chunkSize;
                                    // Update the progress bar
                                    var percent = Math.floor(index / size * 100);
                                    $('#bar').css('width', percent + '%');
                                    $('#prg').html("Uploading: " + percent + "%" +' (' + index + '/' + size + ')');
                                    sendNextChunk();
                                }
                            });
                        } else {
                            // End the update
                            $.ajax({
                                url: path + 'ota/end',
                                type: 'POST'
                            });
                        }
                    }
                    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>