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>
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}}