Mercurial > code > home > repos > light9

<!doctype html>
<html>
  <head>
    <title>effect sequencer</title>
    <meta charset="utf-8" />
    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
    <script src="/lib/debug/debug-build.js"></script>
    <script>
     debug.enable('*');
    </script>
    <link rel="import" href="/lib/polymer/polymer.html">
    <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
    <link rel="import" href="../rdfdb-synced-graph.html">
    <link rel="import" href="../resource-display.html">
    <script src="/node_modules/n3/n3-browser.js"></script>
    <script src="/lib/async/dist/async.js"></script>
    <script src="/lib/underscore/underscore-min.js"></script>

    <link rel="stylesheet"  href="/style.css">
  </head>
  <body>

    <dom-module id="light9-sequencer-ui">
      <template>
        <style>
         :host {
             display: block;
         }
         td {
             white-space: nowrap;
             padding: 0 20px;
         }
         tr.active { background: #151515; }
         .inactive > * { opacity: .5; }
         .effectSetting {
             display: inline-block;
             background: #1b1e21;
             margin: 1px 3px;
         }
         .chart {
             height: 40px;
             background: #222;
             display: inline-flex;
             align-items: flex-end;
         }
         .chart > div {
             background: #a4a54f;
             width: 8px;
             margin: 0 1px;
         }
         .number {
             display: inline-block;
             min-width: 4em;
         }
        </style>
        <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>

        <h1>Sequencer <a href="stats">[stats]</a></h1>

        <p>fps={{report.recentFps}}</p>

        <p>Recent frame times (best to worst):
        <div class="chart">
         <template is="dom-repeat" items="{{report.recentDeltasStyle}}">
           <div style$="{{item}}"></div>
         </template>
        </div>
        </p>

        <h2>Song</h2>

        <resource-display graph="{{graph}}" uri="{{report.song}}"></resource-display>
        t={{report.roundT}}

        <h3>Notes</h3>

        <table>
          <tr>
            <th>Note</th>
            <th>Effect class</th>
            <th>Effect settings</th>
            <th>Devices affected</th>
          </tr>
          <template is="dom-repeat" items="{{report.songNotes}}">

            <tr class$="{{item.rowClass}}">
              <td>
                <resource-display graph="{{graph}}" uri="{{item.note}}"></resource-display>
              </td>
              <td>
                <resource-display graph="{{graph}}" uri="{{item.effectClass}}"></resource-display>
              </td>
              <td>
                <template is="dom-repeat" items="{{item.effectSettingsPairs}}">
                  <span class="effectSetting">
                    <resource-display graph="{{graph}}" uri="{{item.effectAttr}}"></resource-display>:
                    <span class="number">{{item.value}}</span>
                  </span>
                </template>
              </td>
              <td>
                {{item.devicesAffected}}
              </td>
            </tr>
          </template>
        </table>

      </template>
      <script>
       HTMLImports.whenReady(function () {
         Polymer({
           is: "light9-sequencer-ui",
           properties: {
             graph: {type: Object, notify: true},
             report: {type: Object, notify: true},
           },
           ready: function() {
             var source = new EventSource('updates');
             source.addEventListener('message', (e) => {
               const report = JSON.parse(e.data);
               report.roundT = Math.floor((report.t || 0) * 1000) / 1000;
               report.recentFps = Math.floor((report.recentFps || 0) * 10) / 10;
               report.recentDeltasStyle = (report.recentDeltas || []).map((dt) => {
                 const height = Math.min(40, dt / 0.085 * 20);
                 return `height: ${height}px;`
               });

               const fakeUris = (report.songNotes || []).map((obj) => { return {value: obj.note, orig: obj} });
               const s = this.graph.sortedUris(fakeUris);
               report.songNotes = s.map((u) => { return u.orig; });

               (report.songNotes || []).forEach((note) => {
                 note.rowClass = note.nonZero ? 'active' : 'inactive';
                 note.effectSettingsPairs = [];

                 const attrs = Object.keys(note.effectSettings);
                 attrs.sort();
                 attrs.forEach((attr) => {
                   note.effectSettingsPairs.push(
                     {effectAttr: attr, value: note.effectSettings[attr]});
                 });
               });
               this.report = report;
             });
           },
         });
       });
      </script>
    </dom-module>

    <light9-sequencer-ui></light9-sequencer-ui>

  </body>
</html>
author	Drew Perttula <drewp@bigasterisk.com>
date	Sat, 01 Jun 2019 10:59:16 +0000
parents	5a9952820f9d
children	1a7e5b07bf17