Custom Lovelace Card - Homekit style card

Jimmy_Berglund · July 6, 2020, 1:18am

Even with this i still get a card that wont have picture from top to bot. Ice tried a picture larger then the button.

rows:
  - columns:
      - column: 1
        entities:
          - title: People
            entities:
              - card: 'custom:button-card'
                noPadding: true
                cardStyle: |
                  :host {
                    display: flex;
                    height: 100%;
                  }
                cardOptions:
                  color_type: card
                  custom_fields:
                    sd: |
                      [[[
                          return `<ha-icon icon='mdi:motion-sensor' style='width: 15px; height: 15px; color: var(--paper-item-icon-active-color);'></ha-icon>
                          <span>${states['sensor.jimmyberglund'].state}</span>`
                          ]]]
                  show_entity_picture: 'true'
                  styles:
                    card:
                      - background-image: url("/local/jimmy.jpg")
                      - background-size: cover
                      - background-position: 50% 50%
                      - text-shadow: '1px 1px #000000'
                      - color: white
                      - font-size: 14px
                      - font-weight: bold
                    grid:
                      - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd" "l l"'
                      - grid-template-columns: 1fr 1fr
                      - grid-template-rows: 3fr 3fr 2fr 2fr 2fr
                template: button

Skärmklipp

DBuit · July 6, 2020, 11:37am

Hi,

It should work in the card it self, you sure you put the style at the right part of the card config?
Can you share the full config?

What is wrong on the screenshot you send?

Jimmy_Berglund · July 6, 2020, 1:01pm

HI m8.

I guess it can be abitt hard to see with the coloring. but 10% of the picture was cropped.
I fixed it with

              styles:
                card:
                  - border-radius: 0px

I did not need to use that when i only had the custom lovelace button card.
Now its just about grid placement for the text and im done. Guess its mostly getting use to how this works. But now om done with a setup that looks like it did with button card.

Skärmklipp

A Question. Is it possible to setup a row or column with a condition code on?. Im using that on a card that has a custom lovelace button setup that only shows buttons when its info that is needed. Like for example. Front door is open. and then a icon showing the front door open is shown. OR example larm is not set when everyone left the building.

Rather then having a seonsor icon showing both closed and open I have a row in my previus setup that only shows them when i need to see them.

This bar below is that setup that shows now that my backdoor is open. and when its closed it get hidden.
Skärmklipp2

Thx for all the work you put in. If the conditioning is possible then that will be my last step before im done with my setup.

slipx06 · July 6, 2020, 1:09pm

Can anyone help me style this card so that the camera image fills it correctly?

This is what it should look like

DBuit · July 6, 2020, 1:28pm

Hi @slipx06,

i think i can help you, can you share your config what you have at the moment?

slipx06 · July 6, 2020, 1:31pm

Thanks.

      - title: Camera
        entities:
          - card: picture-glance
            cardOptions:
              title: Garage
              entities: []
              camera_image: camera.esp_camera1
              camera_view: live
            cardStyle: |
              :host {
                display: flex;
                height: 100%;
              }
            name: Garage
            noPadding: true
            wider: true
            higher: true

Jimmy_Berglund · July 6, 2020, 3:36pm

Is it a design choice that title name does not show upp on homekit card when using popup light?

Cause when i use it on my old setup with button card and browser mod it shows the name of the light.
Ive search the forum here and been looking around for an hour now. but all i find is others posting configs without title name showing aswell

my code for my lights:

