I've posted (https://forum.fhem.de/index.php/topic,47804.0.html) 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.
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>