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

correct some js errors in example

This commit is contained in:
andreas 2024-11-14 18:33:18 +01:00
parent 538f643fbf
commit c292b82635
1 changed files with 83 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
lib/exampletask/index.js
View File

@ -5,60 +5,54 @@
//on our case this is "testboard" //on our case this is "testboard"
//so we only start any action when we receive the init event //so we only start any action when we receive the init event
//and we successfully checked that our requested capability is there //and we successfully checked that our requested capability is there
let isActive=false;
const tabName="example"; const tabName="example";
const configName="exampleBDSel"; const configName="exampleBDSel";
const infoUrl='https://github.com/wellenvogel/esp32-nmea2000/tree/master/lib/exampletask'; const infoUrl='https://github.com/wellenvogel/esp32-nmea2000/tree/master/lib/exampletask';
let boatItemName; let boatItemName;
let boatItemElement; let boatItemElement;
api.registerListener((id,data)=>{ api.registerListener((id, data) => {
if (isActive){
console.log("exampletask status listener",data);
}
},api.EVENTS.status)
api.registerListener((id,data)=>{
if (id === api.EVENTS.init){
//data is capabilities //data is capabilities
//check if our requested capability is there (see GwExampleTask.h) //check if our requested capability is there (see GwExampleTask.h)
if (data.testboard) isActive=true; if (!data.testboard) return; //do nothing if we are not active
if (isActive){
//add a simple additional tab page //add a simple additional tab page
//you will have to build the content of the page dynamically //you will have to build the content of the page dynamically
//using normal dom manipulation methods //using normal dom manipulation methods
//you can use the helper addEl to create elements //you can use the helper addEl to create elements
let page=api.addTabPage(tabName,"Example"); let page = api.addTabPage(tabName, "Example");
api.addEl('div','hdg',page,"this is a test tab"); api.addEl('div', 'hdg', page, "this is a test tab");
let vrow=api.addEl('div','row',page); let vrow = api.addEl('div', 'row', page);
api.addEl('span','label',vrow,'loops: '); api.addEl('span', 'label', vrow, 'loops: ');
let lcount=api.addEl('span','value',vrow,'0'); let lcount = api.addEl('span', 'value', vrow, '0');
//query the loop count //query the loop count
window.setInterval(()=>{ window.setInterval(() => {
fetch('/api/user/exampleTask/data') fetch('/api/user/exampleTask/data')
.then((res)=>{ .then((res) => {
if (! res.ok) throw Error("server error: "+res.status); if (!res.ok) throw Error("server error: " + res.status);
return res.text(); return res.text();
}) })
.then((txt)=>{ .then((txt) => {
lcount.textContent=txt; //set the text content of our value element with what we received
lcount.textContent = txt;
}) })
.catch((e)=>console.log("rq:",e)); .catch((e) => console.log("rq:", e));
},1000); }, 1000);
api.addEl('button','',page,'Info').addEventListener('click',function(ev){ api.addEl('button', '', page, 'Info').addEventListener('click', function (ev) {
window.open(infoUrl,'info'); window.open(infoUrl, 'info');
}) })
//add a tab for an external URL //add a tab for an external URL
api.addTabPage('exhelp','Info',infoUrl); api.addTabPage('exhelp', 'Info', infoUrl);
} //now as we know we are active - register all the listeners we need
} api.registerListener((id, data) => {
if (isActive){ console.log("exampletask status listener", data);
//console.log("exampletask listener",id,data); }, api.EVENTS.status)
if (id === api.EVENTS.tab){ api.registerListener((id, data) => {
if (data === tabName){ if (data === tabName) {
//maybe we need some activity when our page is being activated //maybe we need some activity when our page is being activated
console.log("example tab activated"); console.log("example tab activated");
} }
} }, api.EVENTS.tab);
if (id == api.EVENTS.config){
api.registerListener((id, data) => {
//we have a configuration that //we have a configuration that
//gives us the name of a boat data item we would like to //gives us the name of a boat data item we would like to
//handle special //handle special
@ -66,27 +60,27 @@
//css to the display field //css to the display field
//as this item can change we need to keep track of the //as this item can change we need to keep track of the
//last item we handled //last item we handled
let nextboatItemName=data[configName]; let nextboatItemName = data[configName];
console.log("value of "+configName,nextboatItemName); console.log("value of " + configName, nextboatItemName);
if (nextboatItemName){ if (nextboatItemName) {
//register a user formatter that will be called whenever //register a user formatter that will be called whenever
//there is a new valid value //there is a new valid value
//we simply add an "X:" in front //we simply add an "X:" in front
api.addUserFormatter(nextboatItemName,"m(x)",function(v,valid){ api.addUserFormatter(nextboatItemName, "m(x)", function (v, valid) {
if (!valid) return; if (!valid) return;
return "X:"+v; return "X:" + v;
}) })
//after this call the item will be recreated //after this call the item will be recreated
} }
if (boatItemName !== undefined && boatItemName != nextboatItemName){ if (boatItemName !== undefined && boatItemName != nextboatItemName) {
//if the boat item that we handle has changed, remove //if the boat item that we handle has changed, remove
//the previous user formatter (this will recreate the item) //the previous user formatter (this will recreate the item)
api.removeUserFormatter(boatItemName); api.removeUserFormatter(boatItemName);
} }
boatItemName=nextboatItemName; boatItemName = nextboatItemName;
boatItemElement=undefined; boatItemElement = undefined;
} }, api.EVENTS.config);
if (id == api.EVENTS.dataItemCreated){ api.registerListener((id, data) => {
//this event is called whenever a data item has //this event is called whenever a data item has
//been created (or recreated) //been created (or recreated)
//if this is the item we handle, we just add a css class //if this is the item we handle, we just add a css class
@ -94,15 +88,14 @@
//and use our formatter to directly write/draw the data //and use our formatter to directly write/draw the data
//avoid direct manipulation of the element (i.e. changing the classlist) //avoid direct manipulation of the element (i.e. changing the classlist)
//as this element remains there all the time //as this element remains there all the time
if (boatItemName && boatItemName == data.name){ if (boatItemName && boatItemName == data.name) {
boatItemElement=data.element; boatItemElement = data.element;
//use the helper forEl to find elements within the dashboard item //use the helper forEl to find elements within the dashboard item
//the value element has the class "dashValue" //the value element has the class "dashValue"
api.forEl(".dashValue",function(el){ api.forEl(".dashValue", function (el) {
el.classList.add("examplecss"); el.classList.add("examplecss");
},boatItemElement); }, boatItemElement);
} }
} }, api.EVENTS.dataItemCreated);
} }, api.EVENTS.init);
})
})(); })();