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

intermediate: prepare custom install in webinstaller

This commit is contained in:
andreas 2023-09-06 12:22:33 +02:00
parent 0e0be14415
commit a9396798ce
7 changed files with 283 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
webinstall/cibuild.css
View File

@ -1,3 +1,96 @@
.hidden{
display: none;
}
/* reused stuff from configui */
.configui.container{
max-width: 35em;
margin-left: auto;
margin-right: auto;
position: relative;
}
.configui .info{
margin-bottom: 1em;
opacity: 0.6;
white-space: pre-line;
}
.configui .parameters {
border-bottom: 1px solid grey;
margin-bottom: 1em;
}
.configui .row input[type="checkbox"] {
flex-grow: 1;
appearance: auto;
}
.configui .row {
display: flex;
flex-direction: row;
margin: 0.5em;
flex-wrap: unset;
padding: 0;
}
.configui .row .label {
width: 10em;
opacity: 0.6;
padding: 0;
}
.configui .since {
display: block;
font-size: 0.8em;
}
.configui input[type=checkbox] {
width: 1.5em;
height: 1.5em;
opacity: 1;
z-index: unset;
}
.configui .buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.configui button {
padding: 0.5em;
}
.configui .footer {
text-align: right;
margin-top: 1em;
font-size: 0.8em;
}
.configui .visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.configui .dialogBack {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background-color: #8a8c8ec7;
display: flex;
}
.configui .hidden{
display: none;
}
.configui .dialog{
max-width: 35em;
margin: auto;
background-color: white;
padding: 2em;
}
.configui #warn{
display: none;
color: red;
}
.configui #warn.warn{
display: block;
}

32
webinstall/cibuild.html
View File

@ -7,32 +7,40 @@
</head>
<body>
<div class="configui container">
<h1>Build your own ESP32-NMEA2000</h1>
<div class="xrow">
<label>Board type</label>
<div class="row">
<span class="label">Board type</span>
<input type="text" id="environment" value="m5stack-atom-generic">
</div>
<div class="xrow">
<label>Build Flags</label>
<div class="row">
<span class="label">Build Flags</span>
<input type="text" id="buildflags" value="">
</div>
<div class="xrow">
<div class="row">
<button id="start">Start</button>
</div>
<div class="xrow">
<label>Pipeline Id</label>
<div class="row">
<span class="label">Job Id</span>
<div id="pipeline">---</div>
</div>
<div class="xrow">
<label>Status</label>
<div class="row">
<span class="label">Status</span>
<div id="status">---</div>
</div>
<div class="xrow hidden">
<a target="_" id="link">WebStatus</a>
<div class="row hidden error">
<span class="label">Error</span>
<div class="value" id="error"></div>
</div>
<div class="xrow hidden">
<div class="row hidden">
<span class="label">Web Status</span>
<a target="_" id="status_url">Link</a>
</div>
<div class="row hidden">
<button id="download">Download</button>
<button id="webinstall">Install</button>
</div>
<iframe id="dlframe" width="1" height="1"></iframe>
</div>
</body>
</html>

71
webinstall/cibuild.js
View File

