Give you the option to prefix the state-label with a formated string.
Branch: master
Clone or download
Latest commit 4007d96 Jul 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github initial Jul 25, 2018
LICENSE initial Jul 25, 2018
README.md
VERSION Update VERSION Jul 25, 2018
example.png initial Jul 25, 2018
state-element.js uploaded correct file Jul 26, 2018

README.md

State Element

This element is not all that useful as a card (it can be used for that to), the purpose of this is to give the option to add static text on a picture-elements card.

Options

Name Type Requirement Description
type string Required custom:state-element
entity string Required The entity_id of the entity you want to show.
prefix string Optional A string you want to show in front of the attribute, ex. "My prefix string: "
show_empty boolean Optional Give you the possibility to show unavailable if the state is empty, default false

Installation

Step 1

Install state-element by copying state-element.jsfrom this repo to <config directory>/www/state-element.js on your Home Assistant instanse.

Example:

wget https://raw.githubusercontent.com/custom-cards/state-element/master/state-element.js
mv state-element.js /config/www/

Step 2

Link state-element inside you ui-lovelace.yaml.

resources:
  - url: /local/state-element.js?v=0
    type: js

Step 3

Add a custom element in your ui-lovelace.yaml

      - type: picture-elements
        image: /local/files/LUfuf8ow.jpg
        elements:
          - type: custom:state-element
            entity: sensor.my_sensor
            prefix: "My prefix string: "

Example with styles

      - type: picture-elements
        image: /local/files/LUfuf8ow.jpg
        elements:
          - type: custom:state-element
            entity: sensor.untappd_last_checkin
            prefix: "<b style='font-weigth: bold; color: orange'>Last checkin: </b>"
            style:
              top: 47%
              left: 5px
              transform: none

example