Use myr_ as prefix in DOM.

keesverruijt · Sep 16, 2024 · ce5109c · ce5109c
1 parent ca672fa
commit ce5109c
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 56 deletions.
diff --git a/web/control.html b/web/control.html
@@ -8,10 +8,10 @@
     <script type="module" src="control.js"></script>
 </head>
 <body>
-  <div id="controller" class="controller">
-    <div id="title">Radar Controls</div>
-    <div id="error" class="error" style="visibility: hidden;"></div>
-    <div id="controls" class="control"> 
+  <div id="myr_controller" class="myr_controller">
+    <div id="myr_title">Radar Controls</div>
+    <div id="myr_error" class="myr_error" style="visibility: hidden;"></div>
+    <div id="myr_controls" class="myr_control"> 
     </div>  
   </div>
 </body>

diff --git a/web/control.js b/web/control.js
@@ -2,37 +2,41 @@ import van from "./van-1.5.2.debug.js";
 
 const {div, label, input, button, select, option} = van.tags
 
-var radar;
-var controls;
-var webSocket;
-var error_message;
+const prefix = 'myr_';
+
+var myr_radar;
+var myr_controls;
+var myr_webSocket;
+var myr_error_message;
 
 const StringValue = (id, name) =>
-  div({class: 'control'},
-    label({ for: id }, name),
-    input({ type: 'text', id: id, size: 20 })
+  div({class: 'myr_control'},
+    label({ for: prefix + id }, name),
+    input({ type: 'text', id: prefix + id, size: 20 })
   )
 
 const NumericValue = (id, name) =>
-  div({class: 'control'},
-    label({ for: id }, name),
-    div({ class: 'numeric' }),
-    input({ type: 'number', id: id, onchange: e => do_change(e), oninput: e => do_input(e) })
+  div({class: 'myr_control'},
+    label({ for: prefix + id }, name),
+    div({ class: 'myr_numeric' }),
+    input({ type: 'number', id: prefix + id, onchange: e => do_change(e), oninput: e => do_input(e) })
   )
 
 const RangeValue = (id, name, min, max, def, descriptions) =>
-  div({ class: 'control' },
-    label({ for: id }, name),
-    div({ class: 'description' }),
-    input({ type: 'range', id, min, max, value: def, onchange: e => do_change(e)})
+  div({ class: 'myr_control' },
+    label({ for: prefix + id }, name),
+    div({ class: 'myr_description' }),
+    input({ type: 'range', id: prefix + id, min, max, value: def, onchange: e => do_change(e)})
   )
 
 const SelectValue = (id, name, validValues, descriptions) => {
   let r =
-    div({ class: 'control' },
-      label({ for: id }, name),
-      div({ class: 'description' }),
-      select({ id, onchange: e => do_change(e) }, validValues.map(v => option({ value: v }, descriptions[v]))
+    div({ class: 'myr_control' },
+      label({ for: prefix + id }, name),
+      div({ class: 'myr_description' }),
+      select(
+        { id: prefix + id, onchange: e => do_change(e) },
+        validValues.map(v => option({ value: v }, descriptions[v]))
       )
     );
   return r;
@@ -45,7 +49,7 @@ class TemporaryMessage {
   element;
 
   constructor(id) {
-    this.element = document.getElementById(id);
+    this.element = get_element(id);
   }
 
   raise(aMessage) {
@@ -80,54 +84,54 @@ function restart(id) {
   setTimeout(loadRadars(id), 15000);
 }
 function radarsLoaded(id, d) {
-  radar = d[id];
+  myr_radar = d[id];
 
-  if (radar === undefined || radar.controls === undefined) {
+  if (myr_radar === undefined || myr_radar.controls === undefined) {
     restart(id);
     return;
   }
-  controls = radar.controls;
-  error_message = new TemporaryMessage('error');
+  myr_controls = myr_radar.controls;
+  myr_error_message = new TemporaryMessage('error');
 
   buildControls();
 
-  webSocket = new WebSocket(radar.controlUrl);
+  myr_webSocket = new WebSocket(myr_radar.controlUrl);
 
-  webSocket.onopen = (e) => {
+  myr_webSocket.onopen = (e) => {
     console.log("websocket open: " + JSON.stringify(e));
   }
-  webSocket.onclose = (e) => {
+  myr_webSocket.onclose = (e) => {
     console.log("websocket close: " + e);
     restart(id);
   }
-  webSocket.onmessage = (e) => {
+  myr_webSocket.onmessage = (e) => {
     let v = JSON.parse(e.data);
-    let i = document.getElementById(v.id);
-    let control = controls[v.id];
+    let i = get_element(v.id);
+    let control = myr_controls[v.id];
 
     i.value = v.value;
     console.log("<- " + e.data + " = " + control.name + " = " + i.value);
-    let n = i.parentNode.querySelector('.numeric');
+    let n = i.parentNode.querySelector('.myr_numeric');
     if (n) n.innerHTML = v.value;
-    let d = i.parentNode.querySelector('.description');
+    let d = i.parentNode.querySelector('.myr_description');
     if (d) {
       let description = (control.descriptions) ? control.descriptions[v.value] : undefined;
       if (!description) description = v.value;
       d.innerHTML = description;
     }
     if (v.error) {
-      error_message.raise(v.error);
+      myr_error_message.raise(v.error);
     }
   }
 }
 
 function buildControls() {
-  let c = document.getElementById('title');
+  let c = get_element('title');
   c.innerHTML = "";
-  van.add(c, div(radar.name + " Controls"));
+  van.add(c, div(myr_radar.name + " Controls"));
 
-  c = document.getElementById('controls');
-  for (const [k, v] of Object.entries(controls)) {
+  c = get_element('controls');
+  for (const [k, v] of Object.entries(myr_controls)) {
     van.add(c, (v['isStringValue'])
       ? StringValue(k, v.name)
       : ('validValues' in v)
@@ -136,31 +140,45 @@ function buildControls() {
           ? RangeValue(k, v.name, v.minValue, v.maxValue, 0, 'descriptions' in v)
           : NumericValue(k, v.name));
     if (v['isReadOnly']) {
-      document.getElementById(k).setAttribute('readonly', 'true');
+      get_element(k).setAttribute('readonly', 'true');
     } else if (v['isStringValue']) {
-      van.add(document.getElementById(k).parentNode, SetButton());
+      van.add(get_element(k).parentNode, SetButton());
     }
   }
-  console.log(controls);
 }
 
 function do_change(e) {
   let v = e.target;
-  console.log("change " + e + " " + v.id + "=" + v.value);
-  let cv = JSON.stringify({ id: v.id, value: v.value });
-  webSocket.send(cv);
-  console.log(controls[v.id].name + "-> " + cv);
+  let id = strip_prefix(v.id);
+  console.log("change " + e + " " + id + "=" + v.value);
+  let cv = JSON.stringify({ id: id, value: v.value });
+  myr_webSocket.send(cv);
+  console.log(controls[id].name + "-> " + cv);
 }
 
 function do_button(e) {
   let v = e.target.previousElementSibling;
-  console.log("set_button " + e + " " + v.id + "=" + v.value);
-  let cv = JSON.stringify({ id: v.id, value: v.value });
-  webSocket.send(cv);
-  console.log(controls[v.id].name + "-> " + cv);
+  let id = strip_prefix(v.id);
+  console.log("set_button " + e + " " + id + "=" + v.value);
+  let cv = JSON.stringify({ id: id, value: v.value });
+  myr_webSocket.send(cv);
+  console.log(myr_controls[id].name + "-> " + cv);
 }
 
 function do_input(e) {
   let v = e.target;
   console.log("input " + e + " " + v.id + "=" + v.value);
 }
+
+function get_element(id) {
+  let did = prefix + id;
+  let r = document.getElementById(did);
+  return r;
+}
+
+function strip_prefix(id) {
+  if (id.startsWith(prefix)) {
+    return id.substr(prefix.length);
+  }
+  return id;
+}
diff --git a/web/style.css b/web/style.css
@@ -9,26 +9,26 @@ html {
   background: #000000;
 }
 
-div.controller {
+div.myr_controller {
   display: block;
   width: 200px;
 }
 
-div.error {
+div.myr_error {
   display: block;
   border-width: 0px;
   background-color: firebrick;
   color: wheat;
 }
 
-div.control {
+div.myr_control {
   display: block;
   border-style: solid;
   border-radius: 3px;
   border-color: lightskyblue;
 }
 
-div.description {
+div.myr_description {
   display: block;
 }