dyadmisha
/
AI-on-the-edge-device
cermin dari https://github.com/jomjol/AI-on-the-edge-device


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<html>
<head>
<style>
    #rx {
        font-family: 'Courier New', Courier, monospace;
        font-size: small;
    }
</style>
<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script> 
</head>
<body>

<div id="state">State: Please wait...</div>
<hr>
<div id="img">Image: Please wait...</div>
<hr>
<div id="rx">Events:<br></div>


<script>
  var gateway = getDomainname().replace("http://", "ws://") + "/ws";
  var websocket;
  
  window.addEventListener('load', onLoad);

  function initWebSocket() {
      console.log('Trying to open a WebSocket connection...');
      addToLog('Trying to open a WebSocket connection...');  
      
      websocket = new WebSocket(gateway);
      websocket.onopen    = onOpen;
      websocket.onclose   = onClose;
      websocket.onmessage = onMessage; // <-- add this line
  }
  
  
  function onOpen(event) {
      console.log('Connection opened');
      addToLog('Connection opened');   
  }

  
  function onClose(event) {
      console.log('Connection closed');
      addToLog('Connection closed');   
      setTimeout(initWebSocket, 2000);
  }
  
  
  function onMessage(event) {
      console.log(event);
      addToLog(event.data);   
      
      data = JSON.parse(event.data)

      // State
      if (data.hasOwnProperty("state")) {
        processStateChange(data.state);
      }
  }
  
  
  function onLoad(event) {
      initWebSocket();
  }
  
  
  function addToLog(msg) {
      document.getElementById('rx').innerHTML += "[" + new Date().toLocaleTimeString() + "] " + msg + "<br>\n";
      window.scrollBy(0,document.body.scrollHeight);
  }

  function processStateChange(state) {
    document.getElementById('state').innerHTML = "State: <b>" + data.state + "</b>";

    // TODO only reload image for those steps where it changed...
    var d = new Date();
    var timestamp = d.getTime();
    document.getElementById('img').innerHTML = 'Image: <br><img src=' + getDomainname() + '/img_tmp/alg_roi.jpg?timestamp='+ timestamp +'" height=200px;"></img>';
  }


  function updateImage() {

  }
  
</script>
</body>
</html>