Mercurial > code > home > repos > light9

changeset 2097:ffd0a84d54f2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
relocate sequencer ui code
author drewp@bigasterisk.com
date Tue, 31 May 2022 00:15:33 -0700
parents 0e7d8349087c
children 5f94c9f5b879
files light9/effect/sequencer/web/Light9SequencerUi.ts light9/effect/sequencer/web/index.html
diffstat 2 files changed, 125 insertions(+), 139 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/effect/sequencer/web/Light9SequencerUi.ts	Tue May 31 00:15:33 2022 -0700
@@ -0,0 +1,122 @@
+<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>
--- a/light9/effect/sequencer/web/index.html	Tue May 31 00:13:20 2022 -0700
+++ b/light9/effect/sequencer/web/index.html	Tue May 31 00:15:33 2022 -0700
@@ -1,149 +1,13 @@
-<!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>