light9 Changeset - 7d2871f49806

Changeset - 7d2871f49806

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

Drew Perttula - 8 years ago 2017-06-10 04:47:22
drewp@bigasterisk.com

relayout live page. fix jank from moving sliders.
Ignore-this: 7478b5249dd34a2b42bf63be0487599d

3 files changed with 67 insertions and 17 deletions:

light9/web/lib/bower.json

light9/web/live/index.html

light9/web/live/live.coffee

0 comments (0 inline, 0 general)

light9/web/lib/bower.json

➞

Show inline comments

+{
   "name": "3rd-party libs",
   "dependencies": {
     "polymer": "~1.4.0",
     "paper-slider": "PolymerElements/paper-slider#~1.0.11",
     "iron-ajax": "PolymerElements/iron-ajax#~1.2.0",
-    "jquery": "~2.2.4",
+    "jquery": "^3.2.1",
     "underscore": "~1.8.3",
     "jquery-ui": "~1.11.4",
     "QueryString": "http://unixpapa.com/js/QueryString.js",
     "knockout": "knockoutjs#^3.4.0",
     "sylvester": "~0.1.3",
     "d3": "https://github.com/d3/d3.git#e7194db33090a0afc06c77a959594361ffb949df",
@@ @@ -20,16 +20,20 @@ @@
     "paper-radio-button": "PolymerElements/paper-radio-button#^1.2.2",
     "paper-button": "PolymerElements/paper-button#^1.0.12",
     "paper-dialog": "PolymerElements/paper-dialog#^1.0.4",
     "paper-radio-group": "PolymerElements/paper-radio-group#^1.2.2",
     "color": "https://github.com/One-com/one-color.git#^3.0.4",
     "paper-listbox": "PolymerElements/paper-listbox#1.1.3",
     "paper-item": "PolymerElements/paper-item#1.2.2"
     "paper-item": "PolymerElements/paper-item#1.2.2",
     "isotope": "^3.0.4",
     "isotope-fit-columns": "^1.1.3",
     "jquery.columnizer": "https://github.com/adamwulf/Columnizer-jQuery-Plugin.git#^1.6.2"
   },
   "resolutions": {
     "paper-styles": "^1.1.4",
     "rdflib.js": "920e59fe37",
     "d3": "e7194db33090a0afc06c77a959594361ffb949df",
     "webcomponentsjs": "^0.7.24",
     "polymer": "^1.2.1"
     "polymer": "^1.2.1",
     "jquery": "^3.2.1"
+  }
+}

light9/web/live/index.html

➞

Show inline comments

@@ @@ -13,18 +13,35 @@ @@
     <link rel="import" href="../light9-collector-client.html">
     <script src="/lib/d3/build/d3.min.js"></script>
     <script src="/lib/N3.js-pull61/browser/n3-browser.js"></script>
     <script src="/lib/async/dist/async.js"></script>
     <script src="/lib/underscore/underscore-min.js"></script>
     <!-- see live.coffee
     <script src="/lib/jquery/dist/jquery.js"></script>
     <script src="/lib/isotope/dist/isotope.pkgd.min.js"></script>
     <script src="/lib/isotope-fit-columns/fit-columns.js"></script>
     <script src="/lib/jquery.columnizer/src/jquery.columnizer.js"></script>
     -->
     <link rel="import" href="../rdfdb-synced-graph.html">
     <link rel="import" href="/resource-display.html">
     <link rel="import" href="/light9-color-picker.html">
   </head>
   <body>
     <style>
      body, html {
          margin: 0;
+     }
      light9-live-controls {
          position: absolute;
          left: 2px;
          top: 2px;
          right: 8px;
          bottom: 0;
+     }
     </style>
     <dom-module id="light9-listbox">
       <template>
         <style>
          paper-listbox {
              --paper-listbox-background-color: none;
              --paper-listbox-color: white;
@@ @@ -148,18 +165,22 @@ @@
     </dom-module>
     <dom-module id="light9-live-device-control">
       <template>
         <style>
          :host {
              display: inline-block;
+         }
          .device {
              border: 2px solid #151e2d;
              margin: 4px;
              padding: 1px;
              background: #171717;  /* deviceClass gradient added later */
              break-inside: avoid-column;
              width: 400px;
+         }
          .deviceAttr {
              border-top: 1px solid #272727;
              padding-bottom: 2px;
              display: flex;
@@ @@ -172,14 +193,14 @@ @@
+         }
          h2 {
              font-size: 110%;
              padding: 4px;
+         }
          .device, h2 {
          border-top-right-radius: 15px;
+}
              border-top-right-radius: 15px;
+         }
          #mainLabel {
              font-size: 120%;
              color: #9ab8fd;
              text-decoration: initial;
