introduce a help button, show build command

webinstall/build.yaml

@@ -107,6 +107,7 @@ types:
     type: select
     key: m5groove
     label: 'M5 groove type'
+    help: 'Select the functionality that should be available at the M5 groove pins'
     values:
       - key: 'CAN'
         children:
@@ -120,6 +121,7 @@ types:
   - &gpiopin
     type: dropdown
     resource: "gpio:"
+    help: 'Select the number of the GPIO pin for this function'
     values:
       - {label: unset,value:}
       - 0
@@ -159,7 +161,18 @@ types:
       - 38
       - 39
   
-  
+  - &serialRX
+    <<: *gpiopin
+    key: RX
+    help: 'number of the GPIO pin for the receive function'
+    target: "define:#serial#RX"
+    mandatory: true
+  - &serialTX
+    <<: *gpiopin
+    key: TX
+    help: 'number of the GPIO pin for the transmit function'
+    target: "define:#serial#TX"
+    mandatory: true
   - &serialValues
       - key: true
         children:
@@ -172,46 +185,30 @@ types:
               value: 1
               label: "UNI"
               description: "Select direction at Config UI"
+              help: 'On the config UI you can select if the serial should be a transmitter or a receiver'    
               children:
-                - <<: *gpiopin
+                - *serialRX
-                  key: RX
+                - *serialTX
-                  target: "define:#serial#RX"
-                  mandatory: true
-                - <<: *gpiopin
-                  key: TX
-                  target: "define:#serial#TX"
-                  mandatory: true
             - key: bi
               value: 2
               label: "BiDir" 
               description: "Input and Output"
+              help: 'The serial device can run both receive and transmit. Typically for RS232.'   
               children:
-                - <<: *gpiopin
+                - *serialRX
-                  key: RX
+                - *serialTX
-                  target: "define:#serial#RX"
-                  mandatory: true
-                - <<: *gpiopin
-                  key: TX
-                  target: "define:#serial#TX"
-                  mandatory: true
             - key: rx
               value: 3
               label: "RX"    
               description: "Input only"
               children:
-                - <<: *gpiopin
+                - *serialRX
-                  key: RX
-                  target: "define:#serial#RX"
-                  mandatory: true
             - key: tx
               value: 1
               label: "TX"
               description: "output only"    
               children:
-                - <<: *gpiopin
+                - *serialTX
-                  key: TX
-                  target: "define:#serial#TX"      
-                  mandatory: true
   - &serial1
     type: checkbox
     label: 'Serial 1'
@@ -230,7 +227,7 @@ types:
 
   - &can
     type: checkbox
-    label: CAN
+    label: CAN(NMEA2000)
     key: can
     values:
       - key: true
@@ -239,11 +236,13 @@ types:
             label: RX
             key: rx
             mandatory: true
+            help: 'set the number of the GPIO pin for the CAN(NMEA2000) RX function'
             target: "define:ESP32_CAN_RX_PIN"
           - <<: *gpiopin
             label: TX
             key: tx
             mandatory: true
+            help: 'set the number of the GPIO pin for the CAN(NMEA2000) TX function'
             target: "define:ESP32_CAN_TX_PIN"
 
 

webinstall/cibuild.css

@@ -85,7 +85,7 @@
     display: flex;
 }
 .configui .hidden{
-    display: none;
+    display: none !important;
 }
 .configui .dialog{
     max-width: 35em;
@@ -106,6 +106,7 @@
 .configui .radioFrame {
     display: flex;
     flex-direction: row;
+    align-items: center;
 }
 .configui input.radioCi {
     appearance: auto;
@@ -152,6 +153,11 @@
     width: 10em;
     font-weight: normal !important;
 }
+.configui .titleFrame {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
 
 .configui form#upload {
     width: 0;
@@ -166,3 +172,40 @@
     flex-grow: 1;
     width: initial;
 }
+.configui .overlayContainer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #80808070;
+    display: flex;
+    overflow-y: auto;
+}
+
+.configui .overlay {
+    margin: auto;
+    background-color: white;
+    padding: 0.5em;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+.configui .overlayContent {
+    padding: 0.5em;
+}
+.configui div#overlayContent.text{
+  white-space: pre-line;
+}
+.configui .overlayButtons {
+    border-top: 1px solid grey;
+    padding-top: 0.5em;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+}
+.configui button.help {
+    margin-left: 1em;
+    width: 2em;
+    height: 2em;
+    line-height: 1em;
+}

webinstall/cibuild.html

@@ -36,6 +36,7 @@
     <div class="row">
         <span class="label">Build Flags</span>
         <div class="value" id="buildflags"></div>
+        <button class="help" id="buildCommand">?</button>
     </div>
     <div class="row hidden error">
         <span class="label">Error</span>
@@ -65,6 +66,16 @@
         <button id="download">Download</button>
         <button id="webinstall">Install</button>
     </div>
+    <div class="overlayContainer hidden" id="overlayContainer">
+        <div id="overlay" class="overlay">
+          <div id="overlayContent" class="overlayContent">
+            AHA
+          </div>
+          <div class="overlayButtons">
+            <button id="hideOverlay">Close</button>
+          </div>
+        </div>
+      </div>
     <iframe id="dlframe" width="1" height="1"></iframe>
     <form id="upload">
         <input type="file" id="fileSelect"/>

webinstall/cibuild.js

@@ -78,6 +78,7 @@ class PipelineInfo{
         setVisible('error',currentPipeline.error!==undefined,true);
         let values={};
         fillValues(values,['configError','environment']);
+        setVisible('buildCommand',values.environment !== "" && ! values.configError);
         if (values.configError) {
             enableEl('start',false);
             return;
@@ -233,13 +234,23 @@ class PipelineInfo{
         let name="buildconfig.json";
         fileDownload(JSON.stringify(config),name);
     }
-    const btConfig={
+    const showOverlay=(text, isHtml)=>{
-        start:startBuild,
+        let el = document.getElementById('overlayContent');
-        download:runDownload,
+        if (isHtml) {
-        webinstall:webInstall,
+            el.innerHTML = text;
-        uploadConfig: uploadConfig,
+            el.classList.remove("text");
-        downloadConfig: downloadConfig
+        }
-    };
+        else {
+            el.textContent = text;
+            el.classList.add("text");
+        }
+        let container = document.getElementById('overlayContainer');
+        container.classList.remove('hidden');
+    }
+    const hideOverlay=()=> {
+        let container = document.getElementById('overlayContainer');
+        container.classList.add('hidden');
+    }
     const loadConfig=async (url)=>{
         let config=await fetch(url).then((r)=>{
             if (!r.ok) throw new Error("unable to fetch: "+r.statusText);
@@ -248,6 +259,26 @@ class PipelineInfo{
         let parsed=yamlLoad(config);
         return parsed;
     }
+    const showBuildCommand=()=>{
+        let v={};
+        fillValues(v,['environment','buildflags']);
+        if (v.environment !== ""){
+            let help="Run the build from a command line:\nPLATFORMIO_BUILD_FLAGS=\"";
+            help+=v.buildflags;
+            help+="\" pio run -e "+v.environment;
+            showOverlay(help);
+        }
+    }
+    const btConfig={
+        start:startBuild,
+        download:runDownload,
+        webinstall:webInstall,
+        uploadConfig: uploadConfig,
+        downloadConfig: downloadConfig,
+        hideOverlay: hideOverlay,
+        buildCommand: showBuildCommand
+    };
+    
     
     const PATH_ATTR='data-path';
     const SEPARATOR=':';
@@ -289,6 +320,28 @@ class PipelineInfo{
         lst.forEach((e)=>rt.push(expandObject(e,parent)));
         return rt;
     }
+
+    const addDescription=(v,frame)=>{
+        if (frame === undefined) return;
+        if (v.description){ 
+            if(v.url) {
+                let lnk = addEl('a', 'radioDescription', frame, v.description);
+                lnk.setAttribute('href', v.url);
+                lnk.setAttribute('target', '_');
+            }
+            else{
+                let de=addEl('span','radioDescription',frame,v.description);
+            }
+        }
+        if (v.help){
+            let bt=addEl('button','help',frame,'?');
+            bt.addEventListener('click',()=>showOverlay(v.help));
+        }
+        else if (v.helpHtml){
+            let bt=addEl('button','help',frame,'?');
+            bt.addEventListener('click',()=>showOverlay(v.helpHtml,true));
+        }    
+    }
     /**
      * 
      * @param {build a selector} parent 
@@ -305,8 +358,10 @@ class PipelineInfo{
         let frame=addEl('div','selector level'+level.length+' t'+config.type,parent);
         frame.setAttribute(PATH_ATTR,name);
         let inputFrame=addEl('div','inputFrame',frame);
+        let titleFrame=undefined;
         if (config.label !== undefined){
-            addEl('div','title t'+config.type,inputFrame,config.label);
+            titleFrame=addEl('div','titleFrame t'+config.type,inputFrame);
+            addEl('div','title t'+config.type,titleFrame,config.label);
         }
         let initialConfig=undefined
         if (config.type === 'frame' || config.type === undefined){
@@ -321,6 +376,7 @@ class PipelineInfo{
             }
         })
         if (config.type === 'select') {
+            addDescription(config,titleFrame);
             for (let idx=0;idx<expandedValues.length;idx++){
                 let v=expandedValues[idx];
                 if (v.key === undefined) continue;
@@ -330,16 +386,7 @@ class PipelineInfo{
                 re.setAttribute('type', 'radio');
                 re.setAttribute('name', name);
                 re.addEventListener('change', (ev) => callback(v,false));
-                if (v.description){ 
+                addDescription(v,ef);
-                    if(v.url) {
-                        let lnk = addEl('a', 'radioDescription', ef, v.description);
-                        lnk.setAttribute('href', v.url);
-                        lnk.setAttribute('target', '_');
-                    }
-                    else{
-                        let de=addEl('span','radioDescription',ef,v.description);
-                    }
-                }
                 if (v.key == current) {
                     re.setAttribute('checked','checked');
                     initialConfig=v;
@@ -358,6 +405,7 @@ class PipelineInfo{
                     initialConfig=v;
                 }
             };
+            addDescription(config,inputFrame);
             sel.addEventListener('change',(ev)=>{
                 let v=expandedValues[ev.target.value];
                 if (! v) return;
@@ -386,6 +434,7 @@ class PipelineInfo{
                 else{
                     initialConfig=inact;
                 }
+                addDescription(config,inputFrame);
                 cb.addEventListener('change',(ev)=>{
                     if (ev.target.checked){
                         callback(act,false);