Custom Lovelace Card - Homekit style card

[skank]

ok np, thx for the info, but the code is correct?
edit: mm its not working

rows:
      - row: 1    
        columns:
          - column: 1
            tileOnRow: 3
            entities:
              - entities:
                  - entity: script.douche
                    name: Douche
                    icon: mdi:shower-head
                    tap_action:
                      action: script.turn_on
                      entity: script.douche
                  - entity: script.bad
                    name: Bad
                    icon: mdi:shower
                    tap_action:
                      action: script.turn_on
                      entity: script.bad
                  - entity: script.welterusten
                    name: Slapen
                    icon: mdi:weather-night
                    tap_action:
                      action: script.turn_on
                      entity: script.welterusten
                  - entity: script.dinner
                    name: Etentje
                    icon: mdi:silverware-fork-knife
                    tap_action:
                      action: script.turn_on
                      entity: script.dinner

[doktordoc (Sasa)]

Can you take look at my config I putt up
To move icons too left, to be in middle

[claudiovillani58]

Thanks Jmmiy

[DBuit]

Hi,

You cannot use a script for entity. Because it van be anything. Use a custom tile where you set the icon and name you wanna show at set the tap action on that tile. Im not on pc so cant give you example niet buy look for fully custom tile or something on github instructions.

[doktordoc (Sasa)]

Sorry but you are looking wrong config

[thecrane (TC)]

As an aside, I’ve been doing some customisation to make the edges of the buttons glow when they’re on. Looks something like this:

It works really well, and I like the effect. However, the only way I can get it to work is to edit the homekit-panel-card.js file and add some CSS classes to the end of the static get styles() method:

      .button {
        background-color: var(--paper-card-background-color) !important;        
      }

      homekit-button.event.button.on {        
        box-shadow: 0px 0px 5px 3px var(--primary-color) !important;                
      }

      homekit-button.on, homekit-button .name.on, homekit-button .state.on, .button.on    {
        color: var(--primary-text-color) !important;        
      }

      homekit-button, homekit-button .name, homekit-button .state, .button    {
        color: var(--secondary-text-color) !important;        
      }

      homekit-button .icon, .icon {
        color: var(--secondary-text-color) !important;        
      }

      homekit-button .icon.on, .icon.on {        
        color: var(--primary-color) !important;
      }

      homekit-button .icon.climate {
        background-color: var(--primary-color) !important;
        color: var(--primary-text-color) !important;
      }

      div.card-title
      { padding-bottom: 20px !important; }

      .header li
      { padding-bottom: 10px !important; }

      .previous
      { display: none !important;}

This is because the styles seem to be set inline, so they override me putting these settings in my own custom CSS file.

Anyone out there (@DBuit?) have any ideas about how I/we could achieve the same effect without manually needing to edit the .js file after every upgrade?

[martheijnen (Mart)]

Unfortunately, it did not fix the issue (it is a bit more closer tho). Screenshot added

[claudiovillani58]

Hi I tried your code by placing it where you suggested, but the frame does not appear around the switched card

[tenallero]

Hi,
Thanks for this great software.
I am running release 0.5.8.3
Actually the “upper right circle state” shows the light´s brigthness visualizing only a percentaje of its perimeter. That is ok.
Could it be possible to do the same for cover´s current_position? Actually it shows full perimeter.
In the screen capture you can see light and cover circle state.

My cover´s tile …

- entity: cover.persiana_balcon
  name: Balcón
  offStates:
    - closed
  state: cover.persiana_balcon
  statePath: attributes.current_position

THK

[Noah]

Hello,
is there a way to apply grayscale filters to icon (off-)images?
Thanks all right

[doktordoc (Sasa)]

i want to move upper row of tiles to left

config:

title: HA
type: vertical-stack
views:
  - badges: []
    cards:
      - enableColumns: true
        home: false
        rows:
          - columns:
              - column: 1
                entities:
                  - entities:
                      - entity: light.sonoff_1000b4d5a9
                        icon: 'mdi:ceiling-light'
                        name: Dnevna soba
                      - entity: light.sonoff_1000b5ce4b
                        icon: 'mdi:ceiling-light'
                        name: Kuhinja
                      - entity: light.philips_podna_lampa
                        icon: 'mdi:floor-lamp'
                        name: Podna lampa
                      - entity: light.sonoff_100078c4a3
                        icon: 'mdi:led-strip-variant'
                        name: Zid
                      - entity: light.philips_ulaz
                        icon: 'mdi:ceiling-light'
                        name: Ulaz
                      - entity: light.philips_predulaz
                        icon: 'mdi:coach-lamp'
                        name: Predulaz
                tileOnRow: 10
        style: |
          :host {
            --tile-background: rgba(255, 255, 255, 0.1);
            --tile-border-radius: 10px;
            --tile-width: 75px;
            --tile-height: 75px;
            --tile-on-background: rgba(255, 255, 255, 0.3);
            --tile-name-text-color: rgba(255, 255, 255, 1);
            --tile-on-name-text-color: rgba(0, 0, 0, 1);
            --tile-state-text-color: rgba(0, 0, 0, 0.7);
            --tile-on-state-text-color: rgba(255,255,255, 1);
            --tile-state-changed-text-color: rgb(255, 255, 255);
            --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
            --tile-value-text-color: rgba(255, 0, 0, 1);
            --tile-icon-color: rgba(0, 0, 0, 0.6);
            --tile-on-icon-color: #F7D959;
            --tile-width-mobile: 90px;
            --tile-height-mobile: 90px;
          }     
        titleColor: '#FFF'
        type: 'custom:homekit-card'
      - entities:
          - height: 5
            size: 5
            type: 'custom:gap-card'
        type: 'custom:layout-card'
      - cards:
          - entities:
              - height: 20
                size: 20
                type: 'custom:gap-card'
            type: 'custom:layout-card'
          - text: prognoza
            type: 'custom:text-divider-row'
          - current: true
            details: false
            entity: weather.dark_sky
            forecast: true
            name: Sisak
            type: weather-forecast
          - text: kalendar
            type: 'custom:text-divider-row'
          - dateBottomFormat: ddd
            dateTopFormat: DD.MM
            disableLinks: false
            endText: End
            entities:
              - entity: calendar.praznici_u_hrvatskoj
                name: Praznici u Hrvatskoj
              - entity: calendar.runjaicsasa_gmail_com
                name: [email protected]
            eventsLimit: '99'
            fullDayEventText: All day
            hardLimit: false
            hideDeclined: false
            hideHeader: true
            hidePastEvents: false
            hideTime: false
            highlightToday: true
            ignoreEventsByLocationExpression: ''
            ignoreEventsExpression: ''
            maxHeight: false
            notifyDateTimeFormat: 'MM/DD/YYYY HH:mma'
            notifyEntity: mobile_app_mi_9t
            numberOfDays: '15'
            progressBar: true
            removeFromEventTitle: ''
            showEventOrigin: false
            showLocation: true
            showLocationIcon: true
            showMultiDay: true
            startText: Start
            style: |
              ha-card {
                height: 118px;
              } 
            timeFormat: 'HH:mma'
            type: 'custom:calendar-card'
        mode: vertical
        style: |
          ha-card {
            font-variant: small-caps;
            background-repeat: no-repeat;
            background-color: rgba(50,50,50,0.2);
            background-size: 100% 68px;        
            }
          .card-header {
            font-size: 20px;
          }
        type: 'custom:stack-in-card'
      - enableColumns: true
        home: false
        rows:
          - columns:
              - column: 1
                entities:
                  - entities:
                      - entity: light.sonoff_1000b4d5a9
                        icon: 'mdi:ceiling-light'
                        name: Dnevna soba
                      - entity: light.sonoff_1000b5ce4b
                        icon: 'mdi:ceiling-light'
                        name: Kuhinja
                      - entity: light.philips_podna_lampa
                        icon: 'mdi:floor-lamp'
                        name: Podna lampa
                      - entity: light.sonoff_100078c4a3
                        icon: 'mdi:led-strip-variant'
                        name: Zid
                      - entity: light.philips_ulaz
                        icon: 'mdi:ceiling-light'
                        name: Ulaz
                      - entity: light.philips_predulaz
                        icon: 'mdi:coach-lamp'
                        name: Predulaz
                tileOnRow: 10
        style: |
          :host {
            --tile-background: rgba(255, 255, 255, 0.1);
            --tile-border-radius: 10px;
            --tile-width: 75px;
            --tile-height: 75px;
            --tile-on-background: rgba(255, 255, 255, 0.3);
            --tile-name-text-color: rgba(255, 255, 255, 1);
            --tile-on-name-text-color: rgba(0, 0, 0, 1);
            --tile-state-text-color: rgba(0, 0, 0, 0.7);
            --tile-on-state-text-color: rgba(255,255,255, 1);
            --tile-state-changed-text-color: rgb(255, 255, 255);
            --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
            --tile-value-text-color: rgba(255, 0, 0, 1);
            --tile-icon-color: rgba(0, 0, 0, 0.6);
            --tile-on-icon-color: #F7D959;
            --tile-width-mobile: 90px;
            --tile-height-mobile: 90px;
          }     
        titleColor: '#FFF'
        type: 'custom:homekit-card'
    icon: 'mdi:home-outline'
    panel: false
    path: Home
    title: Home

in config is added and down row, in picture isnt

[claudiovillani58]

Hello everyone, I need help as already mentioned I am a beginner in the Homekit field and despite having made some cards I find myself facing two problems from which I cannot get out.
I have read and reread the links:

DBuit/light-popup-card

DBuit/thermostat-popup-card

but I can’t see either card, despite having followed the installation procedures described in the two links step by step.

I would like to understand from whom more experienced I see in the examples different parts of code that I would like to understand where they should be put, I mean let’s take the case of the light-pop-card this part of code I understand that it must be put in the ui-lovelace.yaml is correct ?
popup_cards:
light.beganegrond:
title: “”
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
–mdc-theme-surface: rgba(0,0,0,0);
–secondary-background-color: rgba(0,0,0,0);
–ha-card-background: rgba(0,0,0,0);
–mdc-dialog-scrim-color: rgba(0,0,0,0.8);
–mdc-dialog-min-height: 100%;
–mdc-dialog-min-width: 100%;
–mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: custom:light-popup-card
entity: light.beganegrond
icon: mdi:led-strip
actionsInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
actions:
- service: scene.turn_on
service_data:
entity_id: scene.ontspannen
color: “#FDCA64”
name: ontspannen
- service: scene.turn_on
service_data:
entity_id: scene.helder
color: “#FFE7C0”
name: helder
- service: scene.turn_on
service_data:
entity_id: scene.concentreren
color: “#BBEEF3”
name: concentreren
- service: scene.turn_on
service_data:
entity_id: scene.energie
color: “#8BCBDD”
name: energie

and this piece of code should also be put in ui-lovelace.yaml is this correct?

resources:
url: /hacsfiles/light-popup-card/light-popup-card.js
type: module

and this part of the code is the one that goes into LOVELACE where are all the cards?

card:
type: custom:light-popup-card
entity: light.beganegrond
settings:
openButton: Instellingen
closeButton: Sluiten
settingsCard:
type: entities
cardOptions:
entities:
- light.beganegrond
- light.zithoek
- light.eettafel
- light.kookeiland
cardStyle: |
background-color:#FFF;

or is there any code on this one above?

And finally, where does this part of the code go?
actions:

• service: scene.turn_on
  service_data:
  entity_id: scene.energie
  color: “#8BCBDD”
  name: energie
• service: homeassistant.toggle
  service_data:
  entity_id: light.voordeurlicht
  name: voordeur
  icon: mdi:lightbulb

Thanks for your possible contribution

[Dielee (Linus Dietz)]

Hello Guys,

how to get this tile up ?

code:

      - row: 2
        columns:
          - column: 1
            tileOnRow: 3
            entities:
              - title: Status
                entities:
                  - entity: input_boolean.putzen
                    name: Putzen

[claudiovillani58]

Hi could you tell me how to position the code to have a dimmable lamp like yours that I see in the screenshot Kuche and Wohnzimmer

[mkhattab (Pharaohnough)]

Is there a way to hide the entity name or the state?
I’m using halfheight so there’s not much space. hideState doesn’t seem to do anything
Here’s my code:

- entity: lock.front_door
  halfheight: true
  hideState: true
  name: Lock
  offStates:
    - locked

and here’s how it looks

I’d like to get rid of the name or the state so the other one fits in one line
(this entity is called “Front Door” so I’m giving it a name “Lock” here to save space but it looks terrible as you see)

[DBuit]

Hi,

Just set name to empty string. name: ""
The hideState is for the extra state soms entities show like brightness for dimmable lights

[DBuit]

hi @claudiovillani58,

what is working or is nothing working?
Maybe just start simple with just homekit card get entities on screen and expand after that with popups and stuff so you know when it is going wrong.

[mkhattab (Pharaohnough)]

Thanks for the quick reply. I’ve tried that already.
I thought maybe it’s different because this is a lock entity but it also doesn’t work on light entities like the following

- entity: light.entryway
  name: ""

EDIT: It works now. I had to add a space between the quotes

[claudiovillani58]

Hello thanks for replying I have to say that as you can see from the first screenshot everything works quite well at least for what concerns the on / off of the lamps what I can’t get to work see the second screenshot is the dimmable lamp I can only turn it on and off but not I can adjust the brightness. Below I will put you the code I put on the card, but I think something is missing to put somewhere else.
Also I wanted to ask you if you have a card and code to view the separate collection or when to put out the waste for recycling.
Thank you

[claudiovillani58]

hello here is some more info that I would like to understand where to put
in the Home Assistant folders to clarify the use and
creation of the Light popup card (homekit style)

I added as described in ui-lovelace.yaml:
resources:
url: /hacsfiles/light-popup-card/light-popup-card.js
type: module

where does this part of code go?

popup_cards:
light.beganegrond:
title: “”
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:100%;
box-shadow:none;
}
.: |
:host {
–mdc-theme-surface: rgba(0,0,0,0);
–secondary-background-color: rgba(0,0,0,0);
–ha-card-background: rgba(0,0,0,0);
–mdc-dialog-scrim-color: rgba(0,0,0,0.8);
–mdc-dialog-min-height: 100%;
–mdc-dialog-min-width: 100%;
–mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: custom:light-popup-card
entity: light.beganegrond
icon: mdi:led-strip
actionsInARow: 2
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
actions:
- service: scene.turn_on
service_data:
entity_id: scene.ontspannen
color: “#FDCA64”
name: ontspannen
- service: scene.turn_on
service_data:
entity_id: scene.helder
color: “#FFE7C0”
name: helder
- service: scene.turn_on
service_data:
entity_id: scene.concentreren
color: “#BBEEF3”
name: concentreren
- service: scene.turn_on
service_data:
entity_id: scene.energie
color: “#8BCBDD”
name: energie

and this part?

card:
type: custom:light-popup-card
entity: light.beganegrond
settings:
openButton: Instellingen
closeButton: Sluiten
settingsCard:
type: entities
cardOptions:
entities:
- light.beganegrond
- light.zithoek
- light.eettafel
- light.kookeiland
cardStyle: |
background-color:#FFF;

Thanks