Custom Lovelace Card - Homekit style card

dlsnet · December 25, 2021, 7:37am

Is it possible to create a template or theme incorporating all css overrides I did to the homeKit style card? I mean this section:

    style: &homeKitStyles |
      :host {

        --tile-background: rgba(30, 30, 30, 0.22);
        --tile-border-radius: 10px;

        --tile-width: 100px;
        --tile-height: 100px;
        --tile-on-background: var(--card-background-color);

        --tile-name-text-color: var(--disabled-text-color);
        --tile-on-name-text-color: var(--primary-text-color);

        --tile-state-text-color: var(--disabled-text-color);
        --tile-on-state-text-color: var(--paper-item-icon-active-color);

        --tile-state-changed-text-color: var(--primary-text-color);
        --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);

        --tile-value-text-color: var(--primary-text-color);

        --tile-icon-color: var(--disabled-text-color);


        --tile-width-mobile: 90px;
        --tile-height-mobile: 90px;

        --tile-icon-size: 30px;
        --tile-padding-top: 0
        --tile-image-radius: 0;
      }  
      .row {
        padding-top: 0px!important;
      }

   etc.

bat-maniac · December 25, 2021, 11:02am

Thank you for the answer. But I knew that already.

My question is how you style the tile separately?
What I mean: how did you get the tile icon for that tile red, while the others are green?
I only can set the the icon-color for all tiles, but not for one tile separately.

dlsnet · December 25, 2021, 4:27pm

You don’t do it ‘separately’ manually. You just need to:

On your device trigger conditional class (conditionalClass tag)
On css overrides ensure that you have override configured for that conditional class. (.codeRed or .codeGreen in my example)

After that some magic will happen.

Here is an example of override for icon color:

      .codeGreen .icon {
          color: var(--tile-on-icon-color, green)!important;
      }
      .codeRed .icon {
          color: var(--tile-on-icon-color, red)!important;
      }

bat-maniac · December 25, 2021, 8:07pm

Wow. That’s great!

Thank you very much for sharing. I’ve been searching for a possibility to change the icon color by tile for a long time.

Wish you a merry x-mas

ebz · December 26, 2021, 5:41am

Hi @mvanlijden
Just figured out we have the same problem, Did you managed to solve it ?

mvanlijden · December 26, 2021, 12:27pm

I didn’t, it’s a bug that appeared with the November of HA update I think. @DBuit didn’t reply to the bug yet: No more mode icons · Issue #19 · DBuit/thermostat-popup-card · GitHub

ebz · December 27, 2021, 2:09am

The fix should be easy (just tested), At line number 3198 of the code the ha-icon-button should be replaced with ha-icon, and so on line 3204, This fixed my Icon issue.
Not sure if to commit or wait till @DBuit will fix this by himself…

Jimmy_Berglund · December 27, 2021, 8:29am

Is it just me doing something wrong or did we loose haptic feedback on ios users a uppdate ago?
I cant get it working with my code below. I just have no feedback with pushing the buttons. Only time it works are with custom cards buttons. @DBuit any insight to why?

              - entity: light.vardagsrum_golvlampor
                haptic: success
                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

As far as i figured out the haptic feedback is on all my sensors and entitys that are not lights. So it has to do with something in the lights config as the one above.

royle · December 28, 2021, 8:32am

Sorry my bad,
the problem was on the resources setting,
@DBuit thanks for your replay and for this card.

Jimmy_Berglund · December 30, 2021, 12:00am

Even when i slim the code down. All lights wont show haptic feedback on the phone with the latest update.
So something must have happend sins i have not changed the code in a long time.

Enven when slimmed to this i get no reaction on the phone on lights.

              - entity: light.vardagsrum_golvlampor
                icon: hue:floor-shade
                name: Golvlampor

Ive tried to add haptic code to my config and that does nothing. The only thing that it still works on are other custom cards i use in this card like sensors.

like this one

      - column: 1
        entities:
          - entities:
              - deep_press: true
                entity: sensor.vardagsrum_temperature
                tap_action:
                  action: more-info
                  entity: sensor.vardagsrum_temperature
                hold_action:
                  action: more-info
                  entity: sensor.vardagsrum_temperature

Jimmy_Berglund · December 30, 2021, 12:14am

Only thing i see that is diffrent is that i point towards the more-info option on the sensors and i guess thats what triggers the haptic feedback and not acualy @DBuit card.

Anyone allse having the same problem as i do?

