I’m a bit new with Home Assistant but maybe you can help me.
Is there a way to create a dashboard like this?
Yes, you can do this. Have a read up on the Picture Elements card.
This is relatively ambitious. Have you built any basic dashboards?
No, I haven’t build any dashboards in Home Assistant. I have build some in iobroker but that is totally different. I’ll have a look at the Picture Elements card to figure out if I can manage or that it is too ambitious.
Let us know if you need more help.
Have a play with more basic dashboards first as you will learn stuff that will be useful for your desired dashboard.
I’m getting the hang of it but now I need some help with the script.
I have six buttons which are simple rectangles in 2 shades of grey. A dark grey in off mode and a lighter grey when it’s turned on.
My problem is that of the six buttons only 1 can be light grey. And when I press another button everything else turnes off.
For a programmer that seems basic but for me…
Can you show us your yaml code so we can see what you’ve done so far.
This is the yaml file thus far.
background: rgb(0,0,0)
type: picture-elements
views:
- theme: Mushroom
title: Home
layout: {}
badges: []
cards:
- type: picture-elements
image: /local/dashboard/dashboard-empty.png
background: transparant
elements:
- type: image
image: /local/dashboard/dashboard-empty.png
style:
transform: translate(-0%,-100%)
z-index: 1
- type: image
entity: light.bank
tap_action:
action: toggle
image: /local/dashboard/dashboard_button_on.jpg
state_image:
'off': /local/dashboard/dashboard_button_off.jpg
filter: saturate(.8)
state_filter:
'on': brightness(120%) saturate(1.2)
style:
top: 13%
left: 25%
width: 49%
- type: state-label
entity: sensor.time
style:
z-index: 100
top: 4.8%
left: 58%
color: white
font-family: Arial
font-size: 15px
- type: state-label
entity: sensor.outdoor_temperature_rounded
style:
z-index: 100
top: 4.8%
left: 42%
color: white
font-family: Arial
font-size: 15px
- type: state-icon
entity: weather.forecast_home
style:
z-index: 100
top: 4.5%
left: 50%
color: white
font-family: Arial
font-size: 15px
'--paper-item-icon-color': white
Which result in this:
I’ve tweaked your yaml a bit as follows:
type: picture-elements
image: /local/dashboard/dashboard-empty.png
elements:
- type: image
entity: light.blank
tap_action:
action: toggle
image: /local/dashboard/dashboard_button_off.png
state_image:
'on': /local/dashboard/dashboard_button_on.png
'off': /local/dashboard/dashboard_button_off.png
style:
top: 13%
left: 25%
width: 49%
- type: image
image: /local/dashboard/dashboard_top.png
style:
top: 5%
left: 49.5%
width: 35%
- type: state-label
entity: sensor.time
style:
z-index: 100
top: 4.8%
left: 58%
color: white
font-family: Arial
font-size: 15px
- type: state-label
entity: sensor.outdoor_temperature_rounded
style:
z-index: 100
top: 4.8%
left: 42%
color: white
font-family: Arial
font-size: 15px
- type: state-icon
entity: weather.forecast_home
style:
z-index: 100
top: 4.5%
left: 50%
color: white
font-family: Arial
font-size: 15px
'--paper-item-icon-color': white
The most significan changes I’ve made are:
- I tend to use PNG formatted images because these give you the ability to have transparent areas.
- I had to add an image below your time and climate indicators because the button was creating an odd glow in that area and I’m not sure why!
- I wasn’t sure why you needed the background image as an element too. I may have missed something obvious.
I may have moved away from what you intend but I hope it will be of some use. I’ve included the PNG images I made but you may want to redo these as I was in a hurry and more care is needed in cutting things out.
Good luck!
First off all I want to thank you for all the effort in helping me out. Much appreciated.
With your help i’ve achieved the following code:
type: picture-elements
image: /local/dashboard/dashboard_back.png
elements:
- type: image
entity: scene.woonkamer_tv
tap_action:
action: toggle
image: /local/dashboard/dashboard_button_off.jpg
state_image:
'on': /local/dashboard/dashboard_button_on.jpg
'off': /local/dashboard/dashboard_button_off.jpg
style:
top: 13.3%
left: 74.4%
width: 48%
- type: image
entity: scene.woonkamer_koken
tap_action:
action: toggle
image: /local/dashboard/dashboard_button_off.jpg
state_image:
'on': /local/dashboard/dashboard_button_on.jpg
'off': /local/dashboard/dashboard_button_off.jpg
style:
top: 13.3%
left: 25.5%
width: 48%
- type: image
image: /local/dashboard/dashboard_nodge2.png
style:
z-index: 90
top: 5%
left: 50%
width: 40%
- type: state-label
entity: sensor.time
style:
z-index: 100
top: 4.8%
left: 58%
color: white
font-family: Arial
font-size: 15px
- type: state-label
entity: sensor.outdoor_temperature_rounded
style:
z-index: 100
top: 4.8%
left: 42%
color: white
font-family: Arial
font-size: 15px
- type: state-icon
entity: weather.forecast_home
style:
z-index: 100
top: 4.5%
left: 50%
color: white
font-family: Arial
font-size: 15px
'--paper-item-icon-color': white
Which results in this:
As Mister Jobs used to say “There’s one more thing” .
The buttons will select Philips Hue scenes. So when another scene is selected when pressing button B the other buttons need to go to ‘off’ (slightly darker grey)
Can you help me with that too?
Here’s what I suggest. More elegant solutions probably exist!
I’d make an input_boolean helper for each button you have. Then in your picture element card, for each button, rather than have the button’s action set to turning on the scene, I’d have the button get it’s state from one of the input booleans and have it’s tap action turn on the input boolean.
The input booleans than trigger the following automation which maintains the state of all the input booleans and invokes the scenes.
description: "Button controller"
mode: single
trigger:
- platform: state
entity_id:
- input_boolean.ui_button_1
to: "on"
id: Button 1
- platform: state
entity_id:
- input_boolean.ui_button_2
to: "on"
id: Button 2
- platform: state
entity_id:
- input_boolean.ui_button_3
to: "on"
id: Button 3
condition: []
action:
- service: input_boolean.turn_off
data: {}
target:
entity_id:
- input_boolean.ui_button_1
- input_boolean.ui_button_2
- input_boolean.ui_button_3
- choose:
- conditions:
- condition: trigger
id: Button 1
sequence:
- service: scene.turn_on
target:
entity_id: "Scene for button 1"
metadata: {}
- service: input_boolean.turn_on
data: {}
target:
entity_id: input_boolean.ui_button_1
- conditions:
- condition: trigger
id: Button 2
sequence:
- service: scene.turn_on
target:
entity_id: "scene for button 2"
metadata: {}
- service: input_boolean.turn_on
data: {}
target:
entity_id: input_boolean.ui_button_2
- conditions:
- condition: trigger
id: Button 3
sequence:
- service: scene.turn_on
target:
entity_id: "scene for button 3"
metadata: {}
- service: input_boolean.turn_on
data: {}
target:
entity_id: input_boolean.ui_button_3
I’ve only included 3 buttons in my example but you can add more.
I haven’t tested this but I hope it will give you a start towards your goal.
Good luck.