Skip to content

An upgraded Energy Date Selection Card for Home Assistant, with added customizability, while maintaining the Energy Dashboard's original design.

Notifications You must be signed in to change notification settings

flixlix/energy-period-selector-plus

Repository files navigation

Energy Period Selector Plus

ko-fi support GitHub release (latest by date) GitHub all releases commit_activity

Hero Image New Hero Image

Goal

The main goal of this card is to expand the functionality and customizability of the official Energy Date Picker Card from Home Assistant.

The goal is to deliver a card that fits in the overall design of the Energy Dashboard, while providing more features.

Features & Bugfixes

  • UI Editor
  • Change style or hide Compare Button.
  • Use Background to fit other cards.
  • Choose which Periods are shown.
  • Make Compare work.

Install

HACS (recommended)

This card is direclty available in HACS (Home Assistant Community Store). HACS is a third party community store and is not included in Home Assistant out of the box. To install this:

  • Go to HACS
  • Click on Frontend
  • Search for Energy Period Selector Plus
  • Install via UI
Manual Install
  1. Download and copy energy-period-selector-plus.js from the latest release into your config/www directory.

  2. Add the resource reference as decribed below.

Add resource reference

If you configure Dashboards via YAML, add a reference to energy-period-selector-plus.js inside your configuration.yaml:

resources:
  - url: /local/energy-period-selector-plus.js
    type: module

Else, if you prefer the graphical editor, use the menu to add the resource:

  1. Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
  2. Navigate to Settings -> Dashboards
  3. Click three dot icon
  4. Select Resources
  5. Hit (+ ADD RESOURCE) icon
  6. Enter URL /local/energy-period-selector-plus.js and select type "JavaScript Module". (Use /hacsfiles/energy-period-selector-plus/energy-period-selector-plus.js and select "JavaScript Module" for HACS install if HACS didn't do it already)

Using the card

To configure this card, only the type is required, making it very easy to get started.

In addition to that, I developed a UI Editor, making it even easier to change the card according to your preferences. 🥳

The UI Editor looks like this:

Bildschirmfoto 2023-05-20 um 22 01 46

Options

Card options

Name Type Default Description
type string required custom:energy-period-selector-plus.
card_background boolean false If set to true, a card will be added to the background of the card.
title string undefined If set, a title will be added to the card.
today_button_type boolean true If set to true, a button will be added to select today.
prev_next_buttons boolean true If set to true, buttons will be added to control the previous and next period.
compare_button_type string undefined If set, a button will be added to toggle the compare mode. Supported values are icon and text.
period_buttons array undefined If set, only buttons inside this array will be displayed. Supported values are day, week, month, year and custom. Order of your array will be applied.
custom_period_label string undefined If set, the label of the custom period button will be changed to this value. Otherwise will be synced to your HA language (If not, consider submitting a PR, adding your language to the localize function.)

Example Configurations

Basic Configuration
type: custom:energy-period-selector-plus
card_background: true

No previous or next controls
type: custom:energy-period-selector-plus
card_background: true
title: No Previous or Next Controls
prev_next_buttons: false

No today button
type: custom:energy-period-selector-plus
card_background: true
title: No Today Button
today_button_type: false

Text compare button
type: custom:energy-period-selector-plus
card_background: true
title: Text Compare Button
compare_button_type: text

Icon compare button
type: custom:energy-period-selector-plus
card_background: true
title: Icon Compare Button
compare_button_type: icon

No week button
type: custom:energy-period-selector-plus
card_background: true
title: No Week Button
period_buttons:
  - day
  - month
  - year

Custom period picker
type: custom:energy-period-selector-plus
card_background: true
title: Custom Period Picker
period_buttons:
  - day
  - week
  - month
  - year
  - custom

Custom period label
type: custom:energy-period-selector-plus
card_background: true
title: Custom Period Picker
period_buttons:
  - day
  - week
  - month
  - year
  - custom
custom_period_label: </|\>

Real world Demo

Custom period label

About

An upgraded Energy Date Selection Card for Home Assistant, with added customizability, while maintaining the Energy Dashboard's original design.

Topics

Resources

Stars

Watchers

Forks