emon: side-by-side current and expected values

xoseperez · Aug 2, 2024 · af3f838 · af3f838
1 parent 2c8470c
commit af3f838
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/code/html/src/index.css b/code/html/src/index.css
@@ -123,6 +123,14 @@ div.center {
  margin: .5em 0 1em;
 }
 
+span.hidden {
+ content-visibility: hidden;
+}
+
+span.visible {
+ content-visibility: visible;
+}
+
 .webmode {
  display: none;
 }
@@ -189,11 +197,9 @@ label {
  text-align: left;
 }
 
-.emon-expected-pwrP,
-.emon-expected-volt,
-.emon-expected-curr,
-.emon-expected-ene {
- content-visibility: hidden;
+.emon-expected {
+ border-bottom: 1px solid #e5e5e5;
+ margin-bottom: 1.6em;
 }
 
 /* -----------------------------------------------------------------------------

diff --git a/code/html/src/sensor.mjs b/code/html/src/sensor.mjs
@@ -427,10 +427,10 @@ function initMagnitudesExpected(id) {
  expected.id = expected.name;
  expected.dataset["id"] = info.id.toString();
 
- const messageClass = `emon-visible-${info.prefix}`;
- if (!container.querySelector(`.emon-expected.${messageClass}`)) {
-  const [top] = template.querySelectorAll("div");
- top.classList.add(messageClass);
+ const [message] = /** @type {NodeListOf<HTMLSpanElement>} */
+  (template.querySelectorAll(`span.emon-expected-${info.prefix}`));
+ if (message) {
+ message.classList.replace("hidden", "visible");
  }
 
  mergeTemplate(container, template);

diff --git a/code/html/src/template-sns.html b/code/html/src/template-sns.html
@@ -1,7 +1,7 @@
-<template id="template-magnitude-info">
+<template id="template-magnitude-status">
  <div class="pure-control-group">
  <label></label>
- <input readonly class="pure-input-1-3" type="text" name="magnitude">
+ <input name="magnitude:" type="text" class="pure-input-1-3" readonly >
  <span class="pure-form-message-inline magnitude-info"></span>
  <span class="pure-form-message-inline magnitude-description"></span>
  </div>
@@ -15,14 +15,29 @@
 </template>
 
 <template id="template-emon-expected">
- <div class="pure-control-group">
- <label></label>
- <div class="pure-u-1 pure-u-lg-1-4">
+ <div class="pure-form pure-form-aligned emon-expected">
+ <div class="pure-control-group">
+ <label></label>
+ <input name="magnitude:" type="text" class="emon-magnitude-value" readonly >
+ <span class="pure-form-message-inline"></span>
+ </div>
+ <div class="pure-control-group">
+ <label>Ratio</label>
+ <input name="result:" type="text" class="emon-expected-result" readonly >
+ <span class="pure-form-message-inline"></span>
+ </div>
+ <div class="pure-control-group">
+ <label>Expected value</label>
  <input name="expected:" type="text" class="emon-expected-input">
- <input readonly name="result:" type="text" class="emon-expected-result">
+ <span class="pure-form-message-inline hidden emon-expected-pwrP">
+ In Watts (W). Calibrate your sensor connecting a pure resistive load (like a bulb) and enter here its nominal power or use a multimeter.
+ </span>
+ <span class="pure-form-message-inline hidden emon-expected-volt">
+ In Volts (V). Enter your the nominal AC voltage for your household or facility, or use multimeter to get this value.
+ </span>
+ <span class="pure-form-message-inline hidden emon-expected-curr">
+ In Amperes (A). If you are using a pure resistive load like a bulb, this will be the ratio between the two previous values, i.e. power / voltage. You can also use a current clamp around one of the power wires to get this value.
+ </span>
  </div>
- <span class="pure-form-message-inline emon-expected-pwrP">In Watts (W). Calibrate your sensor connecting a pure resistive load (like a bulb) and enter here its nominal power or use a multimeter.</span>
- <span class="pure-form-message-inline emon-expected-volt">In Volts (V). Enter your the nominal AC voltage for your household or facility, or use multimeter to get this value.</span>
- <span class="pure-form-message-inline emon-expected-curr">In Amperes (A). If you are using a pure resistive load like a bulb, this will be the ratio between the two previous values, i.e. power / voltage. You can also use a current clamp around one of the power wires to get this value.</span>
  </div>
 </template>