Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Latest commit 495f600 Jun 3, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Docs update Apr 12, 2019
src V0.2 - heading label May 25, 2019
.babelrc Minification May 7, 2019
.eslintrc.json Initial Apr 6, 2019
.gitignore Initial Apr 6, 2019
LICENSE Initial commit Apr 4, 2019 Updated docs Jun 3, 2019
package.json Updated docs + property files Jun 1, 2019
rollup.config.js Initial commit Apr 9, 2019
tracker.json Tracker update May 7, 2019

Cover Element

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

Using the card

Element options

Name Type Default Since Description
type string required v0.1 custom:cover-element
entity string required v0.1 Cover entity to control.
label string v0.3 Heading label

Position_label object

Name Type Default Since Description
show boolean false v0.1 Show the current position of the cover.
open_text string open v0.1 Sets the text to show when cover is fully open.
closed_text string closed v0.1 Sets the text to show when cover is fully closed.
interim_text string open v0.1 Sets the text to show when cover is partially open.

Example usage

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


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.

  - 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
  1. Add a reference to cover-element-bundle.js inside your ui-lovelace.yaml.
  - 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



  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.

  - 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.

  - url: ...
    type: js


This project is under the Apache 2.0 license.

You can’t perform that action at this time.