NSPanel Pro UI Design with Lovelace

Entity grid

For quick toggling on/off lights, covers, locks, etc.

grid

type: custom:auto-entities
card:
  type: custom:layout-card
  layout_type: custom:grid-layout
  layout:
    grid-template-columns: repeat(auto-fit,minmax(clamp(100%/(3 + 1) + 0.1%, 100px,100%),1fr))
    grid-template-rows: auto
    align-items: stretch
    box-sizing: border-box
    margin: 0
    padding: 0
    grid-gap: 0.5rem
    width: 100vw
    height: 100vh
  card_mod:
    style: |
      :root{
        height:100%;
      }
      ha-card{
        height:100%;
      }    
card_param: cards
filter:
  include:
    - domain: light
      group: light.areas
      options:
        type: custom:button-card
        color: auto-no-temperature
        entity_id: this.entity_id
        template: nspanel
        show_state: false
    - domain: cover
      area: bedroom
      options:
        type: custom:button-card
        color: auto-no-temperature
        entity_id: this.entity_id
        template: nspanel
    - entity_id: lock.gate
      options:
        type: custom:button-card
        color: auto-no-temperature
        entity_id: this.entity_id
        template: nspanel
  exclude:
    - state: /unavailable|unknown/
    - hidden_by: /user|integration/
sort:
  method: domain
  numeric: false
  reverse: false
  ignore_case: true
card_mod:
  style: |
    :root{
      height:100%;
    }
    ha-card{
      height:100%;
    }

5 Likes