Network Tariff Card for Home Assistant

A custom card for Home Assistant that visually displays the current electricity tariff block in a circled 24-hour clock format. This card allows customization of colors for different tariff blocks and offers the option to show or hide the hour labels.

Features

• Current Tariff Block: Displays the current electricity tariff block based on your Home Assistant sensor.
• 24-Hour Clock Format: Visual representation of the tariff blocks in a circular layout.
• Customizable Colors: Set different colors for each tariff block to easily distinguish between them.
• Toggle Hour Labels: Option to show or hide hour text for a cleaner design.
• Offset Hour Labels: Option to rotate and align hour labels.
• Card-mod support: Customize your card.

Note

Please ensure you are using the latest version of the custom component Home Assistant Network Tariff. This card is designed to work with this component.

Installation

Ensure you have HACS installed in your Home Assistant.

Method 1 (easiest):

Method 2:

1. Add Repository:

   • Go to HACS in Home Assistant.
   • Click on "Frontend."
   • Click on the "+" icon in the bottom right corner.
   • Search for Network Tariff Card or add the repository URL directly.

2. Install: Click on the repository and follow the prompts to install the card.

3. Add to Lovelace UI:

   • Go to your Lovelace dashboard.
   • Click on the three-dot menu (top right) and select "Edit Dashboard."
   • Click on "Add Card" and choose "Manual."
   • Use the following configuration:

Configuration

Basic configuration. Please keep in mind that this card only supports the home-assistant-network-tariff custom component.

   type: custom:network-tariff-card
   entity: sensor.elektro_network_tariff
   name: Trenutni blok

Customize

You can hide numeric hours, change outer and inner radius, color-code your own colors.

 type: custom:network-tariff-card
 entity: sensor.elektro_network_tariff
 name: Trenutni Blok
 outerRadius: 40
 innerRadius: 35
 showHours: false
 offsetHours: true
 colorMap:
   '1': '#660000'
   '2': '#660000'
   '3': '#cc3333'
   '4': '#d0db24'
   '5': '#37c85a'
 card_mod:
   style: |
     ha-card .tariffcard{
     width: calc(100% - 10px);
     height: calc(100% - 10px);
     padding: 5px !important;
     }
     ha-card .circle-container .state{
       color:gray !important;
     }
     ha-card .tariffcard .name{
       color:gray !important;
     }

Report any issues

Thanks and consider giving me a 🌟 star