Nice horseshoe Lovelace cards for my Victron dashboard in Home Assistant

Introduction

I've been using Home Assistant to connect all my devices in my house and my "power wall" takes an important part of the data I'd like to see and monitor regularly. I find it important to have all the information you need at a glance without having to open 15 different apps

Requirements

• Home assistant
• HACS or a way to install the plugin
• Flex Horseshoe card

Installation

• Open HACS
• Click on "Explore and Add repositories"
• Search for the frontend module "Flex Horseshoe Card".
• Click on "Install this repository in HACS", then "Install"

In your ui-lovelace.yaml file, add the following lines under the ressources key:

  - url: /hacsfiles/flex-horseshoe-card/flex-horseshoe-card.js
    type: module

Usage

I have splitted my code in various files to simplify configuration. I have a card template that defines the layout of cards for Battery and MPPT:

Layout MPPT : layout-mppt.yaml

hlines:
  - id: 0
    xpos: 50
    ypos: 43
    length: 70
    styles:
      - opacity: 0.2;
vlines:
  - id: 0
    xpos: 50
    ypos: 59
    length: 30
    styles:
      - opacity: 0.2;
states:
  - id: 0
    entity_index: 0
    xpos: 50
    ypos: 35
    styles:
      - font-size: 3em;
      - opacity: 0.9;
  - id: 1
    entity_index: 1
    xpos: 46
    ypos: 58
    styles:
      - font-size: 2em;
      - text-anchor: end;
  - id: 2
    entity_index: 2
    xpos: 56
    ypos: 58
    styles:
      - font-size: 2em;
      - text-anchor: start;
  - id: 3 # Production today
    entity_index: 3
    xpos: 5
    ypos: 5
    styles:
      - font-size: 1.2em;
      - text-anchor: start;
  - id: 4 # Max power production
    entity_index: 4
    xpos: 95
    ypos: 5
    styles:
      - font-size: 1.2em;
      - text-anchor: end;
names:
  - id: 0
    entity_index: 0
    xpos: 50
    ypos: 95
  - id: 1
    entity_index: 1
    xpos: 46
    ypos: 68
    styles:
      - font-size: 0.9em;
      - text-anchor: end;
      - opacity: 0.7;
  - id: 2
    entity_index: 2
    xpos: 54
    ypos: 68
    styles:
      - font-size: 0.9em;
      - text-anchor: start;
      - opacity: 0.7;

MPPT Card example

type: 'custom:flex-horseshoe-card'
entities:
  - entity: sensor.pv_home_top_power
    decimals: 0
    unit: 'W'
    name: "MPPT Top"
  - entity: sensor.pv_home_top_panel_voltage
    decimals: 0
    unit: 'V'
    name: "Voltage"
  - entity: sensor.pv_home_top_panel_current
    decimals: 2
    unit: 'A'
    name: "Current"
  - entity: sensor.pv_home_top_yield_today
    decimals: 2
    unit: 'kWh'
    name: "Yield"
  - entity: sensor.pv_home_top_max_power_today
    decimals: 0
    unit: 'W'
    name: "Max Power"
show:
  horseshoe_style: 'colorstopgradient'
layout: !include layout-mppt.yaml

horseshoe_scale:
  min: 0
  max: 3600
# color stop list with 10 colors defined in the theme. With the `lineargradient` fill style, only the
# first (16:) and last (25:) colors are used. The thresholds are ignored with this setting.
color_stops:
  0: '#0277BD'
  3000: '#FBC02D'