FTUI3 Uhrzeit und Datum anzeigen

[Prof. Dr. Peter Henning]

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

[Guybrush]

mit ntp auf dem fhem server/ftui client, die auf den gleichen ntp server gehen sollte es keine sync probleme geben?

[NewRasPi]

Hallo Herr pah
ich habe auf meinem Flurplan dieses at als Uhrzeit eingebaut.

Code Auswählen Erweitern

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:01Primitiv, aber mit einer kleinen "ungenauigkeit" gehts.
Viele Grüße

[Prof. Dr. Peter Henning]

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.

Code Auswählen Erweitern

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:

Code Auswählen Erweitern

    <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.

mit 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

[Eisix]

Hallo,

Wahrscheinlich auch nicht was du meinst:

Code Auswählen Erweitern


<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:

Code Auswählen Erweitern

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

Gruß
Eisix

[Prof. Dr. Peter Henning]

<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

Code Auswählen Erweitern

  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

[Prof. Dr. Peter Henning]

Hier jedenfalls der Wiki-Eintrag:

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

LG

pah