Custom Lovelace Card - Homekit style card

Share your Projects! Dashboards & Frontend
,
988

Hey,

Here is the solution what I have:

cards:
      - type: "custom:homekit-card"
        statePositionTop: true
        entities:           
          - title: Világítás
            popup:
              type: custom:light-popup-card
              settings: true
              sliderColoredByLight: true
              actionsInARow: 5
            entities:
              - entity: light.living_room_rgbw
                name: "Nappali LED"
                popupExtend:
                  settingsCard:
                    type: custom:more-info-card
                    cardOptions:
                      entity: light.living_room_rgbw
                  actions:
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_white_20

I am using the more-info-card. You can download it using HACS.

2 Likes
989

@DBuit - Could you pls take a look what might be causing the bug which for I opened a git issue a few days ago?

Thanks!

990

Hi,

I have the same problem on my iphone 6, working fine on Ipad

991

Hey,

Yepp, also works for me without issues on iPad (Air 3 - v13.6)

992

Is it possible to create a tile to show what is on media player

993

Hi I need the following help

  1. How can you configure a code on Lovelace that allows an icon to change color when its status changes?
  2. What kind of card should I use to be able to view the data it provides me on a site such as opeweathermap I can currently only see an animated icon and the phrase sunny, but humidity, temperature, wind etc that I see here are not seen in the classic card
  3. Can I put two different entities on a card if so what is the code? This would save occupancy in the display.
  4. What type of card should be used to view camera images?
994

If there is a lovelace card that shows this, than you can render that card in a tile. so yes

995

Hi.

  1. You say lovelace or specific this card? This card you could use conditionalClass option example:
conditionalClass: >
                          [[[
                            var bri = states['light.beganegrond'].attributes.brightness;
                            if (bri < 100)
                              return "redicon";
                            else if (bri < 200)
                              return "greenicon";
                            else
                              return "";
                          ]]]

And style part:

.redicon .button-inner .icon {
              color: #F00!important;
          }
          .greenicon .button-inner .icon {
              color: #2B823A!important;
          }
  1. dont know
  2. Nope
  3. https://www.home-assistant.io/lovelace/picture-elements/
996

Thx
Your work is awesome

My previous question

IMG_20200823_100657
IMG_20200823_1006572000×1125 821 KB

Any way to move does tiles to left
Upper row of tiles, it is homekit card

998

Hi,

strange they should be left i think.
Can you share your config?

999

Thank you for your answers you have been very kind, but on one of them I would like to ask you more about the weather card point I have loaded the weather-card via HACS and when I put the code in the lovelace I get what I have shown you where all are missing the quantities temperature humidity wind and pressure that if I use the weather card in another part appear regularly. Can you help me understand why.

Immagine
Immagine962×377 41.7 KB

As far as the icon change is concerned, the two examples you gave me in response, if I have not misunderstood, are two different situations, one concerns the color change of the lamp icon and the other concerns the color change of a button depending on the correct state? If I wanted to change the color of a thermometer that measures temperature I would have to use the first example right?

1000

Have the same problem as other with tiles wider then 2 akting wierd. I saw someone above that had the same problem with weather card.

Code:

              - 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;
                  }
                noPadding: true
                wider: true
                widersize: 2![Skärmklipp|390x413](upload://3hwwZ98miyjsKDjYFZIyKiob6NT.jpeg)

Like i said i think u seen the problem but not a code respond to it. So there is mine and under is how it displaced itself now with latest version of both Homeassistant and Homekit card It allso happens only on my pc so far. Cleard Cashe and all but its still there on pc. did the same on iphone but then the problem is not there. Im using chrome.

Skärmklipp

On mobile phone it looks like this

IMG_4019.PNG
IMG_4019.PNG1125×2436 463 KB

So i think it has something to do with the style code or code under together. sins when you change with and height from 90x90 to 100x100 the problem start on the phone aswell.

style: |
  :host {
    --tile-background: rgba(10, 10, 10, 0.22);
    --tile-border-radius: 12px;
    --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-on-icon-color: var(--paper-item-icon-active-color);

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

    --tile-icon-size: 30px;
    --tile-padding-top: 0
    --tile-image-radius: 0;
    } 
    .icon.image {
          position: absolut

Ive submited it to github aswell.

1 Like
1001

i putt up and down tiles

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
1002

Hi seeing your code you opened a world for me and I tried to load it and it works fine by adapting it to my entity. Now I wanted to ask you do you know how it is possible to make the background of the card and the white writings dark? I tried your code I see the card but the writings are clear on a white background and therefore cannot be read.

[image]

1003

Can it be your theme?

1004

I see what the problem is in some way.
In the phone the style with and hight is 90x90
And on the desktop its set to 100x100

and so on the phone it works and not on the Desktop.

style: |
  :host {
    --tile-background: rgba(10, 10, 10, 0.22);
    --tile-border-radius: 12px;
    --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-on-icon-color: var(--paper-item-icon-active-color);

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

    --tile-icon-size: 30px;
    --tile-padding-top: 0
    --tile-image-radius: 0;
    } 
    .icon.image {
          position: absolute;
          width: 100%;
           height: 100%;
          left: 0;
           top: 0;
          z-index: -1;
       }
       .icon.image img {
          height: 100%;
       }
  }
1 Like
1005

yes it may be possible i am using google dark theme i will try to understand the code better thank you so much if i have other doubts i will disturb you

1007

Np just ask away. ill do what i can to answer. Im baseing most of my coloring to use what ever theme is being used. But if its just the weather card code it should be the theme.

1008

Hello everyone,

Just released fix for width problems, let me know if it is solved!

1009

You mean wider: true
Works