light9 Changeset - 21a52ce16954

Changeset - 21a52ce16954

Parent rev.

Child rev.

[Not reviewed]

default

0 5 3

Drew Perttula - 8 years ago 2017-05-31 08:20:19
drewp@bigasterisk.com

new effects2.html polymer port
Ignore-this: 2edbfa5954a7592c1ddc77ec8c22e5d

8 files changed with 158 insertions and 10 deletions:

light9/subserver/effects.coffee

light9/subserver/effects.jade

light9/subserver/effects2.coffee

light9/subserver/effects2.html

light9/web/edit-choice.html

light9/web/paint/paint-report-elements.html

light9/web/resource-display.html

light9/web/style.css

0 comments (0 inline, 0 general)

light9/subserver/effects.coffee

➞

Show inline comments

@@ @@ -42,24 +42,26 @@ model.addMomentary = (e) -> @@
     data: {drop: e.uri, event: 'start'}
     success: (data) ->
       lastMomentaryNote = JSON.parse(data)['note']
   })
 model.addMomentaryUp = (e) ->
   $.ajax({
     type: 'POST'
     url: '/effectEval/songEffects'
     data: {drop: e.uri, event: 'end', note: lastMomentaryNote}
   })
 reconnectingWebSocket "../effectsUpdates", (msg) ->
   model.chases(msg.chases) if msg.chases?
   model.classes(msg.classes) if msg.classes?
 # this sort of works to stop clicks in <input> from following the
 # submaster hyperlink, but it may make certain clicks act wrong
 $(document).on('click', 'a', (ev) ->
   return false if ev.target.tagName == 'INPUT'
+)

light9/subserver/effects.jade

➞

Show inline comments

 doctype html
 html
   head
     title effects
     link(rel='stylesheet', href='/style.css')
     style.
       .headerRow {
         display: flex;
         justify-content: space-between;
+      }
   body
     #status starting...
     h1 Effects
     p: a(href='.') Go to Submasters
     div(data-bind="foreach: moreExprs")
       div.resource.chase
         span(data-bind="text: label")
+        |
         a.resource(data-bind="attr: {href: $root.subtermLink(label, expr)}, text: expr")
     div(data-bind="foreach: chases")
       div.resource.chase
         | Chase
         a(data-bind="attr: {href: uri}, text: label")
         ul(data-bind="foreach: $parent.subtermExprs($data)")
           li: a.resource(data-bind="attr: {href: $root.subtermLink($parent.label, $data)}, text: $data")
     div(data-bind="foreach: classes")
       div.resource.effectClass
         h2
           | Effect class
+          |
           a(data-bind="attr: {href: uri}, text: label")
           button(data-bind="click: $root.addToCurrentSong") Add to current song
           button(data-bind="event: { mousedown: $root.addMomentary, mouseup: $root.addMomentaryUp }") Add momentary
         div.headerRow
           span
             h2
               | Effect class
+              |
               resource-display(data-bind="attr: {uri: uri, graph: graph}")
               a(data-bind="attr: {href: uri}, text: label")
               button(data-bind="click: $root.onRename") Rename
           span.rightTools
             button(data-bind="click: $root.addToCurrentSong") Add to current song
             button(data-bind="event: { mousedown: $root.addMomentary, mouseup: $root.addMomentaryUp }") Add momentary
         div.rename
           input
         div
           code(data-bind="text: code")
     #status
     script(src="/lib/jquery/dist/jquery.min.js")
     script(src="/lib/knockout/dist/knockout.js")
     script(src="/websocket.js")
     script(src="effects.js")
@@ \ No newline at end of file @@

light9/subserver/effects2.coffee

➞

Show inline comments

@@ new file 100644 @@
 Polymer
   is: "light9-effects"
   properties:
     graph: {type: Object}
     effectClasses: { type: Array }
   ready: ->
     @graph.runHandler(@getClasses.bind(@))
   getClasses: ->
     U = (x) => @graph.Uri(x)
     @effectClasses = _.sortBy(@graph.subjects(U('rdf:type'), U(':Effect')))
 Polymer
   is: "light9-effect-class"
   properties:
     graph: {type: Object}
     uri: {type: String}
   onAdd: ->
     @$.songEffects.body = {drop: @uri}
     @$.songEffects.generateRequest()
   onMomentaryPress: ->
     @$.songEffects.body = {drop: @uri, event: 'start'}
     @lastPress = @$.songEffects.generateRequest()
     @lastPress.completes.then (request) =>
       @lastMomentaryNote = request.response.note
   onMomentaryRelease: ->
     return unless @lastMomentaryNote
     @$.songEffects.body = {drop: @uri, note: @lastMomentaryNote}
     @lastMomentaryNote = null
     @$.songEffects.generateRequest()
@@ \ No newline at end of file @@

light9/subserver/effects2.html

➞

Show inline comments

