Thanks for the write up. Personally I prefer manual installation but I installed HACS briefly when the module was first released to ensure that it was available through HACS as I figured it would be requested by interested users.I removed HACS shortly after as I didn’t find the addon useful for my self and I tend to limit cluttering of my HA installation and lessening side effects from unstable addons. I apologise for having to go the long route in getting my module installed and I may investigate this soon as to why it wouldn’t show in HACS initially but other projects has caught my attention which as a result limits my focus for working on this module. In the mean time I hope it will suffice and you get what’s needed from the current release.
I like the HACS install method as I believe it will notify me of new versions.
i started to implement this but need some help with my setup. The state button-card is not showing correctly and i am lost how to fix it.
elements:
- entity: device_tracker.jonny_iphone_xr
image: /local/images/michael/home.png
style:
left: 50%
top: 50%
width: 100%
type: image
- entity: sensor.jonny_iphone_xr_battery_level_2
style:
'--paper-item-icon-color': >-
${'hsl(' + (states['sensor.jonny_iphone_xr_battery_level_2'].state*1.1
)*((states['sensor.jonny_iphone_xr_battery_level_2'].state/100)) +
',90%,40%)'}
left: 2.8%
top: 1.3%
transform: 'scale(1.2,1.2)'
type: state-icon
- entity: sensor.jonny_iphone_xr_connection_type_2
style:
left: 79.5%
top: 2.3%
transform: 'scale(1.2,1.2)'
type: state-icon
- type: 'custom:button-card'
color_type: icon
entity: device_tracker.jonny_iphone_xr_4
show_icon: false
show_name: false
show_state: true
styles:
card:
- left: 90%
- top: 1%
- height: 20px
state:
- padding-bottom: 1px
- padding-top: 1px
- padding-left: 30px
- padding-right: 30px
- font-family: var(--primary-font-family)
image: /local/images/empty_frame.png
type: picture-elements
Well this setup works ok. Think i stick with that.
An button-card below did fix it
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.
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.
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…
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 
But Friday’s are great 
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
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.
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