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
<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>
Irgendwie scheinst Du ein Freund von Retro-Displays zu sein 8)
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
ZitatIrgendwie 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.
Die Nixies kenn' ich noch von unserem ersten Grundig Farbfernseher mit Ultraschallfernbedienung :)
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.
ZitatMaster 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
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
oXygen XML Editor. trial-Lizenz geht 4 Wochen ...
LG
pah
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
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"):
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:
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
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
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
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
Zitat von: Waldmensch am 13 November 2019, 05:18:44Eventuell 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:
ftui.sendFhemCommand('{localtime}')
...und dann daraus die Differenz zur Client-Zeit berechnet. Das muss man nur einmal am Anfang machen.
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).
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...
Ich bin nicht wirklich Frontend EntwicklerAber das Design ist ganz gut gelungen, meiner Meinung nach. ...oder ist das von irgendwo kopiert?
Zitat von: Waldmensch am 13 November 2019, 08:18:31
Ich habe mal ein paar Sachen in den Development Branch committed
Ich werde das später mal ausprobieren.
Gruß,
Thorsten
ZitatAußerdem hätte ich gerne eine Eieruhr in FHEM...
Du meinst sicher eine Sanduhr. Mit Eiern wird das eher selten realisiert...
LG
pah
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
Zitat von: Prof. Dr. Peter Henning am 13 November 2019, 08:51:00
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
Hmmm - wie wäre es denn damt:
http://kotsanas.com/de/exh.php?exhibit=0204006
LG
pah
Ich habe im Dev Branch mal data-view = "clock6" zugefügt.
Hi,
ich habe das jetzt mal in FUIP eingebaut (bei mir lokal erstmal) und ein bisschen rumgespielt. Wirkt schon ein bisschen retro. :)
Für alle FUIP-Benutzer, die hier mitlesen: Ich werde das morgen oder so "ausliefern".
@Waldmensch: Damit das in FUIP ohne Probleme funktioniert, werde ich Deine Datei erst einmal auch mit FUIP ausliefern.
Gruß,
Thorsten
Jupp, kein Problem. Stell Dich aber drauf ein, dass noch öfters updates kommen. Ich hänge derzeit noch auf Arbeit ganz schön voll, aber ab Dezember habe ich den Rest des Jahres frei. ;)
Falls jemand Bugs finden sollte, ich sammle sowas. :)
Gesendet von iPhone mit Tapatalk
Falls Du noch eine Wetterstation als Bildschirmschoner vorsetzen willst guck Dir mal das Gauge Widget an. Liegt auch im Repo
Sodele, FUIP kann das jetzt:
https://forum.fhem.de/index.php/topic,105374.0.html
Zitat von: Waldmensch am 13 November 2019, 23:19:34
Jupp, kein Problem. Stell Dich aber drauf ein, dass noch öfters updates kommen.
Das ist schon ok. Ich will in FUIP halt nur so gut wie möglich sicherstellen, dass man für neue Sachen nur ein update machen muss und sonst nichts.
Zitat von: Waldmensch am 13 November 2019, 23:27:42
Falls Du noch eine Wetterstation als Bildschirmschoner vorsetzen willst guck Dir mal das Gauge Widget an. Liegt auch im Repo
Das sieht auch nett aus, aber jetzt muss ich erstmal ein paar andere Sachen hinbekommen.
Außerdem glaube ich, dass die meisten eher Bildchen mit Sonne und Wolken haben wollen. Aber wahrscheinlich werde ich das auch irgendwann mal einbauen.
Gruß,
Thorsten
Coole Widget. Ich nutze es für meine Temerpaturanzeige.
Besteht die Möglichkeit, dass man die Anzeige optional um " ° " Grad, erweitern kann???
Hallo,
ich baue gerade an dem Beispiel zu 7 Segments aus den Corona-Beispielen.
<td>DEUTSCHLAND</td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_cases" data-decimals ="0"
data-digits ="8" data-color-fg="orange" ></div></td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_active" data-decimals ="0"
data-digits ="8" data-color-fg="lightblue" ></div></td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_todayCases" data-decimals ="0"
data-digits ="8" data-color-fg="lightblue" ></div></td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_recovered" data-decimals ="0"
data-digits ="8" data-color-fg="green" ></div></td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_deaths" data-decimals ="0"
data-digits ="6" data-color-fg="red" > </div></td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_todayDeaths" data-decimals ="0"
data-digits ="4" data-color-fg="red" ></div></td>
</tr>
Bei mir ist es so, dass eben nicht alle Segmente in eine Zeile passen. Komischerweise wird das vorletzte Semnet sehr klein dargestellt, währen Segment 2 und 3 die Größten (Übergross) sind.
Wie kann man innerhalb der Segmente die jeweilige Schriftgröße verändern.
Danke für die Hilfe
Jörg
Das Widget passt sich in der Weite, und damit auch proportional in der Höhe, an die Größe das umgebenen Elements an. Diesem musst Du eine fixe Größe verpassen per style =,,width:100px" oder so
Gesendet von iPhone mit Tapatalk
Zitat von: Waldmensch am 29 März 2020, 23:04:22
Das Widget passt sich in der Weite, und damit auch proportional in der Höhe, an die Größe das umgebenen Elements an. Diesem musst Du eine fixe Größe verpassen per style =,,width:100px" oder so
Gesendet von iPhone mit Tapatalk
Hallo,
das hätte ich auch vermutet bzw. erhofft.
Bei mir sieht es aber so aus (vgl. Bild)
<li class="halbTransparent" data-row="2" data-col="2" data-sizex="7" data-sizey="6">
<table border="0" width="99%" class="small">
<tr>
<th>Land</th>
<th>Gesamt</th>
<th>best. Infektionen<br></th>
<th>Neuinfektionen</th>
<th>geheilte</th>
<th>✝</th>
<th>heute ✝<br></th>
</tr>
<tr>
<td>DEUTSCHLAND</td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_cases" data-decimals ="0"
data-digits ="6" data-color-fg="orange" class="small"></div></td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_active" data-decimals ="0"
data-digits ="6" data-color-fg="lightblue" ></div></td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_todayCases" data-decimals ="0"
data-digits ="5" data-color-fg="lightblue" ></div></td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_recovered" data-decimals ="0"
data-digits ="5" data-color-fg="green" ></div></td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_deaths" data-decimals ="0"
data-digits ="5" data-color-fg="red" > </div></td>
<td><div data-type = "7segment" data-get-value = "coronaSpread:Germany_todayDeaths" data-decimals ="0"
data-digits ="4" data-color-fg="red" ></div></td>
</tr>Wo liegt also mein Fehler, dass ich faktisch 3 unterschiedliche Größen in der jeweiligen Zeile habe.
Danke für die Hilfe
Jörg
Gib doch mal den <td style =,,width:50px;"> mit oder dem Widget div selbst, sollte eigentlich auch gehen. Bei den Digits musst du aufpassen. Weniger digits dehnen sich weiter aus, da mehr Platz. Das zieht dann immer auch die Höhe mit
Gesendet von iPhone mit Tapatalk
Ich hätte da noch 2 Fragen, wenn man die 7-segment Anzeige für Benzinpreise nutzen möchte:
- gehen mehr 2 Dezimalstellen (hier würde man 3 benötigen)?
- warum rundet das Widget bei 2 Dezimalstellen?
Ohne jetzt vorm Code zu sitzen, Ich glaube, Ich hatte damals einen Parameter ,,data-decimals" eingebaut. Was passiert, wenn Du den auf 3 setzt?
Gesendet von iPhone mit Tapatalk
Ja, den Parameter gibt es. Setze ich ihn auf 3, werden die Nachkommastellen abgeschnitten (wie wenn er 0 wäre).
Okay, ich versuche mal am WE etwas Zeit zu finden, in den Code zu schauen. Der Source ist auf GitHub, falls wer schneller ist -> Mergerequest.
Gesendet von iPhone mit Tapatalk
@DerFranke:
ich habe mal eine Änderung in den Development Branch committed. Probier die mal mit 3 decimals https://github.com/Waldmensch1/fhem_ftui_widgets/tree/development
@Waldmensch:
Tiptop, danke, klappt prima. :)
Allerdings habe ich mit dem download etwas gekämpft, er wollte immer denn ganzen Seitenquelltext als .js.html statt der Datei als .js abspeichern. Aber vielleicht ist das nur meiner geringen Linux-Erfahrung geschuldet.
Zum Layout noch etwas: gibt es noch eine andere Methode als <td style="width:75px;"> für die Größe?
Das Element selbst ist ja ein div, also könntest Du auch diesem eine style width mit fixer Breite geben.
Git bietet den Download des Repo als ZIP an. Dort drin sollte sich die js Datei dann im ,,Normalzustand" befinden.
Gesendet von iPhone mit Tapatalk
Arrgh, für das zip-File brauche ich eine neue Brille -jetzt geht's :-)
Nochwas: kann man den Abstand der einzelnen Ziffern untereinander etwas vergrößern? Beispiel: 1.0 ist etwas eng und schwer lesbar, weil da die beiden senkrechten Striche mit dem Dezimalpunkt zusammenstoßen.
Ich habe mal eine Änderung committed. Es gibt jetzt ein zusätzliches Attribut data-wide. Wenn das auf ,,1" gesetzt ist, wird der Abstand zwischen den digits vergrößert. Wenn es fehlt oder auf ,,0" gesetzt ist, gilt die bisherige Darstellung. Das gilt nicht für den clockmode.
Probier es mal aus.
Gesendet von iPhone mit Tapatalk
Jo, so schaut es gut aus.
Danke @Waldmensch
OK, dann passe ich das für den Clockmode noch an und merge es in den master branch.
Gesendet von iPhone mit Tapatalk
@Thorsten Pferdekaemper: ich habe mal die letzten Änderungen in den Master Branch gemerged. Falls Du das 7-Segment Widget noch mit FUIP auslieferst, kannst Du es Dir von da picken https://github.com/Waldmensch1/fhem_ftui_widgets
Hallo Waldmensch,
ich habe mit großem Interesse das Gauge-Widget installiert und finde es super. Eine Frage jedoch zu der Temp/Hum-Gauge: Könnte man die (vielleicht mit Schalter) auch für aussen machen? ich denke bis -20° - 25° sollte reichen. so kann man sich nicht nur für die Räume die Werte anzeigen lassen.
viele Grüße Ralf
Momentan ist mein Zeitkontingent sehr limitiert. Ich versuche mal ein paar Stunden zu finden. Meines Erachtens war da aber ein reines Thermometer dabei was tiefer ging. Das Kombinierte Hygrometer mit Komfortbereich macht ja nicht viel Sinn. Habe aber lange nicht mehr reingeschaut.
Edit: guck mal Beitrag #19 das Bild an. Rechts unten. Das Thermometer geht bis -30 Grad. Das war eigentlich als Außenthermometer vorgesehen.