Mercurial > code > home > repos > light9

changeset 1636:7d2871f49806

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
relayout live page. fix jank from moving sliders. Ignore-this: 7478b5249dd34a2b42bf63be0487599d
author Drew Perttula <drewp@bigasterisk.com>
date Sat, 10 Jun 2017 04:47:22 +0000
parents 0eb5f70bdde2
children cb39ef3dc1d5
files light9/web/lib/bower.json light9/web/live/index.html light9/web/live/live.coffee
diffstat 3 files changed, 67 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/light9/web/lib/bower.json	Sat Jun 10 03:17:20 2017 +0000
+++ b/light9/web/lib/bower.json	Sat Jun 10 04:47:22 2017 +0000
@@ -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"
   }
 }
--- a/light9/web/live/index.html	Sat Jun 10 03:17:20 2017 +0000
+++ b/light9/web/live/index.html	Sat Jun 10 04:47:22 2017 +0000
@@ -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 {
@@ -175,8 +196,8 @@
              padding: 4px;
          }
          .device, h2 {
-         border-top-right-radius: 15px;
-}
+             border-top-right-radius: 15px;
+         }
 
          #mainLabel {
              font-size: 120%; 
@@ -203,24 +224,32 @@
       <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>
@@ -230,11 +259,12 @@
           <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>
--- a/light9/web/live/live.coffee	Sat Jun 10 03:17:20 2017 +0000
+++ b/light9/web/live/live.coffee	Sat Jun 10 04:47:22 2017 +0000
@@ -97,6 +97,9 @@
   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 @@
         @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 @@
     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)