Version 0.3 of group-element available. Even more cool now. Very efficient use of picture-elements.
11 Likes
Anyone know if it’s possible to lay an input_select drop down on top of a picture-elements card? I’m imagining a picture of the front of my receiver with a blanked out display and two drop down menus on top of it. One for sources and one for audio format. When I try this:
- type: picture-elements
image: /local/interface_images/theater/receiver.png
elements:
- type: input_select.denon_source
I get “Unknown element type encountered: input_select.denon_source.” laid on top of the image of my receiver.
Edit: Well, I sort of got it going with a state-label:
- type: state-label
style:
left: 45%
top: 30%
font-size: 200%
entity: input_select.denon_source
The click brings up a pop-up where I can change the source. I still have to get that hooked into the actual changing of the source on the receiver. Not as elegant as I wanted but it’s working. If anyone has any way to do it without the pop-up I’d love to get ideas.
I haven’t found anything and wanted something similar for a floorplan to toggle which floor is visible. Currently I’m just using buttons for each floor that when clicked change the selected value of the input select.
I did something similar just using buttons. Not happy about how the white background looks with my shiny new brushed steel background but it’s something to work on later.
2 Likes
Went for a more colourful way to display my MiFlora data with a stripe for each.
The badges are a bit of a fudge as I couldn’t work out how to display a badge without text below it, so essentially I cut off the text display by limiting the size of the banner image.
In my case, the images are 272x43, like so:
- type: picture-elements
image: /local/oak-for-hass-halved.png
elements:
- type: state-badge
entity: sensor.miflora_ae_xx_moisture
style:
top: 68%
left: 10%
color: "#ffffff"
- type: state-badge
entity: sensor.miflora_ae_xx_conductivity
style:
top: 68%
left: 30%
color: "#ffffff"
- type: state-badge
entity: sensor.miflora_ae_xx_temperature
style:
top: 68%
left: 50%
color: "#ffffff"
The rest of it is fairly standard I guess, though for changing the font throughout the theme I used this tip:
For the curious it’s: an Oak, a serrated red Maple, regular Maple, Horse Chestnut, general garden patch reading, Lemon, Lemon, Labernum, and Robinia.
3 Likes
Wooow! Looks amazing. Mind sharing how you achieved this?
2 Likes
@adrkable I have set up a separate topic dedicated to my design (Picture Elements & Custom Layout Card Interface) I have more info and the actual code listed there.
here is my first picture-elements project. a digital car key-fob. i can lock,unlock,start and stop car engine. i leave in KSA and its so hot in here. my car is equipped with remoter starter i can turn on car engine from fob and it will run for 15 min it will cool down inside temperature.
i did not hack in to car ECU i had spare key-fob with d1 mini and 4066 ic i simulate button press on key-fob.
2 Likes
Hi,
Would you please share with me the instruction to use d1 mini and 4066 ic to simulate button press on keyfobs?
cheers
ALi
i used esphome on d1 mini here is the yaml
esphome:
name: car
platform: ESP8266
board: d1_mini
wifi:
ssid: "SSID"
password: "Your Password"
# Optional manual IP
manual_ip:
static_ip: 192.168.1.11
gateway: 192.168.1.1
subnet: 255.255.255.0
# Enable logging
logger:
# Enable Home Assistant API
api:
ota:
switch:
#lock pin GPIO
- platform: gpio
pin: D1
id: lock_btn
#Unlock pin GPIO
- platform: gpio
pin: D2
id: unlock_btn
#Engine pin GPIO
- platform: gpio
pin: D5
id: engine_btn
#start engine
- platform: template
name: Start Engine
id: start_engine
optimistic: true
turn_on_action:
- switch.turn_on: lock_btn
- delay: 800ms
- switch.turn_off: lock_btn
- delay: 400ms
- switch.turn_on: engine_btn
- delay: 4000ms
- switch.turn_off: engine_btn
- switch.turn_off: start_engine
#stop engine
- platform: template
name: Stop Engine
id: stop_engine
optimistic: true
turn_on_action:
- switch.turn_on: engine_btn
- delay: 4000ms
- switch.turn_off: engine_btn
- switch.turn_off: stop_engine
#Lock Car
- platform: template
name: Lock car
id: lock_car
optimistic: true
turn_on_action:
- switch.turn_on: lock_btn
- delay: 500ms
- switch.turn_off: lock_btn
- delay: 500ms
- switch.turn_on: lock_btn
- delay: 500ms
- switch.turn_off: lock_btn
- switch.turn_off: lock_car
#Unlock Car
- platform: template
name: Unlock car
id: unlock_car
optimistic: true
turn_on_action:
- switch.turn_on: unlock_btn
- delay: 500ms
- switch.turn_off: unlock_btn
- switch.turn_off: unlock_car
4066 ic is kind of relay for small components check below image how i connected ic with d1 mini and keyfob.
here is a video tutorial on how to use 4066
let me know if you need anymore help. i’m happy to help
7 Likes
Thank you.
1 Like
This is great! How did you create the buttons to toggle between downstairs and upstairs? Can you share your yaml?
I used an input select with a service-call button. See the heading Creating a Floor Toggle in this post: https://aarongodfrey.dev/home%20automation/creating-a-3d-floorplan-in-home-assistant/
1 Like
That’s pretty cool! I just have one favor to ask. Could you please do me a favor with the proper spacing and tabs? I’m having some difficulty figuring out the syntax in yaml.
Thanks!
elements:
- entity: sensor.living_room
state_image:
Netflix: /local/pictures/netflix.png
PowerOff: /local/pictures/harmony-remote.png
Watch TV: /local/pictures/kodi.png
xbox: /local/pictures/xbox-one.png
style:
left: 50%
top: 50%
width: 100%
tap_action:
action: none
type: image
- icon: 'mdi:xbox'
style:
color: '#FFFFFF'
left: 5%
top: 87%
tap_action:
action: call-service
entity_id: remote.living_room
service: REMOTE.TURN_ON
service_data:
activity: xbox
title: Xbox one
type: icon
- icon: 'mdi:netflix'
style:
color: '#FFFFFF'
left: 13%
top: 87%
tap_action:
action: call-service
entity_id: remote.living_room
service: REMOTE.TURN_ON
service_data:
activity: Netflix
title: Xbox one
type: icon
- icon: 'mdi:kodi'
style:
color: '#FFFFFF'
left: 21%
top: 87%
tap_action:
action: call-service
entity_id: remote.living_room
service: REMOTE.TURN_ON
service_data:
activity: Watch TV
title: Xbox one
type: icon
- entity: remote.living_room
service: REMOTE.TURN_OFF
style:
color: '#FFFFFF'
left: 87%
top: 87%
title: Turn All Off
type: service-button
image: /local/pictures/harmony-remote.png
style: null
type: picture-elements
[quote="omerome, post:65, topic:63642, full:true"]
That's pretty cool! I just have one favor to ask. Could you please do me a favor with the proper spacing and tabs? I'm having some difficulty figuring out the syntax in yaml.
Thanks!
[/quote]
Hi sorry that was one of my first times posting here till i read about posting code.
hope it helps you! i can aslo send u the pictures if you like
2 Likes
Thanks again! Sure, if you can send the pictures, that would be great!
