Ankündigung

**wvhn** · 24.12.2024, 01:10

Moin aldaris,

hier gibt es eine Beschreibung, wie man eigene Widgets erstellt. Im Code oben kann man alles vor dem <svg... löschen und durch die Macro-Definition ersetzen. Dort werden pv, grid, vehicle und battery als items übergeben und in "data-item" zusammengefasst, wie im Wiki-Artikel beschrieben. Dann die update-Funktion in eine .js-Datei mit der beschriebenen Widget-Struktur auslagern.

Als Vorlage können die Inverter-Widgets hier dienen.

Gruß
Wolfram

**aldaris** · 26.12.2024, 20:41

Hi Wolfram,

vielen Dank für deine Infos. Ich bin tatsächlich ein gutes Stück weiter. Leider bleibe ich an zwei "Unschönheiten" hängen:
1) Ich habe erstmal die Signatur der inverter_overview widgets übernommen zum probieren

Code:

sv_widget: "{{inverter.inverter_overview('1', 'Haus.Zentral.Zentral.PhotovoltaikPower.PV', 'Haus.Zentral.Zentral.PhotovoltaikPower.Netz', 'Haus.Zentral.Zentral.PhotovoltaikPower.Auto', 'Haus.Zentral.Zentral.PhotovoltaikPower.Akku') }>

Dazu dann den Code aus dem js Teil von "inverter"

Code:

var items = this.options.item.explode();
        var values = new Array(this.items.length);
        var j=0;
        for (var i = 0; i < items.length; i++) {
            if (items[i] != '') {
                values[i] = response[j];
                j++;
            } else
                values[i] = this.defaults[i];
        };

Wenn ich das debugge, sind die Werte und eine Stelle verrutscht:
grafik.png
Ich sehe gerade nicht, wo das "", vorne herkommt. Ich kann den Index einen hochdrehen, aber im Sinne des Erfinders ist das ja nicht

2) Das funktioniert in meinem Desktop Browser. Auf dem Handy laufen alle Pfeile, das ist der Default. Also klappt auf dem Handy vermutlich der js Code nicht.
Sieht jemand das oder kann mir einen Tipp geben, wie man das auf Android debuggt?

Besten Gruß
Aldaris

**AndreK** · 27.12.2024, 10:58

Hi aldaris,

das "" kommt daher, dass das Widget im Data-Item fünf Werte erwartet :

Code:

data-item="{{ gad_soc }}, {{ gad_pv_power }}, {{ gad_grid_power }}, {{ gad_house_power }}, {{ gad_battery_power }}">

steht so in der " inverter.html".

Um auf dem Android-Device zu debuggen musst Du adb-Debugging verwenden. Unter Windows die Android Debug Bridge (ADB) und ein geeignetes Entwicklertool installieren. Siehe auch hier

Wenn Deine Seite von extern erreichbar ist (reverse Proxy), kannst Du auch Online mit Browserstack debuggen. Wir haben dort für die smartVisu einen Opensource
Account. Bei Bedarf kann ich dich dort als User eintragen. Dazu würde ich Deine mail-Adresse benötigen - gerne per PN senden.

Viele Grüße
Andre

**wvhn** · 27.12.2024, 11:09

Moin @Aldaris,

im Widget inverter_overview stimmt die Reihenfolge der items in den Widget-Parametern nicht mit der Reihenfolge im Attribut „data-item“ überein. Da Du weniger Parameter verwendest, ist „gad_soc“ leer und schiebt den leeren String vorne ins data-item. Das musst du umsortieren, also „gad_soc“ vorne aus data-item wegnehmen.

EDIT: Wenn Du die inverter.js komplett übernommen hast, wird der Fall allerdings in der for-Schleife abgefangen und durch defaults ersetzt. Das musst Du dann mit anpassen,

Gruß
Wolfram

**aldaris** · 27.12.2024, 13:50

Hey, ja ich habe das mit Euren Hinweisen korrigieren können. Das zweite Problem tritt bei "Samsung Internet" auf, Chrome geht auch auf dem Handy. Firefox macht komische Sachen. Ich werde es mal mit Standard js statt jQuery versuchen, bevor ich das mit dem Debugger versuche

**aldaris** · 28.12.2024, 09:46

So, aktueller Status ist erstmal: funktioniert.
Ich werde den Code mal aufräumen und evtl. bei newstuff hochladen, wenn jemand Interesse hat:
Screenshot_20241228_094122_Samsung Internet.jpg

Angehängte Dateien

Screenshot_20241228_094122_Samsung Internet.jpg (413,0 KB, 180x aufgerufen)

**aldaris** · 29.12.2024, 13:05

Hi,
hier wie angekündigt der Code. Freue mich über konstruktive Kritik - will ja was lernen.

Angehängte Dateien

power.zip (2,6 KB, 7x aufgerufen)

**wvhn** · 29.12.2024, 17:23

Super. Ich habe das mal hier hochgeladen.

Gruß
Wolfram

**AndreK** · 29.12.2024, 19:01

Hi aldaris,

