Yeah still not working here…
Also i think @Dbuit is very busy to help…
Other thing is , i still have a tile not showing good (weather)
It has widerSize 3 and higherSize 2 but not showing well
(been spitting this topic over and over to find answer but can’t find one)
Hi guys,
Has anyone able to integrate an rgb wheel inside Custom Pop-up in Homekit style card?
Able to advise how to get this done, I am existing Card Popup with a couple of scenes and would like to add a RGB wheel to adjust the colour of my lighting group.
Below e.g. done by Matt.
Code to get it working as good as possible is
- card: weather-forecast
cardOptions:
entity: weather.smhi_hemma
cardStyle: |
ha-card {
padding: 5px!important;
display: flex!important;
flex-direction: column!important;
background: transparent!important;
box-shadow: none!important;
border-radius:0!important;
}
.content {
display: flex!important;
flex-direction: row!important;
}
.icon-image {
min-width: auto!important;
}
.icon-image > * {
height: 32px!important;
flex: 0 0 32px!important;
}
.info .name-state {
font-weight: 500;
}
.info .name-state .state {
font-size:14px!important;
text-align:right;
}
.info .name-state .name {
font-size:14px!important;
}
.info .temp-attribute {
width:100%;
font-weight: 500;
}
.info .temp-attribute .temp {
font-size: 16px!important;
}
.info .temp-attribute .temp span {
font-size: 14px!important;
}
.forecast {
font-size: 10px!important;
padding-top: 5px!important;
}
.forecast-image-icon {
padding:0!important;
}
.forecast-image-icon > * {
width:20px!important;
height:20px!important;
margin: 0 auto!important;
}
.forecast .temp {
margin-top:0!important;
font-size:12px!important;
}
.forecast .templow {
display:none;
}
higher: true
higherSize: 1
noPadding: true
wider: true
widerSize: 2
Ive never been able to get a working button that you press that get in to the wheel.
But what get you the setting to pick color like that in the end of the gif animation is = “custom:light-entity-card”
Below you have my code that i use. But then you have to press Settings to get in to it. And that works fine for me. If you ever find out how to get it so that you can select that rainbow button to get in to it im all ears.
- deep_press: true
entity: light.vardagsrum_golvlampor
icon: hue:floor-shade
name: Golvlampor
offStates:
- 'off'
- unavailable
- otillgänglig
- unknown
popupExtend:
actions:
- color: '#d8d9e1'
service: light.turn_on
service_data:
color_temp: 153
entity_id: light.vardagsrum_golvlampor
- color: '#d5b08d'
service: light.turn_on
service_data:
color_temp: 326
entity_id: light.vardagsrum_golvlampor
- color: '#ce944b'
service: light.turn_on
service_data:
color_temp: 500
entity_id: light.vardagsrum_golvlampor
- color: '#271a00'
service: light.turn_on
service_data:
brightness: 5
color_temp: 500
entity_id: light.vardagsrum_golvlampor
- color: '#2E8B57'
service: light.turn_on
service_data:
color_name: seagreen
entity_id: light.vardagsrum_golvlampor
- color: '#D2691E'
service: light.turn_on
service_data:
color_name: chocolate
entity_id: light.vardagsrum_golvlampor
- color: '#FF00FF'
service: light.turn_on
service_data:
color_name: fuchsia
entity_id: light.vardagsrum_golvlampor
- color: '#DC143C'
service: light.turn_on
service_data:
color_name: crimson
entity_id: light.vardagsrum_golvlampor
- color: '#1E90FF'
service: light.turn_on
service_data:
color_name: dodgerblue
entity_id: light.vardagsrum_golvlampor
- color: '#FFD700'
service: light.turn_on
service_data:
color_name: gold
entity_id: light.vardagsrum_golvlampor
actionsInARow: 5
displayType: slider
settings:
closeButton: stäng
openButton: Inställningar
settingsCard:
cardOptions:
brightness: true
child_card: true
consolidate_entities: true
hide_header: false
shorten_cards: false
entity: light.vardagsrum_golvlampor
secondary_info: last-changed
smooth_color_wheel: true
cardStyle: |
background-color:#FFF;
type: custom:light-entity-card
I think i gave upp on it cause it was not possible unless you use Yaml mode.
Hi
I tried this code , but again, doesnt work
Your code has highersize 1 and widersize 2
My code needs highersize 2 and widersize 3
I adjusted it, but then again, your code doenst work, it shows like this
I found your code already way up in this topic, and tried that before too, without luck
So still, i’m looking for a code that works for higherSize 2 and widerSize 3
Think i tried like, 30 codes… without luck
I have it working in a somewhat similar fashion by using the setting button of the popup slider. Don’t have any actions with presets. But letting the settings link to the a light-entity-card which can show the RGB wheel does the trick for me. This is my popup after pre
Popup config for my entire row of lights (White & RGB):
popup:
type: custom:light-popup-card
displayType: slider
sliderColoredByLight: true
fullscreen: true
settings:
openButton: Details
closeButton: Sluiten
settingsPosition: top
settingsCard:
type: custom:light-entity-card
cardOptions:
entity: this
hide_header: false
persist_features: true
show_slider_percent: true
full_width_sliders: true
brightness: true
color_temp: true
white_value: true
color_wheel: true
color_picker: true
style: |
ha-card {
--ha-card-background: white;
width: 400px;
}
Hi mvanlijden,
Thanks for sharing your code, i managed to get it to work.
I do have 1 question, I happen to have a Lighting group called Dining Lights that has around 7 bulbs.
So when i try to launch the RGB wheel for it, it appears for each bulb.
2 issues i have :
You could create a group (Light Group - Home Assistant) and use that in the card. The controls are always linked to one entity, but with the group that will go to all lights in the group.
edit: should have read better that you already have the groups. I truly don’t know why the difference is being made. But it might be a good idea to test and configure your card separately from the popup first and then copy everything over to the popup settings config. Otherwise check the topic for the light-entity-card: Light Entity Card
Thanks Maarten,
Checked the Light Entity thread and found that the following code is required for grouped entities
consolidate_entities: true
Hi man,
Love the card makes everything look so sleek.
I have one issue with the heating & cooling. When I use the ‘useTemperature’ code it doesn’t change anything? Atm I have my air conditioning set to cool at 19 degrees but it shows the temp in red?
Anything I can do about that?
Also, with the media entity, can I have it switch the icon to show what I’m watching or on what service? EG show netflix icon or disney plus icon when I’m watching those?
Hey man, this looks great. How did you get the media player to show normal sized and shows the content and use the home kit card at the same time?
I can’t seem to achieve that since it’s in panel mode
I’m still looking to get a weather forecast card in a tile
But with widerSize: 3 and higherSize: 2
It’still not working using following code
card: weather-forecast
noPadding: true
wider: true
widerSize: 3
higher: true
cardOptions:
entity: weather.thuis
style: |
:host {
--heigth: 100% ;
}I’m trying to get a tile for and input select button too, but even that one, has layout problems with padding
Here’s that code
card: custom:button-card
noPadding: true
wider: true
cardOptions:
entity: input_select.radio_station
styles:
card:
- width: 240px
- height: 120px
- font-size: 15px
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- padding-bottom: 25px
img_cell:
- justify-content: start
- padding-left: 25px
icon:
- justify-self: start
- padding-top: 10px 
Anyone can help?
Question. What type of eviroment do you use against homeassistant? Are you zoomed? Or something like that? Is it like that in all your devices?
Why I’m asking is cause the code I game you should
Work. Makes me wonder if the problem is allse were.
I am not zoomed…
Its happening on tablet (the weather) but not on smartphone, but the input select happens also on smartphone and tablet
Is it possible to get rid from the text “off” but keep the brightness value if the light is on. I’m trying to find a solution but it seems not possible? Thx in advance
Nevermind it, i was fed up with it and changed away from homekit style for some pages
I can’t seem to get my media entity to change to display the media content when its playing.
What do I need to do?
Hi everyone has any of you created a media player to manage Volumio?
If you haven’t made it but you have a card with a media player, could you share the code?
Thanks
Hi @skank
This is my weather card:
and this is my config:
- card: weather-forecast
noPadding: true
wider: true
widerSize: 3
cardOptions:
entity: weather.weersverwachting
cardStyle: |
ha-card {
padding: 10px!important;
display: flex!important;
flex-direction: column!important;
background: transparent!important;
box-shadow: none!important;
border-radius:0!important;
}
.content {
display: flex!important;
flex-direction: row!important;
}
.icon-image {
min-width: auto!important;
}
.icon-image > * {
height: 32px!important;
flex: 0 0 32px!important;
}
.info .name-state {
font-weight: 500;
}
.info .name-state .state {
font-size:14px!important;
text-align:right;
}
.info .name-state .name {
font-size:14px!important;
}
.info .temp-attribute {
width:100%;
font-weight: 500;
}
.info .temp-attribute .temp {
font-size: 16px!important;
}
.info .temp-attribute .temp span {
font-size: 14px!important;
}
.forecast {
font-size: 10px!important;
padding-top: 5px!important;
}
.forecast-image-icon {
padding:0!important;
}
.forecast-image-icon > * {
width:20px!important;
height:20px!important;
margin: 0 auto!important;
}
.forecast .temp {
margin-top:0!important;
font-size:12px!important;
}
.forecast .templow {
display:none;
}
Maybe is helps you?
About the checkcard, can you share what card that is? and what is not working?