Custom widget: 8 point Thermostat

[xsherlock (Maciej Eckstein)]

That is SIBO S896s, it has in wall metal frame and install flush with wall.
POE over Ethernet jack , so no need for wifi. and I can reboot them with one click from the switch or ssh.
Downside is that is 180 USD and they have quality issues as out of 8 i have one had bad screen and one has backlit bleeding issue.

[waspie (scott dee)]

I’ve started using this and I really like it. I’d like to adapt it to the portrait mode of a phone so that I can have individual phones (panels) in each room for control. Problem is, i dont know what the heck im doing. How can I make this fit right on a phone?

works good on a tablet, though!

[xsherlock (Maciej Eckstein)]

I think that that due it will not work properly in portrait.
The widget must be 3 or 4 spans wide and 8 high.
I do not know what size is the canvas size when you launch it on the phone

[Michael_Jensen]

Where to substitute the GF temperature ?, i use the 8 point edition

Kind regards

[lysol]

Are you putting the json directly in the widget code?

[lysol]

Just curious as when I’m looking at the code, it looks like:

{
“template”: “<div style=”\n \t\t\t\t font-size: 2.2em;\n \t\t\t\t font-family: Roboto, Helvetica, sans-serif;\n text-align: center;\n border: 0px; \n \t\t\t\t border-style: solid;\n border-color: red;\n display: flex;\n position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; \n \t\t\t\t “> \n<div style=“margin:5%; width:inherit”> \n\n <div class=“row” style=”\n border: 0px; \n \t\t\t\t border-style: solid;\n border-color: green;\n height: 11.5%;\n \t\t\t\t “>{{ngModel.name}} \n \n<div ng-if=“itemValue(config.setpoint_name)==config.value_one” style= “height: 11%” >\n <div class=“row” style=” \n background: rgba(15,183,240,.5);\n border-radius: 10px;\n border: 1px;\n border-style: solid;\n border-color: rgb(100,100,100) ;\n margin-top: 4%; margin-left: 2%; margin-right:2%;\n height: 100%;\n text-align: center;\n ">\t \n \t\t\t<button class=“test” \n style= “border: none; background: rgba(0,0,0,0); outline:none;height: 100%; width: 100% ;font-size: 1.1em; " \n ng-click=“sendCmd(config.setpoint_name,config.value_one)”>\n {{config.label_one}} \n \n \t\t\n \n <div ng-if=“itemValue(config.setpoint_name)!=config.value_one” style= “height: 10%” >\n <div class=“row” style=” \n background: rgba(0,0,0,.5);\n border-radius: 10px;\n border: 1px;\n border-style: solid;\n border-color: rgb(100,100,100) ;\n margin-top: 4%; margin-left: 2%; margin-right:2%;\n height: 100%;\n text-align: center;\n ">\t \n \t\t\t<button class=“test” \n style= "border: none; background: rgba(0,0,0,0); outline:none;height: 100%; width: 100% ;font-size: 1.1em; " \n ng-click=“sendCmd(config.setpoint_name,config.value_one)”>\n {{config.label_one}} \n \n \t\t\n \n \n <div ng-if=“itemValue(config.setpoint_name)==config.value_two” style= “height: 10%” >\n

[lysol]

Nevermind. I had a ‘doh’ moment. I tried to past the code into a custom widget vs importing it… Thanks for sharing.

[lysol]

When configuring this to work with the Nest binding, where would I place the nest thermostat item to be changed?

This is what I have to the first button:

This is the settings tab for it that I think I’m butchering:

This is what it looks like currently:

[lysol]

Would I do something like:

<button class="test" 
              style= "border: none; background: rgba(0,0,0,0); outline:none;height: 100%; width: 100% ;font-size: 1.1em;  " 
              ng-click="sendCmd(config.setpoint_name,config.value_one)">
              ng-click="sendCmd(NestTStat_downstairs_target_temperature_f.73)"
          {{config.label_one}}       
       </button>

Or this:

[lysol]

I would like to add that I went about this all wrong… I wasn’t aware of the widget import option… I successfully imported this widget using the .json file and am up and running using it with my Nest thermostats. Thank you for this.

[MuenchowT (Thomas Muenchow)]

Cool, thanks for sharing. I did the controls for my heating (panasonic MDCF3E5) with it. It’s pretty cool, as there are no “tri-state” switches around otherwise.

[Marko_Kraft (Marko)]

U got exacly that one as .json? @MuenchowT

[MuenchowT (Thomas Muenchow)]

@Marko_Kraft: See attachements. I don’t know anything about web stuff (html, js, etc). But I played around with the font sizes (by guessing), and it also fits pretty good on a standad 10" tablet now. There is a version with three buttons and another one with four buttons.

tri-state-button.widget.json (6.1 KB)
four_state_button.widget.json (7.8 KB)

[Marko_Kraft (Marko)]

What have I done wrong? Do you have to change the items in the HTML file? When I choose setting Item - for a heizung like yours I get only empty boxes. How habe you done that?

[MuenchowT (Thomas Muenchow)]

@Marko_Kraft

Hi Marko,

I think, you’ll need to configure the boxes before.
Let’s say, you add one of the custom widgets (e.g. four-state-button) to some panel.
After that, go to the newly added wigdet and “edit” this widget.
You will see the following picture, but without any content. You will need to specify Values and Labels (1st,2nd,3rd,4th). The box “setpoint name” is the item name that will receive the commands when you push the buttuns.

I just tried is myself.

[Marko_Kraft (Marko)]

got it

Thanks for the .json and the advise. It would be awesome if there was a setpoint name for each item.
But that´s nothing for me

[Marko_Kraft (Marko)]

hmmm is doesn´t work with states…it´s always sending the number 0, not the state Automatic

[Marko_Kraft (Marko)]

Got it work…works now Thank you @MuenchowT

[Constantinos_Contis]

Does not highlight the selected value anymore …dont know what is wrong…

[xsherlock (Maciej Eckstein)]

there is no reason why it would not work anymore unless the value of variable is outside the values chosen for any of the 8 fields.
If you are 1000% sure the setpoint is one of the fields, check for the integer/float and decimal point issue as 26 might not be recognized if it is in fact 26.0