Suche vergleichbares HACS-Frontend (Hufeisen-Karte)

[eugen]

Hallo,

kennt jemand zufällig etwas vergleichbares wie diese Horseshoe-Cards? (GitHub - AmoebeLabs/flex-horseshoe-card: Flexible Horseshoe card for Home Assistant Lovelace UI. A card with a flexible layout, a horseshoe-like donut graph, multiple entities or attributes, graphics and animations!)

Leider wird es vom Entwickler nicht mehr gewartet und es gibt Probleme bei der Installation des Frontends bei neuen HA Versionen, schade

Ich suche eine (vergleichbares) HACS-Frontend, das Spannung-Strom-und Leistung in einem anzeigt.
Sowas in der Art:

Danke

[Lindtbaer]

Was geht den nicht? Ich habe mir das über hacs installiert und hab die develop zweig genommen. (Letzte Änderung da vor 4 Monate) und das ganze über eine Manuell Card hinzugefügt. Code musste ich etwas anpassen aber es geht.

type: custom:flex-horseshoe-card
entities:
  - entity: climate.schlafzimmer
    attribute: temperature
    decimals: 1
    unit: °C
    area: Schlafzimmer Heizung
show:
  horseshoe_style: lineargradient
layout:
  states:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 60
      styles:
        - font-size: 3.5em;
  areas:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 35
      styles:
        - font-size: 0.5em;
        - opacity: 0.8;
horseshoe_scale:
  min: 0
  max: 30
color_stops:
  '10': red
  '18': blue

Ich hoffe das hilft dir weiter.

[eugen]

Hi,
danke für den Tipp!
Aufgrund der gemeldeten Issues im Github, dachte ich mir lohnt nicht zu versuchen, aber nach deiner Meldung doch probiert.
Funktioniert!

[papa-note]

Moin aus Lüneburg.

Die horseshoe für die Steckdose gefällt mir ausgesprochen gut. Nun bin ich (noch) kein yaml-Profi und es würde mir sehr helfen, wenn ich einen Blick in Deinen Code bekommen könnte …

Was meinst Du, würdest Du den hier veröffentlichen?

CU - Frank

[eugen]

Hi Frank,
kein Problem, ich habe ja auch nur kopiert und angepasst
Bitte beachte die Installationsanleitung für das HACS Frontend.
Geholfen dabei hat mir:

Nice horseshoe Lovelace cards for my Victron dashboard in Home Assistant

Wichtig, neben der eigentlichen Installation unter HACS Frontend, ist auch die Integration in der RAW Ansicht!
Ich meine den beschriebenen Punkt:

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

