Lovelace Local Conditional card

This card can show and hide a specific card on current device while not affecting other windows. It does not require any integration to run.

Installation

HACS (recommended)

• Open HACS
• Go to "Frontend" section
• Click button with "+" icon
• Search for "Local conditional card"
• Install repository in HACS
• Make sure you have added this card to Lovelace resources

  url: /hacsfiles/local-conditional-card/local-conditional-card.js
  type: module
  

• Refresh your browser

Manual

• Download local-conditional-card.js file from the latest release
• Save downloaded file somewhere in <ha config>/www/ directory, e.g. /config/www/custom_lovelace/local-conditional-card.js
• Add saved file to Lovelace resources

  url: /local/custom_lovelace/local-conditional-card.js
  type: module
  

• Restart HA if you had to create www directory
• Refresh your browser

Configuration options

Usage

This card utilises fire-dom-event actions to change its state:

tap_action:
  action: fire-dom-event
  local_conditional_card:
    action: show
    ids:
      - id_1

There are 4 available actions

• show - shows specified cards
• hide - hides specified cards
• toggle - changes visibility of specified cards
• set - sets visibility of specified cards

Each of these services requires a parameter ids that should contain a list:

tap_action:
  action: fire-dom-event
  local_conditional_card:
    action: show
    ids:
      - id_1
      - id_2

tap_action:
  action: fire-dom-event
  local_conditional_card:
    action: hide
    ids:
      - id_1
      - id_2

tap_action:
  action: fire-dom-event
  local_conditional_card:
    action: toggle
    ids:
      - id_1
      - id_2

tap_action:
  action: fire-dom-event
  local_conditional_card:
    action: set
    ids:
      - id_1: show
      - id_2: hide
      - id_3: toggle

Example configuration

views:
- name: Example
  cards:
  - type: 'custom:local-conditional-card'
    default: show
    id: sun1
    card:
      entities:
        - sun.sun
      title: Sun 1
      type: entities
  - type: 'custom:local-conditional-card'
    id: sun2
    card:
      entities:
        - sun.sun
      title: Sun 2
      type: entities
  - title: Click test
    type: entities
    entities:
      - action_name: Toggle
        icon: mdi:power
        name: Sun1
        tap_action:
          action: fire-dom-event
          local_conditional_card:
            action: toggle
            ids:
              - sun1
        type: button
      - action_name: Show
        icon: mdi:power
        name: Sun1
        tap_action:
          action: fire-dom-event
          local_conditional_card:
            action: show
            ids:
              - sun1
        type: button
      - action_name: Hide
        icon: mdi:power
        name: Sun1
        tap_action:
          action: fire-dom-event
          local_conditional_card:
            action: hide
            ids:
              - sun1
        type: button
      - action_name: Hide All
        icon: mdi:power
        name: Suns
        tap_action:
          action: fire-dom-event
          local_conditional_card:
            action: hide
            ids:
              - sun1
              - sun2
        type: button
      - action_name: Toggle
        icon: mdi:power
        name: Sun1
        tap_action:
          action: fire-dom-event
          local_conditional_card:
            action: toggle
            ids:
              - sun2
        type: button
      - action_name: Show
        icon: mdi:power
        name: Sun1
        tap_action:
          action: fire-dom-event
          local_conditional_card:
            action: show
            ids:
              - sun2
        type: button
      - action_name: Hide
        icon: mdi:power
        name: Sun1
        tap_action:
          action: fire-dom-event
          local_conditional_card:
            action: hide
            ids:
              - sun2
        type: button