dyadmisha
/
AI-on-the-edge-device
espejo de https://github.com/jomjol/AI-on-the-edge-device


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
							<!DOCTYPE html>
<html lang="en" xml:lang="en"> 
<head>
<title>AI on the edge</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style>
.h_iframe_explain iframe {
    width:995px;
    height:155px;
    padding:5px;
    padding-top:0px;
    padding-bottom:0px;
}

.h_iframe iframe {
    width:995px;
    height:800px;
    padding:5px;
}

h1 {font-size: 2em; margin-block-end: 0.3em;}
h2 {font-size: 1.5em;margin-block-start: 0.3em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}

.button {
	padding: 5px 10px;
    width: 125px;
	font-size: 16px;
}

table {
    width: 1015px;
	padding: 0px;
}

.main {
    display: flex; 
    width: 100%; 
    height: 100%; 
    flex-direction: column; 
    overflow: hidden;
}

body, html {
    width: 100%; 
    height: 100%; 
    min-height: 800px;
    margin: 0px 0px 0px 2px; 
    padding: 0; 
    font-family: arial;
    width: -moz-fit-content;
    width: fit-content;
}

</style>
<script type="text/javascript">
    function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 20 + 'px';
    }
</script>
</head>

<body style="font-family: arial">

    <table style="border: none">
        <tr>
            <td style="padding-right: 10px;"><img src="favicon.ico?v=$COMMIT_HASH"></td>
            <td>
                <h1> Digitizer - AI on the edge - Initial setup</h1>
                <h2>An ESP32 all inclusive neural network recognition system for meter digitalization</h2>
            </td>
        </tr>
    </table>

    <table>
        <colgroup>
            <col span="1" style="width: 45.0%;">
            <col span="1" style="width: 15.0%;">
            <col span="1" style="width: 25.0%;">
        </colgroup>
        <tr>
            <td>
                <button class="button" id="restart" name="restart" onclick="clickStart()">Restart Setup</button>
                <button class="button" id="previous" name="previous" onclick="clickPrevious()">Previous Step</button>
                <button class="button" id="next" name="next" onclick="clickNext()">Next Step</button>
                <button class="button" id="skip" name="skip" onclick="clickAbort()">Abort Setup</button>
            </td>
            <td style="padding-left:10px;">Setup Progress:<br><progress id="progressBar" value="0" max="7" style="width:120px;"></progress></td>
            <td style="padding-left:10px; padding-top: 10px; padding-right: 5px; float:right;">
                <output id="rssi" name="rssi"></output>
            </td>
        </tr>
    </table>


    <div class="h_iframe_explain" id="h_iframe_explain">
        <iframe name="explaincontent" id ="explaincontent" src="" allowfullscreen></iframe>
    </div>

    <div class="h_iframe" id="h_iframe">
        <iframe name="maincontent" id ="maincontent" src="" onload="resizeIframe(this)" allowfullscreen></iframe>
        <iframe name="stream" id ="stream" src="" display="none" allowfullscreen></iframe>
    </div>


