board-templates.htm

<div class="card" u-control="air" id="${id}" microID="${id}" u-is="generic">
  <div u-is="include" ref=".cHead"></div>
  <hr />
  <div class="main" style="display: flex;flex-wrap: wrap;column-gap: 1rem;">
    <div style="flex: 1;min-width:8rem;text-align:center;display:none" u-display="temperature">
      <div style="font-size: 2rem"><span u-text="temperature"></span>&deg;C</div>
      <div>Temperature</div>
    </div>
    <div style="flex: 1;min-width:8rem;text-align:center;display:none" u-display="humidity">
      <div style="font-size: 2rem"><span u-text="humidity"></span>%</div>
      <div>Humidity</div>
    </div>
    <div style="flex: 1;min-width:8rem;text-align:center;display:none" u-display="co2">
      <div style="font-size: 2rem"><span u-text="co2"></span></div>
      <div>CO2 (ppm)</div>
    </div>
    <div style="flex: 1;min-width:8rem;text-align:center;display:none" u-display="pressure">
      <div style="font-size: 2rem"><span u-text="pressure"></span></div>
      <div>Pressure</div>
    </div>
    <div style="flex: 1;min-width:8rem;text-align:center;display:none" u-display="gas">
      <div style="font-size: 2rem"><span u-text="gas"></span></div>
      <div>VOC</div>
    </div>
  </div>
</div>

<div class="card" u-control="dallas" id="${id}" microID="${id}" u-is="generic">
  <div u-is="include" ref=".cHead"></div>
  <hr />
  <div class="main" style="display: flex;">
    <div style="flex: 1">
      <div style="font-size: 2rem"><span u-text="temperature"></span>&deg;C</div>
      <div>Temperature</div>
    </div>
  </div>
</div>

<form method="dialog" class="card" u-control="timer" microID="${id}" u-is="timer">
  <div u-is="include" ref=".cHead"></div>
  <span class="u-bool ux-value" u-active="value" style="top:2rem;"></span>
  <fieldset class="block btn-group">
    <legend>Mode</legend>
    <label><input name="mode" u-value="mode" type="radio" value="off">Off</label>
    <label><input name="mode" u-value="mode" type="radio" value="on">On</label>
    <label><input name="mode" u-value="mode" type="radio" value="timer">Timer</label>
  </fieldset>

  <div class="main">
    <div class="u-bar">
      <span class="pulse"></span>
      <span class="current"></span>
    </div>
  </div>
  <div class="footer form-actions">
    <button u-action="start" value="1">Start</button>
    <button u-action="next" value="1">Next</button>
  </div>
</form>


<div class="card" u-control="button" microID="${id}" u-is="button">
  <div class="main"><button u-text="title"></button></div>
</div>

<div class="card" u-control="digitalvalue" microID="${id}" u-is="generic">
  <div u-is="include" ref=".cHead"></div>
  <div class="main">
    <span class="u-bool ux-value" u-active="value" style="position: absolute;top:0.5rem;right:0.5rem"></span>
    <div class="form-grid"><label>Value:</label><output u-text="value"></output></div>
  </div>
</div>

<div class="card" u-control="reference" microID="${id}" u-is="generic">
  <div u-is="include" ref=".cHead"></div>
  <div class="main">
    <span class="u-bool ux-value" u-active="value" style="position: absolute;top:0.5rem;right:0.5rem"></span>
    <div class="form-grid">
      <label>Reference:</label><output u-text="reference"></output>
      <label>Value:</label><output u-text="value"></output>
    </div>
  </div>
</div>

<div class="card" u-control="pwmout" u-is="pwmout" microID="${id}">
  <div u-is="include" ref=".cHead"></div>
  <div class="main" style="position: relative;min-height: 5rem">
    <span class="ux-levelbar ux-value"></span>
    <div style="font-size: 2rem"><span u-text="value"></span> / <span u-text="range"></span></div>
  </div>
</div>


<!-- Display -->

<div class="card" u-control="display" u-is="display" microID="${id}">
  <div class="main" style="display: flex;align-items: center;">
    <svg class="setconfig">
      <use href="./icons.svg#config" />
    </svg>
    <svg class="icon" u-action="addpage" value="-1" style="margin:0;width:2rem">
      <use href="./icons.svg#minus"></use>
    </svg>
    <div class="display"><svg style="width:100%;height:100%"></svg></div>
    <svg class="icon" u-action="addpage" value="1" style="margin:0;width:2rem">
      <use href="./icons.svg#plus"></use>
    </svg>
  </div>
</div>

<div class="card" u-control="displaylcd" u-is="generic" microID="${id}">
  <div class="main">
    <div class="display" grid="10" style="height: 2em;width: 20ch;font-family: monospace"></div>
  </div>
</div>

<div class="card hidden" u-control="displaytext" u-is="displaytext" microID="${id}"></div>
<div class="card hidden" u-control="displaydot" u-is="displaydot" microID="${id}"></div>
<div class="card hidden" u-control="displayline" u-is="displayline" microID="${id}"></div>
<div class="card hidden" u-control="displaybutton" u-is="displaybutton" microID="${id}"></div>