@@ new file 100644 @@
 <!doctype html>
 <html>
   <head>
     <title>subserver effects2</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="/style.css">
     <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="/lib/polymer/polymer.html">
     <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
     <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>
     <link rel="import" href="/rdfdb-synced-graph.html">
     <link rel="import" href="/resource-display.html">
   </head>
   <body>
     <!-- replaces effects.jade for subserver -->
     <dom-module id="light9-effect-class">
       <template>
         <style>
          :host {
              display: block;
              padding: 5px;
              border: 1px solid green;
              background: #1e271e;
              margin-bottom: 3px;
+         }
         </style>
         Effect
         <resource-display graph="{{graph}}" uri="{{uri}}" rename></resource-display>
         <iron-ajax id="songEffects"
                    url="/effectEval/songEffects"
                    method="POST"
                    content-type="application/x-www-form-urlencoded"></iron-ajax>
           <button on-click="onAdd">Add to current song</button>
           <button on-mousedown="onMomentaryPress"
                   on-mouseup="onMomentaryRelease">Add momentary</button>
       </template>
     </dom-module>
     <dom-module id="light9-effects">
       <template>
         <style>
         </style>
         <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
         <template is="dom-repeat" items="{{effectClasses}}">
           <light9-effect-class graph="{{graph}}" uri="{{item}}"></light9-effect-class>
         </template>
       </template>
     </dom-module>
     <light9-effects></light9-effects>
     <script src="effects2.js"></script>
   </body>
 </html>

light9/web/edit-choice.html

➞

Show inline comments

@@ @@ -7,21 +7,23 @@ @@
      #box {
          display: inline-block;
          background: #141448;
+     }
      #box.dragging {
          background: rgba(126, 52, 245, 0.0784313725490196);
+     }
      a {
          color: #5555e0;
          padding: 3px;
          display: inline-block;
+     }
     </style>
     <div id="box">
       <a href="{{uri}}"><!-- type icon goes here -->{{label}}</a>
       <!-- maybe use resource-display for this part -->
       <a href="{{uri}}" title="{{label}}"><!-- type icon goes here -->{{label}}</a>
       <!-- <button on-click="unlink">Unlink</button>  -->
     </div>
   </template>
   <script src="edit-choice.js"></script>
 </dom-module>

light9/web/paint/paint-report-elements.html

➞

Show inline comments

@@ @@ -2,27 +2,32 @@ @@
 <link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
 <dom-module id="light9-simulation">
   <template>
     <style>
      #solutions { display: flex; margin: 20px; }
      #single-light { margin-right: 70px; }
      #multi-light {}
      #breakdown { position: relative; }
      #sources { display: flex; }
      #solution { display: flex; margin-top: 80px; }
      #connectors { position: absolute; width: 100%; height: 100%; }
+     #connectors { position: absolute; width: 100%; height: 100%; z-index: -1; }
      #connectors path { stroke: #615c54; stroke-width: 3px; }
      [draggable=true]:hover {
          box-shadow: 0 0 20px yellow;
+     }
     </style>
     <div id="solutions">
       <div id="single-light">
         <div>Single pic best match:</div>
         <!-- drag this img to make an effect out of just it -->
         <light9-capture-image name="mac2" path="{{solution.bestMatch.path}}"></light9-capture-image>
         <div>Error: {{solution.bestMatch.dist}}</div>
         <light9-device-settings graph="{{graph}}" subj="{{solution.bestMatch.uri}}"></light9-device-settings>

light9/web/resource-display.html

➞

Show inline comments

@@ new file 100644 @@
 <link rel="import" href="/lib/polymer/polymer.html">
 <dom-module id="resource-display">
   <template>
     <link rel="stylesheet" href="/style.css">
     <span class="resource"><a href="{{uri}}">{{label}}</a></span>
     <template is="dom-if" if="{{rename}}">
       <button>Rename</button>
     </template>
   </template>
   <script>
    Polymer({
        is: "resource-display",
        properties: {
            graph: { type: Object },
            uri: { type: String },
            label: { type: String },
            rename: { type: Boolean },
        },
        ready: function() {
            this.graph.runHandler(this.setLabel.bind(this), "label #{this.uri}");
            console.log('ren', this.rename);
        },
        setLabel: function() {
            this.label = this.graph.stringValue(this.uri, this.graph.Uri('rdfs:label'));
            if (!this.label) {
                this.label = this.uri;
+           }
+       }
    });
   </script>
 </dom-module>

light9/web/style.css

➞

Show inline comments

@@ @@ -190,13 +190,13 @@ a.big { @@
     margin: 0px;
     display: inline-block;
     border-radius: 5px;
+}
 table {
     border-collapse: collapse;
+}
 table.borders td, table.borders th {
     border: 1px solid #4a4a4a;
     padding: 2px 8px;
+}
@@ \ No newline at end of file @@
+}

0 comments (0 inline, 0 general)