Card Tools popup? (Homekit style card )

Hey guys

i just released new version of the homekit style card (https://github.com/DBuit/Homekit-panel-card) what did i add:

  • Custom tile with custom tap action for example to navigate to other page
  • New tile style for thermostat
  • Update mini graph card style to fit better
  • Combine entities (Show value of one entity on other entity tile to combine switch and sensor for example)
  • Toggle group with entities (Groups can now be used because you can add custom tap_action to toggle a group)
  • Style fixes

I also updated the light pop-up card (https://github.com/DBuit/light-popup-card):

  • Added capitalization on the On/Off names
  • border radius can be configured
  • Remove overflow hidden for scene names
  • make fullscreen option which removes the popup-wrapper
  • supported_featuress can be configured
  • style fixes

And i also created a new pop-up card for climate entities in homekit style
it can be found here: https://github.com/DBuit/thermostat-popup-card
Screenshot:

4 Likes

Hi DBuit
Thanks a lot for your hard work, I’m using your light pop-up card and it’s wonderful,
I’m just wondering if we can use custom entity picture instead of icon?
I’ve tried adding it to the code but without success:

  card:
    type: custom:light-popup-card
    entity: light.tomer_bed_light
    show_entity_picture: true
    entity_picture: /local/lovelace/apple_icons/side_lamp.png
    scenesInARow: 2
    brightnessWidth: 150px
    brightnessHeight: 400px
    switchWidth: 150px
    switchHeight: 400px

Thanks.

Hey man,
No at this moment you van only use An icon.
Maybe in the future

Can you post that image so i can test with it and make sure it looks good

Thanks you!

@DBuit - This card looks simply amazing, so much appreciation for your work here !!! So I got the light popup kinda working and its great, but now I am playing with the themostate one and I am not sure the example in the readme is fully groking w/. me… So I noticed a lot of your repos have a popup_cards attribute mentioned but its not clear to me if this is a dependency on @thomasloven’s deprecated popupcard or just a namespace conflict between the two projects… Bottom line do you happen to have a simple and complete hello world'ish example for how to use this card in a virgin lovelace install ?

thanks again

He John,

So i made this card to work with my other card: https://github.com/DBuit/Homekit-panel-card
to get more home kit style interface.

But i use card tools by thomas loven so the card can also be used without my other card. And just as a popup in your interface.

So it works with popup-card and browser-mod by thomas and the example code in the readme is how you can use it with browser-mod:

popup_cards:
  light.beganegrond:
    title: ""
    style:
      position: fixed
      z-index: 999
      top: 0
      left: 0
      height: 100%
      width: 100%
      display: block
      align-items: center
      justify-content: center
      background: rgba(0, 0, 0, 0.8)
      flex-direction: column
      margin: 0
      "--iron-icon-fill-color": "#FFF"
    card:
      type: custom:light-popup-card
      entity: light.beganegrond
      icon: mdi:led-strip
      scenesInARow: 2
      brightnessWidth: 150px
      brightnessHeight: 400px
      switchWidth: 150px
      switchHeight: 400px
      scenes:
        - scene: scene.ontspannen
          color: "#FDCA64"
          name: ontspannen
        - scene: scene.helder
          color: "#FFE7C0"
          name: helder
        - scene: scene.concentreren
          color: "#BBEEF3"
        - scene: scene.energie
          color: "#8BCBDD"

Here you got the section about the popup in the browser_mod readme: https://github.com/thomasloven/hass-browser_mod#popup

Hope you can get it working let me know if i can help you!

Hi @DBuit

where do we declare these popup_cards: ? Should they go in the root of the ui-lovelace.yaml, just like the decluttering_templates and button_card_templates or do we need to set them in the view they are called in like yaml anchors.

to get a better understanding: do we need to set this on each individual light, or could we create a ‘template’ and use ‘entity’ or ‘this.entity_id’ and use the card on each more-info on light in the config?

He @Mariusthvdb

Yes they go in the root so not after or inside the views:
Well if you are using browser_mod and implementing this in your own interface it looks like your need to do this for each light but i do not know that maybe.

I made my own card to create a homekit style interface and there you can also use this card and use it for a row of entities but if you can find that in the readme of that card: https://github.com/DBuit/Homekit-panel-card

thanks, will do.

about the ‘global’ template, would you please consider looking in to that? Would be really cool if this could be done, (if needed maybe in conjunction with the decluttering template) to prevent having to write the exact popup code 43 times :wink:

Imagine something like:

popup_cards:
  light.*:
    title: ""
    style:
      position: fixed
      z-index: 999
      top: 0
      left: 0
      height: 100%
      width: 100%
      display: block
      align-items: center
      justify-content: center
      background: rgba(0, 0, 0, 0.8)
      flex-direction: column
      margin: 0
      "--iron-icon-fill-color": "#FFF"
    card:
      type: custom:light-popup-card
      entity: entity
      icon: mdi:led-strip
      scenesInARow: 2
      brightnessWidth: 150px
      brightnessHeight: 400px
      switchWidth: 150px
      switchHeight: 400px
      scenes:
        - scene: scene.ontspannen
          color: "#FDCA64"
          name: ontspannen
        - scene: scene.helder
          color: "#FFE7C0"
          name: helder
        - scene: scene.concentreren
          color: "#BBEEF3"
        - scene: scene.energie
          color: "#8BCBDD"

Hello everyone,

i made some changes and released it in a new version so also available on HACS.
What did i do now?

Homekit panel card V0.2.2 https://github.com/DBuit/Homekit-panel-card/releases/tag/0.2.2

I also made something new i called it rules maybe the name will change but you can template rules and this will be displayed on your home screen to inform you about stuff like how many lights are on, or for me when i need to put the trash outside see screenshot:

Light pop-up card: https://github.com/DBuit/light-popup-card/releases/tag/0.2.2

So i removed scenes from the card and renamed it toactions.
It can do the same but much more because it uses services now as was suggested by people, you can also add icons to use it more as a button.

Old configuration won’t work this is the new way:

actions:
  - service: scene.turn_on
    service_data:
      entity_id: scene.energie
    color: "#8BCBDD"
    name: energie
  - service: homeassistant.toggle
    service_data:
      entity_id: light.voordeurlicht
    name: voordeur
    icon: mdi:lightbulb
1 Like

popup_cards are now also used by browser_mod, such that it’s a complete replacement for popup-card.

Can you make this work with the layout-card please? I really need to have other items on my UI at the same time as this card.

Thanks!
Dave

Hello all,

No update yet for the pop-up card but i did update the homekit panel card!
I just released an update of the homekit card: https://github.com/DBuit/Homekit-panel-card
What is added/fixed/changes:

  • Add column support . This is optional but if you wanna use this the yams looks a bit different because you have to name the rows and columns in the readme there will be an example.
  • Display state info like brightness percentage for lights or last_changed for sensors not after the state (on/off) but in a circle inspired by A different take on designing a Lovelace UI
  • Custom hold_action. I added the tap_action before and now you can also customize the hold_action the same way
  • Custom double_tap_action. Just like hold you can also set a double_tap_action. By default if no double_tap is defined it will activate the tap action.
  • Icon spin. You can set spin: true on your entity and the icon will start spinning when the state == on can be useful for ventilation for example
  • Small css changes/fixes
  • Rewriten the readme

With the new columns you can now make in interface like this:

1 Like

Great additions today!!

I can’t seem to get this working, do you see any issues here?
Thanks!

enableColumns: true
breakOnMobile: true
rows:
  - row: 1
    columns:
      - column: 1
        tileOnRow: 4
        entities:
          - title: Kitchen
            entities:
              - entity: light.kitchen_lights
              - entity: light.kitchen_left
              - entity: light.kitchen_middle
              - entity: light.kitchen_right
          - column: 2
            tileOnRom: 3
            entities:
              - title: Living Room
                entities:
                  - entity: light.wallunit_top
                  - entity: light.wallunit_middle
                  - entity: light.wallunit_bottom
  - row: 2
    columns:
      - column: 1
        tileOnRow: 3
        entities:
          - title: Temp/Humidity
            entities:
              - entity: sensor.living_room_temperature
              - entity: sensor.living_room_humidity
  - row: 3
    columns:
      - column: 1
        tileOnRow: 3
        entities:
          - title: AC
            entities:
              - entity: climate.kitchen_ac
                type: thermostat
  - row: 2
    columns:
      - column: 2
        tileOnRow: 3
        entities:
          - entity: light.main_entry
          - entity: light.chandelier
          - entity: light.front_steps
          - entity: light.foyer
  - row: 3
    columns:
      - column: 2
        tileOnRow: 3
        entities:
          - entity: light.front_steps
          - entity: light.garden_path
  - row: 4
    columns:
      - column: 2
        tileOnRow: 3
        entities:
          - entity: light.living_room_dimmer_back
          - entity: light.living_room_dimmer_middle
          - entity: light.living_room_dimmer_front
            popup:
              brightnessHeight: 350px
              brightnessWidth: 130px
              switchHeight: 300px
              switchWidth: 110px
              type: 'custom:light-popup-card'
panel: true
type: 'custom:homekit-card'

@dacorn

tested your configuration you where missing the following on 3 places:

entities:
  - title: test

This works for me:

  - title: test
    panel: true
    cards: 
      - type: "custom:homekit-card"
        enableColumns: true
        breakOnMobile: true
        rows:
          - row: 1
            columns:
              - column: 1
                tileOnRow: 4
                entities:
                  - title: Kitchen
                    entities:
                      - entity: light.kitchen_lights
                      - entity: light.kitchen_left
                      - entity: light.kitchen_middle
                      - entity: light.kitchen_right
              - column: 2
                tileOnRow: 3
                entities:
                  - title: Living Room
                    entities:
                      - entity: light.wallunit_top
                      - entity: light.wallunit_middle
                      - entity: light.wallunit_bottom
          - row: 2
            columns:
              - column: 1
                tileOnRow: 3
                entities:
                  - title: Temp/Humidity
                    entities:
                      - entity: sensor.living_room_temperature
                      - entity: sensor.living_room_humidity
          - row: 3
            columns:
              - column: 1
                tileOnRow: 3
                entities:
                  - title: AC
                    entities:
                      - entity: climate.kitchen_ac
                        type: thermostat
          - row: 2
            columns:
              - column: 2
                tileOnRow: 3
                entities:
                  - title: ENTITIES & TITLE MISSING HERE
                    entities:
                      - entity: light.main_entry
                      - entity: light.chandelier
                      - entity: light.front_steps
                      - entity: light.foyer
          - row: 3
            columns:
              - column: 2
                tileOnRow: 3
                entities:
                  - title: ENTITIES & TITLE MISSING HERE
                    entities:
                      - entity: light.front_steps
                      - entity: light.garden_path
          - row: 4
            columns:
              - column: 2
                tileOnRow: 3
                entities:
                  - title: ENTITIES & TITLE MISSING HERE
                    entities:
                      - entity: light.living_room_dimmer_back
                      - entity: light.living_room_dimmer_middle
                      - entity: light.living_room_dimmer_front
                        popup:
                          brightnessHeight: 350px
                          brightnessWidth: 130px
                          switchHeight: 300px
                          switchWidth: 110px
                          type: 'custom:light-popup-card'

I created a quick new pop-up card after suggested by someone to reuse the light popup for media_player
So it is the same popup card as the lights but now the slider controls your volume of your media_player.

And you can configure extra actions to add more control like next and previous song and play/pause your media_player.

Repo with example configuration can be found here: https://github.com/DBuit/media_player-popup-card
Screenshot:

5 Likes

Very very nice, I actually wanted to ask you something like this. Could you also create one for covers and/or garage doors? That would be amazing.

1 Like

Hi,

Sure, please find the icons attached.

Thanks.

HI, thanks for looking at this, I am still getting an error, it say I need to define entities.

I did a copy and paste to the UI Editor. I am not using the ui-lovelace.yaml as I still edit through the main page.

Hey DBuit,

Fantastic work you have done with this card !
Can you take a look at this one? I just can’t get it working:

color: auto
entity: light.hemel
name: Hemel
show_last_changed: true
show_state: true
size: 1.7em
state:
  - styles:
      card:
        - '--paper-card-background-color': '#FFFFFF'
        - filter: opacity(40%)
      icon:
        - filter: grayscale(40%)
    value: 'off'
styles:
  card:
    - font-size: 11.2px
    - '--paper-card-background-color': 'rgba(174, 255, 205)'
    - height: 100px
    - border-radius: 10px
  img_cell:
    - font-size: 14px
    - justify-content: left
  label:
    - opacity: 0.8
    - font-size: 11.2px
    - padding: 0px 5px
    - color: black
  name:
    - font-size: 24px
    - max-height: 1.4em
    - min-height: 1.4em
    - opacity: 0.75
    - color: black
    - justify-self: start
    - padding: 0px 5px
  state:
    - font-size: 2.4em
    - font-weight: 300
    - color: black
hold_action:
  action: more-info
  service: browser_mod.popup
  service_data:
    title: Popup ex
    style:
      position: fixed
      z-index: 999
      top: 0
      left: 0
      height: 100%
      width: 100%
      display: block
      align-items: center
      justify-content: center
      background: 'rgba(0, 0, 0, 0.8)'
      flex-direction: column
      margin: 0
      '--iron-icon-fill-color': '#FFF'
    card:
      type: 'custom:light-popup-card'
      entity: light.hemel
      scenesInARow: 2
      brightnessWidth: 150px
      brightnessHeight: 400px
      switchWidth: 150px
      switchHeight: 400px
  deviceID:
    - 2f9a3023_de4d04c2
type: 'custom:button-card'

Thanks for your help !

I got this working now so all good! Thanks again for this great card!