+         }
@@ @@ -200,44 +221,53 @@ @@
     </dom-module>
     <dom-module id="light9-live-controls">
       <template>
         <style>
          :host {
 display: flex;
     flex-direction: column;
+             }
              display: flex;
              flex-direction: column;
+         }
          #preview {
              width: 100%;
+         }
          #deviceControls {
              column-width: 400px;
              flex-grow: 1;
              position: relative;
              width: 100%;
              overflow-y: auto;
+         }
          light9-live-device-control > div {
              break-inside: avoid-column;
+         }
          light9-live-device-control {
+             }
         </style>
         <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
         <light9-collector-client self="{{client}}"></light9-collector-client>
         <h1>device control <button on-click="resendAll">resend all</button> <button on-click="clearAll">clear all</button></h1>
         <h1>device control
           <button on-click="resendAll">resend all</button>
           <button on-click="clearAll">clear all</button></h1>
         <div id="save">
           <div>
             effect name: <input type="input" value="{{newEffectName::change}}">
             <button on-click="saveNewEffect">save new effect</button>
           </div>
           <textarea id="preview" value="{{effectPreview}}"></textarea>
         </div>
         <div id="deviceControls">
           <template is="dom-repeat" items="{{devices}}" as="device">
             <light9-live-device-control graph="{{graph}}" uri="{{device.uri}}"></light9-live-device-control>
           </template>
         </div>
           <div id="deviceControls">
             <template is="dom-repeat" items="{{devices}}" as="device">
               <light9-live-device-control graph="{{graph}}" uri="{{device.uri}}"></light9-live-device-control>
             </template>
           </div>
       </template>
     </dom-module>
     <light9-live-controls></light9-live-controls>

light9/web/live/live.coffee

➞

Show inline comments

@@ @@ -94,12 +94,15 @@ Polymer @@
   observers: [
     'onGraph(graph)'
+    ]
   ready: ->
     @currentSettings = {}
     @effectPreview = JSON.stringify({})
     @sendAllThrottled = _.throttle(@sendAll.bind(@), 30)
     window.gather = (sent) =>
       [dev, devAttr, value] = sent[0]
       key = dev + " " + devAttr
       # this is a bug for zoom=0, since collector will default it to
       # stick at the last setting if we don't explicitly send the
       # 0. rx/ry similar though not the exact same deal because of
@@ @@ -107,13 +110,13 @@ Polymer @@
       if value == 0 or value == '#000000' or value == null or value == undefined
         delete @currentSettings[key]
       else
         @currentSettings[key] = [dev, devAttr, value]
       @effectPreview = JSON.stringify(v for k,v of @currentSettings)
-      @debounce('send', @sendAll.bind(@), 2)
+      @sendAllThrottled()
   currentSettingsList: -> (v for k,v of @currentSettings)
   sendAll: ->
     @client.send(@currentSettingsList())
@@ @@ -166,6 +169,19 @@ Polymer @@
     U = (x) => @graph.Uri(x)
     @set('devices', [])
     for dc in _.sortBy(@graph.subjects(U('rdf:type'), U(':DeviceClass')))
       for dev in _.sortBy(@graph.subjects(U('rdf:type'), dc))
         @push('devices', {uri: dev})
     return
     # Tried css columns- big slowdown from relayout as I'm scrolling.
     # Tried isotope- seems to only scroll to the right.
     # Tried columnize- fails in jquery maybe from weird elements.
     # not sure how to get this run after the children are created
     setTimeout((() => $('#deviceControls').isotope({
       # fitColumns would be nice, but it doesn't scroll vertically
       layoutMode: 'masonry',
       containerStyle: null
       })), 2000)

0 comments (0 inline, 0 general)