Hi, has anyone added buttons to the thermostat in tablet-ui?
I've played around and got up/down arrows to modify the temperature of MAX thermostatic head using a notify. That then reflects back to the UI but it takes too long. I think it needs to be done in the javascript so that the changes appear on screen as to click the button.
The tablet-UI thermostat looks nice but it's not that easy to set. I reckon it would be better to have the option of +/- buttons so you can easily change 0.5C up and down and leave the knob for large changes.
Sort of like so?
http://forum.fhem.de/index.php/topic,34233.msg394570.html#msg394570
Well I went for this look. I have this sort of working. The buttons increment the number in the middle and I can have the coloured dial move too but this sends a message to fhem as well. That is each click sends a fhem message so you get a fhem message popup. I think that it would be better if it only sent the message after say 2 seconds of no button push, but that would mean the dial doesn't move as I've yet to find the right way. I say I but really it's my son who keeps sorting me out. He's the javascript expert.
I have some working code to share. You can put this in the head or in a separate file. If you put it in the head then remove the defer from the jquery load line.
This is javascript for head
<script>
function changeStat(element, diff) {
var tmp = window.TOAST;
window.TOAST = false;
var thermostat = $(element).parents('li').find('[data-type="thermostat"] input');
var temperature = parseFloat(thermostat.val());
thermostat.val(temperature + diff);
thermostat.trigger('change');
window.TOAST = tmp;
}
$(document).ready(function() {
$('#thermostatUp').click(function(event) { changeStat(event.target, 0.5) });
$('#thermostatDown').click(function(event) { changeStat(event.target, -0.5) });
});
</script>
And this is in main body
<li data-row="2" data-col="2" data-sizex="3" data-sizey="2">
<header>LOUNGE</header>
<div data-type="thermostat" data-device="MAX_Lounge1" data-valve="valveposition" data-get="desiredTemperature"
data-temp="temperature" data-set="desiredTemperature" data-step="0.5" class="big cell left"></div>
<div class="big cell left">
<div class="doublebox-v">
<div data-type="push" data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-device="dummy" id="thermostatUp">
</div>
<div data-type="push" data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-device="dummy" id="thermostatDown">
</div>
</div>
</div>
</li>
Note that you must label the up/down buttons with ids as that is used to attach the onclick events. The window.TOAST true/false controls the message pop ups. I turn this off when doing the buttons as otherwise you get a message for each button push. If you don't want any messages then put
<meta name="toast" content="0">
in the head. Assuming that all toast does is the pop up messages. I don't know if having it off permanently breaks anything.
Update: Just found the meta for turning toast off is in the github readme so doesn't break anything.