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
7
3
light9/web/live/index.html
43
13
light9/web/live/live.coffee
17
1
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",
 
    "rdflib.js": "https://github.com/linkeddata/rdflib.js.git#920e59fe37",
 
    "rdfstore": "https://github.com/antoniogarrote/rdfstore-js.git#b3f7c0c9c1da9b26261af0d4858722fa982411bb",
 
    "N3.js": "https://github.com/RubenVerborgh/N3.js.git#04f4e21f4ccb351587dc00a3f26340b28d4bb10f",
 
    "shortcut": "http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js",
 
    "async": "https://github.com/caolan/async.git#^1.5.2",
 
    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.3",
 
    "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
 
@@ -7,30 +7,47 @@
 
    <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
 
    <link rel="import" href="/lib/polymer/polymer.html">
 
    <link rel="import" href="/lib/paper-slider/paper-slider.html">
 
    <link rel="import" href="/lib/paper-listbox/paper-listbox.html">
 
    <link rel="import" href="/lib/paper-item/paper-item.html">
 
    <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
 
    <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;

			




	
	
	
		
 
             --paper-listbox: {

			




	
	
	
		
 
                 /* measure biggest item? use flex for columns? */

			




	
	
	
		
 
                 column-width: 9em;

			




	
	
	
		
 
             }

			




	
	
	
		
 
         }

			




	
	
	
		
 
         paper-item {

			




	
	
		
 
@@ -142,50 +159,54 @@

			




	
	
	
		
 
        <template is="dom-if" if="{{deviceAttr.useChoice}}">

			




	
	
	
		
 
          <light9-listbox choices="{{deviceAttr.choices}}" value="{{value}}">

			




	
	
	
		
 
          </light9-listbox>

			




	
	
	
		
 
        </template>

			




	
	
	
		
 

			




	
	
	
		
 
      </template>

			




	
	
	
		
 
     

			




	
	
	
		
 
    </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;

			




	
	
	
		
 
         }

			




	
	
	
		
 
         .deviceAttr > span {

			




	
	
	
		
 

			




	
	
	
		
 
         }

			




	
	
	
		
 
         .deviceAttr > light9-live-control {

			




	
	
	
		
 
             flex-grow: 1;

			




	
	
	
		
 
         }

			




	
	
	
		
 
         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;

			




	
	
	
		
 
         }

			




	
	
	
		
 
        </style>

			




	
	
	
		
 
        <div class="device">

			




	
	
	
		
 
          <h2 style$="[[bgStyle]]">

			




	
	
	
		
 
            <resource-display id="mainLabel" graph="{{graph}}" uri="{{uri}}"></resource-display>

			




	
	
	
		
 
            a <resource-display minor graph="{{graph}}" uri="{{deviceClass}}"></resource-display>

			




	
	
	
		
 
          </h2>

			




	
	
		
 
@@ -194,53 +215,62 @@

			




	
	
	
		
 
              <span>attr <resource-display minor graph="{{graph}}" uri="{{dattr.uri}}"></resource-display></span>

			




	
	
	
		
 
              <light9-live-control device="{{uri}}" device-attr="{{dattr}}"></light9-live-control>

			




	
	
	
		
 
            </div>

			




	
	
	
		
 
          </template>

			




	
	
	
		
 
        </div>

			




	
	
	
		
 
      </template>

			




	
	
	
		
 
    </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>    

			




	
	
	
		
 

			




	
	
	
		
 
    <script src="live.js"></script>   

			




	
	
	
		
 
  </body>

			




	
	
	
		
 
</html>

			




        

    


    
    

    

        

                

                    light9/web/live/live.coffee
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -88,38 +88,41 @@ Polymer

			




	
	
	
		
 
    graph: { type: Object, notify: true }

			




	
	
	
		
 
    client: { type: Object, notify: true }

			




	
	
	
		
 
    devices: { type: Array, notify: true }

			




	
	
	
		
 
    currentSettings: { type: Object, notify: true } # dev+attr: [dev, attr, value]

			




	
	
	
		
 
    effectPreview: { type: String, notify: true }

			




	
	
	
		
 
    newEffectName: { type: String, notify: true }

			




	
	
	
		
 
  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

			




	
	
	
		
 
      # their remap.

			




	
	
	
		
 
      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())

			




	
	
	
		
 
      

			




	
	
	
		
 
  saveNewEffect: ->

			




	
	
	
		
 
    uriName = @newEffectName.replace(/[^a-zA-Z0-9_]/g, '')

			




	
	
	
		
 
    return if not uriName.length

			




	
	
	
		
 

			




	
	
	
		
 
    U = (x) => @graph.Uri(x)

			




	
	
	
		
 

			




	
	
		
 
@@ -160,12 +163,25 @@ Polymer

			




	
	
	
		
 
      llc.resend()

			




	
	
	
		
 
  clearAll: ->

			




	
	
	
		
 
    for llc in @getElementsByTagName("light9-live-control")

			




	
	
	
		
 
      llc.clear()

			




	
	
	
		
 
    

			




	
	
	
		
 
  update: ->

			




	
	
	
		
 
    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)
    





    


  

  







  


    




    








    
        Server instance: kallithea-749ff669b6-v9g5f-75
    
    
        This site is powered by
            Kallithea 0.7.0,
        which is
        © 2010–2021 by various authors & licensed under GPLv3.
            – Support