Home Elements Boards Recipes

HTML Templates for Elements

For displaying elements of a HomeDing device on the config and landing pages of the [Builtin Web server](/concepts/paper04.md) there are is collection of templates by using a card design available.

By accessing the Web UI of a HomeDing device all relevant and configured Elements are displayed by using a copy of the corresponding HTML template and feeding all configured and current attributes into the placeholders…

There are 2 versions of these templates available:

Implementing a Template

t.b.d.

header body

<div class="col card" u-control="log" u-is="log" microID="${id}">
  <div class="block header">
    <img src="/i/log.svg" class="icon" />
    <h3>${id}</h3>
    <h4 u-text="description"></h4>
    <span class="activeState" u-active="active"></span>
    <span class="setconfig"></span>
  </div>
  <div class="block">
    <object data="lineChart.svg" type="image/svg+xml" style="width:360px;height:136px"></object>
  </div>
</div>

Min version

<div class="col card" u-control="schedule" u-is="generic" microID="/schedule/0">
  <div class="block">
    <h4 u-text="description"></h4>
    <span class="activeState" u-active="active"></span>
    <div class="form-group">
      <label>Start:</label>
      <span u-text="ontime"></span>
    </div>
    <div class="form-group">
      <label>End:</label>
      <span u-text="offtime">..</span>
    </div>
    <span class="u-bool ux-value" u-active="value"></span>
  </div>
  <div class="block config Element"></div>
</div>

Full version

<div class="col card" u-control="schedule" id="${id}" u-is="generic" microID="${id}">
  <div class="block header">
    <img src="/i/${type}.svg" class="icon" />
    <h3>${id}</h3>
    <h4 u-text="description"></h4>
    <span class="activeState" u-active="active"></span>
    <span class="setconfig"></span>
  </div>
  <div class="block">
    <div class="form-group">
      <label>Start:</label>
      <span u-text="ontime" />
    </div>
    <div class="form-group">
      <label>End:</label>
      <span u-text="offtime" />
    </div>
    <span class="u-bool ux-value" u-active="value"></span>
  </div>

  <div class="block config Element">
    <div class="form-group">
      <label>Start:</label>
      <input u-value="ontime" type="time" step="60" class="text-right" style="width:6em;padding-right:0.2em" />
    </div>
    <div class="form-group">
      <label>End:</label>
      <input u-value="offtime" type="time" step="60" class="text-right" style="width:6em;padding-right:0.2em" />
    </div>
  </div>
</div>

Tags

Implementation Wip