Great work and really like the work and effort you put in.
I started 2 days ago with your Homekit cards and it does what i want.
The only thing i notice, is that when i use your light-popup-card, the more-info options on my other tiles won’t work, i won’t see a popup and the screen turns grey.
Any thoughts?
Hi geat to hear!
I think your problem is related to this issue of browser mod https://github.com/thomasloven/hass-browser_mod/issues/56
Thanks a lot!
Totally missed it…
Je hebt je biertje verdiend;)
no errors, and yes, close makes it go back to the popup.
feature request:
can we color the percentage?
maybe you can also have a look at the color options of button-card which allows for following brightness/color using auto or auto-no-temperature: https://github.com/custom-cards/button-card/blob/master/README.md#main-options which is very nice for visibility.
Hi,
Probably something with css of the more-info.
Can you share your Total config? The popup is using browser mod?
In use the same coloring for the icon in the pop-up as button card but you wanna color the percentage in the pop-up?
Yeah I think so too, but I havent touched that…yet.
I did do this in the popup card itself:
// .fullscreen {
// margin-top:-64px;
// }
otherwise the top of the popup isn’t visible, as discussed above with @jimz011
yes, I’d like to color the percentage, (simply want to make it follow the icon color)
Button-card has 2 options for this, follow color And temperature, or follow only color. would be cool if you implement that too.
this is in my button_template, calling the popup via browser_mod:
hold_action:
haptic: heavy
action: call-service
service: browser_mod.popup
service_data:
title: >
[[[ return entity.attributes.friendly_name ]]]
card: !include /config/lovelace/includes/include_light_button_popup.yaml
style:
# position: fixed
# z-index: 999
# top: 20
# left: 0
# height: 85%
# width: 30%
display: block
# align-items: center #prevents vertical scrolling on vertical stacks
# justify-content: center
background: rgba(0, 0, 0, 0.8)
color: 'var(--primary-color)'
# flex-direction: column
# margin: 0
# --iron-icon-fill-color: >
# [[[ var bri = states[entity.entity_id].attributes.brightness;
# var bri = 254 - bri;
# return 'hsl(' + bri + ',65%,50%)'; ]]]
# ]]]"#FFF"
the include is:
type: vertical-stack
cards:
# - type: custom:swipe-card
# cards:
# - type: custom:light-entity-card
# entity: '[[[ return entity.entity_id ]]]'
# persist_features: true
# show_slider_percent: true
# smooth_color_wheel: true
- type: entities
style: |
ha-card {
--ha-card-background: transparant;
background: transparant;
box-shadow: none;
margin-top: -15px;
}
entities:
- type: custom:light-popup-card
entity: '[[[ return entity.entity_id ]]]'
fullscreen: false
sliderColoredByLight: true
sliderThumbColor: 'var(--paper-card-background-color)'
sliderTrackColor: ivory
settings: true
# --iron-icon-fill-color: 'var(--primary-color)'
# [[[ var bri = states[entity.entity_id].attributes.brightness;
# return 'hsl(' + bri + ',65%,50%)'; ]]]
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
# supportedFeaturesTreshold: {{ _global.lights_popup.supportedFeaturesTreshold|default('9') }}
- type: custom:button-card
template: vertical-filler
- type: 'custom:rgb-light-card'
entity: '[[[ return entity.entity_id ]]]'
colors:
- color_temp: 153
transition: 2
icon_color: 'rgb(166, 209, 255)'
- color_temp: 227
transition: 2
icon_color: 'rgb(191, 222, 255)'
- color_temp: 300
transition: 2
icon_color: 'rgb(224, 239, 255)'
justify: center
- type: custom:rgb-light-card
entity: '[[[ return entity.entity_id ]]]'
colors:
- color_temp: 360
transition: 2
icon_color: 'rgb(255, 202, 112)'
- color_temp: 440
transition: 2
icon_color: 'rgb(255, 188, 74)'
- color_temp: 500
transition: 2
icon_color: 'rgb(255, 160, 0)'
justify: center
# - type: entities
# style: |
# ha-card {
# --ha-card-background: transparant;
# background: transparant;
# box-shadow: none;
# --paper-slider-knob-color: white;
# --paper-slider-knob-start-color: white;
# --paper-slider-pin-color: white;
# --paper-slider-active-color: white;
# color: white !important;
# --primary-text-color: white !important;
# }
# entities:
# - type: custom:more-info-card
# style: |
# ha-card {
# border-radius: none;
# box-shadow: none;
# margin-top: -40px;
# }
# entity: '[[[ return entity.entity_id ]]]'
Hi @Mariusthvdb,
The .fullscreen part you removed does not need to be removed any more in the new version if you set fullscreen: false this will be removed in the card.
I just released new version with a fix for your problem, this happend because of the fullscreen: false this works now.
This is awsome, just when I setup settings, the popup is too big becouse of large effect list. Any way around it?
thanks, and better indeed. Nice!
Still some finetuning:
the settings button is not placed as it should be, it is almost touching the buttons below the slider:
why not have it show an mdi:cog icon for settings, do so in the top right corner, so you know there will never be any other part of the interface clicking or touching it.
secondly, the more-info screen can be rather informative 
as the post above also showed, here’s my more-info:
As you can see the Close button is again in the incorrect spot, and again, my suggestion would be to show it top right corner, as a button mdi:cog-transfer, to indicate going back to the popup itself (opposed to closing by clicking the X)
lastly, the 6 scene buttons are still visible, and it seems this is part of the more-info window. Imho, that should not be visible when the more-info is loaded, to prevent users from clicking that.
thanks!
I will add some options to place the settings button better.
The settings page it self is hard because i can’t control what is shown inside.
I think it is better to use the settingsCard and load a custom card like https://github.com/thomasloven/lovelace-more-info-card which is just the more-info but this gives you access to the cardStyle and this way you could hide parts of the card that you don’t wanna show are change stuff to make it fit better.
My popup is styled fullscreen so that gives me alot of more space so for me it works out of the box 
Let me know if you can get something working or need any help.
The close button is placed correctly but you are displaying other cards below the pop-up card that doesnt work really good. maybe use the actions part of the light pop-up instead of using the rgb card i think you can get the same thing working.
@INTEL you could also use this card: https://github.com/ljmerza/light-entity-card
It has the same stuff as more-info but looks more compact. have not tested my self yet.
Will there be iOS release for this app?
This is no app, it’s basic lovelace that you can use in the regular ios app.
Thank’s, gonna try it out later
yes, Ive tried that too:
- type: entities
style: |
ha-card {
--ha-card-background: transparant;
background: transparant;
box-shadow: none;
margin-top: -15px;
}
entities:
- type: custom:light-popup-card
entity: '[[[ return entity.entity_id ]]]'
fullscreen: false
sliderColoredByLight: true
sliderThumbColor: 'var(--paper-card-background-color)'
sliderTrackColor: ivory
settings: true
# --iron-icon-fill-color: 'var(--primary-color)'
# [[[ var bri = states[entity.entity_id].attributes.brightness;
# return 'hsl(' + bri + ',65%,50%)'; ]]]
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
# supportedFeaturesTreshold: {{ _global.lights_popup.supportedFeaturesTreshold|default('9') }
actions:
- service: scene.turn_on
service_data:
entity_id: scene.lezen
color: "#FFE7C0"
name: Lezen
- service: script.turn_on
service_data:
entity_id: script.lighting_home_theater
color: "#FFE7C0"
name: Film
- service: scene.turn_on
service_data:
entity_id: scene.naar_bed
color: "#FFE7C0"
name: Naar bed
- service: scene.turn_on
service_data:
entity_id: scene.slapen
color: black
name: Slapen
and then I see a more-info, but the actions are not displayed… am I doing something wrong in that config part?
nevermind, had the wrong indent… sorry for that
note how the bottom part slips behind the Dock, and even using fullscreen mode on the Mac doesn’t prevent the from happening:
tried another popup, and that revealed the full more-info
edit
got the actions, and the rgb card now, and using the custom:more-info-card in a vertical stack, all nicely sliding up and down (ill retry if and when you have had opportunity to change the popup-card for the buttons and positioning):
real sorry about the ridiculous sizing of the images here, I’ve set them to 50% and they only seem to get bigger…
Yup, this is great solution, working as it should now.
Hey I love your layout! How do you to the titles? Did you share your YAML anywhere already?
