Source

Carica Sensor Phalanx / index.html

Full commit
<html>
  <head>
    <title>Sensors</title>
    <style type="text/css">
      html, body {
        background-color: #000;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: block;
      }
      #monitorCanvas {
        display: block;
        background-color: #000;
        margin: 10px auto;
        width: 1000px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div class="monitor">
      <canvas id="monitorCanvas" width="1000" height="400"></canvas>
    </div>
    <script type="text/javascript" src="./files/smoothie.js"> </script>
    <script type="text/javascript">
      var smoothie = new SmoothieChart(
        {
          grid : {
            strokeStyle : '#000000',
            borderVisible : false
          },
          labels : {
            disabled:true
          },
          maxValue : 1,
          minValue: 0
        }
      );
      smoothie.streamTo(document.getElementById('monitorCanvas'), 250);

      var colors = ['#00FF00', '#FF0000', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
      var lines = [];

      websocket = new WebSocket('ws://localhost:8081/');
      websocket.onmessage = function(event) {
        var data = JSON.parse(event.data);
        if (data && data.type == 'sensors') {
          for (index in data.sensors) {
            if (typeof lines[index] == 'undefined') {
              var color = colors.shift();
              if (!color) {
                color = '#FFFFFF';
              }
              lines[index] = new TimeSeries();
              smoothie.addTimeSeries(
                lines[index],
                {
                  lineWidth: 2,
                  strokeStyle: color
                }
              );
            }
            lines[index].append(new Date().getTime(), data.sensors[index]);
          }
        }
      };
    </script>
  </body>
</html>