Custom Lovelace Card - Homekit style card

[kharn]

Hi There, Wondering if someone might assist me? Before I start, I would like to point out that I am very new to lovelace/hass, so please don’t burn me if I’ve missed something basic…

I’ve spent the last 6 or so hours trying to get Homekit lighting working, and I have it able to turn on/off lights, no problems. If I change colour, the icon changes accordingly. However, I can not bring up any colour change or brightness fader in the interface. It brings up a dark popup, fading out the background, but nothing on it except a close button… My relevant config is below …

resources:
  - type: module
    url: /community_plugin/homekit-panel-card/homekit-panel-card.js
  - type: module
    url: /community_plugin/light-popup-card/light-popup-card.js
  - type: module
    url: /browser_mod.js
views:
    - cards:
      - enableColumns: true
        home: true
        rows:
          - columns:
              - column: 2
                entities:
                  - entities:
                      - entity: light.lounge_room
                        icon: 'mdi:ceiling-light'
                        name: Lounge Room Light
                      - entity: light.kitchen
                        icon: 'mdi:ceiling-light'
                      - entity: light.dining
                        icon: 'mdi:ceiling-light'
                        name: Dining Light
                      - entity: light.alfresco
                        icon: 'mdi:ceiling-light'
                        name: Alfresco Light
                      - entity: light.bedroom
                        icon: 'mdi:ceiling-light'
                        name: Bedroom Light
                      - entity: light.study
                        icon: 'mdi:ceiling-light'
                        name: Study Light
                        popupExtend:
                          actions:
                            - color: '#FDCA64'
                              name: test
                              service: scene.turn_on
                              service_data:
                                entity_id: scene.test
                            - color: '#FFE7C0'
                              name: test2
                              service: scene.turn_on
                              service_data:
                                entity_id: scene.test2
                      - entity: light.guest_room
                        icon: 'mdi:ceiling-light'
                        name: Guest Room Light
                      - entity: light.front_door
                        icon: 'mdi:ceiling-light'
                        name: Front Door Light
                      - entity: light.porch
                        icon: 'mdi:ceiling-light'
                        name: Porch Light
                      - entity: light.hallway
                        icon: mdi.ceiling-light
                        name: Hallway Light
                    popup:
                      brightnessHeight: 350px
                      brightnessWidth: 130px
                      scenesInARow: 2
                      switchHeight: 300px
                      switchWidth: 110px
                      type: 'custom:light-popup-card'
                    title: Ceiling Lights
                tileOnRow: 5
            row: 1
        statePositionTop: true
        title: Home
        titleColor: '#FFF'
        type: 'custom:homekit-card'
        useBrightness: false
        useTemperature: false
    panel: true
    path: testing
    title: Testing

Any assistance would be greatly appreciated.

[skank]

@DBuit

Any idea?
I can show you the code if u want

[kaosmagix (Cristian Van Loenen)]

First of all great plugins!

Bear with me as I don’t have much scripting knowledge. I tried to configure the Switch Popup, but can’t get the actions to work.

I have a template sensor which defines the current state of the home (day,away,guests,goodnight,sleep). The state is depending on the state of multiple input_booleans.I show this sensor as a Tile and want to use the Switch popup to set the input_booleans (for sleep mode and goodnight mode)

I have the tile, the proper layout of the popup. This also picks up the correct current state of the sensor. However I cannot get the service call to set the input_booleans correct (error that an entity_id or area needs to be provided).

Tile and Popup code:

        - entity: sensor.mode_home
          popup:
            type: custom:switch-popup-card
            noActiveState: '-'
            entity_value_path: state
            entities:
            - sensor.mode_home
            buttons:
            - icon: "mdi:white-balance-sunny"
              value: "day"
              name: "Day"
              color: "#FFF"
              icon_color: "rgba(255,255,255,1)"
            - icon: "mdi:home-export-outline"
              value: "away"
              name: "Away"
              color: "#FFF"
              icon_color: "rgba(255,255,255,1)"
            - icon: "mdi:account-question"
              value: "guest"
              name: "Guest"
              color: "#FFF"
              icon_color: "rgba(255,255,255,1)"
            - icon: "mdi:weather-night"
              value: "sleep"
              name: "Sleep"
              color: "#FFF"
              icon_color: "rgba(255,255,255,1)"
              service: input_boolean.turn_on
              service_data:
                entity_id: 'input_boolean.mode_sleep'
            - icon: "mdi:power-sleep"
              value: "goodnight"
              name: "Goodnight"
              color: "#FFF"
              icon_color: "rgba(255,255,255,1)"
              service: input_boolean.turn_on
              service_data:
                entity_id: 'input_boolean.mode_goodnight'

