add calset and calval input types

lib/spitask/config.json

@@ -69,7 +69,7 @@
                 "label": "DMS22B$i Zero",
                 "type": "calset",
                 "default": 2048,
-                "description": "Zero position (0...2^bits-1)",
+                "description": "Zero position (0...2^bits-1)\nuse the \"C\" button to open a calibrate dialog",
                 "category": "spisensors$b",
                 "capabilities": {
                     "DMS22B$i": "true"

web/index.css

@@ -114,6 +114,9 @@ body {
       display: flex;
       align-items: center;
   }
+  .value button {
+    margin-left: 0.5em;
+  }
   .hidden{
     display: none !important;
   }

web/index.html

@@ -193,6 +193,13 @@
   <h2 class="heading"></h2>
   <p class="val"></p>
 </div>
+<div class="hidden" id="calval">
+  <h2 class="heading"></h2>
+  <p class="val"></p>
+  <label>config
+    <input type="number"/>
+  </label>
+</div>
 </body>
 </html>
 

web/index.js

@@ -479,7 +479,7 @@ function createCalSetInput(configItem,frame,clazz){
     cb.addEventListener('click',(ev)=>{
         let cs=document.getElementById("calset").cloneNode(true);
         cs.classList.remove("hidden");
-        cs.querySelector(".heading").textContent=configItem.name;
+        cs.querySelector(".heading").textContent=configItem.label||configItem.name;
         let vel=cs.querySelector(".val");
         if (caliv != 0) window.clearInterval(caliv);
         caliv=window.setInterval(()=>{
@@ -510,6 +510,55 @@ function createCalSetInput(configItem,frame,clazz){
     el.setAttribute('name', configItem.name)
     return el;    
 }
+function createCalValInput(configItem,frame,clazz){
+    let el = addEl('input',clazz,frame);
+    let cb = addEl('button','',frame,'C');
+    //el.disabled=true;
+    cb.addEventListener('click',(ev)=>{
+        const sv=function(val,cfg){
+            if (configItem.eval){
+                let v=parseFloat(val);
+                let c=parseFloat(cfg);
+                return(eval(configItem.eval));
+            }
+            return v;
+        };
+        let cs=document.getElementById("calval").cloneNode(true);
+        cs.classList.remove("hidden");
+        cs.querySelector(".heading").textContent=configItem.label||configItem.name;
+        let vel=cs.querySelector(".val");
+        let vinp=cs.querySelector("input");
+        vinp.value=el.value;
+        if (caliv != 0) window.clearInterval(caliv);
+        caliv=window.setInterval(()=>{
+            if (document.body.contains(cs)){
+                fetch("/api/calibrate?name="+encodeURIComponent(configItem.name))
+                .then((r)=>r.text())
+                .then((txt)=>{
+                    txt=sv(txt,vinp.value);
+                    if (txt != vel.textContent){
+                        vel.textContent=txt;
+                    }
+                })
+                .catch((e)=>{
+                    alert(e);
+                    hideOverlay();
+                    window.clearInterval(caliv);
+                })
+            }
+            else{
+                window.clearInterval(caliv);
+            }
+        },200);        
+        showOverlay(cs,false,[{label:'Set',click:()=>{
+            el.value=vinp.value;
+            let cev=new Event('change');
+            el.dispatchEvent(cev);
+        }}]);
+    })
+    el.setAttribute('name', configItem.name)
+    return el;    
+}
 function createInput(configItem, frame,clazz) {
     let el;
     if (configItem.type === 'boolean' || configItem.type === 'list' || configItem.type == 'boatData') {
@@ -549,6 +598,9 @@ function createInput(configItem, frame,clazz) {
     if (configItem.type === "calset"){
         return createCalSetInput(configItem,frame,clazz);
     }
+    if (configItem.type === "calval"){
+        return createCalValInput(configItem,frame,clazz);
+    }
     el = addEl('input',clazz,frame);
     if (configItem.readOnly) el.setAttribute('disabled',true);
     el.setAttribute('name', configItem.name)