Du musst zwei Universalelemente erstellen. Eins für den Hintergrund und eins für die Sonne.
Beim "Verhältnis" von Bogen und Sonne musst du wahrscheinlich etwas spielen, bis du die richtige Position findest dass die beiden zusammenpassen.
Hier mal meine Universalelemente, da könntest du dich danach richten.
Sonnenstand Untergrund.PNG Sonnenstand.PNG
Gruß
Ankündigung
Einklappen
Keine Ankündigung bisher.
EDOMI - Zeigt her eure Visus!
Einklappen
X
-
Servus,
ist es dann alles in einem Universalelement enthalten oder hast Du zwei übereinander gelegt?
Hab noch etwas Verständnisprobleme, wie das Verhältnis zwischen Bogen und Sonne ermittelt wird und dann letztlich
zueinander passt...
Einen Kommentar schreiben:
-
Servus,
bei mir ist das eine Vektorgrafik, die ich als Hintergrundbild eingefügt habe
Grüße
Dominik
Einen Kommentar schreiben:
-
Hallo Zusammen,
versuche seit Tagen die Sonnenstandsvisualisierung nachzubauen.
Sprich den Verlauf des Sonnenstands wie im Post von timberland in #397 beschrieben.
Allerding leider nur mäßigem Erfolg.
Wäre super wenn mir hierbei jemand etwas helfen könnte.
Habe ein Universalelement mit der Sonne als Icon angelegt.
Im dynamischen Design lasse ich das Objekt anzeigen von 0-144 und hab die Drehung aktiv.
Den Code
habe ich unter den CSS Eigenschaften ebenfalls eingefügt.Code:<svg><g id='sonne'><circle cx='14' cy='50' r='6' fill='#ffff00'/><circle cx='14' cy='50' r='10' fill='none' stroke-dashoffset='6'stroke-dasharray='1,4' stroke-width='4' stroke='#ffff00'/></g></svg>
iKO kommt vom Sonnenstands LBS.
Wo ich nicht ganz klar komme, wie wird der Strich mit dem Halbkreis dargestellt.
Ist das eine Grafik oder ein zusammengebautes Visu Element.
Wie kommt man da zusammen, mit den Elementen? Wie passt man evtl. unterschiedlich große Visu Icons auf die Laufbahn an?
Vielen Dank für Eure Hilfe.
Einen Kommentar schreiben:
-
uzi10 Danke dir. Die Grunddaten kommen vom Wechselrichter und Batteriewechselrichter via Modbus. Aus diesen Daten wird dann alles andere berechnet.
z.B Direktverbrauch = Aktuelle PV Leistung - Netzeinspeißung - Batterieladung
Aktueller Verbrauch = Direktverbrauch + Netzbezug + Batterieentladung
Hoffe ich konnte dir weiterhelfen.Zuletzt geändert von Andy90; 13.09.2021, 12:12.
Einen Kommentar schreiben:
-
schaut super aus.. wie hast du die PV Berechnung gemacht??
Einen Kommentar schreiben:
-
Auch von mir ein großes Danke in die Runde für die tollen Anregungen. Ich selbst habe jetzt auch einwenig rumgebastelt.
Ich finde vorallem die Kombination von Grafana mit Edomi wirklich Klasse! 😉
Dashboard.png Dashboard2.png Schalten.png Schatten.png Schalten_außen.png Klima.png
Klingel.pngAngehängte Dateien
- Likes 5
Einen Kommentar schreiben:
-
Da hast du echt eine schöne Visu gebastelt, wenn meine Visu mal groß ist soll sie auch so aussehen! 😊Zitat von dopamin86 Beitrag anzeigenJetzt zeig ich auch mal was ich die letzten Monate mit Hilfe eurer Visus so gebastelt habe.
Wenn es jemanden so inspirieren kann wie ihr mich, dann freuts mich.
Nicht wundern, ich hab die persönlichen daten und Bilder gepixelt.
Im Augenblick schaffe ich es nicht mal die aktuelle Uhrzeit einzublenden, wird also noch ein steiniger Weg bis dorthin werden.
Einen Kommentar schreiben:
-
Ja, das grenzt später die Auswahl für die Namen ein. Oder meinst du ich ändere wegen dem Kind die Visu und das ETS.Zitat von Dundi Beitrag anzeigenKind N und Kind S = Kind Nord und Kind Süd?
Einen Kommentar schreiben:
-
Jetzt zeig ich auch mal was ich die letzten Monate mit Hilfe eurer Visus so gebastelt habe.
Wenn es jemanden so inspirieren kann wie ihr mich, dann freuts mich.
Nicht wundern, ich hab die persönlichen daten und Bilder gepixelt.
räume.png spotify.png wetter.png temp.png heizung.png system.png robi.png Strom.png kalender.png
- Likes 10
Einen Kommentar schreiben:
-
beauty meinte glaube ich deine Seite mit der Heizungsanlage (WP + Speicher etc) und die dortigen Leitungen (Vor- und Rücklauf) da sehe ich aber nur eine Linie mit einem Farbverlauf, bei der obersten Leitung (rot auf blau), welcher sicher mit CSS Gradient erfolgt.Zitat von elnino22 Beitrag anzeigenJa, die Farbe wechselt je nach Temperatur dynamisch. Habe ich bei jemandem hier im Forum abgeschaut und funktioniert so:
Farbe Temperaturabhängig 18-26° (blau-rot): hsl({780+(-30*#)}, 50%, 40%)
Farbe 0-100% (grün-rot): hsl({120+(-1.2*#)}, 50%, 40%)
Einen Kommentar schreiben:
-
Die Icons und den Grundriss habe ich mit Inkscape selber gezeichnet. Das geht eigentlich ganz einfach. Danach als SVG importieren.
Ja, die Farbe wechselt je nach Temperatur dynamisch. Habe ich bei jemandem hier im Forum abgeschaut und funktioniert so:
Farbe Temperaturabhängig 18-26° (blau-rot): hsl({780+(-30*#)}, 50%, 40%)
Farbe 0-100% (grün-rot): hsl({120+(-1.2*#)}, 50%, 40%)
Die Farben basiern auf dem Hue Color Wheel (hsl steht für Hue, Saturation, Lightness):
Hue-color-wheel-by-degree.png
Wir wollen nun bei 18°C Blau (240°) und bei 26°C wollen wir Rot (0°). Alles dazwischen schön gleichmässig verteilen (also über Hellblau, Grün, Gelb zu Rot). Wir haben also zwei Punkte (18|240) und (26|0). Nun können wir selber eine lineare Gleichung daraus basteln oder lassen es das Internet für uns erledigen: https://www.mathepower.com/lineare_funktionen.php
Das gibt dann die Funktion: f(x) = -30x+780
oder etwas umgestellt dann für die Farbe: 780+(-30*#)
Damit haben wir den ersten Wert für unsere hsl-Farbe. Jetzt noch Sättigung und Helligkeit nach Geschmack einstellen, fertig.
- Likes 6
Einen Kommentar schreiben:
-
also bei mir wechseln sie die Farbe und sind animiert und die Pfeile bewegen sich.... Wechseln die Farbe je nach Betrieb, ob Heizung oder Kühlung oder Stillstand.
Leider hab ich vorher vergessen das Foto anzuhängen. Wie ich ein animiertes Foto reinstelle weiss ich leider nicht.
wp menü.png temp.png image0.png
Die Werte am RGK bekomme ich durch 1Wire Sensoren
die andren Werte per MQTT von Nibepi bzw dann auch noch von der SPS.
Grafana Grafiken sind dann direkt in der Visu sichtbar
https://snapshot.raintank.io/dashboa...gsja21FSwqXc9d
https://snapshot.raintank.io/dashboa...jn68UZ5PUYnQo2Angehängte Dateien
Einen Kommentar schreiben:


Einen Kommentar schreiben: