Custom Lovelace Card - Homekit style card

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.

coalsi · January 14, 2020, 8:40am

Love this card, having an issue with the popup though, it says test in the top left.

Can’t seem to figure out why.

coalsi · January 14, 2020, 8:41am

I installed via HACS if that helps.

DBuit · January 14, 2020, 9:34am

He @coalsi,

That is my mistake i forget to remove that text from the code
i will get an update out today to remove that ‘test’ and add something new

coalsi · January 14, 2020, 9:46am

awesome job though, looks and works amazingly!

how do i make the tiles wider? i am looking in documentation now, can’t seem to find it.

DBuit · January 14, 2020, 12:33pm

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
@coalsi the test is gone!
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
@CM000n @teachingbirds @dacorn
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

CM000n · January 14, 2020, 10:13pm

Thanks for the update! Nice new features. I will test it as soon as possible

coalsi · January 15, 2020, 1:24am

Thanks!!! Looks awesome!

dacorn · January 15, 2020, 2:05am

Hey! Great progress on the new features!

Does the layout card work with your cards? I am having issues with things overlapping. Keep up the great work!