light9 Changeset - 654c41ccf265

Changeset - 654c41ccf265

Parent rev.

Child rev.

[Not reviewed]

default

0 2 1

Drew Perttula - 8 years ago 2017-05-25 07:01:42
drewp@bigasterisk.com

more draft UI for paint page
Ignore-this: 38d7781ae0c870578eee64cc17ec7eb8

3 files changed with 311 insertions and 1 deletions:

light9/web/paint/index.html

light9/web/paint/paint-elements.html

153

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

156

0 comments (0 inline, 0 general)

light9/web/paint/index.html

➞

Show inline comments

@@ @@ -4,6 +4,8 @@ @@
     <title>paint</title>
     <meta charset="utf-8" />
     <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="stylesheet"  href="/style.css">
     <link rel="import" href="paint-elements.html">
     <meta name="viewport" content="user-scalable=no, width=1000, initial-scale=.5" />
     <style>

light9/web/paint/paint-elements.html

➞

Show inline comments

@@ @@ -26,6 +26,14 @@ @@
          stroke-miterlimit:4;
+     }
     </style>
     <div>
       tools:
       - hover spot
       - paint
       - erase
     </div>
     <iron-ajax id="solve" method="POST" url="../paintServer/solve"></iron-ajax>
     <div id="parent">
       <img src="bg2.jpg">
