Add mouseover images for most groups

Resolves: #253

boxes/generators/__init__.py

@@ -7,10 +7,11 @@ ui_groups_by_name = {}
 
 class UIGroup:
 
-    def __init__(self, name, title=None, description=""):
+    def __init__(self, name, title=None, description="", image=""):
         self.name = name
         self.title = title or name
         self.description = description
+        self._image = image
         self.generators = []
         # register
         ui_groups_by_name[name] = self
@@ -19,15 +20,23 @@ class UIGroup:
         self.generators.append(box)
         self.generators.sort(key=lambda b:getattr(b, '__name__', None) or b.__class__.__name__)
 
+    @property
+    def thumbnail(self):
+        return self._image and f"{self._image}-thumb.jpg"
+
+    @property
+    def image(self):
+        return self._image and f"{self._image}.jpg"
+
 ui_groups = [
-    UIGroup("Box", "Boxes"),
-    UIGroup("FlexBox", "Boxes with flex"),
-    UIGroup("Tray", "Trays and Drawer Inserts"),
-    UIGroup("Shelf", "Shelves"),
-    UIGroup("SlatWall"),
-    UIGroup("Holes", "Hole patterns"),
-    UIGroup("Part", "Parts and Samples"),
-    UIGroup("Misc"),
+    UIGroup("Box", "Boxes", image="UniversalBox"),
+    UIGroup("FlexBox", "Boxes with flex", image="RoundedBox"),
+    UIGroup("Tray", "Trays and Drawer Inserts", image="TypeTray"),
+    UIGroup("Shelf", "Shelves", image="DisplayShelf"),
+    UIGroup("SlatWall", image="SlatwallTypeTray"),
+    UIGroup("Holes", "Hole patterns", image=""),
+    UIGroup("Part", "Parts and Samples", image="BurnTest"),
+    UIGroup("Misc", image="TrafficLight"),
     UIGroup("Unstable", description="Generators are still untested or need manual adjustment to be useful."),
     ]
 

scripts/boxesserver

@@ -335,11 +335,11 @@ class BServer:
 """ ]
         for nr, group in enumerate(self.groups):
             result.append(f'''
-<h3 id="h-{nr}" class="open" onclick="showHide('{nr}')">{_(group.title)}</h3>\n  <div id="{nr}">
-''')
-            result.append(f"""
-    <img style="width: 200px;" id="sample-{group.name}" src="static/nothing.png" alt="" />
-    <ul>\n""")
+<h3 id="h-{nr}" class="open" onclick="showHide('{nr}')"
+     onmouseenter="change('{group.name}', 'static/samples/{group.thumbnail}')"
+     onmouseleave="changeback('{group.name}')">{_(group.title)}</h3>
+  <img style="width: 200px;" id="sample-{group.name}" src="static/nothing.png" alt="" />
+  <div id="{nr}"><ul>''')
             for box in group.generators:
                 name = box.__name__
                 if name in ("TrayLayout2", ):
@@ -348,10 +348,9 @@ class BServer:
                 if box.__doc__:
                     docs = " - " + _(box.__doc__)
                 result.append(f"""
-         <li onmouseenter="change('{group.name}', 'static/samples/{name}-thumb.jpg')" onmouseleave="changeback('{group.name}')"><a href="{name}{langparam}">{_(name)}</a>{docs}</li>\n""")
+      <li onmouseenter="change('{group.name}', 'static/samples/{name}-thumb.jpg')" onmouseleave="changeback('{group.name}')"><a href="{name}{langparam}">{_(name)}</a>{docs}</li>""")
             result.append("""
-    </ul>
-  </div>
+  </ul></div>
 """)
         result.append("""
 </div>