Custom Lovelace Card - Homekit style card

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.

slipx06 · July 10, 2020, 12:34pm

Thanks getting blank tiles after the update

Weather card:

Camera’s using picture glance

Rolled back to 0.495 and working again.

DBuit · July 10, 2020, 12:43pm

Strange… you changed nothing to your config?
Any error in browser console?

slipx06 · July 10, 2020, 12:46pm

No changes to config and did not see any console errors

martheijnen · July 10, 2020, 1:17pm

Hey @DBuit how can we get the sliders in the card (so not from the popup)? I did slider: true and now its there, but invisible due to style. What style items can we change in the card? thanks!

thanks

DBuit · July 10, 2020, 1:37pm

Hi,

check out this comment: Custom Lovelace Card - Homekit style card

DBuit · July 10, 2020, 1:38pm

V0.5 had a bug and tiles with another card in it would not load
This is fixed now.

Added option for card and custom tiles to have an on/off state. Before they where always on.
Example:

                 - title: Wasmachine
                    entities:
                      - card: custom:mini-graph-card
                        entity: `here you set an entity and the state of this entity toggles the tile as on/off`
                        offStates: `Add a list of states that should display the tile as OFF al other states will be handled as ON`
                        noPadding: true
                        cardOptions:
                          entities:
                            - sensor.wasmachine_energieverbruik

@slipx06 can you update and let me know it is fixed for you?
@marschiaan i added the state option for card and custom tiles

slipx06 · July 10, 2020, 1:44pm

@DBuit Weather card is working but my picture glance cards are still blank

marschiaan · July 10, 2020, 1:45pm

Ok, thank you. I will give it a try this evening and send you my feedback.

DBuit · July 10, 2020, 2:06pm

Strange can you share your config for the picture glance card?

slipx06 · July 10, 2020, 2:09pm

Shared in my post above Custom Lovelace Card - Homekit style card

Alindil · July 10, 2020, 5:00pm

Good job. But on the mobile version there are white squares. It doesn’t seem to work properly.

Alindil · July 10, 2020, 5:14pm

and it doesn’t work on custom cards

martheijnen · July 10, 2020, 7:18pm

Hey @DBuit the new update (051) doesnt work when using 2 cards in 1 (the thing you remotely helped me earlier) (here) when using row./column combination. If i revert to 050 it is working again:

0.51:

0.50 (WORKS!) But empty picture elements items or custom items in the square boxes…

I know you’re all doing this besides your job, work, family and such… Just wanna thank you once again for all your effort

Umbe · July 11, 2020, 7:54am

Good morning ,
Sorry i have an issue which i really i do not know how to fix , the cards got a strange behave , they do not get more yellow , and are only white , is there any cache somewhere hidden in HA to clean ?
on

off

and the configuration is this , which has no template no strange config, the light which have dimming , becomes whhite when on , the one which have no dim stay yellow , i would keep the yellow when on on every element.
what shoud i change ? what trigger light rgb in white , light normal in yellow ?

thanks

resources:
  - type: module
    url: /hacsfiles/bar-card/bar-card.js
  - type: module
    url: /hacsfiles/weather-card/weather-card.js
  - type: module
    url: /hacsfiles/lovelace-battery-entity/battery-entity.js
  - type: module
    url: /hacsfiles/button-card/button-card.js
  - type: module
    url: /hacsfiles/lovelace-card-mod/card-mod.js
  - type: module
    url: /hacsfiles/flex-table-card/flex-table-card.js
  - type: module
    url: /hacsfiles/lovelace-layout-card/layout-card.js
  - url: /hacsfiles/mini-media-player/mini-media-player-bundle.js
    type: module
  - type: module
    url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js
  - type: module
    url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js
  - type: module
    url: /hacsfiles/upcoming-media-card/upcoming-media-card.js
  - type: module
    url: /hacsfiles/lovelace-darksky-card/lovelace-darksky-card.js
  - type: module
    url: /hacsfiles/vertical-stack-in-card/vertical-stack-in-card.js
  - type: module
    url: /hacsfiles/lovelace-auto-entities/auto-entities.js
  - type: module
    url: /hacsfiles/rgb-light-card/card.js
  - type: js
    url: /hacsfiles/bar-card/bar-card.js
  - type: module
    url: /hacsfiles/custom-header/custom-header.js
  - url: https://cdn.jsdelivr.net/npm/rgb-light-card
    type: js
  - type: module
    url: /hacsfiles/simple-weather-card/simple-weather-card-bundle.js
    url: /hacsfiles/light-popup-card/light-popup-card.js
  - type: module
  - url: /hacsfiles/light-entity-card/light-entity-card.js
    type: module
  - url: /hacsfiles/decluttering-card/decluttering-card.js
    type: module
  - url: /hacsfiles/switch-popup-card/switch-popup-card.js
    type: module
  - url: /hacsfiles/swipe-card/swipe-card.js
    type: module
  - url: /hacsfiles/Homekit-panel-card/homekit-panel-card.js
    type: module
