intermediate: building build ui

webinstall/cibuild.css

@@ -94,3 +94,22 @@
 .configui #warn.warn{
     display: block;
 }
+.configui .radioFrame {
+    display: flex;
+    flex-direction: row;
+}
+.configui input.radioCi {
+    appearance: auto;
+    float: none;
+    opacity: 1;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    z-index: unset;
+}
+.configui .selector {
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid grey;
+}
+.configui .selector .title {
+    font-weight: bold;
+}

webinstall/cibuild.html

@@ -10,6 +10,9 @@
     <div class="configui container">
     <h1>Build your own ESP32-NMEA2000</h1>
     <h3>New Build</h3>
+    <div id="selectors">
+        
+    </div>
     <div class="row">
         <span class="label">Board type</span>
         <select id="environment" value="m5stack-atom-generic">

webinstall/cibuild.js

@@ -1,4 +1,4 @@
-import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enableEl, setValues, getParam, fillSelect, forEachEl } from "./helper.js";
+import { addEl, setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enableEl, setValues, getParam, fillSelect, forEachEl } from "./helper.js";
 import {load as yamlLoad} from "https://cdn.skypack.dev/js-yaml@4.1.0";
 (function(){
     const STATUS_INTERVAL=2000;
@@ -7,6 +7,8 @@ import {load as yamlLoad} from "https://cdn.skypack.dev/js-yaml@4.1.0";
     let currentPipeline=undefined;
     let downloadUrl=undefined;
     let timer=undefined;
+    let structure=undefined;
+    let config={};
     let branch=getParam('branch');
     if (! branch) branch='master';
     const showError=(text)=>{
@@ -132,6 +134,51 @@ import {load as yamlLoad} from "https://cdn.skypack.dev/js-yaml@4.1.0";
     const loadConfig=async (url)=>{
         let config=await fetch(url).then((r)=>r.text());
         let parsed=yamlLoad(config);
+        return parsed;
+    }
+    const buildSelector=(parent,config,prefix,current,callback)=>{
+        let frame=addEl('div','selector',parent);
+        let title=addEl('div','title',frame,config.label);
+        let name=prefix+"_"+config.key;
+        if (! config.values) return;
+        config.values.forEach((v)=>{
+            let ef=addEl('div','radioFrame',frame);
+            addEl('div','label',ef,v.label);
+            let re=addEl('input','radioCi',ef);
+            re.setAttribute('type','radio');
+            re.setAttribute('name',name);
+            re.setAttribute('value',v.value);
+            re.addEventListener('change',(ev)=>callback(v,ev));
+            if (v.description && v.url){
+                let lnk=addEl('a','radioDescription',ef,v.description);
+                lnk.setAttribute('href',v.url);
+                lnk.setAttribute('target','_');
+            }
+        });
+        return frame;
+    }
+    let selectors=[];
+    const buildSelectors=(prefix,configList)=>{
+        if (!configList) return;
+        let parent=document.getElementById("selectors");
+        if (!parent) return;
+        let frame=addEl('div','selectorFrame',parent);
+        selectors.push(frame);
+        let level=selectors.length-1;
+        configList.forEach((cfg)=>{
+            let name=prefix?(prefix+"_"+cfg.key):cfg.key;
+            let current=config[name];
+            buildSelector(frame,cfg,name,current,(cfg,ev)=>{
+                for (let i=level+1;i<selectors.length;i++){
+                    //TODO: remove already set values?
+                    selectors[i].remove();
+                }
+                config[name]=ev.target.value;
+                if (cfg.children){
+                    buildSelectors(name,cfg.children);
+                }
+            })
+        })
     }
     window.onload=async ()=>{ 
         setButtons(btConfig);
@@ -144,6 +191,7 @@ import {load as yamlLoad} from "https://cdn.skypack.dev/js-yaml@4.1.0";
             fetchStatus(true);
             setRunning(true);
         }
-        await loadConfig("testconfig.yaml");
+        structure=await loadConfig("testconfig.yaml");
+        buildSelectors(undefined,[structure.config.board]);
     }
 })();

webinstall/testconfig.yaml

@@ -3,6 +3,7 @@ types:
       type: select
       target: define
       label: 'M5 Atom light Base'
+      key: m5lightbase
       values:
         - label: "CAN KIT"
           value: M5_CAN_KIT
@@ -13,11 +14,33 @@ types:
           label: "Atomic RS232 Base"
           url: "http://docs.m5stack.com/en/atom/Atomic%20RS232%20Base"
         - value: M5_SERIAL_KIT_485
-          description: "M5 Stack RS484 Base"
+          description: "M5 Stack RS485 Base"
           label: "Atomic RS485 Base"
           url: "http://docs.m5stack.com/en/atom/Atomic%20RS485%20Base"
+  - &m5groovei2c
+    type: multi
+    key: m5groovei2c
+    label: "M5 I2C groove units"
+    values:
+      
+  - &m5grooveserial
+    type: select
+    label: "M5 Serial Unit"
+    target: define
+    key: m5grooveserial
+    values:
+      - label: "RS485"
+        value: SERIAL_GROOVE_485
+        description: "M5 RS485 unit"
+        url: "http://docs.m5stack.com/en/unit/rs485"
+      - label: "Tail485"
+        value: SERIAL_GROOVE_485
+        description: "M5 Tail 485"
+        url: "http://docs.m5stack.com/en/atom/tail485"
+
   - &m5groove
     type: select
+    key: m5groove
     label: 'M5 groove type'
     values:
       - label: 'CAN'
@@ -29,30 +52,13 @@ types:
         children:
         - *m5grooveserial
   
-  - &m5groovei2c
-    type: multi
-    label: "M5 I2C groove units"
-    values:
-      
-  - &m5grooveserial
-    type: select
-    label: "M5 Serial Unit"
-    target: define
-    values:
-      - label: "RS485"
-        value: SERIAL_GROOVE_485
-        description: "M5 RS485 unit"
-        url: "http://docs.m5stack.com/en/unit/rs485"
-      - label: "Tail485"
-        value: SERIAL_GROOVE_485
-        description: "M5 Tail 485"
-        url: "http://docs.m5stack.com/en/atom/tail485"
 
 config:
   board:
     type: select
     target: environment
     label: 'Board'
+    key: board
     values: 
       - value: m5stack-atom-generic
         label: m5stack-atom