Custom Lovelace Card - Homekit style card

mkhattab · February 11, 2020, 2:23pm

I am running the latest version of Home Assistant (0.105.3) and the latest version of all your cards.
Here is my global config:

climate.bedroom_ac:
    card:
      entity: climate.bedroom_ac
      type: 'custom:thermostat-popup-card'
    style:
      '--iron-icon-fill-color': '#FFF'
      align-items: center
      background: 'rgba(0, 0, 0, 0.8)'
      display: block
      flex-direction: column
      height: 100%
      justify-content: center
      left: 0
      margin: 0
      position: fixed
      top: 0
      width: 100%
      z-index: 999
    title: ''

and here is my card config:

- entity: climate.bedroom_ac
   tap_action:
     action: more-info
     entity: climate.bedroom_ac
  wider: true

atebeta · February 11, 2020, 3:19pm

Turns out there was setting in the theme I was using that was making the background of the header of the card darker and I just had to change more-info-header-background to transparent and now the popup card is all 1 color. This is actually a bit confusing since the normal default more-info popup card uses secondary-background-color.

jimz011 · February 11, 2020, 3:37pm

@DBuit thank you for fixing the fullscreen issues some of us had on all your cards! Saves me editing the files every time an update comes. I do have a question though. I tried to use the preset scenes, and though it works nicely, the size is huge! Would it be possible to change the size of the scenes/preset buttons to something more like this?

That is the only thing I really miss. I love the more info button, though I believe it would be better if it is on the top right so that regardless of screensize the button would always be at the same spot. I think that probably the full screen option was meant to fix that, but whenever I use full-screen it would do those crazy -64px margins and the cards would be unreadable on a mobile phone (they work fine on a desktop btw).

Mariusthvdb · February 11, 2020, 3:41pm

my thoughts exactly, as suggested here: Custom Lovelace Card - Homekit style card - #372 by Mariusthvdb

hope @DBuit will reconsider …

DBuit · February 12, 2020, 6:47am

Hi @jimz011,

can you share exactly what style changes you did for the action buttons i can see what i can do.
Maybe make it configurable or change it.

and @Mariusthvdb i got it on my list of thing to do to make the position of the button configurable

INTEL · February 12, 2020, 1:44pm

Something wierd is happening with thermostat popup card…
When climate is off, popup card is blank, but when I switch climate on, popup shows up normaly…

      - type: custom:homekit-card
        home: false
        title: 
        statePositionTop: true
        tileHoldAnimation: true
        useBrightness: true
        useTemperature: false
        entities:
              - entity: climate.centralno
                name: Centralno
                wider: false
                tap_action: 
                  action: toggle
                  entity: input_boolean.automode_centralno
                popup:
                  type: custom:thermostat-popup-card

Anything I need to add here?

mkhattab · February 12, 2020, 2:03pm

Good observation @INTEL

@DBuit I also have the same problem. I hadn’t noticed it when I reported my blank screen problem yesterday but tried now when @INTEL reported it and it’s the same for me

DBuit · February 12, 2020, 4:05pm

@INTEL @mkhattab that is strange Will check if out and fix it

jimz011 · February 12, 2020, 6:43pm

I wish it were style changes so I could easily share it with you. Actually the card you see in the screenshot is the rgb-card which has these small rounded circles by default. I had wished to use your scene selector instead so I can use the settings button you have made (but unfortunately the location of the settings button doesn’t look very nice when not running fullscreen) but I mentioned that already.

Though when I use your scenes, the buttons are huge, but I mean immens! On a desktop or ipad this is probably not as apparent, but on an iPhone X they are almost as big as my standard buttons in lovelace.

DBuit · February 13, 2020, 7:29am

Hi everyone,

Small update for light pop-up added actionSize (@jimz011) and settingsPosition (@jimz011 and @Mariusthvdb) as configuration.
You can check here how to use it: https://github.com/DBuit/light-popup-card/releases/tag/0.4.3

Might also add extra size settings for mobile seperate from global because they become pretty small on large screens

The other popup cards will follow soon.

jimz011 · February 13, 2020, 9:39am

Will test this tonight, thank you once again!

Cadster · February 13, 2020, 10:38am

I get an error in mij log:

/community_plugin/homekit-panel-card/homekit-panel-card.js:186:382 SyntaxError: invalid regular expression flag s

I’m running Home Assistant Core and have installed the card with HASC, what can cause this?

DBuit · February 14, 2020, 5:32am

Hi @Cadster,

I got no problems with the card and nobody mentioned so i think it is in your config.
Can you share yours?

DBuit · February 14, 2020, 6:45am

Hello everyone,

I just updated thermostat, cover and media_player popup. @jimz011

Added settingsPosition for all 3
Added actionSize for cover and media_player
Fixed thermostat invisible when off @mkhattab and @INTEL

I also updated light popup with a fix for the settingsPosition when in fullscreen.

mkhattab · February 14, 2020, 8:10am

Hi @DBuit is there something we should change in the config?
I still have the same problem after updating to the latest thermostat-popup (0.2.2)

DBuit · February 14, 2020, 8:41am

That is strange, any errors in console?

mkhattab · February 14, 2020, 8:56am

None at all.
I am investigating but it’s strange because it was working fine until the last update which broke something and I have not changed my config (which I posted above when reporting the error) since then

DBuit · February 14, 2020, 12:21pm

@mkhattab U use HACS? try installing older version 0.2 and does it work than?

mkhattab · February 14, 2020, 12:35pm

Yes I use HACS. I tried downgrading thermostat popup a couple of versions 0.2.1, 0.2 and even 0.1.1 and still the same result.

Here is my current config once again just to be sure I’m not doing anything wrong

popup_cards:
  climate.bedroom_ac:
    card:
      entity: climate.bedroom_ac
      type: 'custom:thermostat-popup-card'
    style:
      '--iron-icon-fill-color': '#FFF'
      align-items: center
      background: 'rgba(0, 0, 0, 0.8)'
      display: block
      flex-direction: column
      height: 100%
      justify-content: center
      left: 0
      margin: 0
      position: fixed
      top: 0
      width: 100%
      z-index: 999
    title: ''

and

- entity: climate.bedroom_ac
  tap_action:
    action: more-info
    entity: climate.bedroom_ac
  wider: true

DBuit · February 14, 2020, 12:39pm

Not really seeing something that is wrong.

I got this and works for me

climate.climatedemo:
    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:thermostat-popup-card
      settingsPosition: top
      entity: climate.climatedemo
      settings: true

- entity: climate.climatedemo
  tap_action:
     action: more-info
     entity: climate.climatedemo