light9 Changeset - ffd0a84d54f2

Changeset - ffd0a84d54f2

Parent rev.

Child rev.

[Not reviewed]

default

0 1 1

drewp@bigasterisk.com - 3 years ago 2022-05-31 07:15:33
drewp@bigasterisk.com

relocate sequencer ui code

2 files changed with 116 insertions and 279 deletions:

light9/effect/sequencer/web/Light9SequencerUi.ts

113

140

light9/effect/sequencer/web/index.html

139

0 comments (0 inline, 0 general)

light9/effect/sequencer/web/Light9SequencerUi.ts

➞

Show inline comments

 <!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 10px;
        vertical-align: top;
        vertical-align: top;
        text-align: start;
+   }
    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>
     <dom-module id="light9-sequencer-ui">
       <template>
         <style>
          :host {
              display: block;
+         }
          td {
              white-space: nowrap;
              padding: 0 10px;
              vertical-align: top;
              vertical-align: top;
              text-align: start;
+         }
          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>
   <h2>Song</h2>
   <resource-display graph="{{graph}}" uri="{{report.song}}"></resource-display>
   t={{report.roundT}}
   <h3>Notes</h3>
         <h1>Sequencer <a href="stats/">[stats]</a></h1>
         <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}}">
         <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}}">
                   <div>
                   <span class="effectSetting">
                     <resource-display graph="{{graph}}" uri="{{item.effectAttr}}"></resource-display>:
                     <span class="number">{{item.value}}</span>
                   </span>
                   </div>
                 </template>
               </td>
               <td>
                 {{item.devicesAffected}}
               </td>
             </tr>
       <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}}">
             <div>
             <span class="effectSetting">
               <resource-display graph="{{graph}}" uri="{{item.effectAttr}}"></resource-display>:
               <span class="number">{{item.value}}</span>
             </span>
             </div>
           </template>
         </table>
         </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;`
                });
 </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 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;
              });
            },
            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>
      },
    });
  });
 </script>
 </dom-module>

light9/effect/sequencer/web/index.html

➞

Show inline comments

-<!doctype html>
+<!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">
     <link rel="stylesheet" href="./style.css" />
     <script type="module" src="./Light9SequencerUi"></script>
   </head>
   <body>
     <dom-module id="light9-sequencer-ui">
       <template>
         <style>
          :host {
              display: block;
+         }
          td {
              white-space: nowrap;
              padding: 0 10px;
              vertical-align: top;
              vertical-align: top;
              text-align: start;
+         }
          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>
         <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}}">
                   <div>
                   <span class="effectSetting">
                     <resource-display graph="{{graph}}" uri="{{item.effectAttr}}"></resource-display>:
                     <span class="number">{{item.value}}</span>
                   </span>
                   </div>
                 </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>

0 comments (0 inline, 0 general)