FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Prof. Dr. Peter Henning am 30 Mai 2025, 17:17:43

Titel: FTUI3 Uhrzeit und Datum anzeigen
Beitrag von: Prof. Dr. Peter Henning am 30 Mai 2025, 17:17:43
Natürlich kann ich die aktuelle Uhrzeit und das Datum von FHEM holen und auf einer FTUI3-Seite anzeigen.
Allerdings scheine ich in ein Synchronisationsproblem zu laufen, wenn ich die lokale Javascript-Zeit auf dem anzeigenden Gerät verwende.

Hat jemand dazu ein funktionierendes Beispiel?

Würde ich dann auch unter "Best Practices" ins Wiki stellen.

LG

pah
Titel: Aw: Uhrzeit und Datum anzeigen
Beitrag von: Guybrush am 30 Mai 2025, 19:47:48
mit ntp auf dem fhem server/ftui client, die auf den gleichen ntp server gehen sollte es keine sync probleme geben?
Titel: Aw: Uhrzeit und Datum anzeigen
Beitrag von: NewRasPi am 30 Mai 2025, 20:09:50
Hallo Herr pah
ich habe auf meinem Flurplan dieses at als Uhrzeit eingebaut.
defmod Uhrzeit at +*00:00:30 {fhem "set Uhrzeit $hms"}
attr Uhrzeit DbLogExclude .*
attr Uhrzeit fp_Lageplan 579,37,0,Uhr,
attr Uhrzeit verbose 0

setstate Uhrzeit Next: 20:07:01
setstate Uhrzeit 2025-05-30 20:06:31 state Next: 20:07:01
Primitiv, aber mit einer kleinen "ungenauigkeit" gehts.
Viele Grüße
Titel: Aw: Uhrzeit und Datum anzeigen
Beitrag von: Prof. Dr. Peter Henning am 31 Mai 2025, 11:32:55
Nein, so war es natürlich _nicht_ gemeint.

Was funktioniert ist das Folgende. Hier wird zunächst eine lokale Funktion getTime definiert, die alle 5 Sekunden (das reicht) die Zeit und das Datum aktualisiert.
Dann zwei Funktionen fhem_time und fhem_date, die einen beliebigen Eingabeparameter einfach durch den Inhalte des Zeit- bzw. Datumsspeichers ersetzen.
var localtime;
var localdate;

var wda =[ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
var mma =[ "Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];


setInterval(getTime, 5000);

function getTime() {
    let d = new Date();
    let hour = d.getHours();
    let min = d.getMinutes();
   
    hour = hour < 10 ? "0" + hour: hour;
    min = min < 10 ? "0" + min: min;
   
    localtime = hour + ":" + min;
   
    let wd = wda[d.getDay()];
   
    let dd = d.getDate();
    let mm = mma[d.getMonth()];
    let yy = d.getFullYear();
   
    localdate = wd + ', ' + dd + '.' + mm + ' ' + yy;
}

getTime();

function fhem_time(input) {
    return localtime;
};

function fhem_date(input) {
    return localdate;
};

const ftui_time = () => input => fhem_time(input);
const ftui_date = () => input => fhem_date(input);
Diese beiden Funktionen kann man dann problemlos in einer FTUI3-Pipeline verwenden, die ein sowieso hereinkommendes Event ausnutzt:
    <div style="position:absolute;left:300px;top:20px;width:300px">
      <ftui-label class="size-3" [text]="PowerFlow:power_summary_out | ftui_time()"
        style="font-family:Helvetica;font-size:70px;font-weight:bold;color:#cd2626">
      </ftui-label>
      </div>
      <div style="position:absolute;left:300px;top:50px;width:300px">
      <ftui-label class="size-2" [text]="PowerFlow:power_summary_out | ftui_date()"
        style="font-family:Helvetica;font-size:30px;font-weight:bold;color:blue">
      </ftui-label>
      </div>
Was _noch nicht_ funktioniert ist, FTUI3 einen Event-Listener hinzuzufügen, der auf die Veränderung der lokalen Variablen localtime und localdate reagiert. Das sollte aber irgendwie gehen.

Das Synchronisationsproblem bezieht sich also darauf, dass die Anzeige mit dem o.a. Code nur aktualisiert wird (dann allerdings mit 5 Sekunden Genauigkeit), wenn ein PowerFlow:power_summary__out Event einläuft.


Zitat von: Guybrush am 30 Mai 2025, 19:47:48mit ntp auf dem fhem server/ftui client
Nein, und so war es schon gar nicht gemeint. Selbstverständlich haben die Anzeigedevices eine saubere Zeitsynchronisation per ntp.

LG

pah
Titel: Aw: FTUI3 Uhrzeit und Datum anzeigen
Beitrag von: Eisix am 31 Mai 2025, 23:52:33
Hallo,

Wahrscheinlich auch nicht was du meinst:


<ftui-clock format="eeee" class=""></ftui-clock>
<ftui-clock format="DD.MM.YYYY" class=""></ftui-clock>
<ftui-clock format="hh:mm" class=""></ftui-clock>

Und das nutze ich auch noch:

<ftui-label [text]="REFRESH" class="size-0"></ftui-label>

Gruß
Eisix
Titel: Aw: FTUI3 Uhrzeit und Datum anzeigen
Beitrag von: Prof. Dr. Peter Henning am 01 Juni 2025, 13:57:00
Zitat von: Eisix am 31 Mai 2025, 23:52:33<ftui-clock format="eeee" class=""></ftui-clock>
<ftui-clock format="DD.MM.YYYY" class=""></ftui-clock>
<ftui-clock format="hh:mm" class=""></ftui-clock>
So halb - löst zwar das Problem der Uhrzeitanzeige, nach dem ich gefragt hatte. Also danke dafür, mich auf das Beispiel clock.html hinzuweisen.

Ich will aber eigentlich etwas Generisches haben, das auf beliebige lokale JavaScript-Variablen zugreift - mal sehen, vielleicht kann ich den Code in components/clock/clock.component.js etwas modifizieren.

An die Maintainer noch ein Vorschlag: Wenn man in modules/ftui/ftui-helper.js noch einfügt
  const MMMM = (lang === 'de') ? months_de[month] : months[month];
  const MMM = MMMM.substring(0,3);  # <==== Neue Zeile
  ...
  ret = ret.replace('MMMM', MMMM);
  ret = ret.replace('MMM',MMM); # <==== Neue Zeile
erweitert das die Formatierungsoptionen noch um "MMM" für eine dreibuchstabige Abkürzung des Monats.

LG

pah
Titel: Aw: FTUI3 Uhrzeit und Datum anzeigen
Beitrag von: Prof. Dr. Peter Henning am 04 Juni 2025, 19:20:51
Hier jedenfalls der Wiki-Eintrag:

https://wiki.fhem.de/wiki/FTUI3_Digitaluhr

LG

pah