background: linear-gradient(32deg, rgba(131,58,180,1) 0%, rgba(55,127,226,1) 35%, rgba(255,137,137,1) 64%, rgba(252,176,69,1) 100%)

custom_header:
  background: 'rgba(0, 0, 0, 0.3);'
  compact_mode: true
  elements_color: rgba(10, 10, 10, 0.8)
  button_text:
    options: '{{ hours24 }}:{{ minutesLZ }}'

title: Home3
views:
  # Here I'm defining the my View (my tab)
  - badges:
    icon: mdi:home
    cards:

      - type: "custom:homekit-card"
        useBrightness: true
        useTemperature: true
        titleColor: "#FFF"
        enableColumns: true
        statePositionTop: true
        tileHoldAnimation: true
        rows:
          - row: 1
            columns:
              - column: 1
                tileOnRow: 1
                entities:
                  - title: Test1
                    popup:
                      type: custom:light-popup-card
                      scenesInARow: 2
                      brightnessWidth: 130px
                      brightnessHeight: 350px
                      switchWidth: 110px
                      switchHeight: 300px
                    entities:
                      - entity: light.light1
                        name: Test1a
                        icon: mdi:led-strip-variant
                        popupExtend:
                          actions:
                            - service: scene.turn_on
                              service_data:
                                entity_id: scene.bianco
                              color: "#FFF"
                              name: Bianco
                      - entity: light.light1
                        name: Test1b
                        icon: mdi:led-strip-variant
                      - entity: light.light1
                        name: Bagno
                        icon: mdi:lightbulb-group
                tileOnRow: 2 # Posizione
              - column: 2
                tileOnRow: 1
                entities:
                  - title: Test2
                    popup:
                      type: custom:light-popup-card
                      scenesInARow: 2
                      brightnessWidth: 130px
                      brightnessHeight: 350px
                      switchWidth: 110px
                      switchHeight: 300px
                    entities:
                      - entity: light.light1
                        name: Test2a
                        icon: mdi:ceiling-light
                        popupExtend:
                          actions:
                            - service: scene.turn_on
                              service_data:
                                entity_id: scene.bianco
                              color: "#FFF"
                              name: Bianco
              - column: 3
                tileOnRow: 1
                entities:
                  - title: Test3
                    popup:
                      type: custom:light-popup-card
                      scenesInARow: 2
                      brightnessWidth: 130px
                      brightnessHeight: 350px
                      switchWidth: 110px
                      switchHeight: 300px
                    entities:
                      - entity: light.light1
                        name: Test3a
                        icon: mdi:ceiling-light
                        popupExtend:
                          actions:
                            - service: scene.turn_on
                              service_data:
                                entity_id: scene.bianco
                              color: "#FFF"
                              name: Bianco
              - column: 4
                tileOnRow: 1
                entities:
                  - title: Test4
                    popup:
                      type: custom:light-popup-card
                      scenesInARow: 2
                      brightnessWidth: 130px
                      brightnessHeight: 350px
                      switchWidth: 110px
                      switchHeight: 300px
                    entities:
                      - entity: light.sonoff_sonoff
                        name: Test4a
                        icon: mdi:lightbulb-group
                        tap_action:
                          action: toggle
                          entity: group.all_lights




    panel: true
    path: home3
    title: home3

DBuit · July 11, 2020, 2:39pm

Hello,

Just released V0.5.2 this should fix some white tiles with other cards.
I know the picture-glance card is not working for some reason
Somehow the element is unkown so i won’t render the card really strange…

@martheijnen strange it is empty… can you try the new version? if it does not work can you check your console of the browser?

DBuit · July 11, 2020, 3:26pm

Hi,

try to set the useBrightness and useTemperature to false

DBuit · July 11, 2020, 4:24pm

Hello everyone,

Just released V0.5.3 this should fix all the white card

slipx06 · July 11, 2020, 10:08pm

Thanks. Confirmed.

martheijnen · July 12, 2020, 8:27am

Yes, it works again