das sieht gut aus,
ich habe dein Widget bei mir mal eingebunden. Es scheint noch ein Bug in Zeile 113 der power.html zu geben. Hier soll, so weit ich das verstehe der SOC der Batterie angezeigt werden. Der fehlt aber.
Wenn ich

Code:

{{ basic.print('', item_batteryPower, '%,0f W', '', '', 'icon0') }}

durch

Code:

{{ basic.print('', item_batterySoC, '%,0f W', '', '', 'icon0') }}

ersetze passt es.

Da ich keine Wallbox und E-Auto habe, dafür aber eine WP stellt sich die Frage ob es irgendwo ein Icon für Luft/Wasser-Wärmepumpen gibt ?
Dann könnte ich statt der Wallbox die WP anzeigen.

BTW : Da ich Kostal-WR im Einsatz habe, hatte ich dafür auf Basis der Kostal APP/Portals im Kostal-Look für mehrere Kostal WR was nachgebaut. Ich stelle mal in den nächsten Tagen einen PR gegen smartVISU-newstuff . Es ist bereits eine Wallbox vorgesehen, wenn das Item konfiguriert ist wird diese auch angezeigt ( in der Mitte unter dem Smartmeter). Leider ist hier außer "Netz-Bezug" im Moment nichts zu sehen. Die Flußrichtung ändert sich je nach Fluß, die Pfeile drehen sich je nach Fluß,
Ist relativ "kitschig" aber so ist das Original bei Kostal eben.

(nur ohne Darstellung von 2 WR- da gibts immer nur einen)

Spoiler_Kostal.gif

Viele Grüße
Andre

**aldaris** · 30.12.2024, 12:47

Hi, an der Stelle soll tatsächlich die Leistung angezeigt werden. Lade bzw. Entladeleistung. Den SoC wollte ich demnächst darunter bauen.

Das mit der Wärmepumpe wäre spannend. Bin selbst mit den Icons noch nicht zufrieden. Lieber wäre mir ein einfaches Haus und ein Auto, optisch auf gleicher Höhe. Wollte mal shopicons prüfen.

**AndreK** · 31.12.2024, 15:42

Hallo aldaris,

danke für die Info,ich werde das bei mir entsprechend ändern. Ich habe mich mal mit ein wenig an "Grafik" versucht (Das ist sicher nicht meine Welt). Ein erster Versuch für eine Luft-Wasser-WP auf Basis von sani_earch_heat_pump.svg ergab das :

Spoiler_air_heat_pump.gif

Icons hier in WS und SW : air_heatpump.zip.

Ich habe dazu Inkscape benutzt.

Viele Grüße
Andre

Angehängte Dateien

air_heatpump.zip (8,7 KB, 5x aufgerufen)

**aldaris** · 04.01.2025, 11:34

So, ich habe etwas weiter gearbeitet. Wenn es am Ende fertig ist, werde ich es auch in dem Repo Updaten. Vorher würde ich aber nochmal hier eine Iteration machen wollen.

1) Ich brauche zwei neue Icons. Die habe ich versucht "vernünftig" zu machen. Vielleicht können die auch (nach Review) ist das Standardrepo ausgenommen werden:
grafik.png
Das Auto hab ich aus fts_garage "ausgeparkt" und das Haus gezeichnet. Jeweils in ws und sw

2) Das widget habe ich etwas aufgeräumt. SoC für Auto und Battery ist auch jetzt drin
grafik.png

3) Habe ich ein weiters widget gebaut. Das hilft die Verteilung zu erkennen (Idee von EVCC)
grafik.png
Die Idee hierbei ist, oben den Input Balken und unten den Output Balken zu sehen. Beide gleich lang, entsprechend der Quellen aufgeteilt.

Ich fixe jetzt noch was an den scripten, Ausblenden von Icons, Ausblenden von Pfeilen wenn zu wenig. Dann kann ich noch die Farben (die bei mir recht speziell sind) konfigurierbar machen.

Für die Wärmepumpe von AndreK reinzunehmen, müssten man entweder das "Auto" konfigurierbar machen oder einen weiteren Verbraucher (optional) dazumachen.

Freue mich über Feedback

Angehängte Dateien

**wvhn** · 04.01.2025, 13:43

Zitat von aldaris Beitrag anzeigen

Ich brauche zwei neue Icons. Die habe ich versucht "vernünftig" zu machen. Vielleicht können die auch (nach Review) ist das Standardrepo ausgenommen werden

Die Icons sehen auch im inneren Aufbau des SVG-Codes sehr vernünftig aus und ich kann sie gerne ins Standard-Repertoire aufnehmen.

Für Elektroautos gibt es schon die icons veh_car_*, die etwas moderner aussehen.

grafik.png

Gruß
Wolfram

**aldaris** · 06.01.2025, 12:34

Die Icons kannte ich noch nicht, habe auf der Doku Seite auf 3.3 gesucht. Das Auto mit Kabel nehm ich

. Ich habe den Code per PR nach newstuff gebracht.

Danke für den Support.

Ankündigung

Eigenes Widget für Energieflussanalyse

Eigenes Widget für Energieflussanalyse

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar