this?
Get them from my repo (link in previous post). Choose any branch and find them in the www folder.
thx a lot mate
can i ask also what you do with the dog in ha?
Haha, yeah, I have a Tile bluetooth tracker. It can show me where it was last seen (it connects through our phones). It is not very accurate, but accurate enough to have the alarm be set automatically.
If the dog is home (and we are not) the alarm will turn on, but it will only trigger on door/window sensors.
If the dog is not home (and we are not either) the alarm will turn on, and will trigger on both door/window sensors and motion sensors.
I also use check-button-card to check when the dog was brushed the last time, or when the dog had its flee drops and such.
Cool, great idea for the check button card,
Thx
Have some ideas for it, can i see the page/view of the dog anywhere?
1 Like
thanks !!!
1 Like
Hello,
I need help please.
I downloaded the files from a website
https://onedrive.live.com/?authkey=!AMwDkgmuVvtQAMo&id=BA135AD440901B77!499&cid=BA135AD440901B77
But after I enter the code I have a message
"UI editor is not supported for this config:
No visual editor available for: picture-elements
You can still edit your config in yaml. "
How to deal with the problem
Thanks
Hi @yuval221183
This example is maybe a bit advanced, if you haven’t tried editing yaml before. It’s rather complex.
The editor says it quite well, to create this card, you have to edit the yaml code, you can’t do it with the visual editor (yet).
I have updated the code since then:
cards:
- elements:
- entity: sensor.dryer_wifi_signal
style:
color: black
font-size: 0.7em
left: 65%
top: 79%
type: state-label
- icon: 'mdi:wifi'
style:
color: black
left: 54%
top: 79%
type: icon
- entity: light.dryer_blue_led
icon: 'mdi:lightbulb'
style:
'--paper-item-icon-active-color': blue
left: 75%
top: 78%
type: state-icon
- entity: sensor.dryer_power
style:
color: black
font-size: 0.7em
left: 35%
top: 75%
type: state-label
- entity: sensor.dryer_voltage
style:
color: black
font-size: 0.7em
left: 27%
top: 83%
type: state-label
- entity: sensor.dryer_current
style:
color: black
font-size: 0.7em
left: 32%
top: 79%
type: state-label
- conditions:
- entity: binary_sensor.dryer_running
state: 'off'
elements:
- entity: sensor.time
style:
color: yellow
left: 67%
top: 12%
type: state-label
type: conditional
- entity: binary_sensor.dryer_running
state_image:
'on': /local/images/washer-animated2.gif
style:
clip-path: circle(41% at center)
left: 50%
top: 47%
tap_action:
action: toggle
type: image
image: /local/images/aeg-dryer.png
type: picture-elements
- elements:
- entity: sensor.washer_wifi_signal
style:
color: black
font-size: 0.7em
left: 65%
top: 79%
type: state-label
- icon: 'mdi:wifi'
style:
color: black
left: 54%
top: 79%
type: icon
- entity: light.washer_blue_led
icon: 'mdi:lightbulb'
style:
'--paper-item-icon-active-color': blue
left: 75%
top: 79%
type: state-icon
- entity: sensor.washer_power
style:
color: black
font-size: 0.7em
left: 35%
top: 75%
type: state-label
- entity: sensor.washer_voltage
style:
color: black
font-size: 0.7em
left: 27%
top: 83%
type: state-label
- entity: sensor.washer_current
style:
color: black
font-size: 0.7em
left: 32%
top: 79%
type: state-label
- conditions:
- entity: binary_sensor.washer_running
state: 'off'
elements:
- entity: sensor.time
style:
color: yellow
left: 67%
top: 12%
type: state-label
type: conditional
- entity: binary_sensor.washer_running
state_image:
'on': /local/images/washer-animated2.gif
style:
clip-path: circle(40% at center)
left: 50%
top: 47%
tap_action:
action: toggle
type: image
image: /local/images/aeg-washer.png
type: picture-elements
type: horizontal-stack
The code relies on a couple of images, and quite a lot of sensors.
The sensors are
- ‘is machine active’ (blue led).
- Wifi strength of the sonoff controlling the power to the machine
- Powerusage
- Total powerusage for today
- Voltage.
All these are delivered by a SONOFF POW2, that I’ve reprogrammed with ESPHome.
So it’s a rather intricate setup.
I’ve placed the cards in a horizontal card for space management. That’s the first, outer, structure of this.
If you are starting out with this, you need to understand the picture-elements card.
This allows you to place an image in the ‘background’ and then place objects on top of it.
Each of the ‘- entity’ in the code above, is an object.
So f.ex.
- entity: sensor.dryer_wifi_signal
style:
color: black
font-size: 0.7em
left: 65%
top: 79%
type: state-label
is an object.
Each of these objects can be added or removed independantly, so you can add just the elements you want. The ‘left’ and ‘top’ values determine the placement of the object relative to the background image.
1 Like
hi I am new to HA and I try to learn as much as I can.I have made a washing machine project but I can’t make it show the remaining time, maybe someone here can help me out!
here is the ´card:
type: picture-elements
elements:
- entity: sensor.ene_pow
style:
left: 88%
top: 18.5%
font-size: 27px
type: state-label
- type: conditional
conditions:
- entity: switch.sp3s_16a_switch
state: 'on'
elements:
- type: state-label
entity: timer.test
style:
color: yellow
left: 77%
top: 7%
font-size: 33px
theme: ios-dark-mode-red
- type: state-label
entity: input_select.state_washingmachine
style:
color: yellow
left: 50%
top: 45%
font-size: 40px
image: /local/images/masina spalat/masina spalat mama.jpg
the most I could do was this using the state-badge for the timer
type: picture-elements
elements:
- entity: sensor.ene_pow
style:
left: 88%
top: 18.5%
font-size: 27px
type: state-label
- type: conditional
conditions:
- entity: switch.sp3s_16a_switch
state: 'on'
elements:
- type: state-badge
entity: timer.test
style:
color: transparent
left: 77%
top: .1%
font-size: 55px
theme: ios-dark-mode-red
- type: state-label
entity: input_select.state_washingmachine
style:
color: yellow
left: 50%
top: 45%
font-size: 40px
image: /local/images/masina spalat/masina spalat mama.jpg
any thoughts ?
to specify, I want the remaining time to be shown on the top black window, but all it show is just ACTIVE not the countdown timer, as shown on the card Washing Machine Plug,bottom right.