Any help appreciated.

[stefve (Stef)]

Is it possible to use these tiles without panel mode enabled?
I would like it in the same position like the normal cards. (So more space on the left of the tiles)

[marima84]

Hi,
I hope this is the right place for my question relative to light-popup-card.
Does anyone have been able to set a different background color to a light-popup-card nest to browser_mod-popup?

Then one in black color:

If I manually add this to the CSS code I can change the color:

But how can I do this from the compontent?
this is my config:

- type: "custom:button-card"
  entity: light.yeelight_right
  name: Right light
  icon: mdi:track-light
  template: light_button
  hold_action:
    action: call-service
    service: browser_mod.popup
    service_data:
      deviceID:
        - this
      style:
        background: red
        border-radius: 15px
        opacity: 1
        border: 2px solid grey                           
        padding-bottom: 50px
      title: card
      card:                        
        type: horizontal-stack
        cards:                                                               
          - entity: light.yeelight_right
            type: custom:light-popup-card
            header: false
            persist_features: false
            icon: mdi:track-light                    
            fullscreen: false
            brightnessWidth: 150px
            brightnessHeight: 400px
            borderRadius: 20px

Thanks in advance for any possible help or hint

Mark

[kharn]

Please disregard, I had made a typo in the url: portion All good now!

[thecrane (TC)]

This is just such an awesome piece of work, @DBuit - seriously, well done! I love it!

A minor question: I’ve just updated hass from 0.103 to 0.109, and it seems to have affected line-heights or padding? Now the labels below the icons seem to have a bit more spacing or something and they’re disappearing below the status line. Has anyone else seen this? Is this something easy to fix?

[thecrane (TC)]

That looks awesome, @doktordoc! Can I ask: how did you do the rubbish bins? Is that just a custom sensor? Or template?

[doktordoc (Sasa)]

I am a newbie, so I don’t know
My HA won’t startup, so when I enable it I will c/p

[Creatish]

I am new to HA and taking it slow and only using the frontend,

how would I add a homekit style card with the frontend?

anyone got a sample code I can adjust?

[Phillip (Phibins)]

No real easy way to do it except install HACS. Once you do that its somewhat easy.

I recommend using the HA discord to ask for help.

[Phillip (Phibins)]

@thecrane

That looks awesome, @doktordoc! Can I ask: how did you do the rubbish bins? Is that just a custom sensor? Or template?

I believe he used this

Open Source Icon Sets - Iconify

[Creatish]

@Phillip

install

I have hacs, installed the thing but dont understand how to add the code in the ui, just want a basic button for lights

[Phillip (Phibins)]

The style component should look like this:

- 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;
    }

See more detail here https://github.com/DBuit/Homekit-panel-card

[doktordoc (Sasa)]

I used this

Layout for garbage_collection sensor

I have installed the garbage_collection sensor using HACS. All works well as far as function. What I want is to make it look like the example layout on the GitHub page [Screenshot_20190921_162409] Tried using horizontal stack but this just pushes the date to the side and this doesn’t look great. [Screenshot_20190921_162222] Any ideas

[doktordoc (Sasa)]

Garbage collection integration

[thecrane (TC)]

Thanks - I’ll definitely check it out!

[thecrane (TC)]

@DBuit or others, when the card is something like a sensor, is there a way to control whether it uses the ‘on’ CSS class or not?

What I’m trying to do: I have modified the CSS so that any light that is ‘on’ has a glow around it. This works brilliantly for anything that has an ‘on’/‘off’ state. However, if I have a sensor that has a state that is anything else (e.g. weather, times of the day, person location) it defaults to being ‘on’ and so it glows like the lights do.

And I can’t seem to find a way to turn off the ‘on’ class. If I set state to ‘false’ it still sets the overall button to ‘on’.

Any advice on this one? I’m not sure if I have explained myself clearly or not…

[doktordoc (Sasa)]

How did you get card to glow when is on
About weather, I have homekit card, double, and only shows name of the city, sunny or … and sun …
No temperature or anything else
Thx

[doktordoc (Sasa)]

I have Sony Tv, model xe85
And now Bravia tv integration won’t work any more, anybody else have problem