Custom Lovelace Card - Homekit style card

Share your Projects! Dashboards & Frontend
,
968

Hello guys,

Do someone managed to use the “custom:swipe-card” into this project?
I’m trying to figure out how to use it, but i’m getting white tiles with nothing inside:

My Code: 
enableColumns: true
home: false
masonry: true
tileHoldAnimation: true
rows:
  - columns:
      - column: 1
        entities:
          - entities:
              - card: 'custom:swipe-card'
                wider: true
                widerSize: 3
                higher: true
                higherSize: 3
                cards:
                  - card: 'custom:mini-media-player'
                    noPadding: true
                    wider: true
                    widerSize: 3
                    higher: true
                    higherSize: 3
                    cardStyle: |
                      ha-card {
                      height: 100%;
                      background: none  !important;
                      box-shadow: none !important;
                      position: relative;
                      font-size: 0.5vw !important;
                      image
                      }
                      ha-card{
                      overflow: hidden !important;
                      }
                      :host #primaryProgress{
                      background: #474A52 !important; 
                      display: flex !important;
                      height: 100%;
                      }
                    cardOptions:
                      name: Apple TV
                      artwork: full-cover
                      entity: media_player.appletv_soggiorno
                      hide:
                        power: false
                        progress: false
                        runtime: false
                        icon: true
                        name: false
                        source: true
                        volume: false
                        controls: false
                  - card: 'custom:mini-media-player'
                    noPadding: true
                    wider: true
                    widerSize: 3
                    higher: true
                    higherSize: 3
                    cardStyle: |
                      ha-card {
                      height: 100%;
                      background: none  !important;
                      box-shadow: none !important;
                      position: relative;
                      font-size: 0.5vw !important;
                      image
                      }
                      ha-card{
                      overflow: hidden !important;
                      }
                      :host #primaryProgress{
                      background: #474A52 !important; 
                      display: flex !important;
                      height: 100%;
                      }
                    cardOptions:
                      name: Apple TV
                      artwork: full-cover
                      entity: media_player.appletv_soggiorno
                      hide:
                        power: false
                        progress: false
                        runtime: false
                        icon: true
                        name: false
                        source: true
                        volume: false
                        controls: false
                title: Media
        tileOnRow: 2
    row: 1
  - columns:
      - column: 1
        entities:
          - entities:
              - card: 'custom:mini-media-player'
                noPadding: true
                wider: true
                widerSize: 3
                higher: true
                higherSize: 3
                popup:
                  settings: true
                  type: 'custom:media_player-popup-card'
                  actions:
                    - service: media_player.media_previous_track
                      service_data:
                        entity_id: this
                      name: previous
                      icon: 'mdi:skip-previous'
                    - service: media_player.media_play_pause
                      service_data:
                        entity_id: this
                      name: play/pause
                      icon: 'mdi:play-pause'
                    - service: media_player.media_next_track
                      service_data:
                        entity_id: this
                      name: next
                      icon: 'mdi:skip-next'
                hold_action:
                  action: popup
                  entity: media_player.appletv_soggiorno
                cardStyle: |
                  ha-card {
                    height: 100%;
                    background: none  !important;
                    box-shadow: none !important;
                    position: relative;
                    font-size: 0.5vw !important;
                    image
                  }
                  ha-card{
                  overflow: hidden !important;
                  }
                  :host #primaryProgress{
                  background: #474A52 !important; 
                  display: flex !important;
                  height: 100%;
                  }
                cardOptions:
                  name: Apple TV
                  artwork: full-cover
                  entity: media_player.appletv_soggiorno
                  hide:
                    power: false
                    progress: false
                    runtime: false
                    icon: true
                    name: false
                    source: true
                    volume: false
                    controls: false
            title: Media
        tileOnRow: 2
    row: 2
statePositionTop: true
style: |
  homekit-button[data-ent*="hideThis"] {
    visibility: hidden;
  }
title: Sistema
titleColor: '#FFF'
type: 'custom:homekit-card'
useBrightness: false
useTemperature: false

Result:
2020-08-21_47

969

@DBuit is something similar possible to achieve with HomeKit-panel-card? I specifically mean adding a 2nd state icon whether in place of the main tile icon or anywhere else on the tile similar to what @briis has on his tile or where his rain value shows under the title. I was able to do this with another Hass UI customization but HomeKit-panel-card is so much more straightforward to use

970

Has anyone else had the problem that, since the latest upgrade, clicking the ‘Settings’ button on the light popup card doesn’t show the settings for the light any more? Just says that I need to “Set settingsCustomCard to render a lovelace card here!” But I just want the traditional Lovelace settings for the light to show.