enableColumns: true
home: false
tileHoldAnimation: false
icon: 'mdi:home-outline'
rows:
  - columns:
      - column: 1
        entities:
          - entities:
              - double_tap_action:
                  action: navigate
                  navigation_path: /lovelace/2
                entity: light.vardagsrums_lampor_grupp
                offStates:
                  - 'off'
                  - unavailable
              - entity: light.vardagsrums_lampor_vanster_grupp
                name: Golvlampa Vänster
                offStates:
                  - 'off'
                  - unavailable
              - entity: light.vardagsrums_lampor_hoger_grupp
                name: Golvlampa Höger
                offStates:
                  - 'off'
                  - unavailable
                  - otillgänglig
                  - unknown
              - entity: switch.koks_fonster
              - entity: light.koket
            popup:
              icon: 'mdi:power'
              actions:
                - color: '#271a00'
                  name: Movie
                  service: scene.turn_on
                  service_data:
                    entity_id: scene.vardagsrum_movie_night
                - color: '#ffb424'
                  name: Familj Kväll
                  service: scene.turn_on
                  service_data:
                    entity_id: scene.familj_kvall
              actionsInARow: 2
              brightnessHeight: 350px
              brightnessWidth: 130px
              switchHeight: 300px
              switchWidth: 110px
              settings:
                closeButton: stäng
                openButton: Inställningar
              supportedFeaturesTreshold: -1
              title: idiot
              type: 'custom:light-popup-card'
            title: Vardagsrum
        tileOnRow: 5
      - column: 1
        entities:
          - entities:
              - entity: light.sovrumssang_vanster_grupp
                name: Säng Vänster
              - entity: light.sovrumssang_hoger_grupp
                name: Säng Höger
              - entity: light.sovrumsfonster_lampa_grupp
                name: Fönster Lampa
              - entity: light.sovrums_bank_vanster_grupp
                name: Bänk Vänster
              - entity: light.sovrums_bank_hoger_grupp
                name: Bänk Höger
              - double_tap_action:
                  action: navigate
                  navigation_path: /lovelace/2
                entity: light.sovrumsbank_lampor_grupp
                name: Bänklampor
              - double_tap_action:
                  action: navigate
                  navigation_path: /lovelace/2
                entity: light.sovrums_temp_lampor_grupp
                name: Temp Lampor
                title: |
                  [[[ return entity.attributes.friendly_name ]]]
            popup:
              actions:
                - color: '#00c788'
                  name: Grönt
                  service: scene.turn_on
                  service_data:
                    entity_id: scene.gront_ar_skont
                - color: '#ff7200'
                  name: Mysigt
                  service: scene.turn_on
                  service_data:
                    entity_id: scene.mysigt
                - color: '#c4d9d2'
                  name: Spelande
                  service: scene.turn_on
                  service_data:
                    entity_id: scene.spelande
                - color: '#f000ff'
                  name: Sexigt
                  service: scene.turn_on
                  service_data:
                    entity_id: scene.sexigt
              actionsInARow: 2
              brightnessHeight: 350px
              brightnessWidth: 130px
              settings:
                closeButton: stäng
                openButton: Inställningar
              switchHeight: 300px
              switchWidth: 110px
              type: 'custom:light-popup-card'
            title: Sovrum
        tileOnRow: 7
    row: 1
  - columns:
      - column: 2
        entities:
          - entities:
              - entity: light.hall_lampor_switch
            popup:
              brightnessHeight: 350px
              brightnessWidth: 130px
              scenesInARow: 2
              settings:
                closeButton: stäng
                openButton: Inställningar
              switchHeight: 300px
              switchWidth: 110px
              type: 'custom:light-popup-card'
            title: Hallen
      - column: 2
        entities:
          - entities:
              - entity: light.malvinas_fonster_lampa_grupp
                icon: 'mdi:lamp'
                name: Fönsterlampa
              - entity: switch.malvinas_rum
                icon: 'mdi:floor-lamp'
                name: Golvlampa
            popup:
              actionsInARow: 2
              brightnessHeight: 350px
              brightnessWidth: 130px
              settings:
                closeButton: stäng
                openButton: Inställningar
              switchHeight: 300px
              switchWidth: 110px
              type: 'custom:light-popup-card'
            title: Malvinas rum
      - column: 2
        entities:
          - entities:
              - entity: light.evelins_fonster
                icon: 'mdi:lamp'
                name: Fönsterlampa
                offStates:
                  - 'off'
                  - unavailable
              - entity: switch.evelins_rum
                name: Golvlampa
            popup:
              actionsInARow: 2
              brightnessHeight: 350px
              brightnessWidth: 130px
              settings:
                closeButton: stäng
                openButton: Inställningar
              switchHeight: 300px
              switchWidth: 110px
              type: 'custom:light-popup-card'
            title: Evelins rum
      - column: 2
        entities:
          - entities:
              - entity: switch.utomhus_vagg
                icon: 'mdi:wall-sconce'
                popupExtend:
                  title: Vägglampa
                  name: Vägglampa
                  actionsInARow: 2
                  brightnessHeight: 350px
                  brightnessWidth: 130px
                  settings:
                    closeButton: stäng
                    openButton: Inställningar
                  switchHeight: 300px
                  switchWidth: 110px
              - entity: light.utomhus_ljusslinga
                name: Ljusslinga
              - entity: light.busklampor
                name: Busklampor
            popup:
              brightnessHeight: 350px
              brightnessWidth: 130px
              scenesInARow: 2
              supportedFeaturesTreshold: 40
              switchHeight: 300px
              switchWidth: 110px
              type: 'custom:light-popup-card'
            title: Utomhus
      - column: 1
        entities:
          - entities:
              - entity: light.vardagsrums_lampor_grupp
              - double_tap_action:
                  action: navigate
                  navigation_path: /lovelace/2
                entity: light.sovrumsbank_lampor_grupp
              - double_tap_action:
                  action: navigate
                  navigation_path: /lovelace/2
                entity: light.sovrums_temp_lampor_grupp
            popup:
              brightnessHeight: 350px
              brightnessWidth: 130px
              scenesInARow: 2
              settings:
                closeButton: stäng
                openButton: Inställningar
              switchHeight: 300px
              switchWidth: 110px
              type: 'custom:light-popup-card'
            title: Grupper
        tileOnRow: 10
    row: 2
rules: |
  {% if states('sensor.current_lights_on') | float > 0 %}
  <li>{{states('sensor.current_lights_on')}} Lampor är på</li> {% endif %}

  {% if "unlocked" in states('lock.entre_dorr') %} <li>Dörren är EJ LÅST!!</li>
  {% endif %}

  {% if "disarmed" in states('alarm_control_panel.dammtorps_alle_lgh_alarm') %}
  <li>Larmet är:  avlarmat</li> {% endif %}

  {% if "triggered" in states('alarm_control_panel.dammtorps_alle_lgh_alarm') %}
  <li>Larmet larmar</li> {% endif %}

  {% if "armed_home" in states('alarm_control_panel.dammtorps_alle_lgh_alarm')
  %} <li>Larmet är i:  Skalskyddat läge</li> {% endif %}

  {% if "armed_away" in states('alarm_control_panel.dammtorps_alle_lgh_alarm')
  %} <li>Larmet är i:  Helskyddat läge</li> {% endif %}

  {% if "armed_night" in states('alarm_control_panel.dammtorps_alle_lgh_alarm')
  %} <li>Larmet är:  Nattlarmat</li> {% endif %}

  <li>Tempratur Hemma är runt {{states('sensor.vardagsrum_temperature') |
  round(1) }} °C</li>

  {% if "home" in states('person.jimmy') %} <li>Jimmy är Hemma</li> {% endif %}

  {% if "home" in states('person.Maria') %} <li>Maria är Hemma</li> {% endif %}
statePositionTop: false
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: rgba(183, 183, 183, 0.59);
    --tile-on-name-text-color: var(--primary-text-color);

    --tile-state-text-color: rgba(183, 183, 183, 0.59);
    --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: rgba(183, 183, 183, 0.59);
    --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%;
       }
  }
title: Home
titleColor: '#FFF'
type: 'custom:homekit-card'
useBrightness: true
useTemperature: false

You might see a few test names on titels were i try to make it work ^^
Sorry for posting allot past day.

DBuit · July 7, 2020, 6:15am

Hi @Jimmy_Berglund,

There is no title / name as you see in the default more info popup.
Where would you wanna have a title?

Jimmy_Berglund · July 7, 2020, 7:13am

Ill explain with pictures.

My old setup:

Here i had no problem getting a name tag from the entity.

New setup:

Here when i bring upp the popup all my efforts have all been invain. Even when i try manuy type the name. So i must be doing something verry wrong. or its not possible in homekit card?

Ive tried to find a solution for it on the forum but all my searching only found the same outcome as mine.

And the one i found that works are with browser mod. Allso kind wondering if dubble tap funktion for popup is only achivable with browser mod? or can it be called with the same funktion used for hold_action on the card itself?

Jimmy_Berglund · July 7, 2020, 8:34am

Allso found that the swedish letter Ö-ö big letter only works on the mobile. “Övriga Lampor” on the desktop i get this

That might be easy for with some tile config i guess.

DBuit · July 8, 2020, 10:51am

Hi @slipx06,

looks like it can not be styled to fill the whole tile
I got it on my list to add a tile for camera’s hope to add that soon.

