Benötige Vorschläge zur Gestaltung auf dem Dashboard

[HotMaggi]

Hallo zusammen,
bin aktuell am prüfen, wie ich mein bestehendes Smarthomesystem mit diversen Inhalten in HA künftig umsetzen und darstellen könnte.

Eines meiner Funktionen ist die Darstellung des Gasverbrauchs für unsere Mieterin, im jetzigen System konnte ich alle Element frei positionieren. Ich habe mal ein Entwurf hinterlegt. Die Idee ist das mit Sensoren darzustellen aber in der Darstellung könnte man da mit der Maus draufdrücke und käme in die Statistik, das wollte ich natürlich nicht, leider kenne ich noch nicht alle Möglichkeiten die HA bietet, auch über HACS.

Wäre um Ideen dankbar.
VG
Juergen

[Bacardi]

Wenn das wirklich bei dem einfachen Schriftformat mit dynamischen Werten ohne Klickmöglichkeit bleiben soll, würde ich das über eine Markdown Karte unter Verwendung von HTML und Template Code versuchen.

Beispiel:

Und hier der Code:

{# Definiere Deine Sensoren am Anfang wegen der Übersicht/Wartbarkeit #}
{% set Waschmaschine_gesamt = states.sensor.dect_waschmaschine_energy.state | float(0) %}

<font size=3><b>Gesamtabrechnungszeitraum</b></font>
(1) 01.10.2024 - (2) 31.3.2025

<font size=3><b>Darstellung bisheriger Verbrauch</b></font>
(1) 01.10.2024 - (3) 30.11.2024

<table border=0>
<tr>
  <td width=200>(10) Anzahl Monate bisher</td>
  <td width= 50 >2</td>
  <td>(Datum (3) minus (Datum (1))</td>
</tr>
</table>
<table border=0>
<tr>
  <td width=200>(4) Zählerstand Beginn Abr. Zeitraum</td>
  <td >4609 kWh</td>
</tr>
<tr>
  <td width=200>etc.</td>
  <td>dynamischer Wert</td>
</tr>
<tr>
  <td width=200>Waschmaschine</td>
  <td>{{Waschmaschine_gesamt}} kWh</td>
</tr>
<tr>
  <td width=200>Waschmaschine x 2</td>
  <td>{{Waschmaschine_gesamt * 2}} kWh</td>
</tr>
</table>

[HotMaggi]

Wow, auf die Idee mit der MarkDown Karte bin ich gar nicht gekommen, super das schau ich mir morgen in Ruhe an, vielen Dank für Deine Arbeit und den Code!!

VG
Jürgen

[HotMaggi]

Hab es heute probiert, das sieht ja richtig klasse aus… Vielen Dank nochmals, darauf kann ich aufbauen !!

Gerade gesehen, es gib ein Markdown Tester in welchem ich den Code mir vorher anschauen kann… echt gut, gerade am Anfang wenn man mit HTML beginnt.

Weiß nicht ob man den Link hier aufführen darf… einfach mal googeln…

LG
Jürgen

[Bacardi]

Habe mich gerade gefreut beim Lesen.
Nicht alle HTML Befehle gehen in einer Markdown Karte und Markdown Formatierungsbefehle gehen auch aber beide mögen sich in Kombination selten. Was geht und was nicht, kannst Du nur durch Ausprobieren herausfinden.

[HotMaggi]

@Bacardi

<td>{{Waschmaschine_gesamt * 2}} kWh</td>

@Bacardi
Bin weit gekommen, aber bei einer Sache benötige ich noch Unterstützung, mir gelingt es einfach nicht die Variblen Daten, also Felder von HA rechtsbündig darzustellen…

[Bacardi]

Schöner Fortschritt! Hier der entsprechende HTML align Befehl.

[HotMaggi]

Guten Morgen Olaf,
vielen Dank, leider funktioniert das mit meinen mangelnden Kenntnissen noch
nicht 100 % bei den Variablen von HA.

Den oberen Bereich habe ich rechtsbündig hinbekommen, aber im unteren Abschnitt funktioniert
das nicht…

Kannst du mir bitte nochmals auf die Sprünge helfen?
Ein Code Auszug ist unten anbei.

<tr>
  <td width=200>Verbrauch bisher :</td>
  <td align=right>{{verbrauchbisher}} kWh</td>
</tr>
<tr>
  <td width=200>Abschlag pro Monat :</td>
  <td align=right > {{abschlag_pro_monat}} € </td>
</tr>
<tr>
  <td width=200>Arbeitspreis pro kWh :</td>
  <td align=right>{{arbeitspreisprokwh}} €</td>
</tr>


</table>

<font size=4><b>Zusammenstellung :</b>
</tr></font>
</table>
<table border=0>
<tr>
  <td width=200>Abschlag * Monate :</td>
  <td align=right >{{abschlagmalmonate}} €</td>
</tr>
<tr>
  <td width=200>Arbeitspreis * Verbrauch :</td>
  <td align=right >{{arbeitspreismalkilowatt}} €</td>
</tr>
<tr>
  <td width=200>Grundpreis * Monate :</td>
  <td align=right>{{grundpreismalmonate}} €</td>
</tr>

[Bacardi]

Das wird schon.

Du mußt sauber auf öffnende und schließende Tags achten. Manche Interpreter wollen das sauber sehen. Das Du soweit gekommen bist, liegt an der Großzügigkeit der Markdownkarte.

Am Anfang sehe ich keine öffnendes <table> für die erste Tabelle.

<font size=4><b>Zusammenstellung :</b>
</tr></font>
</table>

Auch hier fehlt es und ein einzelnes </tr> macht wenig Sinn.
Am Ende der 2. bzw. 3. Tabelle fehlt der schließende </table> Tag

in Summe, lege saubere Tabellen mit Zeilen und Spalten an und dann funktionieren auch viele HTML Befehle wie align=right. Ich habs gerade bei mit ausprobiert, auch in den unteren Spalten.

[HotMaggi]

Edit: Habe es hinbekommen, habe der Datenspalte eine feste Breite gegeben

Danke nochmals für Deine Unterstützung, es hat mich echt weitergebracht

Das war wohl mein Fehler, ich habe nur einen Auszug aus dem Code gepostet, unten nochmals den ganzen Code der MD Karte.
Die Abschnitte sind rechtsbündig aber ab dem Abschnitt 2 und 3 gibt es einen Versatz zum ersten Abschnitt, siehe rote Pfeile, ich finde den Fehler einfach nicht.

{# Definiere Deine Sensoren am Anfang wegen der Übersicht/Wartbarkeit #}

{% set abschlag_pro_monat = states.input_text.gas_einlieger_abschlag_pro_monat.state | int(0) %}

{% set abrechnungsbeginn = states.input_text.gas_input_gesamt_abrechnungsbeginn.state  %}

{% set gesamtabrechnungsende = states.input_text.gas_input_gesamt_abrechnungsende.state  %}

{% set beginnaktuelleabrechnungsperiode = states.input_text.gas_input_gesamt_abrechnungsbeginn.state  %}

{% set endeaktuelleabrechnungsperiode = states.sensor.helfer_letzter_tag_im_monat_ermitteln.state  %}

{% set anzahl_monate = states.sensor.gas_einlieger_anzahl_monate_bisher.state | int() %}

{% set zaehlerstandbeginn = states.input_text.gas_zaehlerstand_beginn_abrechnungszeitraum.state | int() %}

{% set zaehlerstandaktuell = states.sensor.gas_zaehlerstand_einlieger.state | int() %}

{% set verbrauchbisher = states.sensor.gas_einlieger_verbrauch_bisher_in_kwh.state | int() %}


{% set arbeitspreisprokwh = states.input_text.gas_einlieger_arbeitspreis_pro_kwh.state | float() %}

{% set abschlagmalmonate = states.sensor.gas_einlieger_summe_mal_abschlag_pro_monat.state | float(2) %}

{% set arbeitspreismalkilowatt = states.sensor.gas_einlieger_summe_arbeitspreis_mal_verbrauch_pro_kwh.state | round(2) %}

{% set grundpreismalmonate = states.sensor.gas_einlieger_summe_grundpreis_mal_monate.state | round(2) %}

{% set guthaben = states.sensor.gas_einlieger_guthaben.state | round(2) %}

{% set nachzahlung = states.sensor.gas_einlieger_nachzahlung.state | round(2) %}

<font size=3><b>Gesamtabrechnungszeitraum</b></font>
{{abrechnungsbeginn}} - {{gesamtabrechnungsende}}


<font size=3><b>Darstellung bisheriger Verbrauch</b></font>
{{abrechnungsbeginn}} - {{endeaktuelleabrechnungsperiode}}

---
<table border=0>

<tr>
  <td width=200>Anzahl Monate bisher</td>
  <td width= 50 >{{anzahl_monate}}</td>
</tr>
</table>

<table border=0>

<tr>
  <td width=200>Zählerstand Beginn</td>
  <td >{{zaehlerstandbeginn}} kWh</td>
</tr>

<tr>
  <td width=200>Zählerstand aktuell:</td>
  <td align=right>{{zaehlerstandaktuell}} kWh</td>
</tr>

<tr>
  <td width=200>Verbrauch bisher :</td>
  <td align=right>{{verbrauchbisher}} kWh</td>
</tr>

<tr>
  <td width=200>Abschlag pro Monate :</td>
  <td align=right>{{abschlag_pro_monat}} kWh</td>
</tr>

<tr>
  <td width=200>Arbeitspreis pro kWh :</td>
  <td align=right>{{arbeitspreisprokwh}} €</td>
</tr>
</table>


<font size=4><b>Zusammenstellung :</b>
</tr></font>


<table border=0>
<tr>
  <td width=200>Abschlag * Monate :</td>
  <td align=right>{{abschlagmalmonate}} €</td>
</tr>

<tr>
  <td width=200>Arbeitspreis * Verbrauch :</td>
  <td align=right >{{arbeitspreismalkilowatt}} €</td>
</tr>

<tr>
  <td width=200>Grundpreis * Monate :</td>
  <td align=right >{{grundpreismalmonate}} €</td>
</tr>
</table>

<font size=4><b>Ergebnis :</b>
</tr></font>

<table border=0>
<tr>
  <td width=200><font color="green">Guthaben :</font></td>
  <td align=right><font color="green">{{guthaben}}</font> €</td>
</tr>
<tr>
  <td width=200><font color="red">Nachzahlung :</font></td>
  <td align=right>{{nachzahlung}} €</td>
</tr>
</table>

[Bacardi]

Ok, Du bist dicht dran.

Wenn Du border=0 mit broder=1 ersetzt, erkennst Du es.

Bei der 3. Tabelle hast Du für die zweite Spalte keine Breite definiert und deshalb hört die Breite korrekterweise nach dem Zelleninhalt auf.

Willst Du die 3. Tabelle an die 2. optisch anpassen, mußt die Breite mitgeben, es reicht die erste zu nehmen.

<tr>
  <td width=200>Abschlag * Monate :</td>
  <td width=66 align=right>{{nachzahlung}} €</td>
</tr>

EDIT:
Habe zu spät Dein Edit gesehen

[HotMaggi]

Daaaankeeee, hat alles geklappt!!

Die Tabelle ist mein heutiges “Geburtstagsgeschenk” zum 61 ten

[PhilHi]

Hallo, sieht Mega aus. Würde mir sowas auch gerne für mein Energiedashboard bauen. Bin aber blutiger Anfänger. Kann ich einfach die Code Schnipsel zusammensetzen?

Danke euch schon mal und guten Übergang

VG
Philipp

[HotMaggi]

Hallo Philipp, bin heute unterwegs, ich versuche es dir morgen in den Thread zu schicken
LG

[PhilHi]

Gar kein Problem und vorallem Stress. Ich bin schon dankbar für deine generelle Bereitschaft

Frohes neues Jahr.

[HotMaggi]

Gutes Neues Jahr Philipp.

Das Endergebnis sieht bei mir so aus, bin allerdings auch Anfänger und habe mit Hilfe des Forums Erfolg gehabt, an dieser Stelle nochmals Danke !!

Ich denke ich darf hier den Code hochladen, Du musst dir halt die entsprechenden Helfer vorher anlegen und ein Konzept erstellen, die Planung ist
wichtig, danach dann die Umsetzung in Code. Der Code steckt in einer Markdown-Karte. In den Helfern sind noch einige Berechnungen hinterlegt, die für die Darstellung benötigt werden.

Ich hoffe ich konnte Dir helfen.
VG

{# Definiere Deine Sensoren am Anfang wegen der Übersicht/Wartbarkeit #}

{% set myZahlung = 'orange' %}



{% set verbrauch_heute = states.sensor.gas_einlieger_verbrauch_heute.state | float | round(2) %}


{% set abschlag_pro_monat = states.input_text.gas_einlieger_abschlag_pro_monat.state | float | round(2) %}

{% set abrechnungsbeginn = states.input_text.gas_input_gesamt_abrechnungsbeginn.state  %}

{% set gesamtabrechnungsende = states.input_text.gas_input_gesamt_abrechnungsende.state  %}

{% set beginnaktuelleabrechnungsperiode = states.input_text.gas_input_gesamt_abrechnungsbeginn.state  %}

{% set endeaktuelleabrechnungsperiode = states.sensor.check_letzer_monat_abrechnungsende.state  %}

{% set anzahl_monate = states.sensor.gas_einlieger_anzahl_monate_bisher.state | int() %}

{% set zaehlerstandbeginn = states.input_text.gas_zaehlerstand_beginn_abrechnungszeitraum.state | int() %}

{% set zaehlerstandaktuell = states.sensor.gas_zaehlerstand_einlieger.state | int() %}

{% set verbrauchbisher = states.sensor.gas_einlieger_verbrauch_bisher_in_kwh.state | int() %}


{% set arbeitspreisprokwh = states.input_text.gas_einlieger_arbeitspreis_pro_kwh.state | float() %}

{% set abschlagmalmonate = states.sensor.gas_einlieger_summe_mal_abschlag_pro_monat.state | round(2) %}

{% set arbeitspreismalkilowatt = states.sensor.gas_einlieger_summe_arbeitspreis_mal_verbrauch_pro_kwh.state | round(2) %}

{% set grundpreismalmonate = states.sensor.gas_einlieger_summe_grundpreis_mal_monate.state | round(2) %}

{% set guthaben = states.sensor.gas_einlieger_guthaben.state | round(2) %}

{% set nachzahlung = states.sensor.gas_einlieger_nachzahlung.state | round(2) %}

<font size=3><b>Gesamtabrechnungszeitraum</b></font>
{{abrechnungsbeginn}} - {{gesamtabrechnungsende}}



<font size=3><b>Darstellung bisheriger Verbrauch</b></font>
{{abrechnungsbeginn}} - {{endeaktuelleabrechnungsperiode}}

---
<table border=1>

<tr>
  <td width=200>Anzahl Monate bisher</td>
  <td width=35 align=right>{{anzahl_monate}}</td>
</tr>
</table>

<table border=1>

<tr>
  <td width=200>Zählerstand Beginn</td>
  <td width=100 align=right>{{zaehlerstandbeginn}} kWh</td>
</tr>

<tr>
  <td width=200>Zählerstand aktuell:</td>
  <td width=100 align=right>{{zaehlerstandaktuell}} kWh</td>
</tr>

<tr>
  <td width=200>Verbrauch bisher :</td>
  <td width=100 align=right>{{verbrauchbisher}} kWh</td>
</tr>

<tr>
  <td width=200>Verbrauch heute :</td>
  <td width=100 align=right>{{verbrauch_heute}} kWh</td>
</tr>


<tr>
  <td width=200>Abschlag pro Monat :</td>
  <td width=100 align=right>{{abschlag_pro_monat}} €</td>
</tr>

<tr>
  <td width=200>Arbeitspreis pro kWh :</td>
  <td width=100 align=right>{{arbeitspreisprokwh}} €</td>
</tr>
</table>


<font size=3><b>Zusammenstellung :</b>
</tr></font>


<table border=1>
<tr>
  <td width=200><font color="green">Abschlag * Monate :</font></td>
  <td width=100 align=right><font color="green">{{abschlagmalmonate}} €</font> </td>
</tr>

<tr>
  <td width=200><font color={{myZahlung}}>Arbeitspreis * Verbrauch :</font></td>
  <td width=100 align=right><font color={{myZahlung}}>{{arbeitspreismalkilowatt}} €</font> </td>
</tr>

<tr>
  <td width=200><font color={{myZahlung}}>Grundpreis * Monate :</font></td>
  <td width=100 align=right><font color={{myZahlung}}>{{grundpreismalmonate}} €</font> </td>
</tr>


</table>

<font size=3><b>Ergebnis :</b>
</tr></font>

<table border=1>
<tr>
  <td width=200><font color="green">Guthaben :</font></td>
  <td width=100 align=right><font color="green">{{guthaben}} €</font> </td>
</tr>

<tr>
  <td width=200><font color={{myZahlung}}>Nachzahlung :</font></td>
  <td width=100 align=right><font color={{myZahlung}}>{{nachzahlung}} €</font> </td>
</tr>


</table>