Clock directives

var from= '01:00';
var to= '03:30';
<clock-editor from="from" to="to"></clock-editor>
<clock-viewer from="from" to="to" on-tab="alert('click')"></clock-viewer>

Time directives

var time= '30';
<timer-editor time="time" can-be-zero="false"></timer-editor>
<timer-viewer time="time" on-tab="alert('click')"></timer-viewer>

Thermometer directives

var actualTemp= 10;
var setTemp= 25;
<thermometer-editor set-temp="setTemp" min-temp="0" max-temp="30"></thermometer-editor>
<thermometer-editor actual-temp="actualTemp" set-temp="setTemp"></thermometer-editor>

ORP and PH directives

var orp= 1;
var ph=7;
<orp-viewer orp="orp"></orp-viewer>
<ph-viewer ph="ph"></ph-viewer>

Light directives

var light= {color: {r: 100, g: 0, b: 255}, intensity: 100};
var on=true
<light-intensity-editor intensity="light.intensity"></light-intensity-editor>
<light-color-editor color="light.color"></light-color-editor>
<light-viewer on="on" light="light"></light-viewer>

r: {{light.color.r}}, g: {{light.color.g}}, b: {{light.color.b}} intesity: {{light.intensity}} on: {{on}}

On/off directives

var onOff= false
<on-off-button on="onOff"></on-off-button>

on: {{onOff}}

Mode selector directives

var modes= [{display: 'Pinterest', name: 'pinterest', icon: 'fa fa-pinterest-p'},{display: 'Facebook', name: 'facebook', icon: 'fa fa-facebook'},{display: 'Twitter', name: 'twitter', icon: 'fa fa-twitter'}];
var selectedMode= 'pinterest';
<mode-selector modes="modes" selected-mode="selectedMode"></mode-selector>

Selected mode: {{selectedMode}}