Custom Lovelace Card - Homekit style card

[Martin_Pejstrup (mpejstrup)]

Congrats man!
Hope to be one soon as well

Can anyone help me with the sonos-card? https://github.com/DBuit/sonos-card
It’s really testing me…
I want to use it with browser_mod (I have not updated to 0.113) and try to integrate it with the design of Mattias Persson https://github.com/matt8707/hass-config
Have gotten the popup to work, but I get this:

        action: call-service
        service: browser_mod.popup
        service_data:
          title: Luk
          deviceID: this
          style:
            --ha-card-border-radius: 1em
            --more-info-header-color: rgba(255,255,255,0.6)
            background: none
            box-shadow: none
            width: calc(400px + 555px)
          card:
            - type: custom:sonos-card
              name: Sonos Alrum
              show_header_toggle: false
              style: |
                ha-card {
                  animation: pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: center;
                  box-shadow: none; border-radius: 1em; padding: 0.3em 1.25em 0.4em 0.5em; 
                  background: linear-gradient(180deg, rgba(48,52,52,1) 0%, rgba(48,52,52,1) 4.8em, rgba(34,38,39,1) 4.8em, rgba(34,38,39,1) 100%); }
                .card-header {
                  margin: -0.4em 0 1.4em 0.4em; font-family: sf text; letter-spacing: 0.005em; font-size: 1.5em;}
                @keyframes pop-in {
                  0% { transform: scale(0.6); opacity: 0; } 20% { opacity: 0; } 100% { transform: scale(1); opacity: 0.9; }}
              entity: media_player.alrum

Any ideas?

[ASNNetworks]

