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 3 insertions and 166 deletions:

light9/effect/sequencer/web/Light9SequencerUi.ts

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;
@@ @@ -121,29 +99,24 @@ @@
                });
                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>

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)