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 57 insertions and 7 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

@@ @@ -4,7 +4,7 @@ @@
     "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",
@@ @@ -23,13 +23,17 @@ @@
     "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

@@ @@ -16,12 +16,29 @@ @@
     <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>
@@ @@ -151,12 +168,16 @@ @@
     <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 {
@@ @@ -210,17 +231,25 @@ display: flex; @@
              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>
@@ @@ -236,6 +265,7 @@ display: flex; @@
           </template>
         </div>
       </template>
     </dom-module>

light9/web/live/live.coffee

➞

Show inline comments

@@ @@ -97,6 +97,9 @@ Polymer @@
   ready: ->
     @currentSettings = {}
     @effectPreview = JSON.stringify({})
     @sendAllThrottled = _.throttle(@sendAll.bind(@), 30)
     window.gather = (sent) =>
       [dev, devAttr, value] = sent[0]
       key = dev + " " + devAttr
@@ @@ -110,7 +113,7 @@ Polymer @@
         @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)
@@ @@ -169,3 +172,16 @@ Polymer @@
     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)