Widget 7-Segment Anzeige

[Waldmensch]

Ich war auf der Suche nach einer 7-Segment Anzeige fürs FTUI. Da es kein passendes Widget zu geben scheint und ich nicht mit Font's rummurkeln wollte, habe ich schnell ein Widget mit SVGs zusammengestrickt. Vielleicht kann es mit in den Standardpool mit aufgenommen werden. Das Widget füllt den umgebenden container in der Breite komplett aus. Größenanpassungen können als direkt über den DIV gesetzt werden. Es gibt nur ein Device-Reading (value). Man kann die Anzahl der Dezimalstellen festlegen (default 0 - mögliche Werte 0|1|2). Anzahl der Digits ist default auf 5. Vordergrund und Hintergrundfarbe sind setzbar als Hexcolor oder css Konstante. Negative Werte werden mit Minus davor angezeigt.

Kann sein, das es noch irgendwo Fehler reißt, habe aber jetzt nix weiter gesehen.

Die JS Datei nach /opt/fhem/www/tablet/js zu kopieren reicht aus

Demo config des Screenshots

Code Auswählen Erweitern

<li data-row="1" data-col="7" data-sizex="1" data-sizey="6">
<header>7-segment</header>
<div
data-type = "7segment"
data-get-value = "Wetterstation:temperature"
data-decimals ="2"
data-digits ="4"
data-color-fg="limegreen"
class="top-space">
</div>
<div
data-type = "7segment"
data-get-value = "ESPEasy_sonoff_7_Watt:StromverbrauchAktuell"
class="top-space">
</div>
<div
data-type = "7segment"
data-get-value = "Wechselrichter1:ProdTotal"
data-color-bg="white"
data-color-fg="black"
data-digits = "8"
class="top-space">
</div>
</li>

[Prof. Dr. Peter Henning]

Irgendwie scheinst Du ein Freund von Retro-Displays zu sein 


Ich kann Dir noch ein paar alte Minitron-7-Segment-Anzeigen im Original anbieten. Nixies habe ich leider nicht mehr herumfliegen - aber man kann das ja alles simulieren. Hier ein Link fürs Aussehen:
https://de.wikipedia.org/wiki/Ziffernanzeiger%C3%B6hre

LG

pah

[Waldmensch]

Irgendwie scheinst Du ein Freund von Retro-Displays zu sein 

Wo es hinpasst ist es doch ein schönes Gimmick. 
Ich sehe es sportlich, als Training mit Mehrwert. In punkto SVG habe ich noch etliches an Nachholebedarf, deshalb habe ich dieses auch mal "onthefly" ohne Template gebaut. Für mich war eher die Ansteuerung der Segmente die Herausforderung. Wer in den Code schaut, wird sehen, dass es nicht, wie meist üblich bei 7-segment, mit endlosen if then/ switch case Ketten gemacht ist, sondern über reine Adressierung in einem 3fach verschachtelten Array. Das halte ich für effizienter.

Die Idee zum 7-Segment habe ich schon viel länger, kam irgendwann mal bei einer Folge "Back to the Future"

Ich liebe Nixies, aber ich glaube, dass wird auf einem flachen Display eher "zum Fortlaufen" aussehen. Eine Nixie wirkt nur, wenn sie echt und in 3D ist. 

Ich werde mal ein Git aufsetzen, wo ich den ganzen Kram hinschiebe. Ich muss mich nur mal mit dem Update Mechanismus von FHEM auseinandersetzen, ob man es hinbekommt, das sich die Plugins automatisch aus dem Master Branch updaten. Keine Ahnung, ob es dafür schon einen Ansatz gibt. Ist ja für den Anwender weniger interessant.

[dt2510]

Die Nixies kenn' ich noch von unserem ersten Grundig Farbfernseher mit Ultraschallfernbedienung

[Prof. Dr. Peter Henning]

Ich denke, dass eine Nixie-Emulation nicht dreidimensional sein muss - aber alle Ziffern als SVG-Pfade enhalten sollte, von denen nur jeweils einer - als Simulation des Glühens - anders eingefärbt werden kann. Idealerweise durch eine SVG-Animation, natürlich.

Master Branch updaten.

Hmmm... So etwas gehört m.E. in den contrib-Ordner...

Als SVG-Grundkurs kann ich das entsprechende Kapitel in meinem "Taschenbuch Multimedia" empfehlen, erste Auflage 2000. Bei Gelegenheit suche ich das mal heraus (aus der 4. Auflage natürlich) und stelle es hier zur Verfügung. Kann aber ein paar Tage dauern...


LG

pah

[Waldmensch]

Ich glaube nicht, dass man die Tiefe einer Röhre ansehnlich dargestellt kriegt. Zudem muss man da sicher mit Bezier Kurven arbeiten um das halbwegs originalgetreu hinzubekommen. Da kommt man ohne Editor nicht mehr aus.
Ich habe mal quergegoogled, scheinbar hat sich da auch noch niemand rangetraut, an eine SVG Umsetzung.


