Card Tools popup? (Homekit style card )

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!

Hi everyone,

So i made a third version of the slider popup for covers.


It works the same as the media_player except it has 1 extra config option ** sliderService** where you need to set if you want to control the normal position or the tilt position with the slider.

I first thought to make 1 pop-up that could work for most entities but configuration gets much more complicated and i can make these pretty quick :slight_smile:

Screenshot to finish it:

3 Likes

Hey @DBuit,

finale made it to have this popup show on each button, and use it in the button_template (opposed to writing it on each and every light entity card).
in my previous attempt above, I forgot to use the correct JS syntax used in the button card. duh. here is the correct thing, using browser-mod:

  hold_action:
    haptic: heavy
    action: call-service
    service: browser_mod.command
    service_data:
      command: popup
      title: >
        [[[ return entity.attributes.friendly_name ]]]
      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)
        color: 'var(--primary-color)'
        flex-direction: column
        margin: 0
        "--iron-icon-fill-color": "#FFF"
      card:
        type: custom:light-popup-card
        entity: >
          [[[ return entity.entity_id ]]]
#        icon:  >
#           [[[ return entity.attributes.icon ]]]
        brightnessWidth: 150px
        brightnessHeight: 400px
        switchWidth: 150px
        switchHeight: 400px

Since I couldn’t read the name of the entity, next to the X, let me ask this:

What would be the variable to use for coloring the title? Also, could we position the name centrally in the popup, atop the icon, or at least in that small column of icon, % and slider?

I’ve now set color: 'var(--primary-color)' and that makes the card follow theming so it seems for now :wink:
I’ve also not used the icon template, since I have all my lights customized, and that follows suit nicely.

3 Likes

Hey @DBuit,

Thanks again for this great card! Unfortunately the following does only work partially for me:

It does work for my Hue LED Strip, but not my other lights. I configured all the icon colors exactly the same way (greyscale, based only on brightness %) - but for the other ones it shows the standard yellow.

BTW: it shows the correct icon_color in developer settings and other cards.

52 vs. 12

Thank you very much for any feedback!


EDIT: My bad, it was only luck that the color was matching - as the led strip was white… :sweat_smile:
Would it somehow be possible to make it compatible with custom ui? This and the integrated light card are the only (to my knowledge) where it does not work fully.

Hello everyone,
I just updated the light pop-up (https://github.com/DBuit/light-popup-card) with a few requested changes.

First three configuration options to change color of the slider

  • sliderColor (Change color of the slider)
  • sliderColoredByLight (Let the slider color be defined by the lights color/brightness *overwrites sliderColor)
  • sliderThumbColor(Change the color of the line that you use to slide the slider)

And In new version the brightness is shown at the slider while sliding so you can directly see what percentage you are setting before releasing it :slight_smile:

1 Like

Hello everyone,
Just release new version of the light pop-up card (https://github.com/DBuit/light-popup-card)
New stuff

  • Added sliderTrackColor to configuration to change the color of the track.
  • Added settings which enable an extra page on the pop-up that displays the more-info pop-up content to give more control
  • Added settingsCard when settings is enabled you can instead render any lovelace card on the extra page (Check readme for example configuration)

Fixed

  • Fullscreen setting when false also removes the negative margin on the icon so the pop-up is still displayed correctly.

Screenshot of the settings:

hi, when i use the slider in the popup card, when i set the brightness to 100% the real value is 99%,
Anyone else with this problem?
Regards