diff --git a/webinstall/build.yaml b/webinstall/build.yaml index fa372f8..163c713 100644 --- a/webinstall/build.yaml +++ b/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: @@ -171,47 +184,31 @@ types: - key: uni value: 1 label: "UNI" - description: "Select direction at Config UI" + 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 - key: RX - target: "define:#serial#RX" - mandatory: true - - <<: *gpiopin - key: TX - target: "define:#serial#TX" - mandatory: true + - *serialRX + - *serialTX - key: bi value: 2 label: "BiDir" - description: "Input and Output" + description: "Input and Output" + help: 'The serial device can run both receive and transmit. Typically for RS232.' children: - - <<: *gpiopin - key: RX - target: "define:#serial#RX" - mandatory: true - - <<: *gpiopin - key: TX - target: "define:#serial#TX" - mandatory: true + - *serialRX + - *serialTX - key: rx value: 3 label: "RX" description: "Input only" children: - - <<: *gpiopin - key: RX - target: "define:#serial#RX" - mandatory: true + - *serialRX - key: tx value: 1 label: "TX" description: "output only" children: - - <<: *gpiopin - key: TX - target: "define:#serial#TX" - mandatory: true + - *serialTX - &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" diff --git a/webinstall/cibuild.css b/webinstall/cibuild.css index c3ca0e1..5cb5cae 100644 --- a/webinstall/cibuild.css +++ b/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; @@ -165,4 +171,41 @@ .configui .row input{ 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; } \ No newline at end of file diff --git a/webinstall/cibuild.html b/webinstall/cibuild.html index 36ac0fa..67725f7 100644 --- a/webinstall/cibuild.html +++ b/webinstall/cibuild.html @@ -36,6 +36,7 @@
Build Flags
+
+
diff --git a/webinstall/cibuild.js b/webinstall/cibuild.js index 53b7054..cc242c7 100644 --- a/webinstall/cibuild.js +++ b/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={ - start:startBuild, - download:runDownload, - webinstall:webInstall, - uploadConfig: uploadConfig, - downloadConfig: downloadConfig - }; + const showOverlay=(text, isHtml)=>{ + let el = document.getElementById('overlayContent'); + if (isHtml) { + el.innerHTML = text; + el.classList.remove("text"); + } + 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 callback(v,false)); - if (v.description){ - 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); - } - } + addDescription(v,ef); 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);