DIL5: improved version with new SVG and show ELOG

templates/common.css

@@ -27,7 +27,7 @@
     box-sizing: border-box;
   }
 
-  .top {
+  .access {
     padding: 0.75rem 1rem;
     text-align: center;
   }

templates/common.html

@@ -12,19 +12,20 @@
 
 <div class="page">
   <div class="left">
-     <div class="top">
-        <input type=radio id="readonly", onClick="setWritable(0);" checked>view only
-        <input type=radio id="writable", onClick="setWritable(1);"">ACTIVE
-     </div>
      <div class="svg-wrap">
         {% include svg %}
      </div>
-  <div class="bottom">
-    <textarea name="outputtext" id="outputtext" rows="5" readonly></textarea>
+     <div class="access">
+        <input type=radio id="readonly", onClick="setWritable(0);" checked>view only
+        <input type=radio id="writable", onClick="setWritable(1);"">ACTIVE
+     </div>
+     <div class="bottom">
+      <textarea name="outputtext" id="outputtext" rows="5" readonly></textarea>
+     </div>
+  </div>
+  <div class="right">
+  <iframe src='http://linse-c.psi.ch:8080/sample_environment/?Device={{ name }}&Title=procedure&mode=full'></iframe>
   </div>
-</div>
-<div class="right">
-<iframe src='http://linse-c.psi.ch:8080/sample_environment/?Device={{ name }}&Title=procedure&mode=full'></iframe>
 </div>
 </body>
 

templates/secop.js

@@ -9,7 +9,10 @@ var changeFuncs = {};
 var updateValues = {};
 
 function formatValue(value, prec) {
-    return Number(value.toPrecision(prec)).toString();
+    if (Math.abs(value) >= 0.1 || value == 0) {
+        return Number(value.toPrecision(prec)).toString();
+    }
+    return Number(value.toPrecision(prec)).toExponential();
 }
 
 function handle_describing(action, modpar, data) {
@@ -23,13 +26,13 @@ function handle_describing(action, modpar, data) {
         const elems = document.querySelectorAll("[id^='" + mod + ":']");
         let stateElement = null;
         let clickElement = null;
+        console.log('LOOK', mod);
         elems.forEach(elem => {
             let [parmod, ...func] = elem.id.split('-');
             const [mod, param] = parmod.split(':');
-            // console.log(mod, param, func);
             if (func.includes("click")) {
                 clickElement = elem;
-                console.log(mod, param, func, elem);
+                // console.log(mod, param, func, elem);
                 addClickListener(elem, mod, toggleTarget);
             }
             if (func.includes("fault")) {
@@ -39,13 +42,13 @@ function handle_describing(action, modpar, data) {
             }
             if (func.includes("state")) {
                 stateElement = elem;
+                console.log(mod, param, func, elem);
                 changeFuncs[mod + ":" + (param || 'value')] = function (value) {
                     changeFill(elem, value);
                 }
             }
             if (func.includes("text")) {
                 const pat = elem.textContent;
-                console.log('X', elem)
                 changeFuncs[mod + ":" + (param || 'value')] = function (value) {
                     let [repl, dot, fix] = pat.match(/\*(\.)?(\d)?/);
                     if (dot) {
@@ -54,11 +57,11 @@ function handle_describing(action, modpar, data) {
                        formatted = formatValue(value, fix || 5);
                     }
                     elem.textContent = pat.replace(repl, formatted);
-                    console.log('Y', elem)
+                    // console.log('Y', mod, param, elem.textContent)
                 }
             }
             if (func.includes("command")) {
-                console.log(func, mod, param);
+                // console.log(func, mod, param);
                 addClickListener(elem, mod + ":" + param, sendCommand);
             }
         })
@@ -126,6 +129,7 @@ function updateState(state) {
 function changeFill(element, state) {
     // stateElement = element.stateElement || element;
     element.state = state;
+    console.log(state, element.id);
     if (state in colors) {
         element.style.fill = colors[state];
     } else {