Custom Lovelace Card - Homekit style card

NdR · September 18, 2020, 9:42am

Guys, I don’t understand why I have a different Tiles layout between my PC and iPhone.

Can you help me? First of all, my code:

type: 'custom:homekit-card'
enableColumns: true
home: false
masonry: true
rows:
  - columns:
      - column: 1
        entities:
          - entities:
              - custom: Riavvia Home Assistant
                halfheight: true
                icon: 'mdi:power-settings'
                name: Riavvia HomeAssistant
                tap_action:
                  action: call-service
                  service: homeassistant.restart
                wider: true
              - custom: Ricarica Automazioni
                halfheight: true
                icon: 'mdi:reload'
                name: Ricarica Automazioni
                tap_action:
                  action: call-service
                  service: automation.reload
                wider: true
              - entity: sensor.hass_version_installed
                icon: 'mdi:home-assistant'
                name: Versione Installata
                hideState: true
              - entity: sensor.hass_version_latest
                name: Versione Disponibile
                hideState: true
              - entity: sensor.hacs
                name: HACS
                hideState: true
              - entity: sensor.snapshot_backup
                icon: 'mdi:cloud-upload'
                name: Stato Backup
                hideState: true
              - custom: hideThis
                halfheight: true
              - custom: custom header
                halfheight: true
                icon: 'mdi:backup-restore'
                name: Custom Header
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/1?disable_ch
                wider: true
            title: Home Assistant
        tileOnRow: 2

This is the result on my PC (as intended):

PC

This is the result on iOS app. Why even if I have “tileOnRow: 2” they fits on 3 tiles per row?

iOS App

DBuit · September 18, 2020, 10:03am

Hi,

Maybe i need to fix this.
The code makes mobile always 3 tiles width no matter what so nothing wrong with your config.

I will make a fix for this soon

NdR · September 18, 2020, 10:05am

Cool DBuit. Thank you for the update!

skank · September 19, 2020, 5:25pm

I’m getting crazy by it , i changed it like on the lights yaml dashboard

style: |
      :host {
        --tile-background: #DDDDDD;
        --tile-icon-size: 40px;
        --tile-border-radius: 10px;
        --tile-width: 100px;
        --tile-height: 100px;
        --tile-on-background: #5F9BEA;
        --tile-name-text-color: rgba(0, 0, 0, 1);
        --tile-on-name-text-color: rgba(255, 255, 255, 1);
        --tile-state-text-color: rgba(0, 0, 0, 0.4);
        --tile-on-state-text-color: rgba(0, 0, 0, 1);
        --tile-state-changed-text-color: rgb(134, 134, 134);
        --tile-unavailable-state-text-color: rgba(255, 255, 255, 0,5);
        --tile-value-text-color: rgba(255, 0, 0, 1);
        --tile-icon-color: rgb(255, 255, 255);
        --tile-on-icon-color: rgb(255, 140, 0);
        --tile-width-mobile: 90px;
        --tile-height-mobile: 90px;
      }  
      .button-inner .icon {
            width:55px;
            height:55px;
          }
          .button-inner .icon ha-icon {
            width: 40px;
            height:40px;
          }

the lights are now grey and blue when active
the scripts are blue, but when i refresh they go to grey?
and when i get back to lights then, they are grey too the activated ones… unless i refresh the lights again

sigh

skank · September 19, 2020, 5:26pm

@DBuit is it possible to use this button and when i press i get an alarm panel popup card?
anyone done this?

Theres a card for this https://www.home-assistant.io/lovelace/alarm-panel/
So dont think you need to create a popup for it…
Only thing… i 've read the popups only come on longpress… i cant have the popup appear on normal press? and as soon as i enter the code and arm/Disarm the alarm to automatically let the popup disappear?

skank · September 21, 2020, 2:46pm

Nobody using alarm panel popup with a button?

DBuit · September 22, 2020, 8:06am

Hi,

You can add tap_action to overwrite what it does on single tap like opening a popup with alarm panel.
Closing it when arm/disarm is something the alarm panel needs to support so not sure if thats possible.

skank · September 22, 2020, 11:03am

I tried without luck
If i dont add the tap_action then i get a popup too.
So single press on the button gives me this popup (without popup defined)

If i added folowing code:

cards:
              - type: custom:button-card
                entity: alarm_control_panel.risco
                name: Alarm
                show_label: false
                size: 40%
                icon: mdi:shield-off
                state:
                  - icon: 'mdi:shield-on'
                    styles:
                      icon: 
                        - color: var(--sidebar-selected-icon-color)
                    value: 'on'
                styles:
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: popup
                  entity: alarm_control_panel.risco
                  type: alarm-panel

i get no popup at all

What i want to get as popup is the alarm panel card, like this:

skank · September 23, 2020, 5:17pm

Sorry forgot to mention you @DBuit

Nath · September 24, 2020, 10:06am

This setup uses browser-mod as well, right? Then just use browser-mod for the AlarmPanel popup.
I’m not sure about auto closing but there probably is a way. Interesting idea though.