Jimmy_Berglund · December 30, 2021, 12:50am

If anyone that has used this card for a long time and has stuble on the same problem i had then here with haptic. then heres the solution if you wanna be able to use the card and popupp as i do then you have to specefy right now both tap action and hold. And ad haptic to it for every entity.

I hope this can be added back to work as it was before latest patch as it atleast was for me upp untill now.

              - deep_press: true
                entity: light.vardagsrum_golvlampor
                icon: hue:floor-shade
                name: Golvlampor
                tap_action:
                  action: toggle
                  entity: light.vardagsrum_golvlampor
                  haptic: light
                hold_action:
                  haptic: heavy
                  action: popup

royle · December 30, 2021, 8:36pm

Hi @DBuit
Can I change the title size and make it in the canter of column ?
thanks

Twours · January 3, 2022, 2:42am

Has anyone been able to get a media entity to have the ‘image’ or ‘playing state’ to show whats playing? and still fit the small tile icon?

Mustafa_Fathy · January 12, 2022, 9:27am

thank you for this great card. my thermostat popup doesn’t show AC modes just light colors

PskNorz · January 12, 2022, 7:21pm

Hey guys, newbie here i need to help.

First of all i managed to put the icons in the UI ( i am a newbie so this is a big step for me)

One problem that i have is that the button card color some times is like that

And other times like that

The next think that i wanna ask is how can i change the colors on the cyrcle and on the slider.
On the slider if its possible i want the background to be like the current rgb effect.

Thank you!

nwootton · January 17, 2022, 2:39pm

So I’ve been playing with the HomeKit-Panel card and it’s associated popups with a variety of success. Row, columns and simple buttons are all working fine. I have a stupid question for the more knowledgeable members of the community.

Should the light-popup-card.js & thermostat-popup-card.js appear in the JS console in the same way that my other HACS modules/resources appear?

No matter what I do, they don’t show up. They are listed in my resources.yaml file and show up under the Resources tab in the Dashboards configuration section of HA. I can see that the files are requested by the browser and returned without error in the dev tools Network tab.

Is this lack of library the reason I can’t get the light popup to appear, no matter what? Below is the complete page I’m trying to get to work.

title: "Testing Stuff"
path: testing
panel: true
cards:
  - type: "custom:homekit-card"
    useBrightness: true
    statePositionTop: true
    entities:
      - title: Row 1
        haptic: success
        popup:
          type: custom:light-popup-card
        entities:
          - entity: light.ikea_bulb_01
            name: Desk lamp

Any advice would be appreciated.

Update: Is the warning about the missing js.map for the HomeKit-panel card anything to do with this issue or is it completely unrelated and nothing to worry about?

cismarine · January 18, 2022, 2:16pm

Hi,

First of all… Big thank you to the author and also to all of you for very informative discussion.
I have couple of questions:
How can I get rid of that selected text background in sidebar?
Also, my radio button… I have tried to make it smaller, but failing.
Used picture element as well as picture entity.
Thanks in advance.

Screenshot 2022-01-18 at 15.09.48

andrea.artoni · January 19, 2022, 3:26pm

Hello everyone,
sorry for the stupid question but i’m trying to use custom:thermostat-popup-card without succeeding.
this is my code

title: Casa Marudo
views:
  - title: test
    path: test
    icon: mdi:home-outline
    panel: true
    background: center / cover no-repeat url("/local/images/sfondo.png") fixed
    cards:
      - type: custom:homekit-card
        style: |
          :host {
            --tile-background: rgba(255, 255, 255, 0.8);
            --tile-border-radius: 12px;
            --tile-width: 100px;
            --tile-height: 100px;
            --tile-on-background: rgba(255, 255, 255, 1);
            --tile-state-text-color: rgba(0, 0, 0, 0.4);
            --tile-on-state-text-color: rgba(255, 0, 0, 1);
                }
            homekit-button .icon.climate {
            background-color:#4CAF50!important;
            }
        title: Casa Marudo
        useBrightness: false
        useTemperature: false
        useRGB: false
        titleColor: '#FFF'
        enableColumns: false
        statePositionTop: true
        entities:
          - title: Soggiorno
            entities:
              - entity: climate.soggiorno
                popup: null
                type: custom:thermostat-popup-card

where am I wrong?

Thanks

chino-lu · January 20, 2022, 7:15am

For some reason, the icon size for climate is bigger than the other ones (all parameters on default)
grafik

changing the icon size for updater is also changing the padding and I am not able to get both to look the same