fhem TabletUI thermostat solution

Begonnen von malc_b, 29 Dezember 2016, 16:57:52

Vorheriges Thema - Nächstes Thema

malc_b

I've posted about adding buttons to the TabletUI thermostat to make it easier to adjust.  However, that has problems with a max radiator valve and each +/- click is a message and the total messages per hour is limited.  Hence it is easy to be locked out due to exceeding the 1% duty cycle.  This alternate solution uses the knob control which only sends one message on release (finger off on a tablet).  The problem with a tablet is that you want a big control so it is easy to use but a big control takes up a lot (or all) of the screen.

My solution is a readonly thermostat which just displays the info and can therefore be quite small.  But tap it and a big version of the thermostat opens so you can easily adjust it.  The code for this is:


<div id="container" class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-type="popup" data-height="510px" data-width="570px" data-draggable="false">
        <div>
          <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="cell readonly"><>
        <>
        <div class="dialog" style="overflow: hidden;">
          <header class="big">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="cell biggest top-space-2x"><>
        <>
      <>
    </li>
  </ul>
<>


The only change needed is in widget_knob.js to add a larger class which I've called biggest


if (elem.hasClass('biggest')) {
    elem.data('height', 460);
    elem.data('width', 460);
}


this wants to go in  function init_attr(elem) before the other class definitions, bigger, big, large, etc.

On a 7in nexus this fills the screen.

malc_b

I've worked out that you don't need to edit widget_knob.js as the widget will accept height and width defined in the page.  The code thus becomes:


<div id="container" class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-type="popup" data-height="510px" data-width="570px" data-draggable="false">
        <div>
          <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="cell readonly"></div>
        </div>
        <div class="dialog" style="overflow: hidden;">
          <header class="big">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"
                     data-height="460" data-width="460"class="cell top-space-2x"></div>
        </div>
      </div>
    </li>