Did you get an answer on this, I can’t see it.
I would love to know this also.
I have implemented the honeycomb module. Like the readme for the repo says, it only works in Chrome. What a shame. I have a mix of fully kiosk browser, iPadOS (Safari), macOS (Safari), iOS (Safari) as well as Chrome on a Windows desktop.
I appreciate the project but unfortunately I won’t be able to use it. It looks beautiful and was just what I was looking for in order to change state on an input_select.
It never said “only works in Chrome” it said only TESTED in chrome meaning there are viable chances that it works in other browsers especially kiosk browser as that should be using the webview of the android device which can also be selected as chrome. Edge is also using the chromium framework so theres chances it’s working on there too. I just had no incentive to test on multiple browsers in a commercial fashion. Simply put, if it works in other browsers that you want to use then cool but if it doesn’t then the warning is there to simply give a heads up.
I can confirm that it does not work in
fully kiosk browser (android)
iPadOS (Safari)
iOS (Safari)
macOS (Safari)
I do appreciate the effort in the project. I am just unable to implement as I have many different browser types to support.
Hi, I have integrated my s5 max on home assistant, I would like to view maps and cleaning in areas like you, how did you do it?
I am in the process of setting up monitoring of the solar power installation in our cabin. Right now, some of the numbers in this display are incorrect, as we are about to install a second battery, and I have not adjusted every sensor and reading for that yet.
But the overall display is starting to look quite good, I think.
The most important numbers are easily available. Animated arrows shows the direction of power flows. The “display” in the center wil show SOC, Temperature, Total and Rest capacity of the battery bank, and a simple and naive estimate of how long it will take until the batteries are full/empty based on the last hours mean charging/usage.
I also added a power switch, which will remotely turn power on/off on the regulator, and the current state is both shown as an icon on the regulator, but also as “lights on/off” to make it more visible if someone forgets to turn the power off when leaving.
2 Likes
First of all congratulate all of you for your respective work, they are incredible! and they have helped me a lot when designing.
That is why I want to share the design of my frontend intended for use on a tablet and thus maintain total control over my home.
It is not finished as certain lights are missing and improve data visualization but it is a promising start.
Greetings and keep it up.
3 Likes
Ok so I started about 1-2 weeks ago and this is what I have
This is my ONLY HA view for controlling the home - not using any other views and cards.
background 1st, 2nd, roof house floor (lights off) - Used SweetHome3D
lights relevant picture changes (light on) - rooms/areas in picture are clickable (light toggles)
covers blue-open, gray-closed, green-opening, red-closing - clickable covers open/close
Used lovelace_gen (~1200 code lines instead of > 4500) Thank you very much for this
Used browser_mod for popup windows Thank you very much for this
tap_action activates entities (Sprinkler) or opens popup group lists (Lights, Covers, Water Boiler, Vacuum, Media Player)
double_tap_action open more-info popup
hold_action Vacuums, AC, Sprinklers, Water Heater will bring up schedulers. For example:
And then if the scheduler is enabled a small timer icon (or 2) appear next to the entity on the map (see next to the sprinklers).
Bottom Right Waze travel sensors for varies locations (route, icon, time)
Top left and center weather and calendar are custom cards.
Top right large quick action buttons - for example: Away, Goodnight
Top right status bar - here for example shows low ink in printer
Top right settings icon (cog) - popup window to set and active general entities - built from ui yaml file. For example:
Using lovelace_gen it will be VERY easy to add entities to almost every aspect of the map and popup windows using {% set %}, {% for %}, {% macro %}
Changing the look and feel can also be easily changes - used {% set %} to define different UI element styles.
I should probably make a video of all the possibilities…
12 Likes
Very nice 
The only thing that burn in my brain is having Sunday on the Workdays list XD
I’m guessing Middle East. Those are very hard sundays 
1 Like
But Friday’s are great 
2 Likes
This is my roomba take on the integration for my 676 model, if somebody like it here is the code
elements:
- entity: vacuum.roomba
style:
'--paper-item-icon-color': withe
left: 1%
top: 66%
transform: 'scale(1.5,1.5)'
type: state-icon
- entity: vacuum.roomba
style:
color: withe
left: 12%
top: 68%
transform: 'scale(1.5,1.5)'
type: state-label
- entity: sensor.roomba_battery_level
style:
'--paper-item-icon-color': withe
left: 2%
top: 82%
transform: 'scale(1.5,1.5)'
type: state-icon
- entity: sensor.roomba_battery_level
style:
left: 12%
top: 84%
transform: 'scale(1.5,1.5)'
type: state-label
- icon: 'mdi:play-circle-outline'
style:
left: 32%
top: 85%
transform: 'scale(1.5,1.5)'
tap_action:
action: call-service
service: vacuum.start
service_data:
entity_id: vacuum.roomba
type: icon
- icon: 'mdi:pause-circle-outline'
style:
left: 45%
top: 85%
transform: 'scale(1.5,1.5)'
tap_action:
action: call-service
service: vacuum.pause
service_data:
entity_id: vacuum.roomba
type: icon
- icon: 'mdi:stop-circle-outline'
style:
left: 58%
top: 85%
transform: 'scale(1.5,1.5)'
tap_action:
action: call-service
service: vacuum.stop
service_data:
entity_id: vacuum.roomba
type: icon
- icon: 'mdi:map-marker-alert'
style:
left: 71%
top: 85%
transform: 'scale(1.5,1.5)'
tap_action:
action: call-service
service: vacuum.locate
service_data:
entity_id: vacuum.roomba
type: icon
- icon: 'mdi:home-map-marker'
style:
left: 84%
top: 85%
transform: 'scale(1.5,1.5)'
tap_action:
action: call-service
service: vacuum.return_to_base
service_data:
entity_id: vacuum.roomba
type: icon
- entity: sensor.vacuum_roomba_tray
style:
color: withe
left: 79%
top: 67%
transform: 'scale(1.5,1.5)'
type: state-label
- icon: 'mdi:delete-variant'
style:
left: 92%
top: 68%
transform: 'scale(1.5,1.5)'
type: icon
image: /local/pictures/roomba-676.jpg
type: picture-elements
2 Likes
I’m building a keypad page for my alarm and I’d like the numbers on the keypad to change color when they are tapped. Is there a way to have them show a different image file on “click”? Here’s a screenshot of the page and a sample of the buttons I’d like to swap when the numbers are touched.
1 Like
i like it, sorry i cant help, but maybe this tread will
Carlgarton,
I am just about to start building the same thing! Except yours is much cooler than I had in mind!
I will have a look through your code and give it a go…
What controllers have you placed on the radiators?
I have not purchased any yet… Can you suggest any?
Thanks for posting the code. Regards Adrian
Patrick,
Been reading for days to figure out what you’ve accomplish when I saw your card. I’m struggling with pulling temperature data from my Honeywell climate.ktchen entity and putting it in a state-badge. Would really appreciate it if I could ask you for a favor and send me your yaml code for me to copy and learn from. Thanks
Hi SolarCzar,
Here it is. What you are looking for is the “- attribute: current_temperature” to display. I’m using honeywell as well.
- style:
font-size: x-small
left: 9%
top: 14.8%
text: HVAC
type: 'custom:text-element'
- entity: climate.home
style:
color: 'RGBA(0,0,0,0)'
font-size: 75%
left: 9%
top: 24%
title: HVAC Thermostat
type: state-badge
- attribute: hvac_action
entity: climate.home
prefix: 'State: '
style:
font-size: 75%
left: 9%
top: 29%
suffix: ''
type: state-label
- attribute: current_temperature
entity: climate.home
prefix: ''
style:
font-size: 85%
left: 6%
top: 32%
suffix: °F
type: state-label
- attribute: current_humidity
entity: climate.home
prefix: ''
style:
font-size: 85%
left: 13%
top: 32%
suffix: '%'
type: state-label
Full picture-element card:
elements:
- entity: light.hallway_main_lights
style:
left: 44%
top: 36%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.hallway_main_lights
style:
left: 44%
top: 45%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.hallway_main_lights
style:
left: 47%
top: 52%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.hallway_main_lights
style:
left: 56%
top: 52%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.kitchen_main_lights
style:
left: 26%
top: 12%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.kitchen_main_lights
style:
left: 36%
top: 12%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.kitchen_main_lights
style:
left: 26%
top: 22%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.kitchen_main_lights
style:
left: 36%
top: 28%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.kitchen_table_pendants
style:
left: 48.5%
top: 18%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: switch.kitchen_island_pendants
style:
left: 30%
top: 19.5%
transform: 'translate(-50%, -50%) scale(.5, .5)'
tap_action:
action: toggle
type: state-icon
- entity: switch.kitchen_island_pendants
style:
left: 33.5%
top: 19.5%
transform: 'translate(-50%, -50%) scale(.5, .5)'
tap_action:
action: toggle
type: state-icon
- entity: switch.kitchen_island_pendants
style:
left: 37%
top: 19.5%
transform: 'translate(-50%, -50%) scale(.5, .5)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 63%
top: 14%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 73%
top: 14%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 83%
top: 14%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 63%
top: 28%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 73%
top: 28%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 83%
top: 28%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_accent_lights
style:
left: 88%
top: 18%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_accent_lights
style:
left: 88%
top: 25%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- aspect_ratio: 1/1
entity: fan.family_room_fan
show_name: false
show_state: false
size: 100%
spin: false
state:
- spin: true
value: 'on'
style:
left: 73%
top: 21%
width: 10%
styles:
card:
- background-color: 'rgb(255,255,255,0)'
- box-shadow: 0px 0px 0px 0px
tap_action:
action: more-info
type: 'custom:button-card'
value: 'off'
- entity: light.stairs_main_lights
style:
left: 63%
top: 37%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: switch.playroom_light
style:
left: 80%
top: 45%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: switch.garage_entry_main_lights
style:
left: 56%
top: 62%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.porch_fan_light
style:
left: 26%
top: 3%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- aspect_ratio: 1/1
color_type: icon
entity: fan.porch_fan
show_name: false
show_state: false
size: 100%
spin: false
state:
- spin: true
value: 'on'
style:
left: 35%
top: 3%
width: 7%
styles:
card:
- background-color: 'rgb(255,255,255,0)'
- box-shadow: 0px 0px 0px 0px
tap_action:
action: more-info
type: 'custom:button-card'
value: 'off'
- entity: weather.karr_daynight
style:
font-size: 75%
left: 9.5%
top: 4%
type: state-icon
- attribute: temperature
entity: weather.karr_daynight
style:
font-size: 85%
left: 6%
top: 9%
suffix: °F
type: state-label
- attribute: humidity
entity: weather.karr_daynight
style:
font-size: 85%
left: 14%
top: 9%
suffix: '%'
type: state-label
- style:
font-size: x-small
left: 9%
top: 14.8%
text: HVAC
type: 'custom:text-element'
- entity: climate.home
style:
color: 'RGBA(0,0,0,0)'
font-size: 75%
left: 9%
top: 24%
title: HVAC Thermostat
type: state-badge
- attribute: hvac_action
entity: climate.home
prefix: 'State: '
style:
font-size: 75%
left: 9%
top: 29%
suffix: ''
type: state-label
- attribute: current_temperature
entity: climate.home
prefix: ''
style:
font-size: 85%
left: 6%
top: 32%
suffix: °F
type: state-label
- attribute: current_humidity
entity: climate.home
prefix: ''
style:
font-size: 85%
left: 13%
top: 32%
suffix: '%'
type: state-label
- style:
font-size: x-small
left: 9%
top: 38%
text: Internet
type: 'custom:text-element'
- entity: binary_sensor.metronet_gateway
style:
color: 'RGBA(0,0,0,0)'
font-size: 60%
left: 1.5%
top: 38.8%
transform: 'scale(.8,.8)'
title: Internet
type: state-badge
- entity: sensor.speedtest_ping
style:
color: 'RGBA(0,0,0,0)'
font-size: 60%
left: 9%
top: 38.8%
transform: 'scale(.8,.8)'
title: Internet
type: state-badge
- entity: sensor.speedtest_download
style:
color: 'RGBA(0,0,0,0)'
font-size: 60%
left: 1.5%
top: 47%
transform: 'scale(.8,.8)'
title: Internet
type: state-badge
- entity: sensor.fast_com_download
style:
color: 'RGBA(0,0,0,0)'
font-size: 60%
left: 9%
top: 47%
transform: 'scale(.8,.8)'
title: Internet
type: state-badge
- entity: media_player.rokutv
style:
left: 89%
top: 17%
transform: rotate(90deg) rotateX(70deg) skewX(18deg)
width: 6%
type: 'custom:now-playing-poster'
- entity: media_player.rokutv
style:
left: 60%
top: 25%
transform: rotate(-0deg) rotateX(-50deg) skewX(-0deg)
width: 10%
type: 'custom:now-playing-poster'
- entity: media_player.kitchen
style:
left: 48%
top: 26%
transform: rotate(0deg) rotateX(0deg) skewX(0deg)
width: 7%
type: 'custom:now-playing-poster'
- conditions:
- entity: alarm_control_panel.home_alarm
state: armed
elements:
- entity: alarm_control_panel.home_alarm
style:
font-size: 50%
left: 68.5%
top: 81%
type: state-badge
type: conditional
- conditions:
- entity: input_boolean.guest_mode
state: 'on'
elements:
- entity: input_boolean.guest_mode
style:
font-size: 50%
left: 68.5%
top: 81%
tap_action:
action: toggle
type: state-badge
type: conditional
- entity: input_boolean.guest_mode
style:
font-size: 60%
left: 17%
top: 75%
tap_action:
action: toggle
type: state-badge
- conditions:
- entity: sensor.mail_usps_mail
state_not: '0'
elements:
- entity: sensor.mail_usps_mail
icon: 'mdi:mail'
style:
left: 58%
top: 93%
tap_action:
action: navigate
navigation_path: /lovelace/mail
type: state-icon
type: conditional
- conditions:
- entity: sensor.mail_usps_delivering
state_not: '0'
elements:
- entity: sensor.mail_usps_delivering
style:
left: 65%
top: 93%
tap_action:
action: navigate
navigation_path: /lovelace/mail
type: state-icon
type: conditional
- conditions:
- entity: sensor.mail_fedex_delivering
state_not: '0'
elements:
- entity: sensor.mail_usps_delivering
style:
left: 65%
top: 93%
tap_action:
action: navigate
navigation_path: /lovelace/mail
type: state-icon
type: conditional
- conditions:
- entity: sensor.mail_ups_delivering
state_not: '0'
elements:
- entity: sensor.mail_usps_delivering
style:
left: 65%
top: 93%
tap_action:
action: navigate
navigation_path: /lovelace/mail
type: state-icon
type: conditional
- conditions:
- entity: sensor.mail_amazon_packages
state_not: '0'
elements:
- entity: sensor.mail_usps_delivering
style:
left: 65%
top: 93%
tap_action:
action: navigate
navigation_path: /lovelace/mail
type: state-icon
type: conditional
- entity: media_player.office
style:
left: 84%
top: 67%
width: 10%
type: 'custom:now-playing-poster'
- entity: media_player.office
style:
color: 'RGBA(0,0,0,0)'
left: 84%
top: 67%
type: state-label
- entity: media_player.office
style:
left: 86.5%
top: 62%
transform: rotate(90deg) rotateX(80deg) skewX(-0deg)
type: 'custom:now-playing-poster'
- conditions:
- entity: media_player.xbox_one
state: 'on'
elements:
- entity: media_player.xbox_one
style:
left: 73%
top: 92%
type: state-icon
type: conditional
- conditions:
- entity: sensor.basement_tv_electrical_measurement
state_not: '0.0'
elements:
- entity: sensor.basement_tv_electrical_measurement
style:
font-size: 60%
left: 73%
top: 98%
type: state-label
type: conditional
- entity: person.patrick
style:
font-size: 60%
left: 83%
top: 93%
type: state-badge
- entity: person.charissa
style:
font-size: 60%
left: 93%
top: 93%
type: state-badge
- charging_state:
entity_id: binary_sensor.blink_evse_ischarging
state: 'on'
color_gradient:
- '#ff0000'
- '#ffff00'
- '#00ff00'
entity: sensor.mychevy_2012_chevrolet_volt_battery_level
name: []
style:
color: 'RGBA(0,0,0,0)'
left: 49%
top: 80%
type: 'custom:battery-state-card'
- entity: sensor.mychevy_2012_chevrolet_volt_battery_level
style:
font-size: 70%
left: 45%
top: 84%
type: state-label
- entity: binary_sensor.blink_evse_ispluggedin
style:
left: 44.2%
top: 68%
type: state-icon
- entity: sensor.garage_temperature
style:
font-size: 60%
left: 37%
top: 64%
type: state-badge
- conditions:
- entity: group.basement_occupancy
state: 'on'
elements:
- entity: group.basement_occupancy
icon: 'mdi:motion-sensor'
style:
'--paper-item-icon-color': gold
left: 59%
top: 44%
width: 5%
type: state-icon
type: conditional
- entity: binary_sensor.front_door
icon: 'mdi:door'
style:
left: 67%
top: 67%
type: state-icon
- entity: binary_sensor.back_door
icon: 'mdi:door'
style:
left: 48%
top: 6%
type: state-icon
- entity: binary_sensor.garage_entry_door
icon: 'mdi:door'
style:
left: 51%
top: 61%
type: state-icon
- entity: cover.middle_garage_door
hold_action:
action: more-info
name: Middle Garage
style:
left: 29%
top: 91%
tap_action:
action: call-service
service: cover.toggle
service_data:
entity_id: cover.middle_garage_door
type: state-icon
- entity: cover.right_garage_door
hold_action:
action: more-info
name: Right Garage
style:
left: 44%
top: 91%
tap_action:
action: call-service
service: cover.toggle
service_data:
entity_id: cover.right_garage_door
type: state-icon
image: /local/images/House_032620_Overhead_1080_1_shadow_nolight_crop.png
type: picture-elements
m,
2 Likes
Patrick,
You’re Awesome thanks. I LOVE HA, but I have a day job and have struggle constantly to simply find the appropriate syntax for much of the coding needing to be efficient. I was up until 3am and came up with this… It works, but is a lot less efficient than yours, so thanks.
- entity: sensor.kitchen_temperature_sensor
style:
font-size: 9px
left: 45%
top: 50%
type: state-badge
- entity: sensor.bedroom_temperature_sensor
style:
font-size: 9px
left: 52%
top: 20%
type: state-badge
sensor:
- platform: template
sensors:
kitchen_temperature_sensor:
friendly_name: "Kitchen"
value_template: '{{ states.climate.kitchen.attributes.temperature }}'
unit_of_measurement: '°F'
bedroom_temperature_sensor:
friendly_name: "Bedroom"
value_template: '{{ states.climate.bedroom.attributes.temperature }}'
unit_of_measurement: '°F'
I don’t want to be one of those people that doesn’t do the research to find the answer, but the problem is that the answers are confusing and time consuming, so thank you thank you for your help. It’s guys like you that help us newbies grow and pay it forward.
Trey
Hi all, I’m wondering if any of you picture-elemets gurus could help me execute on an idea.
What I want is a card that has only text and which respects the theme colors. I want to just position some labels and sensor values on a blank canvas but without the picture which is a requirement for picture-elements.
I really wanted to use picture-elements because it seems quite easy to lay things out but the requirement for a picture background means that it’s not going to look quite right with my changing themes… I tried it with markdown card but it wasn’t flexible enough with positioning the text to do what I wanted.
What do you think, is there some way to do this or do I have to learn how to make custom cards (which looks pretty far out of my level of ability seeing as I have no web development or javascript expertise)?
Thanks all.