Custom widget: 8 point Thermostat

Here is a larger size slider replacement I call a Thermostat that is based on the roller/dimmer i did before. With 8 custom setpoints, accents on the end of the scale and feedback on the currently selected value.
It would be nice if someone who actually can code would make it into fully customizable widget that would allow setting. the number of displayed buttons.

Thermostat.widget.json (15.3 KB)

3 Likes

@xsherlock Very nice… would it be possible for you to provide the code for your clock/room widget bar at the top of the panel too?

sure, it is not a custom widget yet, so you just put the code into template and change the temp sensor reference. It is designed for a 1-unit height and that is still a bit too much but that is the smallest size the habpanel allows.

<div 
        style="
               position: absolute;
               background: rgba(0,0,0,0);
               top: 15px; width: 100%;
               height: 36px;
               border-width: 0px 0px 1px 0px;
               border-style: solid;
               border-color: #666666;
               font-size: 2.3em;
               font-family: Roboto, Helvetica, sans-serif;
               "
         />

<div class="row" style="font-weight: bold;
                        color:#cccccc
                        " >
  <div class="col-md-4" style="top: -10px" >Living Room </div>
   <div class="col-md-4" style="top: -20px">
    	<div ng-init="clockmodel={
                'mode':'digital',
                'font_size':24,
                'digital_format':'HH:mm',               
              }"><p class="text-center"><widget-clock ng-model="clockmodel" style="padding: 0px;" /></p></div></div>
  <div class="col-md-4" style="top: -10px"><p class="text-right"> {{'%.1f °C' | sprintf: itemValue('GF_Temperature_tk1_Bedroom')}} </p></div>
</div>
1 Like

This is what i get … :

You need to substitute GF_Temperature… With name of your openhab variable where you hold you temp data

ok now the Temp is goo but i still have this blue bar at the top … how to you remove it ?

@Dominic_Bonneau Add kiosk=on to the URL

On my Nexus 7 the Text spans over three lines while on my desktop everything looks fine. What do I have to modify in the template to make it appear correctly on Nexus 7?

Thx…

change font-size: 2.3em; in the first style to the smaller one. and check if that helps

No, that doesn’t help. I changed the value to 1.0em and also the font size for the clock to 12. Now the font is very small but the widget still spans over three lines.

I had the sam problem with old Nexus 7 2012 and finally I separate the info in 3 different blocks.
Not really good but works.

Can you give me an example, how you achieved this? What do you mean with “3 different blocks”? Is it possible to get a code snippet and a screenshot?
I also tried Dolphin browser as an alternative to Chrome with the same result.

Try replacing md in the col-md-4 in all instances with some other destination identifier

xs (phones), sm (tablets), md (desktops) or lg (larger desktops).

Changing to col-sm-4 solved the problem.
Thank you.

I have a suggestion, too:

How about linking another item to show what the actual temperature is? For example, The room has 20 C and I set the thermostat to 22 C, the 22 C is highlighted. Can I also have the 20 C highlighted (with another color, or border color)?

What do you think?

That is not the problem I have done it for one panel this way

Here is the code.

<div 
        style="
               position: absolute;
               background: rgba(0,0,0,0);
               top: 15px; width: 100%;
               height: 60px;
               border-width: 0px 0px 1px 0px;
               border-style: solid;
               border-color: #666666;
               font-size: 2.3em;
               font-family: Roboto, Helvetica, sans-serif;
               "
         />

<div class="row" style="font-weight: bold;
                        color:#cccccc
                        " >
  <div class="col-md-4" style="top: 2px" >Entrance </div>
  <div class="col-md-4" style="top: -3px">
    	<div ng-init="clockmodel={
                'mode':'digital',
                'font_size':24,
                'digital_format':'HH:mm',               
              }"><p class="text-center"><widget-clock ng-model="clockmodel" style="padding: 0px;" /></p></div></div>
  <div class="col-md-4" style="top: -4px; font-size: 24px;">
    <p class="text-right" style="-webkit-margin-after: -2px;"> Outside: {{'%.1f °C' | sprintf: itemValue('G_Temperature_t2q_Gardenbox')}} </p>	 
    <p class="text-right" style="-webkit-margin-after:  0px;"> Pool: {{'%.1f °C' | sprintf: itemValue('G_Temperature_wn8_pool')}} </p>
    	
    </div>
</div>

</div>

Sorry, my explanation was pretty unclear. I was specifically asking about the 8-point thermostat mentioned in your original post.

There, your temperature setpoint is highlighted with a blue bg-color.

Now let’s assume the Living Room has 20 C, instead of 22.1 C. I would like to have blue border color around the 20 C button, and a solid bg-color around the 22 C setpoint.

But thinking about it, this could be possible using anything like ng-style or ng-if, right?

that is quite a good idea, you can make it with some more conditional formatting the same way I do the background highliging.

Or I have another version of this widget designed for 3 panel width that has some more padding on both sides of the buttons. So there would be space on the side to put a little color changing arrow marker “>” that would move up and down and show how far the current temp is from target setpoint.

I think I will try to do the second option as soon as I will finish the fight with the heating valves rules.

In case anyone want to use that as a start here it is.

Thermostat wide padding.widget (1).json (15.4 KB)

1 Like

Nice clear / clean layouts.

Quick question, what tablets are those, how are they mounted and what have you done about power?

Oh cool. A tiny tiny triangle on the left or right or both sides (configurable?) would be very cool as well. And much more precise than the border highlight, but at the cost of cleanness.