Cover Element

An element that allows cover/blinds control in a Home Assistant picture-elements card.

Using the card

Element options

Position_label object

Example usage

- type: picture-elements
  image: /local/LivingRoom.jpg
  elements:
    - type: 'custom:cover-element'
      entity: cover.livingroom_terrace_shutter
      position_label:
        show: true
        open_text: open
        closed_text: closed
        interim_text: open
      style:
        top: 40%
        height: 15%
        background-color: 'rgba(255, 255, 255, 0.6)'
        width: 23%
        border-radius: 10px
        left: 53%

Install

Simple install

1. Download and copy cover-element-bundle.js from the latest release into your config/www directory.

2. Add a reference to cover-element-bundle.js in lovelace.

resources:
  - url: /local/cover-element-bundle.js?v=0.3.0
    type: module

To do this, go to Configure UI -> Raw Config Editor and paste this under resources or use YAML Mode (not recommended))

CLI install

1. Move into your config/www directory

2. Grab cover-element-bundle.js

$ wget https://github.com/custom-cards/cover-element/releases/download/0.3.0/cover-element-bundle.js

3. Add a reference to cover-element-bundle.js inside your ui-lovelace.yaml.

resources:
  - url: /local/cover-element-bundle.js?v=0.3.0
    type: module

(Optional) Add to custom updater

1. Make sure you have the custom_updater component installed and working.

2. Add a new reference under card_urls in your custom_updater configuration in configuration.yaml. //todo: implement tracker

custom_updater:
  card_urls:
    - https://raw.githubusercontent.com/custom-cards/cover-element/master/tracker.json

Updating

1. Find your cover-element-bundle.js file in config/www or wherever you ended up storing it.

2. Replace the local file with the latest one attached in the latest release.

3. Add the new version number to the end of the cards reference url in your ui-lovelace.yaml like below.

resources:
  - url: /local/cover-element-bundle.js?v=0.3.0
    type: module

You may need to empty the browsers cache if you have problems loading the updated card.

Getting errors?

Make sure you have javascript_version: latest in your configuration.yaml under frontend:.

Make sure you have the latest version of cover-element-bundle.js.

If you have issues after updating the card, try clearing your browsers cache or restart Home Assistant.

If you get "Custom element doesn't exist: cover-element" or running older browsers try replacing type: module with type: js in your resource reference, like below.

resources:
  - url: ...
    type: js

License

This project is under the Apache 2.0 license.