Gesendet von iPhone mit Tapatalk

[Prof. Dr. Peter Henning]

oXygen XML Editor. trial-Lizenz geht 4 Wochen ...


LG

pah

[Waldmensch]

Ich habe mal ein Github Repo erstellt. Im Master Branch ist die aktuelle Version, im Development Branch fließen Updates ein und werden nach dem Testen in den Master gemerged.

https://github.com/Waldmensch1/fhem_ftui_widgets

[Thorsten Pferdekaemper]

Hi,
Das Teil gefällt mir gut und ich überlege mir gerade, dafür eine View für FUIP zu bauen. Daher habe ich mal ein bisschen damit herumgespielt. Folgendes ist mir aufgefallen:

Die Farben stimmen nicht mit den sonstigen Farben in FTUI überein. Z.B. ist "green" in 7segment anders als z.B. im label Widget. Das liegt daran, dass das 7segment Widget die Farben direkt benutzt und nicht die u.U. gleichnamigen Css-Klassen der FTUI Stylesheets. Ich denke mal, folgendermaßen wäre es richtig (oder "FTUI-Konform"):

Code Auswählen Erweitern


function getFtuiColor(color) {
return ftui.getStyle('.' + color, 'color') || color;
};

    function setColor(itm_index, value) {
        var _value = parseFloat(value);
        for (var i = items[itm_index].limits.length - 1; i > -1; i--) {
            if (_value >= items[itm_index].limits[i]) {
                for (var j = 0; j < items[itm_index].no_digits; j++) {
                    var g = items[itm_index].svgobj.getElementById("digit" + j);
                    g.setAttribute("fill", getFtuiColor(items[itm_index].limit_colors[i]));
                }
                return;
            }
        }
        // no matches in limits
        for (var j = 0; j < items[itm_index].no_digits; j++) {
            var g = items[itm_index].svgobj.getElementById("digit" + j);
g.setAttribute("fill", getFtuiColor(items[itm_index].fgcolor));
        }
    }

Du siehst wahrscheinlich, was ich meine.

Der nächste Punkt ist die Farbe des Punkts wenn man data-limits und data-limit-colors verwendet. Der Punkt wird nämlich immer mit der Farbe laut data-color-fg eingefärbt, hier werden die limits nicht beachtet. Ich gehe davon aus, dass das nicht so gewollt ist.

Schön wäre auch noch, wenn man eine Zeit (22:08 oder 22:08:45) bzw. ein Datum (12.11.2019) anzeigen könnte. Das Datum würde ich vielleicht noch hinbekommen, aber für den Doppelpunkt fehlt mir irgendwie die "künstlerische Begabung". Beim Datum müsste man ggf. auch ein bisschen mehr Platz für den Punkt machen.

Jetzt noch zum Thema "wie ausliefern". Du kannst das im Prinzip so machen, wie auch FTUI ausgeliefert wird. D.h. mit einer eigenen controls-Datei. Dazu musst Du Dir überlegen, wie Dein "Paket" heißen soll, z.B. mal "waldmensch". Dann muss Deine Datei "controls_waldmensch.txt" heißen und folgenden Inhalt haben:

Code Auswählen Erweitern


DIR www/tablet/js
UPD 2019-11-12_21:15:45 10557 www/tablet/js/widget_7segment.js

Das Datum/Zeit-Feld ist die letzte Änderungszeit und die Zahl danach die Größe der Datei.
Diese Datei kommt dann in Dein Git-Repo auf die oberste Ebene, also da, wo jetzt Deine widget_7segment.js liegt.
Die widget_7segment.js muss dann allerdings in Deinem Repo auch in www/tablet/js liegen.

Dann kann man per
"update add https://raw.githubusercontent.com/Waldmensch1/fhem_ftui_widgets/master/controls_waldmensch.txt" Dein Repo zu FHEM hinzufügen. Danach dann einfach "update all waldmensch" und Dein Widget wird in FHEM installiert bzw. bekommt ein update.

Gruß,
   Thorsten

[Waldmensch]

Cool! Danke für so viel Input, ich setze mich nachher gleich dran. Der ,,clockmode" ist in der working copy schon fertig, allerdings habe ich ihn nur hh:mm vorgesehen und wollte ihn automatisch per js Intervall laufen lassen. Der Part fehlt noch, deshalb habe ich es noch nicht in den Dev Branch committed Eventuell nur ein TZ Korrekturwert als Attribut falls sich wer eine Weltzeit Uhr bauen will. Eine Uhr sekündlich per Reading zu füttern, halte ich für Unsinn.
Das Format hh:mm nur deshalb, weil man auf dem Tablet nie Platz hat und für den schnellen Blick aus dem Augenwinkel die Größe entscheidend ist und die Sekunden meist irrelevant.

