index.htm

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>IoT HomeDing Device</title>

  <link rel="icon" type="image/png" href="/favicon48.png" sizes="48x48">
  <meta name="application-name" content="Ding" />
  <meta name="msapplication-config" content="/browserconfig.xml" />
  <meta name="msapplication-TileColor" content="#2b5797" />
  <meta name="msapplication-TileImage" content="/favicon144.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/favicon180.png" />
  <meta name="mobile-web-app-capable" content="yes" />
  <link rel="manifest" href="/site.webmanifest" />
  <meta name="theme-color" content="#ffffff" />

  <link Content-Type="text/css" href="/iotstyle.css" rel="stylesheet" />
  <script src="/micro.js"></script>
  <script src="/sfc/loader.js"></script>
  <script>
    var allComponentsLoaded = window.loadComponent('u-piechart', '/sfc');
  </script>
</head>

<body class="sitelayout" style="width:100%;--layout-gap: 0;--main-back:transparent">
  <header>
    <img class="icon" src="/favicon.svg" />
    <h1>Device</h1>
  </header>

  <nav class="navbar">
    <a href="/">Home</a>
    <a href="/board.htm">Board</a>
    <a href="/microide.htm">IDE</a>
    <a href="/log.htm">Log</a>
  </nav>

  <main>
    <div class="card-container col365" style="--card-height: auto;">

      <div class="card">
        <div class="header">
          <h3>Build-in Setup Pages</h3>
        </div>
        <div class="main">
          <p><a href="$setup.htm">WiFi Setup</a></p>
          <p><a href="$update.htm">Web Update</a></p>
          <p><a href="$upload.htm">File Upload</a></p>
          <p><a href="updateicons.htm">Update FavIcons</a></p>
          <p><a href="/panel.htm">Panel</a></p>
        </div>
      </div>

      <div class="card">
        <div class="header">
          <h3>Insights</h3>
        </div>

        <div class="main">
          <p><a href="/env.json">Env file</a></p>
          <p><a href="/config.json">Config file</a></p>

          <p><a href="/api/state">State of elements</a></p>
          <p><a href="/api/list">current files</a></p>
          <p><a href="/ssdp.xml">SSDP description</a></p>
          <p><a href="/api/reboot">reboot</a></p>
        </div>
      </div>

      <div class="card">
        <div class="header">
          <h3>File System Memory</h3>
        </div>

        <div class="main">
          <u-piechart id="meminfo" style="float:left;width:220px;margin-right: 1rem;"></u-piechart>

          <p><span id="memTotal"></span> bytes available.</p>
          <p><span id="memUsed"></span> bytes in use</p>
        </div>
      </div>

      <div class="card">
        <div class="header">
          <h3>SysInfo</h3>
        </div>
        <div class="main">
          <pre id="sysinfo"></pre>
        </div>
      </div>

      <div class="card">
        <div class="main">
          <details>
            <summary>State</summary>
            <pre id="stateInfo"></pre>
          </details>
        </div>
      </div>

      <div class="card">
        <div class="main">
          <details>
            <summary>Available Elements</summary>
            <p id="elementsInfo"></p>
          </details>
        </div>
      </div>

      <div class="card">
        <div class="main">
          <h3>Dev-Links</h3>
          <p><a href="portal.htm">portal.htm</a></p>
          <p><a href="portalconfig.htm">portalConfig.htm</a></p>
          <p><a href="monitor.htm">monitor.htm</a></p>
          <p><a href="/test/index.htm">testing pages</a></p>
          <p><a href="elementcheck.htm">elementcheck</a></p>
        </div>
      </div>

      <div class="card">
        <div class="main">
          <h3>Diag</h3>
          <p><a href="/diag">diag</a></p>
          <p><a href="/chipinfo">chipinfo</a></p>
          <p><a href="/profile">profile</a></p>
        </div>
      </div>

    </div>
  </main>

  <script>
    window.onerror = function(msg, url, lineNo, columnNo, error) {
      var string = msg.toLowerCase();
      var substring = 'script error';
      if (string.indexOf(substring) > -1) {
        alert('Script Error: See Browser Console for Detail');
      } else {
        var message = [
          'Message: ' + msg,
          'URL: ' + url,
          'Line: ' + lineNo,
          'Column: ' + columnNo,
          'Error object: ' + JSON.stringify(error)
        ].join(' - ');

        alert(message);
      }

      return false;
    };
  </script>

  <script>
    var memObj = document.querySelector('#meminfo');
    window.addEventListener('load', function() {
      fetchJSON('/api/sysinfo')
        .then(async (d) => {
          var o = document.getElementById('sysinfo');
          o.innerText = JSON.stringify(d, null, 1)
            .replace('{\n', '')
            .replace('\n}', '')
            .replace(/^\s*/gm, '');

          document.getElementById('memTotal').textContent = d.fsTotalBytes;
          document.getElementById('memUsed').textContent = d.fsUsedBytes;

          await allComponentsLoaded;

          memObj.setOptions({ showPercentage: true });
          memObj.draw([
            {
              color: '#223355',
              title: "Used",
              value: Number(d['fsUsedBytes'])
            },
            {
              color: 'silver',
              title: "Available",
              value: Number(d.fsTotalBytes) - Number(d.fsUsedBytes)
            }
          ]);
        });

      fetchJSON('/api/state')
        .then(function(d) {
          var o = document.querySelector('#stateInfo');
          o.innerText = JSON.stringify(d, null, 1)
            .replace('{\n', '')
            .replace('\n}', '')
            .replace(/^\s*/gm, '');

        });

      fetchJSON('/api/elements')
        .then(function(d) {
          var o = document.querySelector('#elementsInfo');
          o.innerText = d.join(', ');
        });
    });
  </script>
</body>

</html>