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.
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!
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
Where to substitute the GF temperature ?, i use the 8 point edition
Kind regards
Are you putting the json directly in the widget code?
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
Nevermind. I had a ādohā moment. I tried to past the code into a custom widget vs importing itā¦ Thanks for sharing.
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:
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:
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.
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.
1 Like
U got exacly that one as .json? @MuenchowT
@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)
1 Like
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?
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.
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 
hmmm is doesnĀ“t work with statesā¦itĀ“s always sending the number 0, not the state Automatic
Got it workā¦works now 
Thank you @MuenchowT
Does not highlight the selected value anymore ā¦dont know what is wrongā¦
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