--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/paint/paint-report-elements.html	Sun May 12 19:02:10 2024 -0700
@@ -0,0 +1,148 @@
+<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%; 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="lighhtnamehere" 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>
+      </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 class="effectLike" draggable="true">
+              <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><a href="{{subj}}">{{label}}</a></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>
+ 
+</dom-module>
+
+<dom-module id="light9-capture-image">
+  <template>
+    <style>
+     :host { display: block; }
+       img {
+         outline: 1px solid #232323;
+         margin: 5px;
+     }
+    </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>