Hi all,
I’ve been trying to create a picture_elements card to represent my heating/hot water controller - I’ve added the code below. The first two image elements are working fine and they are displayed as the ‘HW’ and ‘CH’ switches, in the image I’ve posted at the bottom. Pressing these turns my hot water or central heating on/off. I’m trying to create two more image elements that show the state of the HW/CH, since these switches could be on/off depending on my timer. Unfortunately, the last two image elements will not display. I thought it might be because they have the same entity_id’s but I’ve tried commenting each one out and they still don’t display; I’ve also tried giving each element its own ‘title’ as well, but that has no affect.
I was hoping that someone with a better grasp of all this could shed some light on where I’m going wrong.
The syntax looks correct to me, I would try comment out all but the last image and change the top: 0% to like 50% just to see if it would display at all.
Hi JTPublic, I commented out various portions of the code last night and eventually found that it’s the state_image bit that’s causing me problems. I’ve looked at examples in the documentation that include this variable but for some reason it doesn’t work.
No error, just not showing. I’ve had a play about and the picture at the bottom shows the result of commenting out state_image. (I’ve changed to .png images to get rid of a white background I was experiencing).
I can have both the last two images as on.png, off.png, or any combination and they display fine. As soon as I uncomment the state_image, the associated image disappears.
I get a feeling there’s something very basic I’m missing.
P.S. thanks for taking a look at this, I feel like I’m writing tongue-twisters when I read this back!
I’ve had a break through!! It’s because I used ‘entitiy_id’ but I needed to use ‘entity’. Your tip of using state_image: ‘on’ and 'off seems more sensible as well.
I knew it’d be something silly stopping it from working! I’ve posted the working code below.
If anyone else stumbles across this post TOP-TIP here!! Periodically delete your browser cache and restart home-assistant service while your trying to fix problems with Lovelace-UI.
Thanks for the suggestions JTPublic. Much appreciated
I saw a different post of yours, it had a picture of the Earth with black font for the time. I used that for inspiration and in the last picture of my temperature controller, you can see it’s the correct date and time (at the time)! It’s incredible what you can do with the combination of these cards. I’m sure I’ll be back soon looking for help though!!
Only problem now is the family actually want rooms looking like this!!
title: Home
# Include external resources
resources:
- url: /local/my-custom-card.js
type: js
- url: /local/my-webfont.css
type: css
# Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.
background: center / cover no-repeat url("/background.png") fixed
# Exclude entities from "Unused entities" view
excluded_entities:
- weblink.router
views:
# View tab title.
- title: Control
# Optional unique id for direct access /lovelace/${id}
id: control
# Optional background (overwrites the global background).
background: radial-gradient(grey, skyblue)
# Each view can have a different theme applied. Theme should be defined in the frontend.
theme: dark-mode
# The cards to show on this view.
cards:
# The picture entity card will represent an entity with a picture
- type: picture-elements
image: /local/living_room.png
elements:
- type: state-label
entity: sensor.living_room
style:
top: 12%
left: 12%
font-size: 1.5vw
color: black
- type: state-label
entity: cover.srv_l
prefix: 'Radiator '
tap_action: toggle
style:
top: 5%
left: 85%
font-size: 1vw
color: blue
- type: state-label
entity: cover.srv_d
prefix: 'Radiator '
tap_action: toggle
style:
top: 40%
left: 30%
font-size: 0.6vw
color: blue
- type: state-icon
entity: switch.cupboard_led
tap_action: toggle
style:
top: 40%
left: 62.5%
- type: picture-elements
image: /local/bedroom.png
elements:
- type: state-label
entity: sensor.bedroom
style:
top: 12%
left: 12%
font-size: 1.5vw
color: black
- type: state-label
entity: cover.srv_b
prefix: 'Radiator '
tap_action: toggle
style:
top: 5%
left: 42%
font-size: 1vw
color: blue
- type: picture-elements
image: /local/isabels_room.png
elements:
- type: state-label
entity: sensor.isabels_room
style:
top: 12%
left: 12%
font-size: 1.5vw
color: black
- type: state-label
entity: cover.srv_i
prefix: 'Radiator '
tap_action: toggle
style:
top: 5%
left: 80%
font-size: 1vw
color: blue
- type: picture-elements
image: /local/rowans_room.png
elements:
- type: state-label
entity: sensor.rowans_room
style:
top: 12%
left: 88%
font-size: 1.5vw
color: black
- type: state-label
entity: cover.srv_r
prefix: 'Radiator '
tap_action: toggle
style:
top: 5%
left: 68%
font-size: 1vw
color: blue
- type: picture-elements
image: /local/Drayton_LP722.png
elements:
- type: image
entity: switch.hot_water
tap_action: call-service
service: switch.turn_off
image: /local/HW.png
style:
top: 49%
left: 10%
- type: image
entity: switch.central_heating
tap_action: call-service
service: switch.turn_on
image: /local/CH.png
style:
transform: scaleX(1.04)
top: 31.35%
left: 80%
padding: 0px
- type: image
entity: switch.hot_water
state_image:
'on': /local/on.png
'off': /local/off.png
style:
top: 62%
left: 25%
- type: image
entity: switch.central_heating
state_image:
'on': /local/on.png
'off': /local/off.png
style:
top: 62%
left: 75%
- type: state-label
entity: sensor.time
style:
top: 46%
left: 50%
font-size: 2vw
color: black
- type: state-label
entity: sensor.date
style:
top: 56%
left: 50%
font-size: 1vw
color: black
- type: image
entity: input_boolean.heating_switch
tap_action: toggle
state_image:
'on': /local/Auto_on.png
'off': /local/Auto_off.png
style:
transform: scale(1.1)
top: 72%
left: 72%
padding: 0px
# - type: entities
# entities:
# - cover.srv_l
# - cover.srv_d
# - cover.srv_b
# - cover.srv_i
# - cover.srv_r
# title: Radiators
# show_header_toggle: false
- title: Temperatures
# Optional unique id for direct access /lovelace/${id}
id: temperatures
# Optional background (overwrites the global background).
background: radial-gradient(grey, skyblue)
# Each view can have a different theme applied. Theme should be defined in the frontend.
theme: dark-mode
# The cards to show on this view.
cards:
# The filter card will filter entities for their state
- type: entities
title: General
entities:
- input_number.l_temp
- input_number.b_temp
- input_number.i_temp
- input_number.r_temp
- type: entities
title: Temporary
entities:
- input_number.l_temp_temp
- input_number.b_temp_temp
- input_number.i_temp_temp
- input_number.r_temp_temp
- title: Map
# Optional unique id for direct access /lovelace/${id}
id: map
# Optional background (overwrites the global background).
background: radial-gradient(grey, skyblue)
# Each view can have a different theme applied. Theme should be defined in the frontend.
theme: dark-mode
# The cards to show on this view.
cards:
# The filter card will filter entities for their state
- type: map
entities:
- device_tracker.####
- device_tracker.####
# Specify a tab icon if you want the view tab to be an icon.
- icon: mdi:home-assistant
# Title of the view. Will be used as the tooltip for tab icon
title: Second view
cards:
# Entities card will take a list of entities and show their state.
- type: entities
# Title of the entities card
title: Example
# The entities here will be shown in the same order as specified.
# Each entry is an entity ID or a map with extra options.
entities:
- light.kitchen
- switch.ac
- entity: light.living_room
# Override the name to use
name: LR Lights
# The markdown card will render markdown text.
- type: markdown
title: Lovelace
content: >
Welcome to your **Lovelace UI**.
Hi badgerhome, I made a smart radiator valve using an esp-12 and a linear stepper motor. Here’s a link to the instructables
Unfortunately, the linear stepper motors are really difficult to get hold of now and are far more expensive. Hopefully there’ll be a cheap batch again soon.
I did consider using batteries, since the esp-12 should be able to work for at least a year with the sleep mode. In fact, using a 9V battery would result in a more powerful drive on the stepper motor.
I’ll post an update if I manage to find reasonably priced components. I have found the same steppers but they’re about £16. When I bought them they were more like £2.60!
that’s a bit harsh mate!! 