marschiaan · July 8, 2020, 3:18pm

Hi @DBuit,

can i please get feedback on my proposal?

https://community.home-assistant.io/t/custom-lovelace-card-homekit-style-card/158034/751

Good or bad idea?
Better idea?
In progress or rejected?

Thank you in advance for your time and effort

Umbe · July 8, 2020, 8:56pm

Ciao , io ho provato il tuo codice , per un paio di test ma sembra che non prenda la card, le immagini non si colorano di giallo…
hai idea del perchè?
thanks

seasideCT · July 9, 2020, 4:17am

@DBuit

Hi, great card… loving it. Quick question, with my climate.thermostat, the HomeKit style card is always in a state of being “active” …

hvac_modes: heat_cool, heat, cool, off

right now its in cool, is that what is driving it not being grey’d out?

There is a sensor attribute for climate –

fan: on / off

Is there a way to set the Offstates to where fan is off, but only make the card active when it’s running? Thanks

Alindil · July 10, 2020, 6:27am

Hi, you’re doing a really good job. I’m trying to make a condition on some card displays. I would like when the plex is launched, it will replace the card on my TV, but it doesn’t seem to be working.

               entities:
                  - title: Salon
                    entities: 
                      #- type: media-control
                      #  entity: media_player.samsung_tv
                      - card: 
                          entity: media_player.plex_plex_for_samsung_tv_ue43ru7175uxxc
                          type: media-control
                        conditions:
                          - entity: media_player.plex_plex_for_samsung_tv_ue43ru7175uxxc
                            state: playing
                        type: conditional

Capture

DBuit · July 10, 2020, 10:13am

Hi @marschiaan

I looked at your idea at i think i can add it but the problem is the tile does not have a entity.
The card you are loading has an entity of entities you never know.

To make something like that you also have to set the entity you wanna use for the state of the card and the states. I have to look into that.

Could you add this to the github so i dont forget it thank you

DBuit · July 10, 2020, 10:14am

Hi @Alindil,

That is funny there is no conditions in this card…
but i just released V0.5 with some options to hide/show i card and some style options.
https://github.com/DBuit/Homekit-panel-card/releases/tag/0.5

DBuit · July 10, 2020, 10:15am

Hi not really sure how i made it
i dont have a climate my self so always hard to test. will check the code when it is in offState displayed.

DBuit · July 10, 2020, 10:15am

Hello everyone! New update!

Just released V0.5: https://github.com/DBuit/Homekit-panel-card/releases/tag/0.5
Conditional stuff

Hide
ConditionalClass
Docs: https://github.com/DBuit/Homekit-panel-card#template-hide-or-customclass

And you can now use popup as tap_action.

And light popup card is also updated: https://github.com/DBuit/light-popup-card/releases/tag/0.4.7

Add onStates and offStates default this is on and off but you can change it or add multiple if needed.
Fix for safari the slider thumb was not displayed correctly.

marschiaan · July 10, 2020, 11:53am

Hello @ DBuit,

thanks for your answer. I’m not that familiar with github, but I’ll try to leave a reminder entry there.

I am aware of the problem described above. If necessary, an implementation as described by you can be done.

Until then, my suggestion would be to leave out the background color for the type “custom tiles” (e.g. custom-button-card) and/or set it to transparent.

My problem is that if I set a light grey transparent background for the inactive state of a custom-button-card, this colour will always be overlaid by the main container (custom:homekit-card / <homekit-button></homekit-button>), i.e. an overlaying of transparent light grey with the colour white of the main container. So at the moment I can only use colors for the tile which have no transparency.

Example:
rgb(77, 90, 93) in custom-button-card -> ok
rgba(77, 90, 93, 0.5) in custom-button-card -> not ok because the white from main-container is in background. The result is a mix of that white and my color.

So if you just remove the background for custom-cards (your background parameters only for custom:homekit-card, else background none), i can do the rest with the options of the custom-card itself.

<homekit-button class="button on"> <!-- always white background -->
  <div class="button-inner">
    <card-maker ...>
      <button-card>
        <div>
          <ha-card ...> <!-- my custom card with my preferred, transparent background is overplayed by white from main-container -->
          </ha-card>
        </div>
     </button-card> 
   </card-maker>
  </div>
</homekit-button>

No Background in main-container, problem solved.