Hallo Gemeinde,
ich habe mir zur Anzeige der Leistungsdaten meiner PV-Anlage eine Nostalgie-Analoganzeige gebastelt.
Falls Interesse besteht:
https://github.com/EifelIvy/AnalogAnzeige_FTUI
Gruß
Werner
Sieht sehr cool aus! Ist das vom Design her (Farben) noch anpassbar? Also Background, Skala und Zeiger?
Gesendet von iPhone mit Tapatalk
Japp. Ich habs noch nicht weiter beschrieben. Wollte erst mal die Resonanz checken. Ich trag das im GIT in der Readme nach.
Ah, okay, habe in der Readme nur die 2 Parameter gesehen. :)
Gesendet von iPhone mit Tapatalk
Schöne Sache, gleich mal für meine CPU Temperatur eingebaut, schick!
Mir ist gerade aufgefallen, daß man durch klicken in die Anzeige den Zeiger bewegen kann, soll das so?
Das kannst Du via class="readonly" einstellen.
Scheint ja, als ob doch der ein oder die andere Interesse dran hat. Dann stecke ich mal ein wenig Energie in die Beschreibung.
ZitatDas kannst Du via class="readonly" einstellen.
Super, danke!
Ich habe mal auf die Schnelle eine CPU und RAM Anzeige gebastelt. Gefällt mir gut.
Mit den Fonts stehe ich aber noch auf Kriegsfuß, ist da auch geplant die Größe des Fonts zu beeinflussen?
Schön fände ich auch noch, wenn die Einheit hinter dem Wert stehen könnte und die Bezeichnung oben, aber das ist wahrscheinlich eher Geschmackssache.
Auch ne nette Idee mit der Rechner-Überwachung.
Mein Ausgangspunkt war ein Cockpit zur Darstellung der elektr. Werte meiner PV-Anlage. Der Style ist angelehnt an analoge elektr. Messgeräte. Für meine Anzeige habe ich dann noch einen 7-Segment-Font nachgeladen. Werde das noch im GIT nachdokumentieren.
Du könntest die Maßeinheit alternativ nach data-maxtext schreiben - dann steht sie unten rechts.
Mit den Fonthöhen muss ich mir nochmal anschauen (evtl. geht das über das knob-Widget?)- war durchaus fummelig, ein vernünfiges Verhältnis zwischen der Skalen-Einteilung und Skalen-Beschriftung zu finden.
Die Größe des Widgets kannst Du über "class=big/normal/small" beeinflussen.
Was mir bisher nicht gelungen ist, ist die saubere Darstellung im Mobile-Device. Evtl. hat da jemand einen Tipp?
ZitatDu könntest die Maßeinheit alternativ nach data-maxtext schreiben - dann steht sie unten rechts.
Schon besser, aber noch nicht optimal. ;)
Hallo!
Die Analoganzeige gefällt mir sehr gut und ich möchte diese auch gerne für meine PV-Anlage nutzen.
Leider habe ich damit etwas Probleme:
Der aktuelle Wert wird zweimal unter der Skala angezeigt. Einmal editierbar (im Bild rot) und einmal immer weiß und groß.
Hat da jemand eine Idee?
EDIT: Lösung gefunden, Beschriftung kommt aus dem Widget Knob welches hierfür verwendet wird. Kann man mit data-displayInput="false" entfernen!
Hi,
ich habe mir jetzt auch den Spaß eingebaut, gefällt mir.
Allerdings hab ich auch das Thema mit den Fonts auf der Scala, sie sind zu groß, und bei einbinden einer anderen Schrift noch viel größer.
Jetzt ein Wunsch ;-) wenn das geht. Das z.b. auch eine Kommastelle möglich wäre. Da ich z.b. bei der Batterie sonst nur 12, 13 14V sehe und das ist mir etwas zu ungenau.
TOLL.
Leider nutze ich nur FHEMWEB. >:(
Grüße Markus
Bei dem Wunsch mit der Kommastelle schließe ich mich an.
Ich habe die 12,345 V in Millivolt umgerechnet. Die anzeige geht jetzt also von 11000 bis 15000.
Funktioniert schon halbwegs, aber diese Riesigen Zahlen schaden der Darstellung erheblich.
Hallo,
freut mich, dass Ihr die Anzeige nutzt!
Das mit der Font-Größe ist ein wenig tricky - damit das in der Anzeige auch mit großen Werten halbwegs passt, hab ich das fest berechnet. Da ist mir bis jetzt auch noch nix besseres eingefallen. Was ich bisher wohl feststellen konnte: Die Darstellung hängt stark vom Browser ab - am Handy bekomme ich keine vernünftige Ausgabe hin.
Das Widget verwendet das knob-Widget - einige Werte habe ich allerdings fest verdrahtet (z.B. das die Ausgabe immer im waagerechten Halbkreis liegt).
Die Anzeige der Nachkomma-Stellen habe ich geändert:
(data-step="1.11" FALSCH!) => 2 Nachkommastellen => RICHTIG: data-step="0.01"
(data-step="1.1" FALSCH! ) => 1 Nachkommastelle => RICHTIG: data-step="0.1"
Wäre prima, wenn Ihr das mal testen könntet, bevor ich die Änderung einchecke. Bitte das js-File aus dem Anhang austauschen.
Danke & Gruß
Werner
Danke, sieht toll aus.
nur die angezeigten Werte sind wild und haben keinen Bezug zur Realität...
Die Volt & Millivolt Anzeigen sollten (etwa) den gleichen Wert haben.
kann das bestätigen, stimmt bei mir auch nicht, hab mal mit einer und 2 stellen hinter Komma und beides weicht ab.
In der Variable steht 12.92, Angezeigt wird 13.2 oder 13.32 :-)
weitere Schwierigkeiten die ich habe:
Ich habe in der gleichen row (Verbrauch) noch eine "cell" in der ich je nach wert die Zahl einfärben möchte, und hier stimmt auch etwas nicht, es bleibt weiß obwohl data-limits='[0,10,30]' data-colors='["#00FF00","#11FFFF","#FF0000"]'
Schriftvariablen scheinen auch durcheinander zu kommen. Wenn man data-vfont= data-font= füllt bzw. nur eine wird zb. im gleichen Block die erste Anzeige nicht mit der richtigen schrift gefüllt. Vermutlich gleiche Variablennamen ? Fülle ich beide mit der selben Schrift geht es wohl. Kenn mich da mit css und js nicht so aus.
Die Scalierung hab ich bei mir auch schon überall abgeändert.
13.2 und 13.32 habe ich auch, obwohl der Messwert sich inzwischen geändert hat.
Ist das evtl. hartkodiert?
Hi.
Hab mir das nochmal angeschaut. data-step kommt eigentlich vom knob-Widget und ist als "Schrittgröße" beschrieben. Wenn man das mal genauer unter die Lupe nimmt wird klar, dass das die Wertegenauigkeit bestimmt.
Also:
"1" => rundet den Wert ohne Nachkommastelle
"0.5" => rundet auf x,5
"0.1" => rundet auf x,1
"0.01" => macht dann 2 Nachkommastellen mit der Genauigkeit von 1
Hoffe, das ist verständlich...
Also müsstet ihr data-step="0.01" setzen. Sorry - ich hatte mir das heute morgen nur auf die Schnelle angeschaut und daher leider die falschen Werte gepostet.
@laserrichi: Den "data-vfont" werde ich mit einem Default-Wert vorbelegt. Dann sollte da kein Blödsinn mehr passieren.
Ich habe das File neu eincheckt und die Beschreibung angepasst. Bitte aus dem Repository neu ziehen.
Hallo in die Runde,
finde die Analogscala super und habe diese für meine PV-Dashboard eingebunden.
Im Edge Browser und dem Internet Explorer auf dem PC wird die Scala perfekt dargestellt.
Mit Mobile Devices unter anderem meinem Wand-Tablet und der Kiosk-App sind die Schriften leider nach oben versetzt und überdecken teilweise die Scala. >:(
Ist bestimmt ein Basic Problem, bin selber leider mit HTML und CSS nicht wirklich kundig.
Hat jemand vielleicht eine Lösung dafür?
Hallo SmartJunkie,
habe aktuell auch keine Lösung für das Problem, aber eine Bitte: Kannst du den HTML Code dafür bereit stellen?