HA "Advanced Trovis Visu" - aktueller Stand #44
Replies: 4 comments 9 replies
-
|
Hallo @Falkio, die Dateien hier auf Git und mein aktueller Entwicklungsstand sind tatsächlich so ca. 2-3 Wochen auseinander. Das nächste Update kommt in Kürze (vermutlich im Laufe dieser Woche - sobald ich wieder einen einigermaßen vorzeigbaren Stand habe, der Einsteigern in die Materie nach einem copy&paste nicht sofort auf die Füße fällt). Ziel ist immer noch eine vollständige Visu, die mit nur wenigen Anpassungen sofort lauffähig sein soll (kurz configuration.yaml anpassen, 2 Verzeichnisse reinkopieren, ein paar wenige Template Sensors anpassen, läuft). Im zweiten Ausbauschritt soll neben der reinen Visualisierung auf einer Unterseite auch das Rückschreiben von Werten (Heizkurve usw) über eine Unterseite möglich sein. Im dritten Schritt will ich die (Langzeit)Daten statt in HA-SQLite auf meinem sowieso laufenden MariaDB Server ablegen. Hier nochmal zur Erinnerung meine aktuelle Visu (SmartHomeNG, Smartvisu), die bei mir seit vielen Jahren unverändert läuft. Sie dient als Basis für die zukünftige HA Visu:
Muster, wie die configuration.yaml dann später ungefähr aussieht (alles zur Trovis wird aus den Haupt-YAML-Dateien ausgekoppelt, daher ist einfaches copy-paste möglich): modbus:
- name: trovis
type: !secret trovis_connection_type
host: !secret trovis_ip
port: !secret trovis_port
sensors: !include_dir_merge_list trovis557x/sensors/
binary_sensors: !include_dir_merge_list trovis557x/binary_sensors/
switches: !include_dir_merge_list trovis557x/switches/
climates: !include_dir_merge_list trovis557x/climates/
sensor trovis: !include trovis557x/template_sensors.yaml
sensor trovis_stat: !include trovis557x/statistics.yamlAktueller Entwicklungsstand:
Zukünftige HA-Plots mit Plotly (aus einer meiner 'Spielseiten', noch in 'schick' in die Hauptseite zu integrieren - zur Zeit kommen die angezeigten Werte aus Altdaten von smartHomeNG):
Video mit aktuellem Verhalten der linken Seite (neu sind per Template Sensor frei einstellbare (!) single- und double klicks auf den Reglerbuttons; an der Darstellung für Hk4 (double click auf dem 3. Button) sitze ich gerade: video.mp4Muster, wie man später die Bilder links oben oben konfiguriert (gesamtstatus-0.svg ... gesamtstatus-9.svg werden durch Eingabe einer einfachen Zahl automatisch angeholt): trovis_regler_gesamtstatus:
unique_id: trovis_r_gesamtstatus
friendly_name: "Trovis Regler Gesamtstatus"
value_template: >-
{% set hk1 = is_state('binary_sensor.trovis_hk1_umwaelzpumpe', 'on') %}
{% set ww = is_state('binary_sensor.trovis_hk4_speicherladepumpe', 'on') %}
{% if hk1 and not ww %} 1
{% elif ww and not hk1 %} 2
{% elif hk1 and ww %} 3
{% else %} 0
{% endif %}Muster, wie man die Buttonclicks / double-clicks dann auf das gewünschte Verhalten einstellt (bei mir: Button 1 click/double-click=Hk1, Button 2 click/double-click=Hk2, Button 3 click = Hk3, Button 3 double click = WW): # Trovis - heating curve to display if you tap/click a button
# set to 0/1/2/3/4 (0=do nothing, 1..3=Rk1..3/Heating, 4=Rk4/HotWaterTank)
trovis_regler_button1_click: # top button
unique_id: trovis_r_button_1_click
friendly_name: "Trovis Regler Button1 Klick/Tap"
value_template: 1
trovis_regler_button1_doubleclick:
unique_id: trovis_r_button_1_doubleclick
friendly_name: "Trovis Regler Button1 Double Klick/Tap"
value_template: 1
trovis_regler_button2_click: # middle button
unique_id: trovis_r_button_2_click
friendly_name: "Trovis Regler Button2 Klick/Tap"
value_template: 2
trovis_regler_button2_doubleclick:
unique_id: trovis_r_button_2_doubleclick
friendly_name: "Trovis Regler Button2 Double Klick/Tap"
value_template: 2
trovis_regler_button3_click: # bottom button
unique_id: trovis_r_button_3_click
friendly_name: "Trovis Regler Button3 Klick/Tap"
value_template: 3
trovis_regler_button3_doubleclick:
unique_id: trovis_r_button_3_doubleclick
friendly_name: "Trovis Regler Button3 Double Klick/Tap"
value_template: 4Es gab kürzlich einige unerwartete Hürden zu umschiffen (Picture entity card kann zB keine Templates --> Buttons mussten anders als geplant implementiert werden, Plotly hat einen Anzeige-/Refresh Bug --> musste die JS-Heizkurvenberechnung innerhalb von Plotly entfernen und in Template Sensors packen usw usw). Daher dauert alles im Moment leider etwas länger als geplant. Soweit erstmal das Update und eine kurze Roadmap, /tom p.s. Zu Deiner Frage in Sachen Github/Community Uploads: Zu lang, um es hier aufzuschreiben, bitte mal googlen. Du müsstest einen eigenen Fork dieses Gits erstellen, dort pflegst Du (idealerweise in einer neuen Branch) Deine Änderungen ein, und 'pushed' diese dann per Pull Request an dieses Repo zurück. |
Beta Was this translation helpful? Give feedback.
-
|
Guten Morgen @Tom-Bom-badil danke schon mal. Das mit dem Fork versuche ich mal rauszufinden.
|
Beta Was this translation helpful? Give feedback.
-
|
Hier schon mal vorab die Heizkurve, damit Du weitermachen kannst (Hk2 und Hk3 analog zu Hk1). Die Kurve wird als Liste in Attributen und nicht im Sensor selbst gespeichert, denn der Wert/Inhalt eines Sensors ist im Gegensatz zu Attributen auf 256 Bytes begrenzt (das reicht nur für 1 Nachkommastelle, und dann bekommt die Heizkurve "Ecken" - wieder einevon den Klippen, die ich kürzlich umschiffen musste): # Trovis - Heating curves HK123
# moved here from 'sensors' due to 256 Bytes length limitation (arrays too long)
trovis_hk123_heizkurven:
unique_id: trovis_hk123_heizkurven
friendly_name: "Trovis Hk123 Heizkurven"
value_template: "siehe Attribute"
attribute_templates:
x_werte: >-
{% set x = namespace(valsx='') %}
{% for lauf in range(-20,21) %}
{% set x.valsx = x.valsx + lauf|string + ',' %}
{% endfor %}
{{ x.valsx[:-1].split(',') | map('int') | list }}
hk1: >-
{% set tagbetrieb = is_state('binary_sensor.trovis_hk1_tagbetrieb', 'on')| int %}
{% set tagsoll = states['sensor.trovis_hk1_raumsoll_tag'].state|float %}
{% set nachtsoll = states['sensor.trovis_hk1_raumsoll_nacht'].state|float %}
{% set niveau = states['sensor.trovis_hk1_niveau'].state|float %}
{% set steigung = states['sensor.trovis_hk1_steigung'].state|float %}
{% set vl_min = states['sensor.trovis_hk1_vl_min'].state|float %}
{% set vl_max = states['sensor.trovis_hk1_vl_max'].state|float %}
{% set y = namespace(valsy='') %}
{% if tagbetrieb %}
{% set soll = tagsoll | int %}
{% else %}
{% set soll = nachtsoll | int %}
{% endif %}
{% for lauf in this.attributes.x_werte %}
{% set vl = (24 + niveau + 2*steigung*(soll-20) - (0.1 + 0.9*steigung) *
(1.5*(lauf-20) + 0.01*((lauf-20)*(lauf-20)))) %}
{% if vl < vl_min %}
{% set vl = vl_min %}
{% elif vl > vl_max %}
{% set vl = vl_max %}
{% endif %}
{% set y.valsy = y.valsy + vl|round(2)|string + ',' %}
{% endfor %}
{{ y.valsy[:-1].split(',') | map('float') | list }}Viel Erfolg! /tom |
Beta Was this translation helpful? Give feedback.
-
|
Guten Morgen @Tom-Bom-badil vielen Dank. Ich hatte dein Berechnungstemplate bereits abgetippt und in die Templates gepackt. Das mit der Sensor limitation wusste ich nicht. Allerdings habe ich es eh nicht geschafft die x und y Werte an ein Plotly zu übergeben :-( Woran ich gerade komplett scheitere und verzweifele ist ein Plotly überlagert auf meinem Trovis svg anzuzeigen. Das klappt überhaupt nicht so wie ich das will. Wenn ich das richtig sehe hast du dir innerhalb deines dashboard stacks nur ein grid aufgebaut ohne Bild im Hintergrund. Passt bei mir leider nicht so richtig weil ich ja ein Bild von der Anlage habe. |
Beta Was this translation helpful? Give feedback.
-
|
Guten Morgen @falkio8, HA ist in Bezug auf die Visu-Programmierung ziemlich eigen. Wer aus anderen Systemen gewohnt ist, Dinge mal eben schnell nachträglich einzubauen und dann per css geradezuziehen, fällt zumeist auf die Nase. Deinen Ansatz, ein svg als Hintergrundbild zu nehmen und dann mit Elementen zu füllen, hatte ich am Anfang auch ausprobiert, ihn dann aber verworfen. Funktionieren sollte es aber trotzdem, wenn man wie folgt vorgeht:
Jedes Element lässt sich dann beliebig positionieren - wenn die normalen styles: nicht reichen, bei Bedarf mit card-mod nachhelfen, in schwierigen Fällen type: custom:plotly-graph
name: heizkurve
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0px;
--ha-card-border-color: #990000;
--ha-card-border-width: 2px;
--card-mod-icon-color: white;
width: 100% !important;
height: 20vh;
margin-left: 1vw;
...
}Genau auf diese Art entsteht zB gerade meine WW-Statusanzeige rechts unten (ist derzeit noch im Rohformat):
Beim Festlegen von Größen und Positionen und dem Verständnis, welches Element wem untergeordnet ist, helfen die Entwicklertools ungemein (rechte Maustaste --> untersuchen bzw. F12). Damit kann man ggf Elemente auch mal durch die Gegend 'schieben', um die richtigen Werte zu finden. Viel Erfolg! /tom |
Beta Was this translation helpful? Give feedback.
-
|
Danke @Tom-Bom-badil ich habe es jetzt bei picture-element belassen und dann das plotly als element eingebunden mit der mod card. Wenn ich nur image -> transparent mache und dann ein image als element nehme füllt es nicht die gesamte card aus. Jetzt habe ich aber das Problem, dass das plotly nicht an seiner relativen position bleibt sondern sich verschiebt wenn sich die Dashboard Größe verändert, der Text links bleibt merkwürdigerweise an seinem Platz. Die Angaben sind aber eigentlich relativ (%, vh und vw):
Und dann noch ne Frage zu dem Template oben, das kommt so wie es ist in die Template.yaml? Dann schmeisse ich den String Sensor aus den templates raus. Und du müsstest mir noch verraten wie ich die x und y Werte an das plotly übergebe. Danke! |
Beta Was this translation helpful? Give feedback.
-
|
Zur Position/Größe: Statt mit festen Werten für vh/vw kannst Du das Element auch mit Die Datei für das Heizkurve-Template ist die template-sensors.yaml. Zur Übergabe der Werte sowas in der Art hier in Plotly als Entity definieren (Achtung, ungetestet, müsste aber passen - bei mir ist das wegen der Heizkreis-Umschaltung deutlich mehr Code und läuft noch über weitere Variablen): - entity: ''
name: Heizkurve
line:
shape: spline
color: black
x: |-
[[[
return states['sensor.trovis_hk123_heizkurven'].attributes.x_werte;
]]]
'y': |-
[[[
return states['sensor.trovis_hk123_heizkurven'].attributes.hk1;
]]]Tada: Viel Erfolg! /tom |
Beta Was this translation helpful? Give feedback.
-
|
Danke @Tom-Bom-badil aber leider komme ich überhaupt nicht weiter, mit transform wird mir das plotly nur komplett gequetscht. Wenn ich den tranform nicht so arg verdrehe sehe ich das chart überhaupt nicht über dem Bild. Ich fürchte ich muss hier nochmal ganz von vorne anfangen und es anders probieren. Hast du schon irgendwo dein code snippet von dem Anlagenbild, dann würde ich mich von dem mal rückwärts arbeiten:
Was mich gerade ebenfalls aufhält ist der Plot selbst denn der zeigt bei mir keine Werte an obwohl der sensor mit attributen gefüllt ist:
Damit sieht das plotly sehr leer aus, irgendwas stimmt hier noch nicht:
|
Beta Was this translation helpful? Give feedback.
-
|
WOW der dev vom plotly hat geantwortet: Damit scheint es zu gehen, auch wenn ich seine Antwort nicht verstehe und auch nicht warum das dann bei dir geht:
|
Beta Was this translation helpful? Give feedback.
-
|
Ok, jetzt hat es auch bei mir 'klick' gemacht. Vorweg: David's Ansatz mit dem
HA bringt von Hause aus Jinja2 (z.B. für Templates) und JavaScript (z.B. für Integration von Add-ons, custom: Lovelace-Karten usw) mit. Einige der custom: Cards ermöglichen die Nutzung dieser beiden, indem sie eine Art 'Interface' rüber zu Jinja2 und JS im Hauptsystem bauen. Das macht aber einigen Aufwand und hat etliche Tücken, deshalb bietet die große Mehrheit der Karten beides nicht an. Meine Trovis-Seite basiert massiv auf der weit verbreiteten custom:button-card (siehe hier), die die Einbettung von beliebigem JS-Code per Bei Deinen Änderungen hast Du aber diese äußere custom:button-card durch eine picture-elements Card mit einem Bild ersetzt. picture-elements kann aber weder Jinja2 noch JS; somit entfällt die Nutzung von [[[ ]]] komplett. Ein Plotly ermöglicht unabhängig davon ebenfalls beliebiges JS per Ich hoffe, ich konnte das ein bisschen rüberbringen, bin ja auch nicht mehr als ein etwas 'fortgeschrittener Einsteiger' - Hauptsache, es läuft jetzt. :) /tom |
Beta Was this translation helpful? Give feedback.
-
|
So, bin größtenteils durch mit dem, was ich für die linke Seite in 'Version 1' geplant hatte. Stand ist folgender:
Bildschirmaufnahme.2024-10-24.185522.mp4Es fehlen noch ein paar Feinarbeiten (Button-Pics überarbeiten, nochmal das WW-Bild ein wenig überarbeiten, ein paar Texte in Template-Sensoren abändern, Git final updaten), aber dann mach ich auf der rechten Seite in den Plots weiter. Am Wochenende werde ich auch mal den Nachfolger von meiner Bastel-5579 (aka 'Schrödinger') in Betrieb nehmen: Eine fast nagelneue 5578 aus der Bucht. Dann muss auch ich mich mit 1-Knopf-Reglern im Stil der 5573 beschäftigen. ;) /tom |
Beta Was this translation helpful? Give feedback.
-
|
Das ist richtig gut geworden!!! Ich bin jetzt auch langsam da wo ich hin wollte. Da ich nur einen HK habe und keine Nachtabsenkung brauche ist es bei mir einfacher. Deine WW Seite finde ich auch sehr gut. So sieht es jetzt bei mir aus:
Von der Struktur her ist es genauso wie bei dir und der gefärbte Hintergrund ist das gleich field im grid. Also aus meiner Sicht dürften die eigentlich nie unterschiedlich gross sein. //// //// |
Beta Was this translation helpful? Give feedback.
-
|
Hallo, mal wieder ein Update: Ich habe heute den HA-Bereich auf meinen aktuellen Entwicklungsstand hochgezogen. Die erste Seite ist im Grunde fertig; ein paar kleine Restarbeiten stehen noch aus, aber das ist alles nichts weltbewegendes. Eine Kurzbeschreibung samt vollständigem Code befindet sich hier. Derzeit schraube ich an einer Einstellungsseite samt Simulation von Heizkurven. Die Seite wird man erreichen, wenn auf das Heizungsschema geklickt wird. Hier ein kleiner Vorgeschmack, was sie zu bieten hat: 5_1_einstellungen.mp4Und hier, wie es dann insgesamt aussieht (die extra Plot-Seite bitte noch ignorieren). Die Datei ist leider zu groß für einen Git-Upload, daher von einem meiner Webserver: https://kramkiste.net/videos/6_heizung%20gesamt.mp4 Sobald ich guten Gewissens wieder etwas veröffentlichen kann, findet man es an gewohnter Stelle. Frohes Basteln! :) /tom |
Beta Was this translation helpful? Give feedback.
-
Fortgesetzt von hier.
Hi @Tom-Bom-badil, das sieht ja schon richtig gut aus. Hatte letzte Woche keine Zeit um hier weiter zu machen.
Ich kümmere mich jetzt erstmal um das Grid.
Danke, falkio
Beta Was this translation helpful? Give feedback.
All reactions