Werte meiner Solaranlage in der SmartVisu anzeigen lassen

[ivande]

Deine Lösung könnte ich auf smartvisu-newstuff verlinken, oder auch die die Dateien dort einstellen. Was ist besser?

für mich wären beide Varianten ok, wie es besser ins smartvisu-newstuff-Konzept passt,..
Gruß Ivan

[Gatzman]

ich finde die Lösung von Ivan auch sehr schön!

Habe heute bei FB in der E3DC Gruppe folgendes Bild gesehen, das wäre auch sehr schön zu haben für SmartVisu...)

VG
IMG_2048.JPG

[Sipple]

Anders ist es vielleicht bei der Grafik von ivande : hier ist die Anordnung der Elemente knifflig und könnte von einem Widget stabil aufgebaut werden.

Ja, genau das meine ich mit eigenem Widget.

So, noch ein paar Anpassungen gemacht. Die Items habe ich bei der Gelegenheit mal komplett auf eval/eval_trigger umgestellt, man kommt also komplett ohne externe Logik aus.

Den Plot habe ich etwas verschönert.

Dateien im Anhang.

Der dramatisch hohe Hausverbrauch (blaue Linie) im Plot zwischen 11:30 und 16:00 kommt übrigens vom Laden des E-Autos mit bis zu 7kW 2-Phasig. PV-Überschuss-geregelt. Klappt super und ist schon sehr interessant, wie die einzelnen Komponenten zusammenspielen. Ladekurve des E-Autos und dessen SoC baue ich velleicht auch noch ein, aber das hat ja nicht direkt was mit der E3DC zu tun.

Plot.png

[Sipple]

Kann man eigentlich dem plot.period irgendwie beibringen, dass er die Legende (Im Bild das PV, Akku, Netz, Haus, SoC) nicht mitten in die Grafen platziert sondern oben drüber (über der obersten Linie wäre noch Platz) oder unten drunter (unter den Zeit/Datumsangaben)? Das hat mich schon immer gestört. Nützlich finde ich die schon, weil man mal was ausblenden kann, wenn es sich blöd überlagert.

[wvhn]

Prinzipiell kann man dem Widget mit dem Parmeter `chartoptions` noch Optionen für Highcharts mitgeben. In der Doku gibt‘s dazu ein Beispiel. Das Format ist ein JavaScript Objekt, in dem Fall

{ yAxis: [ { tickInterval: 0.5 } ], legend: { verticalAlign: 'bottom', y: -30 } }

Das API ist in der Highcharts Doku sehr gut beschrieben und kann in jsfiddle ausprobiert werden.

Einfachere Alternative: y-Achse(n) so skalieren, dass oben Platz bleibt.

Gruß
Wolfram

[Sipple]

Einfachere Alternative: y-Achse(n) so skalieren, dass oben Platz bleibt.

So habe ich es mit der SoC y-Achse gelöst, das passt so. Aber die andere y-Achse mit den Leistungen skaliert dann ja nicht mehr automatisch. Da müsste ich den Bereich von -11k bis +11k abdecken für alle Fälle und das sieht dann meistens doof aus.

Mit den Options spiele ich mal rum. Danke dir mal wieder

[Sipple]

Ich würde ein schönes Widget bauen, wenn ich blicken würde, wie man jedes einzelne Element innerhalb eines Blocks frei positionieren könnte. Das wären im Prinzip nur standard Widgets innerhalb eines Blocks und das Bild.
Wird natürlich nochmal komplizierter wenn man bedenkt, dass die Blockbreite variieren kann.
Bin ich zu alt/zublöd/zu/unwissend. Aber wenn sogar mein Kumpel, der unter anderem mit Webdesign sein Geld verdient, sagt, dass das nicht so einfach ist...

Beispiel Block.png

[wvhn]

Im Example3.graphic kannst Du Dir mal ansehen, wie man mit absoluter Positionierung arbeitet. Die ov-widgets (ovbasic...) sind alle mit Angaben der Koordinaten frei positionierbar auf dem Hintergrundbild. Die Widgets unterscheiden sich praktisch nur durch die zusätzlichen Positionsangaben von den Original-Widgets.
Da Du nur wenige Elemente absolut positionieren musst, würde ich empfehlen, dies manuell zu machen und nicht auf die ov-widgets zurückzugreifen.

P.S.: Gegen das Alter kann man damit nicht ankommen, aber gegen die Unwissenheit (weiß ich aus eigener Erfahrung)

[Sipple]

Neu! Jetzt mit Legende unten:

Legende_unten.png


Weiter runter geht nicht, sonst verschwindet die Legende, schon vor dem Blockende. Und der Block wird nicht automatisch höher.
Das kommt schon nahe an das ran, was ich mir vorgestellt habe. Ich glaube, so lass ich das mal eine Weile.

[Sipple]

Da Du nur wenige Elemente absolut positionieren musst, würde ich empfehlen, dies manuell zu machen und nicht auf die ov-widgets zurückzugreifen.

Wie diese OV Widgets genau funktionieren habe ich eh nicht kapiert. Also bin ich ganz naiv so vorgegangen:

In die visu.css mal zum Testen sowas reingeschrieben:

/**
 * -----------------------------------------------------------------------------
 * @package     smartVISU
 * @author      Martin Gleiß
 * @copyright   2012 - 2015
 * @license     GPL [http://www.gnu.de]
 * -----------------------------------------------------------------------------
 */

/**
 * This file is for your own stylesheets.
 */

@CHARSET "UTF-8";

/* display background only on larger displays */
@media all and (min-width: 6000px) {
.page-bg {
background-image: url('../../pics/bg/luminous_lines.png');
}
}

#E3DC_box1 {
background-color: green;
width: 100px;
height: 100px;
position: absolute;
top: 10px;
left: 10px;
}

Diese visu.css in meinem pages Ordner sollte doch automatisch geladen bzw. referenziert werden?

Wenn ich aber dann in Testweise so ein Konstrukt in eine Seite baue, passiert schlicht gfar nichts, außer dass der Text unter das Bild geschrieben wird. Als ob das css nicht geladen würde.

    <div class="block">
        <div class="set-1" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
            <div data-role="collapsible" data-collapsed="false">
                <h3>E3DC Energiefluss</h3>
                  <img style="height: 512px; vertical-align: middle;" src="icons/MINI_big.png">
                    <div id="E3DC_box1">
                        hier kommt der 1. Inhalt
                    </div>
            </div>
        </div>
    </div>

Analyse mit Firefox F12 etc. hat mir auch nichts gebracht. Da werden Laien wie ich nur erschlagen von einer Informationsflut.

[Sipple]

Vergessen wir mal css. So geht zumindest ein bisschen was.

    <div class="block">
        <div class="set-1" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
            <div data-role="collapsible" data-collapsed="false">
                <h3>E3DC Energiefluss</h3>
                <img style="height: 512px; vertical-align: middle;" src="icons/MINI_big.png">
                [COLOR=#e74c3c][B]<div style="position: absolute; left: 70%; top: 50%;">
                    <div style="border: dotted red 3px;">
                        {{ basic.icon('control_building_empty.svg') }}
                        {{ icon.meter('OV_Haus_Icon', '', 'E3DC.Leistung.Haus', 0, 12000) }}
                        {{ basic.print('OV_Leistung_Haus', 'E3DC.Leistung.Haus', 'w') }}
                        <br />
                        Ich mach nicht was ich soll.
                    </div>
                </div>[/B][/COLOR]
            </div>
        </div>
    </div>

Ich kann die Testbox leidlich gut positionieren, aber der Referenzpunkt ist die ganze Bildschirmseite. Bin davon ausgegangen, dass sich das an dem Block orientiert.
Das bedeutet jetzt, dass die Positionierung keinen Sinn macht, weil beim Verändern des Browserfensters dann alles sonstwo auftaucht.
Was allerdings funktioniert ist die Collapsible Eigenschaft. Damit verschwindet auch die Testbox, so wie es sein soll. Wenn ich also den Referenzpunkt für die Position noch auf den umgebenden Block setzen könnte, wäre der Rest wohl machbar. Ist da oben ein offensichtlicher Fehler drin oder wer weiß wie das geht?

Danke im Voraus

Martin

[Sipple]

Mal ein kleines Update. Mit absoluter/relativer Positionierung und dem ganzen CSS Gedöhns bin ich nicht weiter gekommen.
Also mal ganz Oldschool gedacht und simple HTML Tabellen Befehle verwendet. Geht erstaunlich gut, auch wenn man immer wieder liest, dass man das eine oder andere "so nicht mehr macht".

Ein erster, verwendbarer Entwurf:

E3DC_Status.png

Was ich noch einbauen will ist der Status der Notstromversorgung. Mit der Möglichkeit diese auch manuell zu aktivieren. Über ein Popup und/oder PIN-Pad, damit das nicht aus Versehen passiert.

Das skaliert auch ganz gut mit der Block/Seitenbreite, aber nicht absolut perfekt. Soll heißen, Handy Display hochkant kann und wird wohl sch... aussehen. Da wäre es ideal, wenn man im Quellcode irgendwas definieren kann, dass er diesen Block nur anzeigt, wenn eine Mindestbreite gegeben ist. Wenn nicht, dann die "alte" hochkant orientierte Variante, wie vorne im Thread gezeigt.

Bin damit eigentlich schon ganz zufrieden.

Gruß, Martin

[wvhn]

Sieht klasse aus!

[Sipple]

Du hattest Recht, Wolfram. Ein eigenes Widget draus bauen ist Quatsch.
Das geht so genauso wenn nicht einfacher.

[Sipple]

So. Vorerst fertig.

E3DC Visu.png

Habe das ganze noch etwas erweitert und verfeinert.
Links unten ist der Fehlerstatus dazu gekommen (DPT 1), im Fehlerfall Warnsymbol in rot.
In der Mitte unten würde im Fehlerfall ein Fehlertext in gelb stehen (DPT 16001). Keine Ahnung, was da für ein Text kommt, ist nirgends genau dokumentiert.
70% inaktiv/aktiv zeigt an, ob die Anlage gerade die Einspeisung auf 70% der PV Leistung limitiert (DPT 1).
Ganz rechts unten der Status der Notstromversorgung, rot wenn aktiv. Dabei wechselt auch der Strommast oben rechts auf rot (DPT 1).
Die Pfeile für die Flussrichtung der Energie wechseln natürlich auch die Richtung (bei der Batterie und dem Netzanschluß). Bei um die 0W (-10 bis +10) wird ein Strich angezeigt, wie oben rechts im Beispielbild zu sehen.
Bei der PV- und Hausleistung kommt der Strich bei unter 10W. Gibt da ja auch keine Negativwerte.
Der Status der Notstromversorgung ist momentan nur zur Anzeige da. Man könnte das ganz leicht zu einem basic.stateswitch machen und den auch noch z.B. per device.codepad mit einer PIN absichern, damit nicht aus Versehen manuell die Notstromversorgung aktiviert wird. Mach ich vielleicht noch, lass ich aber aktuell sein.
Schmäler als im Bild gezeigt geht nicht mehr sinnvoll. Dann sieht es sch... aus.
Prinzipiell könnte man sich ja einen der beiden Blöcke im Bild sparen. Ein Vorschlag wäre, dass auf sehr schmalen Displays (z.B. Handy hochkant) nur der linke Block gezeigt wird, ab einer bestimmten Breite dann nur der rechte oder beide. Wie man das dann macht weiß ich jetzt auch nicht.

Das kommt alles ohne CSS, JavaScript oder sonstiges aus und funktioniert für mich gut. Es braucht auch keine speziellen Widgets, ist zumindest alles in der aktuellen smartVISU Version enthalten. Für ältere Versionen fehlt wahrscheinlich das icon.battery2, kann man sich aus dem git newstuff holen oder eben aus einer 3.0.x Version.
Das eine oder andere Icon mag auch fehlen, z.B. das scene_power_grid.svg. Auch das gibt es natürlich in den neueren Versionen und lassen sich einfach kopieren.
Welche man braucht steht ja in der E3DC.html, habe ich angehängt.
Einzig das E3DC Bild ist natürlich nirgends schon enthalten. Habe ich ebenfalls angehängt. Das kommt in dropins/icons.
Beispiel E3DC.yaml Item File ist auch dabei.

Das Ganze kann man sicher auch für andere Systeme verwenden. Muss man halt die Items anpassen etc. Ein eigenes Bild sollte kein Problem sein. PNG ohne Hintergrund tut's, man kann sich bei den Abmessungen an dem E3DC_S10.png orientieren. Alles, was kleiner oder exakt so groß ist, passt. Mit der Vorlage sollte jeder mit SHNG und smartVISU Grundwissen klar kommen. Weiter vorne im Thread habe ich auch schon mal erklärt, wie man die Leistungswerte der eigenen Anlage in den Items auf seine eigenen Bedürfnisse anpasst. Meine S10 kann nur 3kW Lade-/Entladeleistung. Daher die Anpassung über eine Formel an den Vollausschlag der Zeigerinstrumente an diese 3kW (siehe E3DC.yaml im entsprechenden Item, eval). Das gilt auch für den Netzanschluß. Ich bin schlicht von 8kW in/out ausgegangen. Kann jeder machen wie er will. Es gibt auch einen 5min Timer in der E3DC.yaml, der dafür sorgt, dass alle 5min die aktuellen Werte für den Plot in die Datenbank geschrieben werden. Kürzere Intervalle halte ich nicht für sinnvoll. Wer das ändern will: E3DC.yaml, ganz oben, crontab, den 5er ändern in was auch immer.

Gruß, Martin