Any clues on this one?

971

IMG_20200823_100657
IMG_20200823_1006572000×1125 821 KB

How to center small tiles in upper row

and how to center text on tile
thx

1 Like
972

Have a little problem after the latest update.
Used the masonry option and when I now have tiles with an widerSize: 2 then I have a space between the tiles.
How can I fix this? Don’t use any style options.

image

973

I’m interested in the setup of the mediaplayer system for my tablet.
Can you share some more screenshots?
Should that have any effect on the function, whether it’s Sonos or ChromeCast?

974

Yeah, I’ll go that way instead then.

Thanks for the answer

975

Hey, yes of course. Please send me a message.

976

Hey @DBuit did you manage to look at the problem with alignment of tiles? Furthermore since yesterday (update to most recent Home assistant) the font of the titles have been changed. It’s now like this:
fontchange

977

Any Update regarding the style for picture entity card. Espacially when using with camera entities? Still can‘t figure out how to use the complete tile

image
image828×1792 282 KB

978

I think you should be able to get it working when nopadding:true is configured (see github documentation). Afterwards you need to edit styling again to meet your needs with css. GOod luck!

979

Already tried it with the noPadding: true option, but this was an open topic in this thread Custom Lovelace Card - Homekit style card

So i was just asking if there is maybe a new solution for it. @DBuit do you have any update regarding the Camera style topic? You mentioned in post #762 that you put in on your list.

Is it a problem with the live stream option?

Screenshot from 2020-08-24 20-16-23
Screenshot from 2020-08-24 20-16-231139×811 222 KB

980

Hi,

you can set the icon and offIcon or use images but this is not changed by a state.
It is a good feature i can add.
If you can add this to the github issues so i dont forget. I check this list now and then an build stuff based on that :slight_smile:

981

Hi @thecrane,

That is true because before the more-info popup was a default card in home assistent but in 0.113 they changed it all and there is not 1 card that creates the whole more info :frowning:

So you need to set a custom card to load in there, but there are cards made by people that give you the same features.

982

Hi,

can you share your configuration?

983

Hi,

srry didnt work on it will keep you posted but not alot of time at the moment.
That is strange the font changed it did not change for me…

but the font is not set by the card so maybe something in your theme?

984

Hi,

i tried alot but the element that need to be styled can’t be reached with the css option.
The only option to get camera working is that i need to build a function in the card it self to fix this.
It is on my list to add but it is not in yet.

985

Ah - thanks for that, @DBuit. That’s a bit of a shame. I’ll hunt for a custom card. Thanks for replying, and for your awesome work!

986

Yes sure. Here is my configuration:

title: Cast
views:
  - badges: []
    cards:
      - entities:
          - entities:
              - card: weather-forecast
                cardOptions:
                  entity: weather.entity
                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: 14px!important;
                  }
                  .info .temp-attribute .temp span {
                      font-size: 14px!important;
                  }
                  .forecast {
                      font-size: 14px!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:14px!important;
                  }
                  .forecast .templow {
                      display:none;
                  }
                higher: true
                higherSize: 1
                wider: true
                widerSize: 2
              - entity: light.entity
                higher: true
                higherSize: 1
                wider: true
                widerSize: 1
              - entity: light.entity
                higher: true
                higherSize: 1
                wider: true
                widerSize: 1
              - entity: light.entity
                higher: true
                higherSize: 1
                wider: true
                widerSize: 1
              - entity: light.entity
                higher: true
                higherSize: 2
                wider: true
                widerSize: 1
              - entity: light.entity
                higher: true
                higherSize: 2
                wider: true
                widerSize: 1
              - entity: light.entity
                higher: true
                higherSize: 1
                wider: true
                widerSize: 1
              - entity: light.entity
                higher: true
                higherSize: 1
                wider: true
                widerSize: 1
              - entity: light.entity
                higher: true
                higherSize: 1
                wider: true
                widerSize: 1
              - entity: light.entity
                higher: true
                higherSize: 1
                wider: true
                widerSize: 1
          - entities:
              - entity: cover.entity
              - entity: cover.entity
              - entity: cover.entity
          - entities:
              - entity: media_player.entity
                offStates:
                  - 'off'
                  - unavailable
                  - paused
              - entity: media_player.entity
                offStates:
                  - 'off'
                  - unavailable
                  - paused
              - entity: media_player.entity
                offStates:
                  - 'off'
                  - unavailable
                  - paused
        masonry: true
        type: 'custom:homekit-card'
    icon: 'mdi:home-outline'
    panel: true
    path: cast
    theme: ''
    title: Cast
987

Thanks - I’ve added the issue to Github along with an illustration from a previous UI I had