Hi,
I am trying to create my own template node to ease my setup and to just create one dashboard node for setting brightness, color, on/off,... I'm slowly getting into the html stuff, but I'm still no wiz.
I managed to get my slider stuff and switch and so on working, but my problem is that my color picker either can set the color in the hue lamp or receive the color from the hue lamp. The problem seems to be the hex value. When coming from the hue lamp, I have to add a '#' to the value. When this is done, setting the color via dashboard does not work anymore.
My template node looks as follows:
<div class="roomFrame">
<div class="lightTable">
<div class="lightTableRow">
<div class="d1">Name</div>
<div class="d2"><input type="color" ng-model="msg.payload.hex" ng-change="send(msg)"></div>
<div class="d3"><md-switch aria-label="tank" class="md-switch" value="{{msg.payload.on}}" ng-model="aktiv" ng-change="send({payload : {on:aktiv}})" ng-checked="msg.payload.on"></md-switch></div>
</div>
</div>
<div class="lightTable">
<div class="lightTableRow">
<div class="d4">Heligkeit</div>
<div class="d5"><md-slider min="0" max="100" ng-model="helligkeit" value="{{msg.payload.brightness}}" ng-change="send({payload : {brightness:helligkeit}})" class="lightSlider"></md-slider></div>
<div class="d6">{{msg.payload.brightness}}</div>
</div>
<div class="lightTableRow">
<div class="d4">Farbe</div>
<div class="d5"><md-slider min="153" max="500" ng-model="farbtemp" value="{{msg.payload.colorTemp}}" ng-change="send({payload : {colorTemp:farbtemp}})" class="lightSlider"></md-slider></div>
<div class="d6">{{msg.payload.colorTemp}}</div>
</div>
</div>
</div>
I have also got a node containing the style:
<style>
.lightSlider {
float:right;
width: 100%
}
.lightSlider .md-thumb:after, .lightSlider .md-track{
background-color: #FA9900 !important;
border-color: #FA9900 !important;
}
.lightSlider .md-focus-thumb, .lightSlider .md-focus-ring{
background-color: #FA9900;
}
.lightTable {
display:table;
width:95%;
margin-left: 5px;
margin-right: 5px;
}
.lightTableRow {
display:table-row;
}
.d1 {
display:table-cell;
width:60%;
}
.d2 {
display:table-cell;
text-align:center;
width:20%;
}
.d3 {
display:table-cell;
text-align:right;
width:20%;
}
.d4 {
display:table-cell;
width:30%;
vertical-align:middle;
}
.d5 {
display:table-cell;
width:60%;
}
.d6 {
display:table-cell;
text-align:right;
width:10%;
vertical-align:middle;
}
.roomFrame {
border:1px solid grey;
}
</style>
I used the slider from some post in the forum. I'm sure there is room for improvement. But my main question is how to get input and output for the color picker working for the hue lamps. With the normal dashboard color picker it works as this can be setup to use hex values.
Any help would be great! Thanks