claudiovillani58 · September 24, 2020, 10:50am

Hi guys a question. Is there a card to display camera images with homekit panel card style? Could you suggest me a possible solution?

skank · September 24, 2020, 6:38pm

Can you explain a bit more pls

Been looking at https://github.com/thomasloven/hass-browser_mod
Installed it too.
But this wont work when using the home assistant app for android right?
It only works with browsers?

Nath · September 24, 2020, 7:01pm

Install this:

Use this for tap_action wherever you want:

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    card:
      entity: alarm_control_panel.section_1
      type: alarm-panel
  deviceID: this
  title: Security

EDIT: It does work in companion app as well, the only difference is the popup will be “fullscreen”. (not sure about tablets)

skank · September 24, 2020, 7:04pm

I actually just did this, gonna try it out now, thanks

edit: its working on my laptop
we’ll see if it works on phone android app

thx guys
didnt know about this browser mod

edit: it works and android app and on tablet using fully kiosk browser too (not fullscreen, phew)

skank · September 25, 2020, 3:05pm

Hi
I have a question concerning the risco integration

I have a button showing the state of the alarm and if u press it pops up the control panel to give in the code

This is the code

cards:
              - type: custom:button-card
                entity: alarm_control_panel.risco
                name: Alarm
                show_label: false
                size: 40%
                icon: mdi:shield-off
                state:
                  - icon: 'mdi:shield-on'
                    styles:
                      icon: 
                        - color: var(--sidebar-selected-icon-color)
                    value: 'on'
                styles:
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: call-service
                  service: browser_mod.popup
                  service_data:
                    card:
                      entity: alarm_control_panel.risco
                      states:
                        - arm_home
                        - arm_away
                      type: alarm-panel
                    deviceID:
                      - this
                    title: Alarm

I got 2 problems:

the button doesnt change icon when its armed, so there might be something wrong there?
when pressed and i give in my code, the alarm state doesnt change

Any idea?

claudiovillani58 · September 25, 2020, 5:12pm

Hi Dbuit and all the other you guys could help me understand why despite having correctly used the instructions that I enclose, I get this image instead of the one that is on the page: https://github.com/DBuit/cover-popup-card
I followed to the letter what is described in the github page, but what I get is the first image attached very different from the github one. Can you help me?

Immagine
Immagine1

                  - entity: cover.cucina_piccola
                    name: Cucina Piccola
                    icon: 'mdi:window-shutter'
                    popup:
                      type: 'custom:cover-popup-card'
                      sliderService: cover.set_cover_position
                      sliderColor: '#DF2645'
                      sliderHeight: 350px
                      sliderWidth: 150px
                      sliderThumbColor: '#DF2645'
                      sliderTrackColor: '#DFC726'
                      brightnessWidth: 150px
                      brightnessHeight: 350px
                      actionsInARow: 2
                      actions:
                        - service: cover.open_cover
                          service_data:
                            entity_id: cover.cucina_piccola
                          name: open
                          icon: 'mdi:window-shutter-open'
                        - service: cover.close_cover
                          service_data:
                            entity_id: cover.cucina_piccola
                          name: close
                          icon: 'mdi:window-shutter'

claudiovillani58 · September 26, 2020, 2:42pm

A little update reading and rereading your posts I realized that the problem I reported here only occurs with FIREFOX, while with Android and Chrome it works perfectly. Could you help me and suggest what modification I need to make to see the slider correctly on FIREFOX. Thank you all

NdR · September 29, 2020, 1:48pm

Hello @DBuit, do you have plan for an update soon?

Thank you

Moshik_Levi · October 4, 2020, 5:40pm

Is it possible to hide the value and keep only the icon and the name?

thecrane · October 4, 2020, 8:11pm

mkhattab:

style: |
          :host {
            --tile-background: rgba(10, 10, 10, 0.22);
            --tile-border-radius: 5px;
            --tile-width: 100px;
            --tile-height: 100px;
            --tile-on-background: var(--card-background-color);

            --tile-name-text-color: var(--disabled-text-color);
            --tile-on-name-text-color: var(--primary-text-color);

            --tile-state-text-color: var(--disabled-text-color);
            --tile-on-state-text-color: var(--paper-item-icon-active-color);

            --tile-state-changed-text-color: var(--primary-text-color);
            --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);

            --tile-value-text-color: var(--primary-text-color);

            --tile-icon-color: var(--disabled-text-color);
            --tile-on-icon-color: var(--paper-item-icon-active-color);

            --tile-width-mobile: 90px;
            --tile-height-mobile: 90px;

            --tile-icon-size: 24px;
            --tile-padding-top: 0
            --tile-image-radius: 0;
            
            }

Thanks @mkhattab - although that doesn’t quite work for me. For some reason, the background-colour and text-colours are ignored, and I can’t get the glow working in this way.

Is there a summary somewhere of all the variables that we can refer to in the style: area?