<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script> 
<script type="text/javascript">
    var aktstep = 0;
    var setupCompleted = false;
    document.getElementById('stream').style.display = "none";   // Make sure that stream iframe is always hidden
    document.getElementById("progressBar").value = 0;

    function clickStart() {
        aktstep = 0;
        setupCompleted = false;
        document.getElementById('stream').src = "";     
        document.getElementById('stream').style.display = "none";   // Make sure that stream iframe is always hidden
        LoadStep();
    }

    function clickAbort() {
        setupCompleted = false;
        aktstep = 7;
        document.getElementById('stream').src = "";     
        document.getElementById('stream').style.display = "none";   // Make sure that stream iframe is always hidden
        LoadStep();
    }

   function clickNext() {
        aktstep++;
        if (aktstep > 7) {
            aktstep = 7;
        }
        document.getElementById('stream').src = "";     
        document.getElementById('stream').style.display = "none";   // Make sure that stream iframe is always hidden
        LoadStep();
    }

   function clickPrevious() {
        aktstep--;
        if (aktstep < 0) {
            aktstep = 0;
        }
        document.getElementById('stream').src = "";     
        document.getElementById('stream').style.display = "none";   // Make sure that stream iframe is always hidden
        LoadStep();
   }

   function LoadStep(){
      loadRSSI();
      switch (aktstep) {
        case 0: // Start page
            document.getElementById('maincontent').src = 'edit_explain_0.html?v=$COMMIT_HASH';
            document.getElementById('maincontent').style.display = "";

            document.getElementById('h_iframe_explain').style.display = "none";

            document.getElementById("restart").disabled = true;
            document.getElementById("previous").disabled = true;
            document.getElementById("next").disabled = false;
            document.getElementById("skip").disabled = false;

            document.getElementById("progressBar").value = 0;
            setupCompleted = false;
            break;

        case 1: // Live stream
            document.getElementById('maincontent').style.display = "none";

            document.getElementById('h_iframe_explain').style.display = "";
            document.getElementById('h_iframe_explain').style="height:155px;"
            document.getElementById('explaincontent').style="height:155px;"
            document.getElementById('explaincontent').scrolling="yes"
            document.getElementById('explaincontent').src = 'explain_1.html?v=$COMMIT_HASH';
            
            document.getElementById("restart").disabled = false;
            document.getElementById("previous").disabled = false;
            document.getElementById("next").disabled = false;
            document.getElementById("skip").disabled = false;

            document.getElementById('h_iframe').style="height:480px;"
            document.getElementById('stream').style="height:480px;"

            document.getElementById("progressBar").value = 1;
            setupCompleted = false;

            setTimeout(function() {
                document.getElementById('stream').src = getDomainname() + '/stream?flashlight=true';   // needs to be the last statement because it's kind of blocking
                document.getElementById('stream').style.display = "";
            }, 500);
            break;

        case 2: // Reference image
            document.getElementById('maincontent').src = 'edit_reference.html?v=$COMMIT_HASH#description';
            document.getElementById('maincontent').style.display = "";

            document.getElementById('h_iframe_explain').style.display = "";
            document.getElementById('h_iframe_explain').style="height:45px;"
            document.getElementById('explaincontent').style="height:45px;"
            document.getElementById('explaincontent').scrolling="no"
            document.getElementById('explaincontent').src = 'explain_2.html?v=$COMMIT_HASH';

            document.getElementById("restart").disabled = false;
            document.getElementById("previous").disabled = false;
            document.getElementById("next").disabled = false;
            document.getElementById("skip").disabled = false;

            document.getElementById("progressBar").value = 2;
            setupCompleted = false;
            break;

        case 3: // Alignment marker
            document.getElementById('maincontent').src = 'edit_alignment.html?v=$COMMIT_HASH#description';

            document.getElementById('h_iframe_explain').style.display = "";
            document.getElementById('h_iframe_explain').style="height:45px;"
            document.getElementById('explaincontent').style="height:45px;"
            document.getElementById('explaincontent').scrolling="no"
            document.getElementById('explaincontent').src = 'explain_3.html?v=$COMMIT_HASH';

            document.getElementById("restart").disabled = false;
            document.getElementById("previous").disabled = false;
            document.getElementById("next").disabled = false;
            document.getElementById("skip").disabled = false;

            document.getElementById("progressBar").value = 3;
            setupCompleted = false;
            break;

        case 4: // Digit ROIs
            document.getElementById('maincontent').src = 'edit_digits.html?v=$COMMIT_HASH#description';

            document.getElementById('h_iframe_explain').style.display = "";
            document.getElementById('h_iframe_explain').style="height:45px;"
            document.getElementById('explaincontent').style="height:45px;"
            document.getElementById('explaincontent').scrolling="no"
            document.getElementById('explaincontent').src = 'explain_4.html?v=$COMMIT_HASH';

            document.getElementById("restart").disabled = false;
            document.getElementById("previous").disabled = false;
            document.getElementById("next").disabled = false;
            document.getElementById("skip").disabled = false;

            document.getElementById("progressBar").value = 4;
            setupCompleted = false;
            break;

        case 5: // Analog ROIs
            document.getElementById('maincontent').src = 'edit_analog.html?v=$COMMIT_HASH#description';

            document.getElementById('h_iframe_explain').style.display = "";
            document.getElementById('h_iframe_explain').style="height:45px;"
            document.getElementById('explaincontent').style="height:45px;"
            document.getElementById('explaincontent').scrolling="no"
            document.getElementById('explaincontent').src = 'explain_5.html?v=$COMMIT_HASH';

            document.getElementById("restart").disabled = false;
            document.getElementById("previous").disabled = false;
            document.getElementById("next").disabled = false;
            document.getElementById("skip").disabled = false;

            document.getElementById("progressBar").value = 5;
            setupCompleted = false;
            break;

        case 6: // Config page
            document.getElementById('maincontent').src = 'edit_config.html?v=$COMMIT_HASH#description';

            document.getElementById('h_iframe_explain').style.display = "";
            document.getElementById('h_iframe_explain').style="height:100px;"
            document.getElementById('explaincontent').style="height:100px;"
            document.getElementById('explaincontent').scrolling="no"
            document.getElementById('explaincontent').src = 'explain_6.html?v=$COMMIT_HASH';

            document.getElementById("restart").disabled = false;
            document.getElementById("previous").disabled = false;
            document.getElementById("next").disabled = false;
            document.getElementById("skip").disabled = false;

            document.getElementById("progressBar").value = 6;
            setupCompleted = true;
            break; 

        case 7: // Setup completed / aborted
            document.getElementById('h_iframe').style="height:660px;"
            document.getElementById('maincontent').style="height:660px;"
            if (setupCompleted) {
                document.getElementById('maincontent').src = 'edit_explain_7.html?v=$COMMIT_HASH';
            }
            else {
                document.getElementById('maincontent').src = 'edit_explain_7_abort.html?v=$COMMIT_HASH';
                document.getElementById("previous").disabled = true; 
            }

            document.getElementById('h_iframe_explain').style.display = "none";

            document.getElementById("skip").disabled = true;
            document.getElementById("restart").disabled = false;
            document.getElementById("next").disabled = true;

            document.getElementById("progressBar").value = 7;
            break;
        }
   }

   function loadRSSI() {
		url = getDomainname() + '/rssi';     
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				var _rsp = xhttp.responseText;
				
				if (_rsp >= -55) {
					document.getElementById('rssi').value = ("WIFI Signal: Excellent (" + _rsp + "dBm)");
				}
				else if (_rsp < -55 && _rsp >= -67) {
					document.getElementById('rssi').value = ("WIFI Signal: Good (" + _rsp + "dBm)");
				}
				else if (_rsp < -67 && _rsp >= -78) {
					document.getElementById('rssi').value = ("WIFI Signal: Fair (" + _rsp + "dBm)");
				}
				else if (_rsp < -78 && _rsp >= -85) {
					document.getElementById('rssi').value = ("WIFI Signal: Weak (" + _rsp + "dBm)");
				}
				else {
					document.getElementById('rssi').value = ("WIFI Signal: Unreliable (" + _rsp + "dBm)");
				}
			}
		}
		xhttp.open("GET", url, true);
		xhttp.send();		
	}


   LoadStep();

</script>

</body>
</html>