Tweaks

scripts/generate_settings_page.py

@@ -10,18 +10,20 @@ available_modules = module_factory.available_modules()
 modules_by_type = {}
 # Categorize modules by type
 for module in available_modules:
-    for type in module.type:
+    for type in module.manifest.get('type', []):
         modules_by_type.setdefault(type, []).append(module)
 
 
 module_sections = ""
 # Add module sections
 for module_type in MODULE_TYPES:
-    module_sections += f"<div class='module-section'><h3>{module_type}</h3>"
+    module_sections += f"<div class='module-section'><h3>{module_type.title()}s</h3>"
+    # make this section in rows, max 8 modules per row
     for module in modules_by_type[module_type]:
+        
         module_name = module.name
         module_sections += f"""
-            <div>
+            <div style="display:inline-block; width: 12.5%;">
                 <input type="checkbox" id="{module.name}" name="{module.name}" onclick="toggleModuleConfig(this, '{module.name}')">
                 <label for="{module.name}">{module.display_name} <a href="#{module.name}-config" id="{module.name}-config-link" style="display:none;">(configure)</a></label>
             </div>
@@ -43,29 +45,29 @@ for module in all_modules_ordered_by_type:
         option = option.replace('_', ' ').title()
 
         # type - if value has 'choices', then it's a select
+        module_configs += "<div class='config-option'>"
         if 'choices' in value:
             module_configs += f"""
-                <div>
                     <label for="{module.name}-{option}">{option}</label>
                     <select id="{module.name}-{option}" name="{module.name}-{option}">
             """
             for choice in value['choices']:
                 module_configs += f"<option value='{choice}'>{choice}</option>"
-            module_configs += "</select></div>"
+            module_configs += "</select>"
         elif value.get('type') == 'bool' or isinstance(value.get('default', None), bool):
             module_configs += f"""
-                <div>
                     <input type="checkbox" id="{module.name}-{option}" name="{module.name}-{option}">
                     <label for="{module.name}-{option}">{option}</label>
-                </div>
             """
         else:
             module_configs += f"""
-                <div>
                     <label for="{module.name}-{option}">{option}</label>
                     <input type="text" id="{module.name}-{option}" name="{module.name}-{option}">
-                </div>
             """
+        # add help text
+        if 'help' in value:
+            module_configs += f"<div class='help'>{value.get('help')}</div>"
+        module_configs += "</div>"
     module_configs += "</div>"
 
 # format the settings.html jinja page with the module sections and module configuration sections

scripts/settings.html

@@ -7,6 +7,8 @@
     <style>
         .module-section { margin-bottom: 20px; }
         .module-config { display: none; }
+        .help {color: #333; font-size: 0.8em; margin-left: 10px;}
+        .config-option { margin-bottom: 10px; }
     </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
     <script>