No description, website, or topics provided.
Branch: master
Clone or download
Latest commit f06d3db Feb 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md Add support for hash switching Feb 3, 2019
state-switch.js bugfix Feb 15, 2019

README.md

state-switch

Allows you to display different cards depending on the state of an entity, the currently logged in user or the current device-browser combination

state-switch mov

Note in the animation above that the two browser windows have two different users logged in, which changes the rightmost card.

Installation

This card requires card-tools to be installed.

For installation instructions see this guide.

Options

Name Type Default Description
type string Required custom:state-switch
entity string Required Controlling entity id, hash, user or browser
states object Required Map of states to cards to display
default string none State to use as default

The entity parameter can take four different types of value

Entity_id

If the entity parameter is set to an entity id, which card is displayed will depend on the state of that entity.

    cards:
      - type: entities
        entities:
          - input_select.home_mode
      - type: custom:state-switch
        entity: input_select.home_mode
        states:
          Home:
            type: vertical-stack
            cards:
              - type: entities
                title: Lights
                entities:
                  - light.bed_light
                  - light.ceiling_lights
                  - light.kitchen_lights
              - type: picture-glance
                camera_image: camera.demo_camera
                entities: []
          Away:
            type: alarm-panel
            entity: alarm_control_panel.alarm
          Guests:
            type: glance
            title: Lights
            entities:
              - light.bed_light
              - light.ceiling_lights
              - light.kitchen_lights

Note that the words on and off are magic in yaml, so if the entity is e.g. a switch, you need to quote the keys in the states: mapping:

        states:
          "on":
            type: markdown
            content:>
              Light is on
          "off":
            type: markdown
            content:>
              Light is off

hash

If the entity parameter is set to hash, which card is displayed will depend on the "hash" part of the current URL - i.e. whatever comes after an optional # symbol in the current page URL.

This allows for controlling the view on a browser-window to browser-window basis, and without needing a controlling entity.

    cards:
      - type: horizontal-stack
        cards:
          - type: entity-button
            entity: light.my_dummy
            tap_action:
              action: navigate
              navigation_path: "#p1"
          - type: entity-button
            entity: light.my_dummy
            tap_action:
              action: navigate
              navigation_path: "#p2"
          - type: entity-button
            entity: light.my_dummy
            tap_action:
              action: navigate
              navigation_path: "#p2"
      - type: custom:state-switch
        entity: hash
        default: p1
        states:
          p1:
            type: markdown
            content: |
              # Page 1
          p2:
            type: markdown
            content: |
              # Page 2
          p3:
            type: markdown
            content: |
              # Page 3

user

If the entity parameter is set to user, which card is displayed will depend on the currently logged in users username.

    cards:
      - type: custom:state-switch
        entity: user
        default: default
        states:
          A:
            type: entities
            title: User A stuff
            entities:
              - light.bed_light
              - light.ceiling_lights
              - light.kitchen_lights
          B:
            type: glance
            title: User B stuff
            entities:
              - light.bed_light
              - light.ceiling_lights
              - light.kitchen_lights
          default:
            type: markdown
            content: >
              ## Unknown user

browser

If the entity parameter is set to browser, which card is displayed will depend on the device-browser combination which is currently displaying the page.

This "browser ID" is in the form of a 16 character string with a dash in the middle and is unique, random and persistent for the browser.

If the default parameter is not set, the default behavior will be to display a small card containing the browser ID.

      - type: custom:state-switch
        entity: browser
        states:
          '9c2aaf6f-ed26e3c1':
            type: markdown
            content: >
              Desktop
          'c8a4981c-d69c5e3c':
            type: markdown
            content: >
              Mobile