scripts/dashboard.html

<html>
<head>
  <title>Tally Pi Dashboard</title>
  <style type="text/css">
    body {
      font-family: monospace;
      font-size: 18px;
    }

    h1 {
      font-family: monospace;
      font-size: 24px;
    }

    div {
      margin-bottom: 5px;
    }

    input {
      font-family: monospace;
      font-size: 18px;
    }

    button {
      font-family: monospace;
      font-size: 18px;
      border: none;
      border-radius: 2px;
      background-color: #DFDFDF;
      box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
      margin-bottom: 8px;
      transition-duration: 0.4s;
    }

    button:hover {
      background-color: #4BB050;
      color: #000000;
    }

    table {
      font-family: monospace;
      font-size: 18px;
    }

    th {
      text-align: left;
      border-bottom: 2px solid black;
    }

    td {
      padding: 10px 40px 5px 5px;
      border-bottom: 1px solid gray;
    }
  </style>
</head>

<body>
  <h1>Tally Light Dashboard</h1>

  <div id="input">
    IPv4 Subnet to search: <input id="subnet" type="text" value="127.0.0.0/24" maxlength="19"></input>
  </div>

  <div id="action">
    <button onclick="searchLights();">Find Lights</button>
    <span id="status">Ready to search...</span>
  </div>

  <table id="lights">
  </table>

  <script type="text/javascript">
    function searchLights() {
      const status = document.getElementById("status");
      const table = document.getElementById("lights");
      const [startAddr, endAddr] = getIPRange(document.getElementById("subnet").value);
      let expectedCount = endAddr - startAddr + 1;

      while (table.firstChild) {
        table.removeChild(table.firstChild);
      }

      status.innerHTML = "Searching...";

      for(let binaddr = startAddr; binaddr <= endAddr; ++binaddr) {
        const ipaddr = binToQuads(binaddr);
        const request = new XMLHttpRequest();
        request.timeout = 5000;

        request.onload = function(evt) {
          status.innerHTML = --expectedCount <= 0 ? "Done!" : `Checking ${ipaddr}`;
          const lightStatus = JSON.parse(request.responseText);
          table.appendChild(createRow(ipaddr, lightStatus));
        };

        request.onerror = function(evt) {
          status.innerHTML = --expectedCount <= 0 ? "Done!" : `Checking ${ipaddr}`;
          request.abort();
          console.log(`Error connecting to ${ipaddr}, continuing...`);
        };

        request.ontimeout = function(evt) {
          status.innerHTML = --expectedCount <= 0 ? "Done!" : `Checking ${ipaddr}`;
          console.log(`Timeout connecting to ${ipaddr}, continuing...`);
        };

        try {
          request.open("GET", `http://${ipaddr}:7413/status`, true);
          request.send();
        } catch(e) {
          request.abort();
          console.log(e);
          status.innerHTML = --expectedCount <= 0 ? "Done!" : `Checking ${ipaddr}`;
          console.log(`Could not connect to ${ipaddr}, continuing...`)
        }
      }
    }

    function setLight(ipaddr) {
      const color = document.getElementById(`color#${ipaddr}`).value.substring(1);
      const brightness = document.getElementById(`bright#${ipaddr}`).value;

      const request = new XMLHttpRequest();
      request.timeout = 2000

      request.onload = function(evt) {
        const lightStatus = JSON.parse(request.responseText);
        const row = document.getElementById(`row#${ipaddr}`);
        row.replaceChildren(...createRow(ipaddr, lightStatus).children);
      };
      request.onerror = (evt) => console.log(`Error updating ${ipaddr}`);
      request.ontimeout = (evt) => console.log(`Timeout updating ${ipaddr}`);

      request.open("GET", `http://${ipaddr}:7413/set?color=${color}&brightness=${brightness}`, true);
      request.send();
    }

    function createRow(ipaddr, status) {
      const color = `${status.red.toString(16).padStart(2, '0')}${status.green.toString(16).padStart(2, '0')}${status.blue.toString(16).padStart(2, '0')}`;

      const row = document.createElement("TR");
      row.id = `row#${ipaddr}`;
      row.appendChild(createTextCell(status.hostname));
      row.appendChild(createTextCell(ipaddr));
      row.appendChild(createColorCell(ipaddr, color));
      row.appendChild(createBrightnessCell(ipaddr, status.brightness));
      return row;
    }

    function createTextCell(text) {
      const txtContent = document.createTextNode(text);
      const txtCell = document.createElement("TD");
      txtCell.appendChild(txtContent);
      return txtCell;
    }

    function createColorCell(ipaddr, color) {
      const hexColor = `#${color}`;

      const colorContent = document.createElement("input");
      colorContent.type = "color";
      colorContent.value = hexColor;
      colorContent.id = `color#${ipaddr}`;
      colorContent.addEventListener("change", () => setLight(ipaddr));

      const txtContent = document.createTextNode(hexColor);
      const colorLabel = document.createElement("label");
      colorLabel.htmlFor = `color#${ipaddr}`;
      colorLabel.appendChild(txtContent);

      const colorCell = document.createElement("TD");
      colorCell.appendChild(colorContent);
      colorCell.appendChild(colorLabel);
      return colorCell;
    }

    function createBrightnessCell(ipaddr, brightness) {
      const brightContent = document.createElement("input");
      brightContent.type = "range";
      brightContent.min = 0;
      brightContent.max = 1;
      brightContent.step = 0.05;
      brightContent.value = brightness;
      brightContent.id = `bright#${ipaddr}`;
      brightContent.addEventListener("change", () => setLight(ipaddr));

      const txtContent = document.createTextNode(brightness);
      const brightLabel = document.createElement("label");
      brightLabel.htmlFor = `bright#${ipaddr}`;
      brightLabel.appendChild(txtContent);

      const brightCell = document.createElement("TD");
      brightCell.appendChild(brightContent);
      brightCell.appendChild(brightLabel);
      return brightCell;
    }

    function getIPRange(networkString) {
      const networkdef = networkString.split('/');
      const netmask = parseInt(networkdef[1])
      const bitmask = 32 - netmask;
      const quads = networkdef[0].split('.');
      const addrbin =
        (parseInt(quads[0]) << 24) +
        (parseInt(quads[1]) << 16) +
        (parseInt(quads[2]) <<  8) +
        parseInt(quads[3]);
      const network = (addrbin >>> bitmask) << bitmask;
      const wildcard = 0xFFFFFFFF >>> netmask;
      const broadcast = network ^ wildcard;
      return [network + 1, broadcast - 1];
    }

    function binToQuads(addrbits) {
      const quadOne = addrbits >>> 24;
      const quadTwo = (addrbits & 0x00FF0000) >> 16;
      const quadThree = (addrbits & 0x0000FF00) >> 8;
      const quadFour = addrbits & 0x000000FF;
      return `${quadOne}.${quadTwo}.${quadThree}.${quadFour}`;
    }
  </script>
</body>
</html>