Custom Lovelace Card - Homekit style card

Hi a question but the entity weather.home that you will have sn’zalro configured in configuration .yaml has by chance a key type openweathermap

Only thing ive heard Sins i mentioned it was that the rendering was being worked on. But
I think with the card owned getting a child and allot of otvetydigt problems starten with last patch. The Home rules projekt got pushad back.

Ciao Claudio,

I’m Italian too but I didn’t get what you meant.
Are you asking if your city can be configured in Openweathermap? If yes, I don’t know “San Zalro”. I also searched it in Maps without results.

If you meant San Carlo, they link the city to the nearest location available in Openweathermap: San Carlo
Choose the one you leave in. If you need help, you can pm me in Italian too.

Hi,

Based on your code it would say it is always displayed as ON.
So the tile background should be #DDDDDD (grayish)
and the icon color should be rgb(255, 255, 255); (white)
and the name should be rgba(0, 0, 0, 1); (black)

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

1 Like

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

Cool DBuit. Thank you for the update!

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

@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?

Nobody using alarm panel popup with a button?

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.

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:

Sorry forgot to mention you @DBuit

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.

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

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?

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)

1 Like

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)

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?

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'