Hallo,
neu ist etwas zu früh. Habe mich von der Uhr beim Smartvisu inspirieren lassen und habe versucht das ganze mal für FTUI zu basteln. (Betonung liegt auf Basteln)
Habe leider kein Javascript wissen somit ist es bestimmt auch ziemlich buggy. Also nicht direkt drauf losschlagen.
Genutzt habe ich das hier:
http://flipclockjs.com/
Installation:
widget_flipclock.js -> in den JS Ordner wo alle Widgets liegen.
flipclock.css & flipclock.js -> in den Ordner lib dort dann einen neuen Ordner flipclock.
Strucktur ist auch in der ZIP.
<div
data-type="flipclock"
data-showseconds="false"
data-clockface="TwelveHourClock"
class="clock top-narrow">
</div>
data-clockface kann TwelveHourClock oder TwentyFourHourClock(default) sein.
data-showseconds true oder false
css class "clock-05" oder "clock-08" zoomt etwas die Größe.
Ist mein erstes widget also bitte mal gucken ob das alles so koscher ist. :)
Mein Problem ist zurzeit das ich das widget nur einmal einbinden kann bzw. es nur einmal angezeigt wird.
Hängt damit zusammen das das flipclock.js Javascript die Flipclock an der Stelle einhängt an der ich die entsprechende Div ID platziere.
Hat jemand für mich eine Lösung wie ich das am besten machen kann?
Grüße
Torte
Version 0.2 Austausch der widget_flipclock.js und flipclock.css
Kleines Update, auch nach einem Standby zeigt die Flipclock jetzt die richtige Uhrzeit an.
<div
data-type="flipclock"
data-showseconds="false"
data-clock-flip-bg="#4a4a4a"
data-clock-flip-font-color="#dedbdb"
class="clock clock-08 top-narrow">
</div>
Die Farbe der Flipclock kann nun angepasst werden.
Version 0.2
Kleines Update,
auch nach einem Standby zeigt die Flipclock jetzt die richtige Uhrzeit an.
Die Farbe der Flipclock kann nun angepasst werden.
Geänderte Dateien sind im ersten Post, Austausch der widget_flipclock.js und flipclock.css
Servus torte,
ich wollte gerade das Widget einmal testweise bei mir einbauen. Leider bekomme ich es nicht ans Laufen da FTUI immer meckert:
flipclock.js 106:
SyntaxError: function statement requires a name
und
index.html 1
ReferenceError: FlipClock is not defined
Mein Fehler oder übersehe ich etwas?
Hi tomster,
uppppppppppppps.
Hab gerade erst deine Frage gesehen.
Hast Du das Problem noch?
Grüße
Torte
Servus Torte,
ich vermute, ja. Ich hab das Widget wieder rausgenommen. Kann es aber erst während der Woche wieder einbauen.
Hi torte,
heute habe ich mir mal etwas Zeit genommen, um meine Analogclock durch die Flipclock auszutauschen. Leider ohne Erfolg :(
Ich konnte die Flipclock erfolgreich innerhalb einer Seite darstellen, jedoch brauche ich sie als Teil meiner Navigationsleiste. An der Größe kann es nicht liegen, hatte bereits die css mal mit einem noch kleineren Zoomfaktor angepasst. Im Anhang meine index_test.html zum Testen.
Danke vorab für deine Hilfe ;).
Viele Grüße
Andreas
Hi Andreas,
ich bastel gerade dadran, komme aber wegen meiner begrenzten Zeit da nicht schnell voran.
Wenn Du magst kann ich dir die aktuellen Dateien mal zukommen lassen.
Was zur Zeit schon geht, die Uhr kann an mehren Stellen angezeigt werden.
Was passiert denn wenn Du die Uhr in der Navigationsleiste anzeigen lässt, ist es verschoben?
Grüße
Torte
Sorry, hab das Bildchen jetzt gesehen.
8)
Ist das mit Sekunden, probiere mal ohne.
Hi Andreas,
weiß nicht mehr warum ich bin davon weggegangen die Uhr im Menü. Hab das jetzt wie ähnlich smartvisu nur auf der Homepage/Statusseite des TabeltUI
Die Seite wir bei mir nach 2 Minuten default wieder angezeigt.
Grüße
Torte
Hi Torte,
habe ohne Sekunden und auch mit kleinerem Zoom getestet. Meine index.html ist im Post angehangen (neben den Screenshots) ;)
Auf meiner Startseite habe ich keinen Platz, muss die Uhr akso zwingend ins Menü packen.
Danke und Gruß
Andreas
Hi Andreas,
ja, habs gerade ausprobiert, liegt dadran das die Flipclock was CSS erbt aus der Class "menu".
Kannst ja mal testweise die class menu ändern in menu----.
Grüße
Torte
Hi Andreas,
füge mal in der flipclock.css folgendes hinzu:
ca. Zeile 38, 95
.flip-clock-wrapper ul
.flip-clock-wrapper ul li
zusätzlich immer das hier:
padding: 0em 0;
also 2mal
Grüße
Torte
Zitat von: torte am 07 Mai 2019, 09:42:36
Hi Andreas,
füge mal in der flipclock.css folgendes hinzu:
ca. Zeile 38, 95
.flip-clock-wrapper ul
.flip-clock-wrapper ul li
zusätzlich immer das hier:
padding: 0em 0;
also 2mal
Grüße
Torte
Hi Torte,
wir kommen der Lösung näher :). Jetzt stört nur noch der Doppelpunkt auf der linken Seite (siehe Bild im Anhang)....
Danke und Gruß
Andreas
Hi Andreas,
Dann musste noch unter .flip-clock-divider das hier eintragen.
padding: 0em 0em !important;
Grüße
Torte
Hi Torte,
PERFEKT :)
Ich habe noch zusätzlich die Zoomfaktoren erweitern, jetzt 03, 04, 05, 06, 07, 08, 09
Alle Änderungen sind im Zip. Kannste ja als v0.3 im ersten Post aktualisieren....
Danke und Gruß
Andreas
Hi Andreas,
Cool danke, mache ich, mit der neuen Version ... bald[emoji39].
Grüße
Torte
Gesendet mit Tapatalk
Hier passiert Folgendes:
FTUI per Laptop auf dem orignalen RPi aufegrufen - Zeit stimmt
FTUI per 2. RPi, mit Display dran, aufgerufen - geht stark nach
Das Display ist nicht dauernd an, wird über Bewegungsmelder gesteuert, ähnlich Smart-Mirror.
Liegt das am FTUI, an Flipclock oder noch ganz wo anderst?
Alle anderen Widgets sind aktuell, z.B. Mülltonnen, Termine etc.
Zitat von: Neuhier am 19 Mai 2019, 17:20:34
Hier passiert Folgendes:
FTUI per Laptop auf dem orignalen RPi aufegrufen - Zeit stimmt
FTUI per 2. RPi, mit Display dran, aufgerufen - geht stark nach
Das Display ist nicht dauernd an, wird über Bewegungsmelder gesteuert, ähnlich Smart-Mirror.
Liegt das am FTUI, an Flipclock oder noch ganz wo anderst?
Alle anderen Widgets sind aktuell, z.B. Mülltonnen, Termine etc.
Ich habe manchmal den gleichen Effekt auf meinem Display (iOS, websocket). Das Display ist permanent an.
OK, also bilde ich mir das nicht ein. ::)
Der RPi, wo FTUI drauf läuft, gibt aber in der Konsole die richtige Zeit an.
Gehe ich z.B. mit VNC auf den RPi, dann Firefox aktualisieren, nimmt er die richtige Zeit und behält die auch eine Weile.
Kann ich das remote irgendwie mit einem Script machen lassen?
Guten Morgen,
habt ihr die JS aus Post 1. genommen? die im ZIP ist noch die alte v.1
Bei mir fluppt das, egal wann sobald der Browser, Fully und Chrome getestet, wieder gestartet wird, aktualisiert sich die FlipClock.
Grüße
Torte
Hallo,
ich hätte gerne die Uhr noch etwas größer.
Ich hab einfach in der css Datei diese Zeile weiter hochskaliert bekomme aber keine änderung.
Allerdings hab ich null Erfahrung in der programmierung. Was müsste ich den in dem file noch ändern?
.clock-03 {
zoom: 0.3;
-moz-transform: scale(0.3);
}
.clock-04 {
zoom: 0.4;
-moz-transform: scale(0.4);
}
.clock-05 {
zoom: 0.5;
-moz-transform: scale(0.5);
}
.clock-06 {
zoom: 0.6;
-moz-transform: scale(0.6);
}
.clock-07 {
zoom: 0.7;
-moz-transform: scale(0.7);
}
.clock-08 {
zoom: 0.8;
-moz-transform: scale(0.8);
}
.clock-09 {
zoom: 0.9;
-moz-transform: scale(0.9);
}
clock-10 {
zoom: 1.0;
-moz-transform: scale(1.0);
}
Ach geht doch..:)