<div layout="row top-spread">
  <div>
    <div z-field="info-1">Loading...</div>
    <div z-load="@hgui/widgets/switch"
         z-options="switchOptions"></div>
    <div class="widget-type" layout="row center-center">
      <label>Set type</label>
      <button onclick="switchWidget.setType('switch')">Switch</button>
      <button onclick="switchWidget.setType('dimmer')">Dimmer</button>
    </div>
  </div>
  <div>
    <div z-field="info-2">Loading...</div>
    <div z-load="@hgui/widgets/sensor"
         z-context="sensor-widget"></div>
  </div>
</div>
body {
background: #43C6AC;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #F8FFAE, #43C6AC);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #F8FFAE, #43C6AC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  height: 100vh;
  font-size: 14px;
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
}

div[data-ui-field="info-1"],div[data-ui-field="info-2"] {
  font-size: 18px;
  padding: 12px;
  color: deeppink;
}

.widget-type-box {
  padding: 8px;
}
label {
  padding: 8px;
  font-size: 12px;
  font-weight: 800;
  color: deeppink;
  text-transform: uppercase;
}
button {
  opacity: 0.75;
  padding: 6px;
  font-size: 14px;
  text-transform: uppercase;
}
// Widget options with event handler and data model
let switchWidget;
var switchOptions = {
  // the data model
  model: {
    name: 'Try me!',
    // icon: '<icon-image-url>',
    fields: [
      { key: 'Status.Level', value: 0.35 }
    ]
  },
  // this gets called whenever a command is performed on the widget
  control: (cmd) => debug1.html('Command: ' + cmd),
  // this gets called when the widget is ready
  ready: (ctx) => {
    switchWidget = ctx;
    debug1.html('ready: ' + ctx.contextId);
  }
};

// another way to control the widget is by getting
// a reference to the component itself
zuix.context('sensor-widget', (sensorWidget) => {
  debug2.html('ready: ' + sensorWidget.contextId);
  sensorWidget.model({
    name: 'Multi-sensor',
    'status-message': 'Hello world!',
    fields: [
      {key: 'Sensor.Temperature', value: 18.75},
      {key: 'Sensor.Humidity', value: 65},
      {key: 'Sensor.Luminance', value: 876}
    ]
  });
// show body after components are loaded
  zuix.$('body').show();
});

const debug1 = zuix.field('info-1');
const debug2 = zuix.field('info-2');
// add remote resource paths to zuixjs config
zuix.store('config', {
  libraryPath: {
    "@hgui": "https://genielabs.github.io/homegenie-web-ui/app/",
    "@cdnjs": "https://cdnjs.cloudflare.com/ajax/libs/"
  }
});
// hide body while components are loading
zuix.$('body').hide();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/zuix-dist@1.0.19/js/zuix.min.js