Card Tools popup? (Homekit style card )

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!

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