thooge
/
esp32-nmea2000-obp60
mirror of https://github.com/thooge/esp32-nmea2000-obp60.git
1
0
Fork 0
Code Releases Activity

introduce a help button, show build command

This commit is contained in:
andreas 2023-10-11 16:16:57 +02:00
parent 80ab2224ce
commit 70345f0b79
4 changed files with 149 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
webinstall/build.yaml
View File

@ -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"

45
webinstall/cibuild.css
View File

@ -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;
}

11
webinstall/cibuild.html
View File

@ -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"/>

85
webinstall/cibuild.js
View File

@ -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<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){
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);