Mercurial > code > home > repos > homeauto

<!DOCTYPE html>
<html>
  <head>
    <title>reasoning</title>
    <meta charset="utf-8">
    <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script>
    <script src="/lib/require/require-2.3.3.js"></script>
    <script src="/rdf/common_paths_and_ns.js"></script>

    <link rel="stylesheet" href="/rdf/browse/style.css">

    <link rel="import" href="/rdf/streamed-graph.html">
    <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">

    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css" media="all">
     /* <![CDATA[ */

     #out > section { background: #1d23314a; }
     #out2 > section { background: #4222134a; }

     body {
         display: flex;
         flex-direction: column;
         height: 100vh;
         margin: 0;
     }
     body > *{
         flex-grow: 1;
         flex-shrink: 0;
     }
     .pane { padding: 5px; overflow: auto; }
     /* ]]> */
    </style>
    <link rel="import" href="/supdebug/bang/service-rows/main.html">
    <link rel="import" href="/rdf/rdf-uri.html">
  </head>
  <body class="rdfBrowsePage">
    <h1>reasoning service</h1>
    <div class="pane">
      <div>Post one-shot:
        <button data-url="oneShot" data-body="sensor:kitchenCounterButton1 :buttonState :press .">kitchenCounterButton1</button>
        <button data-url="oneShot" data-body=":bookSwitch :buttonState :press .">book switch</button>

        <button data-url="oneShot" data-body=":frontBedPostSwitch1 :buttonState :press .">asher bed post 1</button>
        <button data-url="oneShot" data-body=":frontBedPostSwitch2 :buttonState :press .">asher bed post 2</button>
        <button data-url="oneShot" data-body=":frontBedPostSwitch3 :buttonState :press .">asher bed post 3</button>
        <button data-url="oneShot" data-body=":frontBedPostSwitch4 :buttonState :press .">asher bed post 4</button>
        <button data-url="oneShot" data-body=":frontBedPostSwitch5 :buttonState :press .">asher bed post 5</button>
        <button data-url="oneShot" data-body=":changingCam :grab <http://bang:9057/snapshot/changing-day.jpg> .">changingCam/day</button>
        <button data-url="oneShot" data-body=":changingCam :grab <http://bang:9057/snapshot/changing-night.jpg> .">changingCam/night</button>

        <script>
         Array.from(document.querySelectorAll("button[data-url]")).forEach((el) => {
           el.addEventListener("click", (ev) => {
             fetch(el.dataset.url, {
               method: "POST",
               headers: {"content-type": "text/n3"},
               body: `
@prefix : <http://projects.bigasterisk.com/room/> .
@prefix sensor: <http://bigasterisk.com/homeauto/sensor/> .
               ` + el.dataset.body

             });
           });
         });
        </script>
      </div>
      <h2>Service</h2>
      <service-rows name-substrs="reasoning"></service-rows>
    </div>

    <div class="pane">
      <h2>Input</h2>
      <streamed-graph id="inGraph" url="/sse_collector/graph/home"></streamed-graph>
      <div id="inGraphView"></div>
    </div>

    <div class="pane" style="flex-shrink: 1">
      <h2>Rules</h2>
      <div>
        <pre id="rules"></pre>
      </div>
      <label><input id="auto" type="checkbox"> auto refresh</label>

      <script src="//bigasterisk.com/lib/jquery-2.0.3.min.js"></script>
      <script type="text/javascript">
       // <![CDATA[
       $(function () {
         function update() {
	   $.get("rules", function (txt) {
	     $("#rules").empty().text(txt);
	   });
         }
         function loop() {
	   update();
	   if ($("input#auto").is(":checked")) {
	     setTimeout(loop, 2000);
	   }
         }
         loop();
         $("input#auto").click(loop);
       });
       // ]]>
      </script>
    </div>

    <div class="pane">
      <h2>Output</h2>

      <streamed-graph id="outGraph" url="graph/output/events"></streamed-graph>
      <div id="outGraphView"></div>
    </div>

    <div class="pane">
      <h2>put outputs</h2>
      <style>
       .recent2  { background: #71710a; }
       .recent10 { background: #40401c; }
       .recent60 { background: #212116; }
       #putOutputs th, #putOutputs td { text-align: left; padding-left: 5px; }
       td.urlAbbrev, td.numRequests, td.lastChangeTime {
         white-space: nowrap;
       }
       td.changed { min-width: 7em; }
      </style>
      <table id="putOutputs">
        <thead>
          <tr>
            <th>url</th>
            <th>numReq</th>
            <th>changed</th>
            <th>payload</th>
            <th>lastErr</th>
          </tr>
        </thead>
        <tbody id="putRows">
        </tbody>
      </table>
      <script>
       window.addEventListener('load', () => {
         const es = new EventSource('putOutputs');
         es.addEventListener('update', (ev) => {
           const rows = document.querySelector('#putRows');
           rows.innerHTML = '';
           JSON.parse(ev.data).puts.forEach((row) => {
             const tr = document.createElement('tr');
             for (let attr of [
               'urlAbbrev',
               'numRequests',
               'lastChangeTime',
               'payload',
               'lastErr',
             ]) {
               const td = document.createElement('td');
               td.classList.add(attr);
               let value = row[attr];
               if (attr == 'lastChangeTime') {
                 const secAgo = Math.round(Date.now() / 1000 - row.lastChangeTime);
                 value = `-${secAgo} sec`;
                 if (secAgo < 2) { tr.classList.add('recent2'); }
                 else if (secAgo < 10) { tr.classList.add('recent10'); }
                 else if (secAgo < 60) { tr.classList.add('recent60'); }
               }
               td.innerText = value;
               tr.appendChild(td);
             }
             rows.appendChild(tr);
           });
         });
       });
      </script>
    </div>


    <script type="module">
     // this is approx /my/site/homepage/www/rdf/streamed_graph_view.js so port to that.
     import { render } from '/lib/lit-html/1.0.0/lit-html.js';
     import { graphView } from '/rdf/browse/graphView.js';

     function keepGraphFresh(sg, outElem) {
       const startPainting = () => {
         if (!sg.graph || !sg.graph.graph) {
           setTimeout(startPainting, 100);
           return;
         }
         let dirty = true;
         const repaint = () => {
           if (!dirty) return;
           render(graphView(sg.graph.graph), outElem);
           dirty = false;
         };

         sg.addEventListener('graph-changed', (ev) => {
           dirty = true;
           requestAnimationFrame(repaint);
         });
         repaint();
       };
       setTimeout(startPainting, 10);
     }
     keepGraphFresh(document.querySelector('#inGraph'),
                    document.querySelector('#inGraphView'));
     keepGraphFresh(document.querySelector('#outGraph'),
                    document.querySelector('#outGraphView'));
    </script>

  </body>
</html>
author	drewp@bigasterisk.com
date	Tue, 12 Oct 2021 20:18:59 -0700
parents	6b80a6c58907
children