Custom Lovelace Card - Homekit style card

Carlos_Eduardo · July 13, 2021, 11:40pm

I solved it by using a card within a card.

type: 'custom:mod-card'
style: |
  ha-card {
    {% set o = state_attr('sensor.sala_de_estar_kodi', 'data') | from_json %}
    {% if states['media_player.sala_de_estar_lg'    ].attributes.source             == "MXQ" 
      and states['media_player.sala_de_estar_shield'].attributes.app_name           == "Kodi" 
      and states['media_player.sala_de_estar_kodi'  ].attributes.media_content_type != "music"
      and ( states['media_player.sala_de_estar_kodi'].state == "playing" 
         or states['media_player.sala_de_estar_kodi'].state == "paused" ) %}
    {%   print "background: url(" + o[0].thumbnail + ");" %}
    {% else %}
    {%   print "background: url(https://image.freepik.com/free-photo/metal-texture-background_42612-327.jpg);" %}         
    {% endif %}     
    
  } 
card:
  type: 'custom:config-template-card'
  variables:
    PLAYER: |
      states['media_player.sala_de_estar_lg'].state != 'on' ? 
        'NONE' : 
        ( states['media_player.sala_de_estar_lg'].attributes.source != 'MXQ' ?
          'lg' :
          ( states['media_player.sala_de_estar_shield'].attributes.source != 'Kodi' ? 
            'shield':'kodi' ) )
    CONTEUDO: |
      states['media_player.sala_de_estar_kodi'].attributes.media_content_type
    ESTADO: |
      states['media_player.sala_de_estar_lg'].state != 'on' ? 
       'NONE' : 
       ( states['media_player.sala_de_estar_lg'].attributes.source != 'MXQ' ?
         states['media_player.sala_de_estar_lg' ].state :
         ( states['media_player.sala_de_estar_shield' ].attributes.source != 'Kodi' ? 
           states['media_player.sala_de_estar_shield' ].state :
           states['media_player.sala_de_estar_kodi' ].state ) )
  entities:
    - media_player.sala_de_estar_lg
    - media_player.sala_de_estar_kodi
  card:
    type: 'custom:homekit-card'
    enableColumns: true

chanders · July 25, 2021, 1:31pm

Haven’t seen any feedback for a while. I wonder if the developer is ok?

filikun · August 23, 2021, 8:07am

Is it just mine or does the home rules take a while to load in?

Jimmy_Berglund · August 23, 2021, 8:46am

From What i understand, Thats a generall thing.

Guesswho620 · September 6, 2021, 7:35am

Dear all,

First, I’d like to thank @DBuit for his fantastic piece of work and commitment to develop it according to user’s needs, I was looking for something exactly like this for years

Second, the puzzle pieces slowly start to fall in their places, but I’d like to ask for some help and advices for a couple of things.

2 specific things are driving me nuts, please help me solve the riddle:

make a scene button state depend on the included devices COMBINED state:
currently, for scenes the states displayed are “Scening”, this is the default state for scenes. For instance I have a scene to open all my gates, and one to close them. To fake icon states I use now different offstates, but the best would be to mimic the original homekit scene button behavior, so the scene button should only be “on”, when all devices have “on” state (or in this case, since they are gates, “open” or “closed” for off state). For this purpose, I created a group, that should behave exactly how I wish: the group’s state will only be “on”, when all devices in the group are “on” at the same time.
If I reference this group entity in the scene button, the only thing that happens is a circle appearing in the upper right corner with the group’s state, but at the bottom the original scene state is still visible, and the button state is still based on the scene’s state, which is quite useless. So basically: can I replace the watched state of a button to a completely different entity’s state, so the button will start listen to the other entity’s state, and turn on and off according to this other entity?

Code for the first scene button:

        entities:
          - title: Kedvenc szcenáriók
            entities:
              - entity: scene.kapuk_nyitas
                name: Kapuk nyitása
                icon: mdi:garage-open-variant
                offIcon: mdi:garage-variant
                state: group.kapuk
                offStates:
                  - closed
                tap_action:
                  action: call-service
                  service: scene.turn_on
                  service_data:
                    entity_id: scene.kapuk_nyitas
                  haptic: success
                hold_action:
                  action: more-info
                  entity: scene.kapuk_nyitas

would it be possible to have scrolling possibility only for one ROW?
To me - based on the github description - it felt that the horizontal scrolling is a global parameter, but I’d only like to scroll certain rows, for instance the scene buttons row in the above example. Can I achieve this somehow?

I’m still putting together my ONE-ABOVE-ALL dashboard, so I’ll have some questions later, for sure

Thanks a lot in advance!!

brycew · September 6, 2021, 4:30pm

Anyone been able to get the popup cards placed into the actual dashboard instead of the a popup window?

currydani · September 16, 2021, 6:23am

Hello together, i’m quite new to the customication of home assistant cards, and i wanted to change some css values that aren’t in the variables list of the card. Can someone help me and tell me what i have to do to change for example the “.button padding” or the “.card-title padding”? Would be really nice and sorry if its a dumb question

adisbr01 · September 28, 2021, 8:35am

Hi All!
Just trying my first steps and can not get card visual or error.
I added a card throgh lovelace-ui and get BLANK card.
This is the test i did:

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-name-text-color: rgba(0, 0, 0, 0.4);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(0, 0, 0, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--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.3);
--tile-on-icon-color: #f7d959;
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
--min-header-height: 150px;
--tile-icon-size: 30px;
--tile-image-radius: 100%
--slider-width: 120px;
--slider-height: 120px;
}
home: true
title: “Demo”
useBrightness: false
titleColor: “#FFF”
enableColumns: true
statePositionTop: true
entities:

title: Row 1
entities:

entity: light.terrace

entity: light.all_lights

entity: media_player.terrace

title: Row 2
entities:

entity: light.terrace

This is the preview i get (card is not showing):

what am i doing wrong ?

mattiasfoto · October 5, 2021, 4:53am

I’m stuck with the first step already. I have installed with HACS. This is what I get:

Can some one help me? I really like the look of this card

filikun · October 7, 2021, 8:32am

Can I change icon with a template? Like

                        icon: |
                          [[[ 
                            if (states['input_boolean.bathroom_motion_activated_lights'].state == 'off') 
                              return 'mdi:home';
                            else 
                              return 'mdi:home';
                          ]]]

weaverprojects · October 8, 2021, 7:00am

How to change the state color in my blue (#086075) of the icons for the lights? It’s a light pop up card…

andrewfblack · October 11, 2021, 5:17am

So I have started redoing my screen in homekit style and love it but I don’t completely understand how to do popups. here is my code what am I doing wrong?

views:
  - title: Home
    icon: mdi:home-outline
    path: home
    panel: true
    popup_cards:
      light.bulb_1:
        title: Kaidons Lamp
        card:
          type: custom:light-popup-card
          entity: light.bulb_1
    cards:
      - type: custom:homekit-card
        entities:
          - title: Favorites
            entities:
              - entity: alarm_control_panel.alarm_com
              - entity: cover.garage_door
              - entity: climate.living_room
                popup:
                  type: custom:thermostat-popup-card
          - title: Cameras
            entities:
              - entity: camera.front_door
  - title: Living Room
    icon: mdi:television-classic
    path: living
    type: panel
    badges: []
    cards:
      - type: custom:homekit-card
        entities:
          - title: Living Room
            popup:
              type: custom:light-popup-card
            entities:
              - entity: light.living_room_fan
          - title: null
            entities:
              - entity: climate.living_room
              - entity: media_player.living_room
              - entity: media_player.living_room_2
    popup_cards:
      card:
        type: custom:light-popup-card
        entity: light.living_room_fan
  - title: Kitchen
    icon: mdi:fridge-outline
    path: kitchen
    type: panel
    badges: []
    cards:
      - type: custom:homekit-card
        entities:
          - title: Kitchen
            popup:
              type: custom:light-popup-card
            entities:
              - entity: switch.kitchen_2_1
              - entity: switch.dinning_light_1
              - entity: switch.back_porch_1
          - title: null
            entities:
              - entity: media_player.andrew_s_echo_show
  - title: Master Bedroom
    icon: mdi:bed-double-outline
    path: master
    panel: true
    cards:
      - type: custom:homekit-card
        entities:
          - title: Master Bedroom
            popup:
              type: custom:light-popup-card
            entities:
              - entity: light.andrew_bedside_lamp
              - entity: switch.master_light_1
  - title: Kaidons Bedroom
    icon: mdi:bed-single-outline
    path: kaidon
    panel: true
    cards:
      - type: custom:homekit-card
        entities:
          - title: Kaidon Bedroom
            popup:
              type: custom:light-popup-card
            entities:
              - entity: light.bulb_1
              - entity: switch.kaidon_light_1
              - entity: light.bulb_2
          - title: null
            entities:
              - entity: camera.generic_camera
              - entity: media_player.kaidon_s_echo

taniban · October 17, 2021, 10:27am

Hi all, I am problems putting a custom media player onto my dashboard. I’m not really sure where I am going wrong. For now I am not interested in popups.

      - column: 2
        tileOnRow: 3
        entities:
          - title: Master Bedroom
            entities:
              - 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:
                  artwork: full-cover
                  entity: media_player.study_room_sonosplay5
                  hide:
                    power: true
                    progress: false
                    runtime: true
                    icon: true
                    name: true
                    source: true
                    volume: true
                    controls: false

Could anyone have a quick look and see where I am going wrong? Many thanks in advance.

brycew · October 19, 2021, 4:12pm

Anyway to change the css when the button is being pressed on buttons where they’re aren’t represented by a state/value. Ie triggering a scene

DBuit · October 25, 2021, 9:18am

Hello @brycew

Not directly but, if you add a switch to a scene that goes on for a few sec than you got add
“conditionalClass” on the tile and add some css for that custom class that changes the color.

DBuit · October 25, 2021, 9:19am

Hi @taniban,

Got any errors in browser console?

DBuit · October 25, 2021, 9:20am

Hi @andrewfblack

What is not working for you?

DBuit · October 25, 2021, 9:20am

Hello @weaverprojects

are the tiles made with homekit-panel-card? because the light popup card does not color the lightbulbs on the tile.

taniban · October 25, 2021, 11:36am

Hi @DBuit,

No errors in the browser?

conorlap · October 27, 2021, 2:32pm

Hi all,

Is there any way I can remove the state (Off / On) at the yellow arrow? I’d like to just track state by colour of the button but haven’t figured out how to remove Off & On from displaying and it’s getting in the way of the entity names that I’d like displayed.

Also is there any way I can shift the panel over to the left towards the green bar to size up my buttons with the camera feed above on the UI?
Is there a simple way to reduce the padding below my 2nd row (Spare Bedroom etc) of buttons so “Living Room” & those buttons (Floor Lamp, Table Lamp etc) are closer to that 2nd row?