You need to pay close attention to the configuration of browser_mod.popup in this case. As you can see, it has a value of ‘card’. This is not plural, so it means it expects ONE card. Yet, you have used - type: custom:custom-sonos-card. The - before type implies there is a list of multiple items, which is not what browser_mod.popup expects (it asks for card remember, and not cards.

This is the example as mentioned in the ReadMe:

service: browser_mod.popup
service_data:
  title: Popup example
  card:
    type: entities (< SEE, THERE IS NO LIST)
    entities:
      - light.bed_light
      - light.kitchen_lights
      - light.ceiling_lights
  deviceID:
    - this
    - dashboard

You see the difference? Make sure you use the correct format, so don’t use - but only ONE card. If you want to have multiple cards, use a vertical-stack card and then you can list multiple cards under there.

Try:

        action: call-service
        service: browser_mod.popup
        service_data:
          title: Luk
          deviceID: this
          style:
            --ha-card-border-radius: 1em
            --more-info-header-color: rgba(255,255,255,0.6)
            background: none
            box-shadow: none
            width: calc(400px + 555px)
          card:
            type: 'custom:custom-sonos-card'
            name: Sonos Alrum
            show_header_toggle: false
            style: |
              ha-card {
                animation: pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: center;
                box-shadow: none; border-radius: 1em; padding: 0.3em 1.25em 0.4em 0.5em; 
                background: linear-gradient(180deg, rgba(48,52,52,1) 0%, rgba(48,52,52,1) 4.8em, rgba(34,38,39,1) 4.8em, rgba(34,38,39,1) 100%); }
              .card-header {
                margin: -0.4em 0 1.4em 0.4em; font-family: sf text; letter-spacing: 0.005em; font-size: 1.5em;}
              @keyframes pop-in {
                0% { transform: scale(0.6); opacity: 0; } 20% { opacity: 0; } 100% { transform: scale(1); opacity: 0.9; }}
            entity: media_player.alrum    

[1nutty1 (Roland Harris)]

Thanks for the help.
I did just notice this --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
and was wondering why I don’t get the expected result on RLamp

[Martin_Pejstrup (mpejstrup)]

Hi @ASNNetworks

Thanks a lot. That sorted that perfectly. Now the next issue, it tells me to define entities, but I have only one entity needed.

Do you see what I’m missing here as well?

Edit: Found the issue. I though I could use one entity per button and the card would gather the different media.players to group/ungroup.
It’s working now.
@DBuit or anyone, how can I remove the Line-in? I would like the remove the scroller.

Also, when I try to Ungroup, I get this notification??

Log:

Thanks

[djacid]

Could you please share the code for this popup with swipe card, because I am trying to achieve the same and unfortunately I can’t

[ASNNetworks]

I don’t use that anymore. I tried it back then, but controlling the card and swiper were working against eachother, giving inconsistent results with controlling the actual card. Trying the turn down brightness, swiped the card for example.

[djacid]

Thank you for your quick response. Can I ask you something more? I really love your setup. Could you please tell about the buttons? Are they responsive? I think you don’t use homekit card but custom-layout card.

[ASNNetworks]

That’s right, I don’t use Homekit style card (never have, I only use DBuits popup sliders). I just created my own cards using button-card. I’d advise you to check out that thread or github for examples. I wish I could give you some examples, but I have templated all my buttons. So the code is useless by itself. I haven’t done anything really special though.

Button-card is amazing and I use it for all my buttons.

[djacid]

I am already using button card. My problem is custom layout card. My layout breaks on my mobile, and I don’t know the reason.

[ASNNetworks]

Then you should ask around in that thread. I don’t use layout card myself and I don’t think someone in this thread can help you since the problem has nothing to do with Homekit Style card.

[djacid]

But if you don’t use homekit card or custom layout card, how your setup is mobile friendly?

[ASNNetworks]

You’re right, correction: I am using layout-card (never paid attention since I set it up a long time ago). I simply use:

      - layout: vertical
        type: 'custom:layout-card'
        column_width: 96%
        cards:

and then under there all your cards.

note: I used 96% column_width because I don’t like how the UI strechtes from border to border on my screen. I like some padding on the sides. But you can set that too 100% if you want.

[djacid]

Thank you very much. I will try it.

[ASNNetworks]

Keep in mind though, this is only meant for mobile use. If you open that view on a widescreen like a tablet in landscape or pc/laptop it will be all stretched out. In that case you’ll need to work with extra layout-cards. Or create a complete separate dashboard meant for tablet/desktop usage (which is what I did)

[djacid]

I understood, now I use homekit card with custom button card. The only problem is that homekit card converts every card to tile. So, I am trying to recreate the same result with custom layout card

[Martin_Pejstrup (mpejstrup)]

Hi @DBuit and anyone who can help

Now I got my Sonos Card in browser_mod.popup, but I need som help with making it fit.
As you see below, it would be very cool to move the 2 player up beside Alrum and Terrasse and then making room for the playlists/sources… Hope you enjoy my graphic visualization

        action: call-service
        service: browser_mod.popup
        service_data:
          title: Sonos Alrum
          deviceID: this
          style:
            .: |
              :host .content {
                width: 60em;
              }
            --ha-card-border-radius: 1em
            --more-info-header-color: rgba(255,255,255,0.6)
            background: none
            box-shadow: none
          card:
            type: custom:sonos-card
            name: Sonos Alrum
            show_header_toggle: false
            style: |
              ha-card {
                animation: pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: center;
                box-shadow: none; border-radius: 1em; padding: 0.3em 1.25em 0.4em 0.5em; 
                background: linear-gradient(180deg, rgba(48,52,52,1) 0%, rgba(48,52,52,1) 4.8em, rgba(34,38,39,1) 4.8em, rgba(34,38,39,1) 100%); }
              .card-header {
                margin: -0.4em 0 1.4em 0.4em; font-family: sf text; letter-spacing: 0.005em; font-size: 1.5em;}
              @keyframes pop-in {
                0% { transform: scale(0.6); opacity: 0; } 20% { opacity: 0; } 100% { transform: scale(1); opacity: 0.9; }}
            entities:
              - media_player.alrum
              - media_player.terrasse
              - media_player.badevaerelse_1
              - media_player.sonos_beam

Thanks in advance

[DBuit]

Hello everyone,

In the latest version of hass 0.113 the pop-up structure changed alot and it wasn’t working anymore

It is still not 100% the way it was but it works again it is looking ok.

Install V0.5.5 if you also use 0.113 to make the popups work again: https://github.com/DBuit/Homekit-panel-card/releases/tag/0.5.5

Besides that i now use browser_mod to open the pop-up so if you wanna use the pop-ups install browser_mod: https://github.com/thomasloven/hass-browser_mod

browser_mod also changed it’s code so now to style the popup you also need card_mod so also install this: https://github.com/thomasloven/lovelace-card-mod

And than it should all work again.

[1nutty1 (Roland Harris)]

So no more light-popup-card then?

[Virgil_Popa (Virgil)]

on iphone still doesn’t work

Later:

I managed to make it work, after I reinstalled all the modules. The problem is that now the name and the close button appear at each popup. How can I hide them?

[Jimmy_Berglund]

Can confirm that it does not. I have all of them updated and it still makes its all a total mess.
Even when using cleard cashe and everything.

and im using all 3 mods as you describe.

Fullscreen funktion seem to have one thing to do with it.
with fullscreen on

Nothing alligns as it should. it goes to the left.

with all styles that ive basicly copied from your readme page it removed it with none fullscreen.

But what both have as a problem is that now i cant controll anything. So seems everything is a mess to me. If i revert back everything works fine.

Example of a button were i cant dim anymore or change light colors.

        entities:
          - entities:
              - entity: sensor.sovrummet_temperature
              - entity: light.sovrumslampor
                double_tap_action:
                  action: call-service
                  service: browser_mod.popup
                  service_data:
                    card:
                      actions:
                        - color: '#00c788'
                          name: Grönt
                          service: scene.turn_on
                          service_data:
                            entity_id: scene.gront_ar_skont
                        - color: '#ff7200'
                          name: Mysigt
                          service: scene.turn_on
                          service_data:
                            entity_id: scene.mysigt
                        - color: '#c4d9d2'
                          name: Spelande
                          service: scene.turn_on
                          service_data:
                            entity_id: scene.spelande
                        - color: '#f000ff'
                          name: Sexigt
                          service: scene.turn_on
                          service_data:
                            entity_id: scene.sexigt
                        - color: '#9e1c29'
                          name: VioletRed
                          service: scene.turn_on
                          service_data:
                            entity_id: scene.violetred
                        - icon: 'mdi:cog'
                          name: Settings
                          service: browser_mod.popup
                          service_data:
                            card:
                              entities:
                                - entity: light.sovrumslampor
                                  secondary_info: last-changed
                                - brightness: false
                                  color_temp: true
                                  entity: light.sovrumslampor
                                  full_width_sliders: true
                                  hide_header: true
                                  show_slider_percent: true
                                  smooth_color_wheel: true
                                  type: 'custom:light-entity-card'
                              show_header_toggle: false
                              type: entities
                            deviceID: this
                            title: Sovrums Lampor
                      actionsInARow: 3
                      brightnessHeight: 360px
                      brightnessWidth: 130px
                      entity: light.sovrumslampor
                      fullscreen: false
                      switchHeight: 300px
                      switchWidth: 110px
                      type: 'custom:light-popup-card'
                    deviceID:
                      - this
                    style:
                      align-items: center
                      background: 'rgba(0, 0, 0, 0.8)'
                    title: Sovrums Lampor