Bezüglich der Farben hast Du in allen Punkten Recht. Da habe ich einfach nicht dran gedacht bzw. den Dezimalpunkt schlicht vergessen. Ich bin nicht wirklich Frontend Entwickler und das sind meine ersten Schritte überhaupt. mit SVG und co.


Gesendet von iPhone mit Tapatalk

[Waldmensch]

Ich habe mal ein paar Sachen in den Development Branch committed

- Farben gehen jetzt synchron mit den FTUI Farben
- Dezimalpunkt wird jetzt auch in der richtigen Farbe dargestellt
- clockmode zugefügt

Code Auswählen Erweitern

data-view = "clock4"

Die Uhr läuft automatisch los und benutzt die Systemzeit des Tablets. Refresh alle 5 Sekunden.

https://github.com/Waldmensch1/fhem_ftui_widgets/tree/development

[Thorsten Pferdekaemper]

Eventuell nur ein TZ Korrekturwert als Attribut falls sich wer eine Weltzeit Uhr bauen will.

Das wird im clock Widget schon so gemacht. D.h. man kann sich die Server-Zeit anzeigen lassen.  Im Prinzip funktioniert das so, dass sich das Ding die Server-Zeit holt:

Code Auswählen Erweitern


ftui.sendFhemCommand('{localtime}')

...und dann daraus die Differenz zur Client-Zeit berechnet. Das muss man nur einmal am Anfang machen.

Code Auswählen Erweitern


Eine Uhr sekündlich per Reading zu füttern, halte ich für Unsinn.

Das ist wahrscheinlich tatsächlich nicht sehr sinnvoll. Allerdings kann es sinnvoll sein, sich einen Timestamp inklusive Sekunden anzeigen zu lassen. Außerdem muss man die Zeit ja nicht per Reading ermitteln, sondern kann sie direkt im Browser holen (wie Du es jetzt ja auch machst).

Code Auswählen Erweitern


Das Format hh:mm nur deshalb, weil man auf dem Tablet nie Platz hat und für den schnellen Blick aus dem Augenwinkel die Größe entscheidend ist und die Sekunden meist irrelevant.

Hast Du Dir schonmal das Widget "analogclock" angeschaut. Die Sekunden mögen zwar meistens irrelevant sein, aber es sieht einfach cooler aus, wenn sich da was bewegt.
Außerdem hätte ich gerne eine Eieruhr in FHEM...

Code Auswählen Erweitern

Ich bin nicht wirklich Frontend Entwickler
Aber das Design ist ganz gut gelungen, meiner Meinung nach. ...oder ist das von irgendwo kopiert?

Ich habe mal ein paar Sachen in den Development Branch committed

Ich werde das später mal ausprobieren.

Gruß,
   Thorsten

[Prof. Dr. Peter Henning]

Außerdem hätte ich gerne eine Eieruhr in FHEM...

Du meinst sicher eine Sanduhr. Mit Eiern wird das eher selten realisiert...

LG

pah

[Waldmensch]

Die 7 Segmente als SVG pathes gibt es auf Wikipedia. Dort habe ich es her. Das drumherum und die leicht gekippte Darstellung habe ich selbst gebaut.

Jo, mit 6-stellig hast Du natürlich recht. Ich habe selber auch ein paar HourCounter meiner Gartenbewässerung in FTUI, die sind derzeit noch als Text dargestellt. Ich habe den aktuellen View deshalb vorsorglich clock4 genannt. Da ist noch Raum für clock6 und clockview4 und clockview6. Bislang kam nicht viel Feedback, daher bin ich da ein bisschen auf ,,standby"

Ich hatte beim gauge Widget ein paar CPU Probleme, da ich die ,,soft move" Bewegungen der Zeiger anfangs per JS 10-20mS intervall realisiert hatte (jetzt sind die mit animations umgesetzt) Da ist das Chrome Tab schon mal auf 80% gegangen, wenn ein Update kam. Deshalb habe ich da ein bisschen Muffe vor zu viel Intervallen.

Bezüglich TZ dachte ich eigentlich an ein frei konfigurierbares Attribut. Falls jemand zum Beispiel die New York oder Tokio Zeit darstellen möchte. Wobei man dann wahrscheinlich auch noch die DST einfließen lassen müsste oder man gleich mit UTC +/- x arbeiten muss. Ich guck mir das clock Widget diesbezüglich mal an.

Gesendet von iPhone mit Tapatalk

[Thorsten Pferdekaemper]

Du meinst sicher eine Sanduhr. Mit Eiern wird das eher selten realisiert...

Nein, ich meinte Eieruhr, auch "Kurzzeitwecker" genannt:
https://de.wikipedia.org/wiki/Kurzzeitwecker
Gruß,
   Thorsten