I imagine you would probably create a new optional boolean field for the state icon.
The logic would be as follows:
state field they can then optionally choose whether to use an icon. If set to true, the system icon would be displayed. If set to false, the text of the state (which you have now) would be displayed.
Ok so you donât want to overwrite the entity icon. but replace the textual state of the state with the icon?
But in your example you got 3 icons?
Correct - just use the entity icon
This screenshot is taken from my previous HA configuration which I am no longer using. It is a heavily modified version of @jimz011 previous config so you can ignore the 3rd icon (unless you want to use it for inspiration for future development haha)
ok let me tryâŚ
what popup do you use? individual or all options at once.
I was wondering if we can use the popup to show a template, which holds the three in a horizontal or vertical stack, so we can scroll in the popup.
Of course need to fiddle about with lights with and without rgb colors or using color_temp.
so, if you are, can you point me to the file for the popup I could use on my buttons, which is like this now:
hold_action:
haptic: heavy
action: call-service
service: browser_mod.command
service_data:
command: popup
title: >
[[[ return entity.attributes.friendly_name ]]]
style:
position: fixed
z-index: 999
top: 0
left: 0
height: 100%
width: 100%
display: block
align-items: center
justify-content: center
background: rgba(0, 0, 0, 0.8)
color: 'var(--primary-color)'
flex-direction: column
margin: 0
"--iron-icon-fill-color": "#FFF"
card:
type: custom:light-popup-card
entity: >
[[[ return entity.entity_id ]]]
# icon: {{ icon }}
# scenesInARow: 2
sliderColoredByLight: true
sliderThumbColor: grey
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
Can you share your code for the button card that you have there? 
Sure, i make use of decluttering to have templates
#*****************************************************************
#* AUTHOR Lubbert Kramer terug
#* Github https://github.com/lubbertkramer/home_assistant_config
#*****************************************************************
default:
- size: 40%
- lock: false
- color: auto
- spin: false
- show_state: true
- show_label: false
- show_last_changed: false
- tap_action: toggle
- hold_action: more-info
- aspect_ratio: 1/1
card:
type: custom:button-card
name: '[[name]]'
deep_press: false
icon: 'mdi:[[icon]]'
size: '[[size]]'
color: '[[color]]'
lock: '[[lock]]'
aspect_ratio: '[[aspect_ratio]]'
entity: '[[entity]]'
show_state: '[[show_state]]'
show_label: '[[show_label]]'
show_last_changed: '[[show_last_changed]]'
tap_action:
action: '[[tap_action]]'
haptic: light
hold_action:
action: '[[hold_action]]'
haptic: heavy
styles:
card:
- border-radius: var(--theme-border-radius)
- --ha-card-background: var(--theme-button-card-color-state-on)
grid:
- grid-template-areas: '"i i" "n s"'
- grid-template-columns: 1fr lfr
- grid-template-rows: 1fr min-content min-content min-content
img_cell:
- align-self: start
- text-align: start
- margin-right: 60px
name:
- font-family: Helvetica
- font-size: 15px
- font-weight: bold
- text-transform: capitalize
- justify-self: start
- padding-left: 10px
state:
- font-family: Helvetica
- font-size: 14px
- font-weight: bold
- text-transform: capitalize
- padding: 0px 10px
- justify-self: start
- padding-left: 10px
label:
- font-family: Helvetica
- font-size: 14px
- font-weight: bold
- padding: 0px 10px
- justify-self: start
- padding-right: 10px
custom_fields:
brightness:
#- fill: '#FFFFFF10'
#- gradient: true
- max: 100
- min: 0
#- stroke_color: '#03a9f4'
#- stroke_width: 15
- height: 2.15vw
- opacity: 0.7
- width: 2.15vw
- overflow: visible
- position: absolute
- right: 15px
- top: 20px
# - right: 7%
# - top: 7%
custom_fields:
brightness:
card:
type: custom:circle-sensor-card
entity: '[[brightness]]'
max: 100
min: 0
#fill: '#007AF1'
stroke_width: 15
stroke_color: var(--theme-button-icon-color-state-on)
gradient: true
font_style:
color: var(--theme-button-name-color-state-on)
label: >
[[[
if (typeof(entity) === 'undefined') return;
if ('brightness' in entity.attributes)
{
if (entity.attributes
&& (entity.attributes.brightness <= 255)) {
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
}
}
]]]
state:
- value: "[[[ return '' + entity.state + ''; ]]]"
spin: '[[spin]]'
styles:
card:
- --ha-card-background: "[[[ return 'var(--theme-button-card-color-state-' + entity.state + ')'; ]]]"
icon:
- color: "[[[ return 'var(--theme-button-icon-color-state-' + entity.state + ')'; ]]]"
- animation: "[[[ return 'var(--theme-button-icon-animation-state-' + entity.state + ')'; ]]]"
lock:
- color: "[[[ return 'var(--theme-button-lock-color-state-' + entity.state + ')'; ]]]"
label:
- color: "[[[ return 'var(--theme-button-label-color-state-' + entity.state + ')'; ]]]"
name:
- color: "[[[ return 'var(--theme-button-name-color-state-' + entity.state + ')'; ]]]"
state:
- color: "[[[ return 'var(--theme-button-state-color-state-' + entity.state + ')'; ]]]"
custom_fields:
brightness:
- fill: "[[[ return 'var(--theme-button-card-color-state-' + entity.state + ')'; ]]]"
Back ontopic, i prefer to start using this homekit card but to do that i would want to define the size (width/hight) by %. Would give less code and nicer views
Sorry I do not understand your question entirely. Could you rephrase it for me please?
sorry for thatâŚ
trying to get those 3 popup cards you show there in the button-card-templates for my light buttons, on hold-action. using browser_mod.popup. (replaced the browser_mod.command meanwhile)
Ive found a way to use your color_temp_popup.yaml. Had to forget the lovelace_gen in that for now, and use regular [[[ templates ]]] , and had to code it directly in the button_card_template instead of an !include, which I had hoped to useâŚ
Anyways, long story short: I am on my way now, but still donât see the color wheel you have in the linked post above.
which is that?
That color wheel is a light-entity card. Which I happen to no longer use. I use a more-info card now as it is more versatile imho.
I have also removed any conditional and the cards are now in a swipe-card within the popup. Another note: I can scroll on my popups!
Donât ask me how I can scroll on it, because I literally donât know. I have been able to scroll on popup cards ever since browser_mod has been updated a few months back.
yeah, I can scroll too, which is nice. It is not very stable though, especially on desktopâŚ
ah, the light-entity card. Never used that before , always had the native more-info (not the more info card)
wondering of all these extra custom cards in popup, donât take too much processor, compared to the builtin more-info. Not really much more functionality other than the few direct âsceneâ buttons, which admittedly are nice.
thanks, will play around some more
Donât know I use decent hardware for Home Assistant. Which sometimes seem to be a problem as people ask me why their rpi sometimes canât handle my project. In my own case my interface is very fast and responsive almost as fast as the official Home app from Apple.
Though you use rgb-card as well? Because the popup card from @DBuit can handle this as well (I do not use it âyetâ) that would already take out a custom card.
yes, I do, and replacing it next with the options offered by the @DBuit card, since that was my original (and first ) popup card .
I do find the horizontal swiping to frustrate the horizontal brightness and color sliders, so took out the swipe card, and place them directly in a vertical stack, which works much better, and still offers the swiping feel, albeit vertical.
only styling thing for now is the icon and percentage number of the light-popup-card are half way hidden behind the top bar of the popup:
should be:
using style:
style:
# position: fixed
# z-index: 999
top: 20
# left: 0
height: 85%
width: 30%
display: block
align-items: center
justify-content: center
background: rgba(0, 0, 0, 0.8)
color: 'var(--primary-color)'
flex-direction: column
margin: 0
"--iron-icon-fill-color": "#FFF"
any thoughts on the setting to prevent that?
Iâve tried the original styling I used when only this card I popup, but that doesnât help. This is my popup for now:
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: grey
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 ]]]'
and the button calling it:
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
deviceID:
- this
@Mariusthvdb I have the exact same problem and this only occurs whenever you put the card inside a stack.
Two options here:
Either open up the .js file from that card (light-popup.js) and remove the fullscreen lines. (I have also removed the popup-wrapper lines, but this doesnât seem to be needed anymore).
OR: Get the already modified .js file from my repo. Click Here
This card is already modified to do that and is the latest version. You do need to add the following variable to your card configuration:
fullscreen: false
The fullscreen option will remove the popup wrapper. Though it will still have the negative margin. My modified card has simply removed the fullscreen option entirely and should work for you.
You MUST remove the .gz file that also lives in the light-popup folder otherwise it wont work. You might need to refresh/restart HA for the changes to take effect.
Good luck, let me know if it fixed it for you!
Edit: you donât need extra styling options in your popup when using my js file except for colors.
Hi all, hi Jimz011,
Sorry for my newbie question but, what is the difference between âCustom Lovelace Cardâ and your solution âHomekit Infusedâ ?
Gautier
The difference is, Homekit infused is a complete lovelace package. It has a lot of stuff pre configured and is based partially on auto filled views. Basically installing Homekit Infused will set you up with the basic views ready to go including all the popup cards that come with it. I have created Homekit Infused long before these solutions came out and thus might look similar.
The major difference between the two is: HKI is a complete package and this is a card. I have no experience with this card (though I do use a lot of @DBuitâs work in the form of popup cards). Though I donât think you can really compare the two as this is a card whereas I provide a full package.
THANKS.
already used the full_screen: false in the card config, but the edit to delete
// .fullscreen {
// margin-top:-64px;
// }
made it happen:
maybe we could ping @DBuit to see why this is happening?
btw, in my button_template I am now using this styling:
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": "#FFF"
all commented out lines didnât sort any usable effect, so not really sure why they are there in the first place.(note I donât need/want full screen popup on my desktop, on mobile, the popup is always full screen, no matter which setting, unless I might decrease the sizes)
of course we could change the position on the screen to go beyond the edges, but wouldnât be useful would itâŚ
using the minimal setup above works just fine
Yup minimal is how I use it too. No need for positioning.
The thermostat-popup has the same full screen margins which I had to remove as well.
Stil the best looking sliders imho.
Hello everyone,
Just release new version of the light pop-up card (https://github.com/DBuit/light-popup-card)
New stuff
sliderTrackColor to configuration to change the color of the track.settings which enable an extra page on the pop-up that displays the more-info pop-up content to give more controlsettingsCard when settings is enabled you can instead render any lovelace card on the extra page (Check readme for example configuration)Fixed
Screenshot of the settings:
Nice thought @DBuit, used the more-info card to do just that. took that out and installed your new card immediately:
if I show use my more-info in the popup-vertical-stack along the light-popup-card, this is displayed:
(must admit I took out the
// .fullscreen {
// margin-top:-64px;
// }
to have it show the top icon and percentage in the popup.
wat could be amiss?
That is strange.
Do you have console error in browser?
And if you click close does it go away?