@@ @@ -68,15 +76,159 @@ @@
         </defs>
       </svg>
     </div>
     <light9-simulation layers="{{layers}}"></light9-simulation>
   </template>
 </dom-module>
 <!-- merge more with light9-collector-device -->
 <dom-module id="light9-device-settings">
   <template>
     <style>
      :host {
          display: block;
          break-inside: avoid-column;
          border: 2px solid gray;
          padding: 8px;
+     }
      td.nonzero {
          background: #310202;
          color: #e25757;
+     }
      td.full {
          background: #2b0000;
          color: red;
          font-weight: bold;
+     }
     </style>
     <h3>{{label}}</h3>
     <table class="borders">
       <tr>
         <th>device attr</th>
         <th>value</th>
       </tr>
       <template is="dom-repeat" items="{{attrs}}">
         <tr>
           <td>{{item.attr}}</td>
           <td class$="{{item.valClass}}">{{item.val}}</td>
         </tr>
       </template>
   </template>
   <script>
    HTMLImports.whenReady(function () {
        Polymer({
            is: "light9-device-settings",
            properties: {
                label: {type: String, notify: true},
                attrs: {type: Array, notify: true},
            },
            ready: function() {
                this.label = "aura2";
                this.attrs = [
                    {attr: 'rx', val: .03},
                    {attr: 'color', val: '#ffe897'},
                ];
+           }
        });
    });
   </script>
 </dom-module>
 <dom-module id="light9-capture-image">
   <template>
     <style>
      :host { display: block; }
     </style>
     <div>{{name}}</div>
     <div><img width="100" src="../{{path}}"></div>
   </template>
   <script>
    HTMLImports.whenReady(function () {
        Polymer({
            is: "light9-capture-image",
            properties: {
                name: { type: String },
                path: { type: String },
+           }
        });
    });
   </script>
 </dom-module>
 <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 path { stroke: #615c54; stroke-width: 3px; }
     </style>
     <div>sim</div>
     <div id="solutions">
       <div id="single-light">
         <div>Single pic best match:</div>
         <light9-capture-image name="mac2" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
         <div>Error: 280844</div>
         <div>DeviceSettings</div>
         <light9-device-settings></light9-device-settings>
       </div>
       <!-- existing effect best match? -->
       <div id="multi-light">
         Created from multiple lights:
         <div id="breakdown">
           <svg id="connectors">
             <g>
               <path d="M 112,241 L 150,280"></path>
               <path d="M 332,241 L 150,280"></path>
               <path d="M 532,241 L 150,280"></path>
               <path d="M 732,241 L 150,280"></path>
             </g>
           </svg>
           <div id="sources">
             <div>
               <light9-capture-image name="aura1" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
               <light9-device-settings></light9-device-settings>
             </div>
             <div>
               <light9-capture-image name="aura2" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
               <light9-device-settings></light9-device-settings>
             </div>
             <div>
               <light9-capture-image name="aura3" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
               <light9-device-settings></light9-device-settings>
             </div>
             <div>
               <light9-capture-image name="aura4" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
               <light9-device-settings></light9-device-settings>
             </div>
           </div>
           <div id="solution">
             <div> <div>combined</div><div><img width="150" src="../show/dance2017/capture/moving1/cap258592/pic1.jpg"></div><div>error 9980</div></div>
             <div> <div>residual</div><div><img width="150" src="../show/dance2017/capture/moving1/cap258592/pic1.jpg"></div></div>
           </div>
         </div>
         Save as effect named <input> <button>Save</button>
       </div>
   </template>
 </dom-module>

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

➞

Show inline comments

@@ new file 100644 @@
 <link rel="import" href="/lib/polymer/polymer.html">
 <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 path { stroke: #615c54; stroke-width: 3px; }
     </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="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
         <div>Error: 280844</div>
         <light9-device-settings></light9-device-settings>
       </div>
       <!-- existing effect best match? -->
       <div id="multi-light">
         Created from multiple lights:
         <div id="breakdown">
           <svg id="connectors">
             <g>
               <path d="M 112,241 L 150,280"></path>
               <path d="M 332,241 L 150,280"></path>
               <path d="M 532,241 L 150,280"></path>
               <path d="M 732,241 L 150,280"></path>
             </g>
           </svg>
           <div id="sources">
             <div>
               <light9-capture-image name="aura1" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
               <light9-device-settings></light9-device-settings>
             </div>
             <div>
               <light9-capture-image name="aura2" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
               <light9-device-settings></light9-device-settings>
             </div>
             <div>
               <light9-capture-image name="aura3" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
               <light9-device-settings></light9-device-settings>
             </div>
             <div>
               <light9-capture-image name="aura4" path="show/dance2017/capture/moving1/cap258592/pic1.jpg"></light9-capture-image>
               <light9-device-settings></light9-device-settings>
             </div>
           </div>
           <div id="solution">
             <div>
               <div>combined</div>
               <!-- drag this img to make an effect out of it -->
               <div><img width="150" src="../show/dance2017/capture/moving1/cap258592/pic1.jpg"></div>
               <div>error 9980</div>
             </div>
             <div>
               <div>residual</div>
               <div><img width="150" src="../show/dance2017/capture/moving1/cap258592/pic1.jpg"></div>
             </div>
           </div>
         </div>
         Save as effect named <input> <button>Save</button>
       </div>
   </template>
 </dom-module>
 <!-- merge more with light9-collector-device -->
 <dom-module id="light9-device-settings">
   <template>
     <style>
      :host {
          display: block;
          break-inside: avoid-column;
          border: 2px solid gray;
          padding: 8px;
+     }
      td.nonzero {
          background: #310202;
          color: #e25757;
+     }
      td.full {
          background: #2b0000;
          color: red;
          font-weight: bold;
+     }
     </style>
     <h3>{{label}}</h3>
     <table class="borders">
       <tr>
         <th>device attr</th>
         <th>value</th>
       </tr>
       <template is="dom-repeat" items="{{attrs}}">
         <tr>
           <td>{{item.attr}}</td>
           <td class$="{{item.valClass}}">{{item.val}}</td>
         </tr>
       </template>
   </template>
   <script>
    Polymer({
        is: "light9-device-settings",
        properties: {
            label: {type: String, notify: true},
            attrs: {type: Array, notify: true},
        },
        ready: function() {
            this.label = "aura2";
            this.attrs = [
                {attr: 'rx', val: .03},
                {attr: 'color', val: '#ffe897'},
            ];
+       }
    });
   </script>
 </dom-module>
 <dom-module id="light9-capture-image">
   <template>
     <style>
      :host { display: block; }
     </style>
     <div>{{name}}</div>
     <div><img width="100" src="../{{path}}"></div>
   </template>
   <script>
    Polymer({
        is: "light9-capture-image",
        properties: {
            name: { type: String },
            path: { type: String },
+       }
    });
   </script>
 </dom-module>

0 comments (0 inline, 0 general)