Skip to content

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.

License

Notifications You must be signed in to change notification settings

PiotrMachowski/Home-Assistant-Lovelace-Local-Conditional-card

Repository files navigation

HACS Default GitHub Latest Release GitHub All Releases Community Forum Ko-Fi buycoffee.to PayPal.Me Revolut.Me

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

Key Type Required Default Description
id string true - Identifier of a card, used in service calls. Must be unique!
card card true - Configuration of a nested card
default string false hide Default card behaviour. Possible values: [show, hide].
persist_state boolean false false Enables storing card's state in local storage to restore it after page refresh.

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

Example

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

Support

If you want to support my work with a donation you can use one of the following platforms:

Platform Payment methods Link Comment
Ko-fi
  • PayPal
  • Credit card
  • Buy Me a Coffee at ko-fi.com
  • No fees
  • Single or monthly payment
  • buycoffee.to
  • BLIK
  • Bank transfer
  • Postaw mi kawę na buycoffee.to
    PayPal
  • PayPal
  • PayPal Logo
  • No fees
  • Revolut
  • Revolut
  • Credit Card
  • Revolut
  • No fees
  • About

    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.

    Topics

    Resources

    License

    Stars

    Watchers

    Forks

    Packages

    No packages published