Custom Lovelace Card - Homekit style card

DBuit · December 16, 2021, 10:31am

The weather card show 3 instead of 5 days when the width of the card is below 245px.
So i cant really do anything but the only way it to increase the --tile-width-mobile so there is atleast 245px.

I tested it and if you set mobile width to 98px it works.

naijaping · December 16, 2021, 10:57am

Hi @DBuit , thanks for your hard work to provide and maintaining this card. Unfortunately version 0.62 breaks the defined following :

–tile-width: 100px
–tile-height: 100px

If you visit a tab and you leave that tab to another tab with different tile height and width then it will pick up the value from the previous tab.

Please how can i solve this problem .

Thanks for your help

DBuit · December 16, 2021, 12:34pm

Hi @naijaping

with tab you are talking about a different view in hass? or another tab in your browser?

Jimmy_Berglund · December 16, 2021, 11:33pm

Thx man. Yeh that keeps the days there. half the text still dissapers but it looks better. It does the same on the video i showed before so you get what i mean.

Is there anyway to keep it there? Played abitt witht he high and with but seems to not change anything.
In any case its better and if nothing can be done than im ok.

royle · December 17, 2021, 1:12am

The popup card stopped working a while ago and i just cant get it to work again.
Been pulling my hair for a while now so writing here in hopes some of you can find my mistake.

Browser_mod is installed and set up in configuration.yaml with browser_mod: and nothing else.
I have all my resources for lovelace listed in configuration file also.

Homekit panel card, card mod and light popup card are installed through HACS and resources added.
Below is my config

                        - entity: switch.salon_switch
                          name: סלון
                          icon: mdi:sofa-outline
                          popup:
                            type: custom:light-popup-card
                            scenesInARow: 2
                            brightnessWidth: 130px
                            brightnessHeight: 350px
                            switchWidth: 110px
                            switchHeight: 300px

naijaping · December 17, 2021, 8:25am

Hi @DBuit , thanks for your reply, I talking about a different view in hass. see image below.

before update

after update

it is picking the width and height from the media view.

Thanks

DBuit · December 17, 2021, 8:39am

Hi @royle

What happens when you hold the tile? you do get the default more-info popup?
Any errors in the browser console?

DBuit · December 17, 2021, 8:41am

Hi @naijaping,

In the media view you got a style part where you put a custom width and height.
Have you set any style width and height on the other view? if not maybe try set it with the default value’s so it does get set when switching maybe it makes sure the values are reset.

let me know

naijaping · December 17, 2021, 9:57am

Hi @DBuit , yes each view has got their custom height and width set in the css.

main view got this:

 style: |
    :host {
    --tile-background: rgba(125, 125, 125, 0.2);
    --tile-border-radius: 12px;
    --tile-width: 100px;
    --tile-height: 100px;
    --tile-width-mobile: 90px ;
    --tile-height-mobile: 90px ;
    --min-header-height: 150px;

and media view:

style: |
  :host {
  --tile-background: rgba(125, 125, 125, 0.2);
  --tile-border-radius: 16px;
  --tile-width:140px;
  --tile-height: 100px;
  --tile-width-mobile: 90px;
  --tile-height-mobile: 90px;
  --min-header-height: 150px;

I just dont know whats going wrong. same result on opera, chrome and firefox

dlsnet · December 21, 2021, 5:05am

First of all, thanks for this awesome component.

Can I put a border around all and/or individual card? Sorry, I’m really bad with css, so failed to figure it out myself. Approach with --tile-border-color: like tags doesn’t work.

Thank you.

dlsnet · December 22, 2021, 4:39pm

Ok, I was able to figure out how to add a border:

      .button {
          border: 5px solid red!important;
      }

Now I’m trying to do a conditional override, but it doesn’t work:

      .codeRed .button {
          border: 5px solid red!important;
      }

~~I would appreciate any suggestions. Thank you.~~

Thanks to my brother, a solution is found. Here it is if someone is interested:

      .codeRed {
        border: solid red;
        border-width: 1px 1px;
      }

MRobi · December 22, 2021, 9:39pm

I’m just getting started with these cards, trying to integrate them in so I can use them with Dwain’s Dashboard.

I’m trying to use a global configuration so all entities of a class open these custom popups. I’ve got that part working just fine, but I’m having a few issues/questions about the popups themselves.

1: Regardless if a light entity is a switch, dimmer or bulb I’m getting a popup with only the option of on/off. If I set displayType: auto, they’re still all on/off. Of course if I set displayType: slider they’re all slider. How do I get it so it can distinguish between on/off, dimmer and bulb? I hope the answer isn’t to create a custom popup for each entity.

2: The popup cards work great on mobile, but through a desktop they’re extremely cropped. For the light-popup-card setting fullscreen: false seems to do the trick, but that doesn’t seem to be working for any of the other card types. This seems to have fixed itself somehow.

3: Can the icon used in the popup card be resized and color changed to something other than yellow?

bat-maniac · December 23, 2021, 8:08pm

How did you style the tile separately?
Would be nice if you could show your yaml for that.
Thank you

mlittle843 · December 24, 2021, 12:45am

Awesome looking dashboard! Can you tell me how your got your icons to be the same color?

naijaping · December 24, 2021, 8:49am

@mlittle843 , --tile-on-icon-color: #87ceeb; change it to whatever colour you want .

mlittle843 · December 24, 2021, 12:31pm

I’ve tried that and it isn’t working. Weird. I’ve even tried to override with !important and it still isn’t working. Thanks for the reply!

mlittle843 · December 24, 2021, 12:45pm

I just figured it out. I had an error in my css. Thanks a bunch for the reply!

mlittle843 · December 24, 2021, 1:11pm

Well it actually only works on some and not others. I doesn’t work for light groups or lights that have rgb even though I tired useBrightness: false useRGB: false useTemperature: false. I can’t get the icon to use the color in --tile-on-icon-color:. It works on switches and plugs for sure but that seems to be about it for me.

ebz · December 25, 2021, 7:11am

Hi,
I was trying to adjust my Thermostat today via the popup, and discovered I am missing the icons (Hot/Dry/Cold) on the bottom of the popup, The “Hot Spots” are there and I can click them, But no
Icons or texts appear there… (I have to admit I didn’t use it for a very long time, Not sure when this problem exists…)

Code is very basic:

type: custom:homekit-card
useTemperature: true
statePositionTop: true
titleColor: '#CCF'
entities:
  - title: Office
    entities:
      - entity: climate.office
        name: Office AC
        popup:
          type: custom:thermostat-popup-card

dlsnet · December 25, 2021, 7:32am

bat-maniac

you mat want to add conditional class to your entity definition. something like that:

                  - entity: cover.garage_door
                    conditionalClass: |
                      [[[
                        if (states['binary_sensor.garage_tilt_sensor_contact'].state == 'off') 
                          return 'codeGreen';
                        else 
                          return 'codeRed';
                      ]]]

Then use it in css overrides like it was shown above.