@ -1,4 +1,4 @@
import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enableEl } from "./helper";
import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enableEl, setValues } from "./helper";
(function(){
const STATUS_INTERVAL=2000;
const CURRENT_PIPELINE='pipeline';
@ -6,37 +6,56 @@ import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enabl
let currentPipeline=undefined;
let downloadUrl=undefined;
let timer=undefined;
const fetchStatus=()=>{
const showError=(text)=>{
if (text === undefined){
setVisible('buildError',false,true);
return;
}
setValue('buildError',text);
setVisible('buildError',true,true);
}
const setRunning=(active)=>{
if (active){
downloadUrl=undefined;
showError();
setVisible('download',false,true);
setVisible('status_url',false,true);
}
enableEl('start',!active);
}
const fetchStatus=(initial)=>{
if (currentPipeline === undefined) return;
fetchJson(API,{api:'status',pipeline:currentPipeline})
.then((st)=>{
setValue('status',st.status);
let l=document.getElementById('link');
if (l){
if (st.status_url){
l.setAttribute('href',st.status_url);
setVisible(l.parentElement,true);
}
else{
setVisible(l.parentElement,false);
}
setValues(st);
setVisible('status_url',st.status_url !== undefined,true);
setVisible('error',st.error !== undefined,true);
if (st.status === 'error'){
setRunning(false);
setVisible('download',false,true);
return;
}
if (st.status === 'success'){
enableEl('start',true);
setRunning(false);
fetchJson(API,{api:'artifacts',pipeline:currentPipeline})
.then((ar)=>{
if (! ar.items || ar.items.length < 1){
throw new Error("no download link");
}
downloadUrl=ar.items[0].url;
setVisible(document.getElementById('download'),true,true);
downloadUrl=buildUrl(API,{
download: currentPipeline
});
setVisible('download',true,true);
})
.catch((err)=>alert("Unable to get build result: "+err));
.catch((err)=>{
showError("Unable to get build result: "+err);
setVisible('download',false,true);
});
return;
}
else{
setVisible(document.getElementById('download'),false,true);
setVisible('download',false,true);
}
timer=window.setTimeout(fetchStatus,STATUS_INTERVAL)
})
@ -55,6 +74,7 @@ import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enabl
timer=undefined;
fillValues(param,['environment','buildflags']);
setValue('status','requested');
setRunning(true);
fetchJson(API,Object.assign({
api:'start'},param))
.then((json)=>{
@ -65,13 +85,12 @@ import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enabl
setCurrentPipeline(json.id);
setValue('pipeline',currentPipeline);
setValue('status',json.status);
enableEl('start',false);
timer=window.setTimeout(fetchStatus,STATUS_INTERVAL);
})
.catch((err)=>{
setRunning(false);
setValue('status','error');
enableEl('start',true);
alert(err);
showError(err);
});
}
const runDownload=()=>{
@ -82,17 +101,23 @@ import { setButtons,fillValues, setValue, buildUrl, fetchJson, setVisible, enabl
df.setAttribute('src',downloadUrl);
}
}
const webInstall=()=>{
if (! downloadUrl) return;
let url=buildUrl("install.html",{custom:downloadUrl});
window.location.href=url;
}
const btConfig={
start:startBuild,
download:runDownload
download:runDownload,
webinstall:webInstall
};
window.onload=()=>{
setButtons(btConfig);
currentPipeline=window.localStorage.getItem(CURRENT_PIPELINE);
if (currentPipeline){
setValue('pipeline',currentPipeline);
enableEl('start',false);
fetchStatus();
setRunning(true);
fetchStatus(true);
}
}
})();

1
webinstall/cibuild.php
View File

@ -192,6 +192,7 @@ try {
}
$dlurl = $astat['items'][0]['url'];
#echo("DL: $dlurl\n");
header('Content-Disposition: attachment; filename="'.$astat['items'][0]['path'].'"');
proxy($dlurl);
exit(0);
}

18
webinstall/helper.js
View File

@ -62,6 +62,21 @@ const setValue=(id,value)=>{
}
if (el.tagName == 'INPUT'){
el.value=value;
return;
}
if (el.tagName == 'A'){
el.setAttribute('href',value);
return;
}
}
const setValues=(data,translations)=>{
for (let k in data){
let id=k;
if (translations){
let t=translations[k];
if (t !== undefined) id=t;
}
setValue(id,data[k]);
}
}
const buildUrl=(url,pars)=>{
@ -80,6 +95,7 @@ const fetchJson=(url,pars)=>{
return fetch(furl).then((rs)=>rs.json());
}
const setVisible=(el,vis,useParent)=>{
if (typeof(el) !== 'object') el=document.getElementById(el);
if (! el) return;
if (useParent) el=el.parentElement;
if (! el) return;
@ -93,4 +109,4 @@ const enableEl=(id,en)=>{
else el.disabled=true;
}
export { getParam, addEl, forEachEl,setButtons,fillValues, setValue,buildUrl,fetchJson,setVisible, enableEl }
export { getParam, addEl, forEachEl,setButtons,fillValues, setValue,setValues,buildUrl,fetchJson,setVisible, enableEl }

85
webinstall/install.js
View File

@ -1,6 +1,7 @@
import {XtermOutputHandler} from "./installUtil.js";
import ESPInstaller from "./installUtil.js";
import { addEl, getParam } from "./helper.js";
import * as zip from "https://cdn.jsdelivr.net/npm/@zip.js/zip.js@2.7.29/+esm";
(function(){
let espLoaderTerminal;
let espInstaller;
@ -21,11 +22,11 @@ import { addEl, getParam } from "./helper.js";
alert(txt);
}
}
const buildHeading=(user,repo,element)=>{
const buildHeading=(info,element)=>{
let hFrame=document.querySelector(element||'.heading');
if (! hFrame) return;
hFrame.textContent='';
let h=addEl('h2',undefined,hFrame,`ESP32 Install ${user}:${repo}`)
let h=addEl('h2',undefined,hFrame,`ESP32 Install ${info}`)
}
const checkChip=(chipFamily,assetName)=>{
//for now only ESP32
@ -100,7 +101,7 @@ import { addEl, getParam } from "./helper.js";
let line=addEl('div','item',bFrame);
addEl('div','itemTitle',line,item.label);
let btLine=addEl('div','buttons',line);
let tb=addEl('button','installButton',line,'Initial');
let tb=addEl('button','installButton',btLine,'Initial');
tb.addEventListener('click',async ()=>{
enableConsole(false,true);
await espInstaller.installClicked(
@ -113,7 +114,7 @@ import { addEl, getParam } from "./helper.js";
)
enableConsole(true);
});
tb=addEl('button','installButton',line,'Update');
tb=addEl('button','installButton',btLine,'Update');
tb.addEventListener('click',async ()=>{
enableConsole(false,true);
await espInstaller.installClicked(
@ -129,23 +130,85 @@ import { addEl, getParam } from "./helper.js";
}
}
const buildCustomButtons = (name, updateData, fullData,version,element) => {
let bFrame = document.querySelector(element || '.content');
if (!bFrame) return;
bFrame.textContent = '';
addEl('div', 'version', bFrame, "Custom Installation");
let btLine = addEl('div', 'buttons', bFrame);
let tb = addEl('button', 'installButton', btLine, 'Initial');
tb.addEventListener('click', async () => {
enableConsole(false, true);
await espInstaller.runFlash(
true,
fullData,
4096,
version,
(ch) => checkChip(ch, name)
)
enableConsole(true);
});
tb = addEl('button', 'installButton', btLine, 'Update');
tb.addEventListener('click', async () => {
enableConsole(false, true);
await espInstaller.runFlash(
false,
updateData,
65536,
version,
(ch) => checkChip(ch, name)
)
enableConsole(true);
});
}
const showLoading=(on)=>{
};
window.onload = async () => {
if (! ESPInstaller.checkAvailable()){
showError("your browser does not support the ESP flashing (no serial)");
return;
}
let user = window.gitHubUser||getParam('user');
let repo = window.gitHubRepo || getParam('repo');
if (!user || !repo) {
alert("missing parameter user or repo");
let custom=getParam('custom');
let user;
let repo;
if (! custom){
user = window.gitHubUser||getParam('user');
repo = window.gitHubRepo || getParam('repo');
if (!user || !repo) {
alert("missing parameter user or repo");
}
}
try {
espLoaderTerminal = new XtermOutputHandler('terminal');
espInstaller = new ESPInstaller(espLoaderTerminal);
buildHeading(user, repo);
buildConsoleButtons();
releaseData = await espInstaller.getReleaseInfo(user, repo);
buildButtons(user, repo);
if (! custom){
buildHeading(`${user}:${repo}`);
releaseData = await espInstaller.getReleaseInfo(user, repo);
buildButtons(user, repo);
}
else{
showLoading(true);
let reader= new zip.HttpReader(custom);
let zipReader= new zip.ZipReader(reader);
const entries=(await zipReader.getEntries());
let fullData;
let updateData;
let base="";
for (let i=0;i<entries.length;i++){
if (entries[i].filename.match(/-all.bin$/)){
fullData=await(entries[i].getData(new zip.BlobWriter()))
base=entries[i].filename.replace("-all.bin","");
}
if (entries[i].filename.match(/-update.bin$/)){
updateData=await(entries[i].getData(new zip.BlobWriter()))
base=entries[i].filename.replace("-update.bin","");
}
}
buildCustomButtons("dummy",updateData,fullData,base);
showLoading(false);
}
} catch(error){alert("unable to query release info for user "+user+", repo "+repo+": "+error)};
}
})();

30
webinstall/installUtil.js
View File

@ -268,6 +268,36 @@ class ESPInstaller{
alert(`Error: ${e}`);
}
}
/**
* directly run the flash
* @param {*} isFull
* @param {*} address
* @param {*} imageData the data to be flashed
* @param {*} version the info shown in the dialog
* @returns
*/
async runFlash(isFull,address,imageData,version,assetName){
try {
await this.connect();
if (typeof (assetName) === 'function') {
assetName(this.getChipFamily()); //just check
}
let fileList = [
{ data: imageData, address: address }
];
let txt = isFull ? "baseImage (all data will be erased)" : "update";
if (!confirm(`ready to install ${version}\n${txt}`)) {
this.espLoaderTerminal.writeLine("aborted by user...");
await this.disconnect();
return;
}
await this.writeFlash(fileList);
await this.disconnect();
} catch (e) {
this.espLoaderTerminal.writeLine(`Error: ${e}`);
alert(`Error: ${e}`);
}
}
/**
* fetch the release info from the github API
* @param {*} user