diff --git a/light9/web/paint/paint-elements.html b/light9/web/paint/paint-elements.html
--- a/light9/web/paint/paint-elements.html
+++ b/light9/web/paint/paint-elements.html
@@ -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>