Darstellung Sonnenbatterie

[docolli]

Das müsste aus der css via #pvvis-car-fill-bottom schon kommen.

Code Auswählen Erweitern

#pvvis-car-fill-bottom {
  fill: var(--pvvis-color-green, #090);
  display: none;
}

Ja, aber wenn das Auto gelb ist und ich zu laden anfange, ist es bei mir heute unten gelb geblieben und hat oben grün geblinkt.
Ich kann es grad nicht mehr testen. Morgen mehr!

[yersinia]

Ja, aber wenn das Auto gelb ist und ich zu laden anfange, ist es bei mir heute unten gelb geblieben und hat oben grün geblinkt.

Guter Punkt, das kann durchaus sein. Der style wird ja nicht mehr überschrieben; und inline-CSS überschreibt id/class css. Hab das in #222 aktualisiert.

[HoTi]

Danke docolli für die ganze Vorarbeit und Recherche - ich habe eigtl alles an Code so übernommen. Und in diesem Zuge auch battmax zu batmax sowie battstep[/b] zu batstep umbenannt; das folgt eher der Battery Abkürzung.
Weiterhin habe ich die toFixed() aus der Übergabe im Zuge der Umstellung auf value rausgenommen. Die Nachkommstellen usw sollen via reading/pipe kommen, das soll und kann der user selbst entscheiden.

Neue Version anhängend.

Hallo yersinia,

ich versuche die schöne Ansicht mit meiner TESLA Powerwall in Betrieb zu nehmen. Aber leider ist  [charge-discharge] Wert bei mir genau anderes rum. Positiv wenn die Batterie entladen wird und negativ wenn geladen wird.
Kann ich das irgendwie anpassen?

vg
Tim

[yersinia]

Aber leider ist [charge-discharge] Wert bei mir genau anderes rum. Positiv wenn die Batterie entladen wird und negativ wenn geladen wird.
Kann ich das irgendwie anpassen?

Ja, mit der multiply(-1) pipe

Code Auswählen Erweitern

[charge-discharge]="DEVICE:READING | multiply(-1)"
oder userReading in FHEM.

[docolli]

Das hier passt meiner Meinung nach noch nicht. grid-consume ist das was man aus dem Netz holt. Das sollte doch auf das Textfeld pvvis-grid-in-today-txt und mit einem Pfeil nach rechts versehen werden. Und umgekehrt.

Code Auswählen Erweitern


    case 'grid-consume-tdy':
            this.powerVals(value, "pvvis-grid-out-today-txt", "⟹ ∑ ");
    break;
        case 'grid-feed-tdy':
            this.powerVals(value, "pvvis-grid-in-today-txt", "⟸ ∑ ");
        break;


Hier mein Code Vorschlag

Code Auswählen Erweitern


    case 'grid-consume-tdy':
            this.powerVals(value, "pvvis-grid-in-today-txt", "⟹ ∑ ");
    break;
        case 'grid-feed-tdy':
            this.powerVals(value, "pvvis-grid-out-today-txt", "⟸ ∑ ");
        break;


Auto Icon kann ich nicht testen. Das Auto ist unterwegs...

[octek0815]

Hi zusammen,

könnte man (siehe Bild) die Schrift hier nochmal zentrieren?
Vermutlich liegt es am SVG Icon.

Ansonsten ist die Komponente schon ziemlich perfekt für mich.

Nochmals tolle Arbeit von euch hier!

LG
Olli

[docolli]

Im SVG auf x=50 setzen:

Code Auswählen Erweitern


<text id="pvvis-home-consumedtoday-txt" x="50" y="153" class="pvvis-text2"></text>


Im CSS zentriert:

Code Auswählen Erweitern


#pvvis-home-consumedtoday-txt{
text-anchor: middle;
}


[octek0815]

Im SVG auf x=50 setzen:

Code Auswählen Erweitern


<text id="pvvis-home-consumedtoday-txt" x="50" y="153" class="pvvis-text2"></text>


Im CSS zentriert:

Code Auswählen Erweitern


#pvvis-home-consumedtoday-txt{
text-anchor: middle;
}


Moin,

die CSS Anpassung haut nicht hin (wird komplett nach links versetzt), aber die x= Anpassung mit js klappt.

Danke für Deine schnelle Antwort!

[docolli]

Musst ja auch beides machen 
CSS macht es zentriert, damit muss x im SVG auf die Mitte vom Haus verschoben werden.

[yersinia]

Ah ja, der Feinschliff. Danke für die Rückmeldungen und Vorschläge - ich hab das weitestgehend übernommen.

Das hier passt meiner Meinung nach noch nicht. grid-consume ist das was man aus dem Netz holt. Das sollte doch auf das Textfeld pvvis-grid-in-today-txt und mit einem Pfeil nach rechts versehen werden. Und umgekehrt.

Ja, irgendwie hab ich das vertauscht. Ich fand das auch visuell noch Verbesserungswürdig. Anbei ein Vorschlag und die Textfelder sind getauscht - feed nach unten und consume nach oben. Zudem fand ich andere Pfeile und koloriert einfach intuitiver. Meinung? Zu verspielt?

[octek0815]

Ah ja, der Feinschliff. Danke für die Rückmeldungen und Vorschläge - ich hab das weitestgehend übernommen.
Ja, irgendwie hab ich das vertauscht. Ich fand das auch visuell noch Verbesserungswürdig. Anbei ein Vorschlag und die Textfelder sind getauscht - feed nach unten und consume nach oben. Zudem fand ich andere Pfeile und koloriert einfach intuitiver. Meinung? Zu verspielt?

Moin,

ich fand die Pfeile wie sie vorher waren besser (also Richtung Pylon bzw. vom Pylon weg).
Hoch/Runter gefällt mir nicht so.
Die Farben können von mir aus rot und grün sein, bräuchte ich aber nicht umbeding.

LG
Olli

[docolli]

Ja, hurra, wenn wir uns nur noch um solche Kleinigkeiten kümmern müssen, sind wir weit gekommen!

Ich fand auch die Pfeile von und zum Pylon hin intuitiver. 
Farbe habe ich mir auch schon überlegt, das gefällt mir.
Ich würde aber, wenn Farbe, die Einspeisung grün machen und den Bezug rot.
Mir persönlich ist die Einspeisung wichtiger als Bezug, darum habe ich Einspeisung oben und Bezug unten gewählt.
Aber auch hier gerne andere Meinungen.

[yersinia]

Mmh, also ist Pfeil zum Pylon (nach links) automatisch feed; vom Pylon weg (nach rechts) consume? Ist das intuitiv genug?
Nach oben/unten würde dem flow folgen.

[docolli]

So gefällt es mir. Aber andere Meinung ist willkommen.

Wenn wir schon an den Kleinigkeiten sind: Die gelbe Autofarbe, die den Füllstand anzeigt, wenn keine Ladung erfolgt, ist mir optisch zu "mächtig". Das Auto zieht so die gesamten visuelle Aufmerksamkeit auf sich. Aber das Auto ist doch nicht der Star von pvvis, sondern der Flow.

[yersinia]

Ok.

Die gelbe Autofarbe, die den Füllstand anzeigt, wenn keine Ladung erfolgt, ist mir optisch zu "mächtig". Das Auto zieht so die gesamten visuelle Aufmerksamkeit auf sich.

Was schwebt dir denn vor? Die opacity/Deckkraft reduzieren? Eine andere Farbe?

Edit: ich denke ein

Code Auswählen Erweitern

opacity: 0.6;
könnte das Gelb etwas entschärfen.