fhem Tablet-UI - add up/down buttons to thermostat?

[malc_b]

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.

[tomster]

Sort of like so?


http://forum.fhem.de/index.php/topic,34233.msg394570.html#msg394570

[malc_b]

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.

[malc_b]

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

Code Auswählen Erweitern


    <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

Code Auswählen Erweitern


<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

Code Auswählen Erweitern

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