Custom Lovelace Card - Homekit style card

DBuit · January 10, 2020, 1:39pm

Hello guys,

im working on a next release of this card but it is hard to keep track of all bugs and feature requests.
I would like to ask people to but them on github: https://github.com/DBuit/Homekit-panel-card

So if you got a bug or you are missing a functionality please make an issue on github so it is easier for me to track it

i also got a short list for myself what i have planned for version 0.2 that is here: https://github.com/DBuit/Homekit-panel-card/issues/2
So please check if your bug/request is already there i want to release a new version this weekend!

I also got a custom light pop-up card it is the same for that card if you see a bug or missing a functionality please make an issue on this github repo: https://github.com/DBuit/light-popup-card

Thanks guys!

neliss · January 11, 2020, 6:00pm

@DBuit Thanks a lot for your work, I really like this approach! I always liked the homekit layout, but since customisation is impossible I stepped away from it some time ago, and went with the hass GUI. This seems like a best-of-both-worlds solution, which could become very big.

I’ve been trying to upgrade my hass configuration for using your card, there are a couple of suggestions and issues I came across so far (using latest version):

As mentioned before in this thread, I think you should consider to revise the e.attributes.supported_features>9 line. I have a couple of lamps that have value of 1 or 2, which are perfectly dimmable. I think this post is accurate.
For me the dimmer slider is missing the little grey dash (used to pull the bar up/down). Perhaps it is invisible (white) or something, due to my theme. Any clue what is causing this?
For me the text in the <div class="card-title"></div> is black and not configurable. Perhaps due to my theme. I think white looks much better with the homekit buttons, it would be nice if the styling could be customised.
The BreakOnMobile setting would be nice for browser (i.e. non-mobile) devices too. I would prefer to scroll downwards than horizontally to see all my devices.
For me on iOS (Hass App or Safari) the handleClick() function works a bit different than on the PC. On my phone a ‘hold’ is always registered as ‘tap’, in other words: I can only toggle the device, not get the popup dialog. I tried to debug this myself, but I cannot really put a finger on the issue (wish I had a console log on the phone). Any clue what could be going on?
I would like to help improving your card, hope my experience is useful input for you (above items are not meant to critize!)

jimz011 · January 11, 2020, 6:06pm

Do you use the full button version or only the popup variant? The popup variant could be used with popup cards or browser-mod. Which makes this card a lot more versatile.

It is in a browser mod popup with a state switch, rgb-card and an light entity card.

neliss · January 11, 2020, 6:26pm

I use both the homekit-card and the homekit-popup-card (so to say). I guess my feedback is a bit confusing, since roughtly half of the issues refer to the popup card. Sorry about that

DBuit · January 11, 2020, 6:31pm

Hey man,

Tomorrow i wanna finish my next release which will have the supported_features as config.
I will check the gray dash so next release it will be back
card-title is colored by theme i can make it config in card
So you wanna set the breakonmobile on every device so you get max 3 tiles? or just dont want horizontal scrolling?
and last i don’t now it works on my pc in chrome and safari and works on android. i can check ipad

this is the stuff im working on: https://github.com/DBuit/light-popup-card/issues/6

neliss · January 11, 2020, 7:42pm

Thanks for the quick reply!
Good to hear your busy with a new version with improvements already

My idea behind a ‘breakOnNonMobile’ setting would not be to start a new row after 3 tiles, but calculate how many fit in the view, and based on that go to the next line.
The number ‘3’ works well for a phone in portrait mode, but I think its dangerous to hard-code this value.
If making it adaptive to the screen size is too difficult, an alternative could be to have the number of tiles user-configurable.

I saw now that holding the button sometimes works, sometimes not. But I don’t think it is a problem in your code, because I saw that other my tiles based on the Lovelace Button Card don’t work well with holding down either. To my experience the double-tap action is quite reliable, could it maybe be used for triggering the popup-card instead?

jimz011 · January 11, 2020, 8:09pm

Do you use an iphone by any chance? And does it by any chance have 3d touch? If yes I highly recommend you to try deep-press mod.

Much better than hold_action and even double press. It always works and is pretty fast as well.

Edit: it should work with all core cards and most if not all custom-cards. You will have to add config for it though (though it is simply a single line).

neliss · January 12, 2020, 9:41am

Hi Jimz, I installed thedeep-press mod as you suggested. Are you sure it is compatible with the homekit-panel-card?
I tried both the global configuration (enable_unsupported: true in the ui-lovelace) as adding deep_press: true to all my lights, but I don’t see any effect. According to the docs it only works for cards having a hold_action specified, which is not used by this card.

Edit: I’m testing with iPhone 8, it does feature Haptic Touch/3D Touch AFAIK.

DBuit · January 12, 2020, 12:04pm

Hey guys

i just released new version of the homekit style card what did i add:

Custom tile with custom tap action for example to navigate to other page
New tile style for thermostat
Update mini graph card style to fit better
Combine entities (Show value of one entity on other entity tile to combine switch and sensor for example)
Toggle group with entities (Groups can now be used because you can add custom tap_action to toggle a group)
Style fixes

I also updated the light pop-up card

Added capitalization on the On/Off names
border radius can be configured
Remove overflow hidden for scene names
make fullscreen option which removes the popup-wrapper
supported_featuress can be configured
style fixes

And i also created a new pop-up card for climate entities in homekit style
it can be found here: https://github.com/DBuit/thermostat-popup-card
Screenshot:

DBuit · January 12, 2020, 12:53pm

@Martin_Granger the groups work now with new update
@neliss Dome stuff you said is also fixes

DBuit · January 13, 2020, 6:15am

I just released small fix V0.2.1

Fix thermostat tile the round with temperature wasn’t styled correctly
Add offIcon in configuration to set icon to be shown when the state if off

PostSven · January 13, 2020, 8:38am

How are the scenes supposed to work? i implemented the card, but the scenes are not working for me, maybe i messed something up in the config but i am not sure

Also the slider is completly white, i do not see the nice grey bar in the slider, i tried switching themes but no luck there.

DBuit · January 13, 2020, 8:39am

Hè,

Can you post your config and your scene yaml?
The grey bar should be back what version are you using of the code?

PostSven · January 13, 2020, 8:41am

ah there we have an issue, i was under the assumption that the scenes would just change color, i never thought about the actual scene in the scene.yaml, back to the drawing board!

    popup_cards:
      light.hue_lightstrip_plus_1:
        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.hue_lightstrip_plus_1
          icon: mdi:led-strip
          scenesInARow: 2
          brightnessWidth: 150px
          brightnessHeight: 400px
          switchWidth: 150px
          switchHeight: 400px


the button:
              - template: light_button_card
                type: 'custom:decluttering-card'
                variables:
                  - entity: light.hue_lightstrip_plus_1
                  - name: TV
                  - icon: led-strip

the decluttering template:
  light_button_card:
    card:
      aspect_ratio: '[[aspect_ratio]]'
      color: '[[color]]'
      entity: '[[entity]]'
      hold_action:
        action: '[[hold_action]]'
        haptic: success
      icon: 'mdi:[[icon]]'
      lock: '[[lock]]'
      name: '[[name]]'
      show_label: '[[show_label]]'
      show_last_changed: '[[show_last_changed]]'
      show_state: '[[show_state]]'
      size: '[[size]]'
      state:
        - spin: '[[spin]]'
          styles:
            lock:
              - color: black
            name:
              - color: black
            state:
              - color: gray
          value: 'on'
        - styles:
            card:
              - opacity: 0.4
            icon:
              - color: gray
            lock:
              - color: black
            name:
              - color: gray
            state:
              - color: gray
          value: 'off'
        - styles:
            card:
              - opacity: 0.2
            icon:
              - color: gray
            name:
              - color: gray
            state:
              - color: gray
          value: unavailable
      styles:
        card:
          - border-radius: 12px
          - '--paper-card-background-color': var(--homekit-white)
        grid:
          - grid-template-areas: '"i" "n" "s" "l"'
          - grid-template-columns: 1fr
          - grid-template-rows: 1fr min-content min-content
        img_cell:
          - align-self: start
          - text-align: start
          - margin-right: 60px
        label:
          - color: gray
          - font-size: 11px
          - font-family: Helvetica
          - padding: 0px 10px
          - justify-self: start
        name:
          - justify-self: start
          - padding-left: 10px
          - font-weight: bold
          - font-family: Helvetica
          - font-size: 13px
        state:
          - font-size: 11px
          - font-family: Helvetica
          - padding: 0px 10px
          - justify-self: start
          - text-transform: capitalize
          - font-weight: bold
          - padding-left: 10px
      tap_action:
        action: '[[tap_action]]'
      type: 'custom:button-card'
    default:
      - size: 30%
      - lock: false
      - color: auto
      - spin: false
      - show_label: true
      - show_last_changed: false
      - show_state: false
      - tap_action: toggle
      - hold_action: more-info
      - aspect_ratio: 2/1

DBuit · January 13, 2020, 8:41am

Ok no problem.
Are you using last version of the card? Grey thumb was bugged before

PostSven · January 13, 2020, 8:43am

Yes i am using the newest one available via HACS

DBuit · January 13, 2020, 9:41am

@PostSven something was wrong with the released version. i release a V0.2.1 of the pop-up card with the grey bar

PostSven · January 13, 2020, 10:34am

Nice! It works like a charm now

PostSven · January 13, 2020, 1:31pm

could you share your config for this popup card? that looks pretty cool!

jimz011 · January 13, 2020, 5:40pm

I will very soon when I release my project in full.

Click Here to view my github repo, I will update it within the upcoming week which will contain all the good stuff from DBuit in a lovelace interface. Warning the repo is currently outdated (even though it should still be usable). So keep an eye out for the update real soon.