Dashboard thermostat sryle

🛎️ Get Help Apps
1

Hi,

I am wondering if there is a way to tweak thermostat template to give it a look like the one in control 4 or home assistant. Kind of round with circular button. You slide. Is it possible with css. I just started to read the css noob guide and found interesting way to change slider appearance and colors which i like wondering if there is a more complete page somewhere i really like code example which make me understand

Brgds

Alex
1000024151

1 Like
2

I expect it won't be so much a case of tweaking the built-in thermostat template, rather, creating the separate elements as individual tiles. That's not to say that will be a reason not to attempt it, just trying to guide you down that path (or some other path) rather than grappling with formatting the existing template.

I can't offer much more than that at the moment in terms of any concrete code or example, I would need some time to play around with it. In the meantime, I would suggest:

  • Look at the Show of Your Dashboards topic, if you haven't already, there are some great custom thermostat examples dotted throughout the topic, from memory some of the guys in Canada had some sleek looking dashboards
  • For the 4 buttons either side of the dial, off the top of my head.... Look at
    • Using buttons and/or switches with rules to manage responding to their use on the dashboard
    • The tiles rounded through CSS
    • Custom icons, either built-in or from outside, e.g. the Noun Project
    • Background colors set using CSS or the template defaults
    • Potentially use Hub Variables for some of the text displayed, making the tiles for these read-only

For the dial.... Nothing is impossible, it's just a matter of time and effort.... I feel like I am at work :slight_smile: One option may be to overlay a couple of tiles using the z-index property, the background tile being the outermost part of the dial, overlayed with the display of the temperature, etc. I was going to offer a fallback of hosting an iFrame if it becomes too difficult, but to provide the control back to the HE device becomes a little cumbersome to setup for such a small use-case (not a criticism, just reality).

Hopefully that gives you some ideas at least.... (I'm so envious of the retired folk around here who can spend more time on this stuff.... :slight_smile: )

3

I thought these were worth posting on their own... You may want to chat to @AleXthePunK and @ymerj to find out more about their dashboards, if only as a starting point...

4

Thanks for the nest picture it gives me the idea of how i would solve problem. I think i will use preset temperature with button as we always use the same. No need to make the rotary dial like home assistant

Thanks for your answer it fills me with ideas

Alex

1 Like