Die beschriebene Trennung, wobei man ein Teil der Kartenkonfiguration mit layout: !include layout-mppt.yaml auslagern kann, hat bei mir nicht funktioniert. Deshalb hab ich es einfach in die Kartenkonfiguration mit reingenommen und ist deshalb so lange.
`
Hier nun (mein) Code:

type: custom:flex-horseshoe-card
entities:
  - entity: sensor.steckdose_box_computer_active_power
    decimals: 0
    unit: W
    name: Computer Box
  - entity: sensor.steckdose_box_computer_rms_voltage
    decimals: 0
    unit: V
    name: ' '
  - entity: sensor.steckdose_box_computer_rms_current
    decimals: 2
    unit: A
    name: ' '
  - entity: sensor.steckdose_box_computer_tageszahler
    decimals: 2
    unit: kWh
    name: heute
  - entity: sensor.steckdose_box_computer_maximum
    decimals: 0
    unit: W
    name: max
show:
  horseshoe_style: autominmax
layout:
  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: 1;
    - 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
      entity_index: 3
      xpos: 5
      ypos: 5
      styles:
        - font-size: 1.0em;
        - text-anchor: start;
    - id: 4
      entity_index: 4
      xpos: 95
      ypos: 5
      styles:
        - font-size: 1.0em;
        - 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;
horseshoe_scale:
  min: 0
  max: 3600
color_stops:
  '0': green
  '3000': yellow
  '4000': red

und sieht dann so aus…

[Lindtbaer]

Oder um es Global verfügbar zu machen kann man auch das ganze in der configuration.yaml hinzuzufügen:

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /config/www/community/flex-horseshoe-card/flex-horseshoe-card.js

Die ersten 2 zeilen habt ihr schon drin stehen dient nur der Orientierung.

[papa-note]

Hallo Eugen,

ganz herzlichen Dank - damit kann ich gut arbeiten … Wieder ein Feature in Home Assistant, dass mich begeistert! Gerade die Kleinigkeiten machen das Ganze erst richtig gut!

Wer mag schon eine Torte ohne schmückende Verzierungen!?

Ich freue mich bereits auf die Umsetzung am Wochenende.

CU - Frank

[papa-note]

Moin aus Lüneburg.

Hat doch länger gedauert, als gedacht (mangels Zeit und Ruhe), aber es funktioniert einwandfrei.

Nochmals Danke dafür.

Frank

PS: Natürlich nicht nur mit Null-Werten …

[0815paule]

Hallo aus Kiel,

ich hab eure Beträge gelesen, probiert und nun meine Messsteckdosen so eingebunden. Schalten geht auch, very cool

Vielen Dank

[mikedelta]

Die Ansicht an sich finde ich ziemlich genial, ist allerdings extrem gross - gibt es eine Möglichkeit die Größe der Karte auf mindestens ein Viertel einzudampfen? Ich habe eine Menge Steckdosen und mir bisher nur ein Dashboard mit Entitäten gebaut um diese alle auf einer Seite darzustellen - sähe wie hier gezeigt natürlich wesentlich schöner aus aber eben viel zu gross…

[Lindtbaer]

Wenn ich das richtig sehe, passt sich die Card an den Inhalt an. Heißt mach unter: horseshoe_scale: ein width: und probiere da herum. Normalerweise müsste dann die Card auch kleiner werden. Nicht getestet.

[mikedelta]

Danke - getestet aber egal was ich eintrage ändert sich nichts…

[Lindtbaer]

Wenn nichts hilft, kann man es noch mit dem Card-Mod probieren, aber da muss man auch viel rumprobieren:

GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any...

[Alex]

Alternative: Apex-Charts Card und Mushroom Template Cards anstatt Hufeisen

type: custom:vertical-stack-in-card
cards:
  - type: custom:apexcharts-card
    chart_type: radialBar
    series:
      - entity: sensor.netatmo_wohnzimmer_temperature
        min: 18
        max: 34
        color_threshold:
          - value: 0
            color: '#779eff'
          - value: 10
            color: '#96b1eb'
          - value: 20
            color: '#c3c0c2'
          - value: 30
            color: '#edc392'
          - value: 40
            color: '#ffbc63'
          - value: 50
            color: '#ffaf32'
          - value: 60
            color: '#ff9d00'
          - value: 70
            color: '#ff8900'
          - value: 80
            color: '#ff7400'
          - value: 90
            color: '#ff5b00'
          - value: 100
            color: '#ff3c00'
    apex_config:
      plotOptions:
        radialBar:
          offsetY: -30
          startAngle: -108
          endAngle: 108
          hollow:
            size: 70%
          dataLabels:
            name:
              show: false
            value:
              show: false
      legend:
        show: false
      chart:
        height: 360px
    experimental:
      color_threshold: true
    card_mod:
      style: |
        ha-card {
          margin-top: 10px;
        }
  - type: vertical-stack
    cards:
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:sofa
        icon_color:  '{{ ''orange'' if states(entity) == ''on'' else ''white'' }}'
        entity: group.wz_heaters
        layout: vertical
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              margin-top: -225px;
              background-color: transparent;
              --icon-size: 120px;
            }
            mushroom-shape-icon {
              --shape-color: none !important; 
            }
      - type: custom:mushroom-template-card
        primary: '{{states(entity)}}°'
        secondary: ''
        icon: ''
        entity: sensor.netatmo_wohnzimmer_temperature
        layout: vertical
        card_mod:
          style: |
            ha-card {
              margin-top: -145px;
              background-color: transparent;
              --card-primary-font-size: 52px;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: '{{states(entity)}} %'
        icon: ''
        entity: sensor.netatmo_wohnzimmer_humidity
        layout: vertical
        card_mod:
          style: |
            ha-card {
              margin-top: -80px;
              background-color: transparent;
              --card-secondary-font-size: 40px;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: '{{states(entity)}} ppm'
        icon: ''
        entity: sensor.netatmo_wohnzimmer_co2
        layout: vertical
        card_mod:
          style: |
            ha-card {
              margin-top: -40px;
              background-color: transparent;
              --card-secondary-font-size: 40px;
            }

[JanReum]

Guten morgen. Mein erster Post und gleich eine Frage. Bin neu im Home Assistant Universum. Jetzt wollte ich eine Darstellung mit mehreren Entinitäten machen und bin auf horseshoe gekommen. Nur scheitert es bei mir in der Installation. Ich soll einen Text unter Ressources in die ui-lovelace.yaml eintragen. Ich habe diese datei aber nicht. Ich habe lediglich eine lovelace-ui.yaml… Muss ich noch eine erstellen oder hat mein system einen Fehler?

[bimbo009]

Eigentlich nur wenn sie die Karte manuell installieren wenn sie karte über HACS installieren nicht. Einfach über Hacs installieren und dann im File editor unter www/community/ suchen da sollte dann alles vorhanden sein.

[JanReum]

Moin. Wenn ich die Karte unter Hacs Herunterlade finde ich sie nicht in den Dashboardkarten

[RobertoCravallo]

Das ist richtig. Du nimmst einfach ganz unten die letzte Karte und schreibst den entsprechenden Code rein…

Ich möchte die nicht missen…

Oder so

Den Code habe ich hier mal irgendwo gepostet, wenn es interessiert…

[JanReum]

Vielen Dank. Damit ist meine Frage geklärt. Könntest du mir den Code von Solaranlage und Netzbezug mal per PN schicken? Dann komme ich weiter.

[bimbo009]

Hat sich schon erledigt hab ich gesehen. Ist bei anderen Karten teilweise auch so die du über Hacs laden kannst.