FHEM Forum

Moin. Hier mein zweiter Versuch, der deutlich gelungener ist! Die alte Version habe ich komplett verworfen! Viel Spaß.


<div data-type="analogclock">
</div>

Stellt eine circa 100 Pixel große Analoguhr dar.


data-size
Ändert die Größe der Uhr.

<div data-type="analogclock"
     data-size="200">
</div>



data-body
Ändert das "Drumherum" der Uhr. Möglicher Inhalt:

   
• none    =   transparenter Hintergrund
• round   =   rundes, schwarzes Gehäuse. STANDARD
• small    =   runder, weißer Hintergrund.
• green   =   rundes, grünes Gehäuse (Österreich).
• square  =   quadratisches, blaues Gehäuse (Deutsche Bahn)
• vienna   =   Wiener Würfeluhr


<div data-type="analogclock"
     data-size="200"
     data-body="small">
</div>



data-body-color
Ändert die Hintergrundfarbe des Ziffernblatts.

<div data-type="analogclock"
     data-size="200"
     data-body-color="#AA6900">
</div>



data-stroke-color
Ändert die "Gehäusefarbe" bei data-body="round" bzw. den Standardwerten.

<div data-type="analogclock"
     data-size="200"
     data-body="round"
     data-stroke-color="#AA6900">
</div>



data-dial
Ändert die Darstellung des Ziffernblatts.

   
• none    =   Ohne Zifferblatt.
• hour    =   Zifferblatt mit Stundenstrichen (DIN 41091, Teil 3).
• full       =   Zifferblatt mit Minuten- und Stundenstrichen (DIN 41091, Teil 1). STANDARD
• austria  =   Zifferblatt mit Minuten- und Stundenstrichen (Österreich)
• swiss    =   Zifferblatt mit Minuten- und Stundenstrichen (Schweiz/Bauhaus)
• vienna   =   Zifferblatt mit Minuten- und Stundenstrichen (Wiener Würfeluhr)


<div data-type="analogclock"
     data-size="200"
     data-dial="swiss">
</div>



data-dial-color
Änder die Farbe der Stunden- und Minutenstriche.

<div data-type="analogclock"
     data-size="200"
     data-dial-color="green">
</div>



data-hour
Änder das Aussehen des Stundenzeigers.

   
• pointed   =   spitzer Balkenzeiger (DIN 41092, Teil 3) STANDARD
• bar         =   stumpfer Balkenzeiger (Deutsche Bahn)
• swiss      =   stumpfer, keilförmiger Zeiger (Schweiz/Bauhaus)
• vienna    =   Wiener Würfeluhr


<div data-type="analogclock"
     data-size="200"
     data-hour="swiss">
</div>



data-hour-color
Änder die Farbe des Stundenzeigers.

<div data-type="analogclock"
     data-size="200"
     data-hour-color="#3D4C66">
</div>



data-minute
Änder das Aussehen des Minutenzeigers.

   
• pointed   =   spitzer Balkenzeiger (DIN 41092, Teil 3) STANDARD
• bar         =   stumpfer Balkenzeiger (Deutsche Bahn)
• swiss      =   stumpfer, keilförmiger Zeiger (Schweiz/Bauhaus)
• vienna    =   Wiener Würfeluhr


<div data-type="analogclock"
     data-size="200"
     data-minute="vienna">
</div>



data-minute-color
Änder die Farbe des Minutenzeigers.

<div data-type="analogclock"
     data-size="200"
     data-minute-color="#468751">
</div>



data-second
Ändert das Aussehen des Sekundenzeigers.

   
• none       =   ohne Sekundenzeiger
• hole        =   Loch-Zeiger (DIN 41071, Teil 2)
• bar         =   Keil-Zeiger (DIN 41071, Teil 1) STANDARD
• swiss      =   Kellen-Zeiger (Schweiz)
• longhole  =   Loch-Zeiger (Deutsche Bahn)


<div data-type="analogclock"
     data-size="200"
     data-second="hole">
</div>



data-second-color
Änder die Farbe des Sekundenzeigers.

<div data-type="analogclock"
     data-size="200"
     data-second-color="yellow">
</div>



data-boss
Ändert das Aussehen des Mittelpunkt's / der Achsabdeckung.

   
• small      =   kleiner Mittelpunkt
• medium  =   mittelgrpßer Mittelpunkt
• big         =   großer Mittelpunkt
• none      =   kein Mittelpunkt


<div data-type="analogclock"
     data-size="200"
     data-boss="big">
</div>



data-boss-color
Änder die Farbe des Mittelpunkt's / der Achsabdeckung.

<div data-type="analogclock"
     data-size="200"
     data-boss="big"
     data-boss-color="red">
</div>



data-mbehave
Verhalten des Minutenzeigers.

   
• bounce   =   springender Minutenzeiger STANDARD
• ebounce  =   springender und federnder Minutenzeiger
• creep      =   schleichender Minutenzeiger


<div data-type="analogclock"
     data-size="200"
     data-mbehave="ebounce">
</div>



data-sbehave
Änder das Verhalten des Sekundenzeigers.

   
• bounce   =   springender Sekundenzeiger STANDARD
• ebounce  =   springender und federnder Sekundenzeiger
• creep      =   schleichender Sekundenzeiger
• hasty      =   voreiliger Sekundenzeiger


<div data-type="analogclock"
     data-size="200"
     data-sbehave="hasty">
</div>



Und "last but not least" habe ich ein Datum ins Ziffernblatt implementiert  ;D

data-date-color
Zeigt das aktuelle Datum in der angegebenen Farbe im Ziffernblatt (über allem. Zieger liegen hinter dem Datum).

<div data-type="analogclock"
     data-size="200"
     data-date-color="black">
</div>

Ohne data-date-color wird kein Datum dargestellt!



Die Uhr basiert auf der "Bahnhofsuhr" von 3quarks.com (http://www.3quarks.com) - Rüdiger Appel

Download:
https://github.com/roman1528/ftui_analogclock]https://github.com/roman1528/ftui_analogclock

Grüße^^

sieht super aus! werde ich heute Abend mal auf meiner Testseite integrieren !

Danke für das Widget, super Arbeit! :) Grad eingebunden und läuft ohne Probleme. Für den ersten Wurf auf jeden Fall brauchbar

Anbei schonmal der Erste Vorschlag für die (nächste ::)) kommende Version
Datum im Ziffernblatt anzeigen?  ;D

Grüße,
Florian

Hi Roman,

coole Idee , danke !

kleine Orientierungshilfe ....http://3quarks.com/de/Bahnhofsuhr/ (http://3quarks.com/de/Bahnhofsuhr/)

gruss klaus

Zitat von: kvo1 am 15 März 2016, 22:02:25
kleine Orientierungshilfe ....http://3quarks.com/de/Bahnhofsuhr/ (http://3quarks.com/de/Bahnhofsuhr/)

Ja so hatte ich es gemacht, weil ich die Frage nach einem widget ja schon letzte Woche gestellt hatte  ;D

Aber ich bin zu blöd, irgendwie läuft das widget bei mir nicht, aber ich habe auch gerade wieder massive Aktualisierungsprobleme.

UPDATE

https://forum.fhem.de/index.php/topic,50821.msg424373.html#msg424373

Zitat von: roman1528 am 17 März 2016, 18:46:03
UPDATE

https://forum.fhem.de/index.php/topic,50821.msg424373.html#msg424373

uiuiui, da hast ja mal richtig angepackt  ;D danke dafür  ;)

Danke für die Wiener Würfeluhr
werde ich mir ansehen wenn ich wieder auf mein Testsystem komme
Nice w/e
Helmut

Moin Roman,

Danke , da hast Du ja ALLES gegeben  :)

Gruss Klaus

ich würde die "Extrawurst" für alte Windows-Browser weglassen.


var isMSIE = /*@cc_on!@*/0;

if (isMSIE) {
  dynamicload('lib/jquery.analogclock.excanvas.js', null, null, false);
}


So alte Browser (<IE9) wird keiner mehr einsetzen, und wenn: selber schuld ...
Im Thermostat, Homestatus, Dimmer und Volume nutze ich auch nur das Standard HTML5 Javascript Canvas Element.

Zitat von: setstate am 19 März 2016, 09:48:41
ich würde die "Extrawurst" für alte Windows-Browser weglassen.

Code Auswählen Erweitern


var isMSIE = /*@cc_on!@*/0;

if (isMSIE) {
  dynamicload('lib/jquery.analogclock.excanvas.js', null, null, false);
}


So alte Browser (<IE9) wird keiner mehr einsetzen, und wenn: selber schuld ...
Im Thermostat, Homestatus, Dimmer und Volume nutze ich auch nur das Standard HTML5 Javascript Canvas Element.

Okay. Hab ich raus genommen :)

Grüße^^

P.S. Neue Version auf GitHub. Update nicht notwendig.

[UPDATE]

Wenn man die Analoguhr in einen "ScreenSaver" eingefügt hat und dabei PageTab verwendet (Screensaver auf der index.html) ist es dazu gekommen, dass die Uhr mehrfach geladen wurde. Bei mir waren es irgendwann 10 Stück...

Das habe ich behoben. Die Uhr erscheint jetzt definitiv nur einmal.

https://github.com/roman1528/ftui_analogclock (https://github.com/roman1528/ftui_analogclock)

Grüße^^

Neues Problem....

Wenn im Screensaver eine AnalogClock definiert ist wird sie auf anderen Seiten nicht mehr angezeigt (sie existiert ja bereits).

Ich bin dran das Problem zu beheben... weiß im Moment allerdigns noch nicht wie...

TIPP: entweder nur im ScreenSaver ODER nur auf der Seite eine AnalogClock verwenden... Beides geht im Moment einfach nicht..

Grüße^^

Sieht klasse aus.  Vielen Dank :)

Fett!!!

ist für das Widget eine Anpassung auf die aktuelle 2.2 in Planung?

Grüße,
Florian

Zitat von: takaze am 23 Mai 2016, 12:00:57
ist für das Widget eine Anpassung auf die aktuelle 2.2 in Planung?

Grüße,
Florian

Moin.

Jetzt ist die Anpassung in Planung XD

Steht auf meiner ToDo. Habe allerdings ne Menge um die Ohren... kann also etwas dauern^^

Grüße^^

Zitat von: roman1528 am 23 Mai 2016, 12:15:28
Moin.

Jetzt ist die Anpassung in Planung XD

Steht auf meiner ToDo. Habe allerdings ne Menge um die Ohren... kann also etwas dauern^^

Grüße^^

Sehr gut  ;D wollte nur mal nachfragen, da mir die Uhr in meiner aktuellen Umgebung doch irgendwo abgeht  ::)

Grüße,
Florian

Ohne zu drängeln, habe ich etwas übersehen, oder soll ich mich noch gedulden bis es unter der 2.2 funktioniert.

Zitat von: pcjogi am 29 Juli 2016, 16:34:16
Ohne zu drängeln, habe ich etwas übersehen, oder soll ich mich noch gedulden bis es unter der 2.2 funktioniert.

Nein.. du hast nichts verpasst. Ich habe im Moment einfach keine Zeit. Sorry.

Grüße^^

Hast du einen Hinweis was geändert werden muss, dann versuche ich mal etwas vorzubereiten. Sonst kein Problem, ich warte.

Danke

<div data-type="popup" data-device="Popupmeldung_ftui_uhr" data-height="400px" data-width="400px">
<div data-type="analogclock" data-size="140" data-date-color="black" data-sbehave="creep" data-second-color="#aa6900" data-stroke-color="#AA6900" data-body="none" style="margin-top: -10px;"></div>
<div class="dialog">
<div data-type="analogclock" data-size="200" data-date-color="black" data-sbehave="creep" data-second-color="#aa6900" data-stroke-color="#AA6900" data-body="none"></div>
</div>
</div>

Das dass nicht funktionieren kann ist mir irgendwie klar :-D
Ich wollte die Uhr klein anzeigen und in einem Popup dann groß. Kann der Entwickler vielleicht erklären wie das umzusetzen ist?

Moin Moin

kriege die Uhr nach einem Update auch nicht mehr angezeigt. Gibt es irgendwelche Abhängigkeiten die ich übersehen habe, oder sonstige hilfreiche Tips?

Danke & Gruß
Nils

Meine alternative, die ich am laufen habe
http://www.3quarks.com/de/SVGUhr/

Gesendet von meinem GT-I9301I mit Tapatalk

Hi knopf_piano,

sehr geile Uhr!

Wie genau bindet man diese Uhr in das Tablet UI ein?!

So sehe ich jedenfalls nur im Tablet UI ein kleines Fenster mit der Oberfläche vom fhem.

<li data-row="1" data-col="1" data-sizex="6" data-sizey="6" class="semitransparent">
<object data="station-clock.svg" type="image/svg+xml"
        width="200" height="200">
  <param name="dial"               value="din 41091.4"/>
  <param name="hourHand"           value="din 41092.3"/>
  <param name="minuteHand"         value="din 41092.3"/>
  <param name="secondHand"         value="din 41071.1"/>
  <param name="minuteHandBehavior" value="stepping"/>
  <param name="secondHandBehavior" value="stepping"/>
  <param name="secondHandStopToGo" value="undefined"/>
  <param name="secondHandStopTime" value="1.5"/>
  <param name="backgroundColor"    value="rgba(0,0,0,0)"/>
  <param name="dialColor"          value="rgb(40,40,40)"/>
  <param name="hourHandColor"      value="rgb(20,20,20)"/>
  <param name="minuteHandColor"    value="rgb(20,20,20)"/>
  <param name="secondHandColor"    value="rgb(160, 50, 40)"/>
  <param name="axisCoverColor"     value="rgb(20,20,20)"/>
  <param name="axisCoverRadius"    value="3.5"/>
  <param name="updateInterval"     value="50"/>
</object>


Soll halt auf einem Tablet ganz groß zu sehen sein.

Danke schon mal

Ohne probieren: anpassen von width="200" height="200

Gesendet von meinem GT-I9301I mit Tapatalk

Hi knopf_piano,

dann wird der Ausschnitt nur größer :-)

Kannst du vielleicht deinen Code Posten?!


Ich habe die "station-clock.svg" datei in den Ordner /opt/fhem/www/tablet/fonts kopiert.
Ist das richtig oder fehlt noch was oder war das falsch?!

MfG

Hab da gleiche größe... Müßte doch aber gehen, mein ich. ich versuchs mal am woE


<object data="./pics/station-clock.svg" type="image/svg+xml"
        width="200" height="200"
        style="background-image: url(./pics/bg.png); background-position: center;
        background-size: 200px 200px;">
  <param name="dial"               value="din 41091.1"/>
  <param name="hourHand"           value="siemens"/>
  <param name="minuteHand"         value="siemens"/>
  <param name="secondHand"         value="din 41071.1"/>
  <param name="minuteHandBehavior" value="stepping"/>
  <param name="secondHandBehavior" value="stepping"/>
  <param name="secondHandStopToGo" value="yes"/>
  <param name="secondHandStopTime" value="1.5"/>
  <param name="backgroundColor"    value="rgba(0,0,0,0)"/>
  <param name="dialColor"          value="rgb(40,40,40)"/>
  <param name="hourHandColor"      value="rgb(20,20,20)"/>
  <param name="minuteHandColor"    value="rgb(20,20,20)"/>
  <param name="secondHandColor"    value="rgb(160,50,40)"/>
  <param name="axisCoverColor"     value="rgb(20,20,20)"/>
  <param name="axisCoverRadius"    value="7"/>
  <param name="updateInterval"     value="50"/>
</object>
<!--
<object data="station-clock.svg" type="image/svg+xml"
        width="200" height="200" style="padding: 40px; background-image: url(pics/Siemens.png)">>
  <param name="dial"               value="din 41091.1"/>
  <param name="hourHand"           value="siemens"/>
  <param name="minuteHand"         value="siemens"/>
  <param name="secondHand"         value="din 41071.1"/>
  <param name="minuteHandBehavior" value="stepping"/>
  <param name="secondHandBehavior" value="stepping"/>
  <param name="secondHandStopToGo" value="yes"/>
  <param name="secondHandStopTime" value="1.5"/>
  <param name="backgroundColor"    value="rgba(0,0,0,0)"/>
  <param name="dialColor"          value="rgb(187,181,162)"/>
  <param name="hourHandColor"      value="rgb(255,214,155)"/>
  <param name="minuteHandColor"    value="rgb(20,119,20)"/>
  <param name="secondHandColor"    value="rgb(255,90,40)"/>
  <param name="axisCoverColor"     value="rgb(20,20,20)"/>
  <param name="axisCoverRadius"    value="7"/>
  <param name="updateInterval"     value="50"/>
</object>-->


Gesendet von meinem GT-I9301I mit Tapatalk

Ich habe das Widget für Version 2.2 angepasst, bei mir funktioniert es.

Also ich bekomme sie damit nicht angezeigt

Hi,

ZitatIch habe das Widget für Version 2.2 angepasst, bei mir funktioniert es.

Damit klappt es wieder bei mir mit der Uhr.

Schön hätte ich aber auch den anderen Weg gefunden:
http://www.3quarks.com/de/SVGUhr/

Dort kann man auch das Ziffernblatt mit "Stundenzahlen" auswählen.
Leider hab ich keine Ahnung wie man den Code der eigentlich für eine Website gedacht ist mit TabletUI zum laufen bekommt.

Thx

Zitat von: Tommy82 am 04 November 2016, 21:55:32
Also ich bekomme sie damit nicht angezeigt

Du benötigst natürlich auch die jquery.analogclock.* Bibliotheken. Weiteren Support kann ich nicht leisten, da ich mit JS keine Erfahrung habe und nur die alte Struktur des Widgets auf die Version 2.2 vom Tablet-UI angepasst habe, soweit es für mich aus den bestehenden Widgets erkennbar war.

Bei mir laufen beide.
danke für das widget_update!

die 3quarks-Uhr aus meinem post läuft bei mir problemlos, größe läßt sich wie vorher beschrieben mit heigth/width einstellen. Keine Besonderheiten dafür durchgeführt.
Pfad zum station-clock.svg (runterladen von der angegenen seite) bitte selbst anpassen, evtl. liegt's daran, wenn man meinen code 1:1 copiert.

<!-- http://www.3quarks.com/de/SVGUhr/ -->

<object data="./pics/station-clock.svg" type="image/svg+xml"
        width="200" height="200"
        >
  <param name="dial"               value="din 41091.1"/>
  <param name="hourHand"           value="siemens"/>
  <param name="minuteHand"         value="siemens"/>
  <param name="secondHand"         value="din 41071.1"/>
  <param name="minuteHandBehavior" value="stepping"/>
  <param name="secondHandBehavior" value="swinging"/>
  <param name="secondHandStopToGo" value="yes"/>
  <param name="secondHandStopTime" value="1.5"/>
  <param name="backgroundColor"    value="rgba(172, 173, 158, 1)"/>
  <param name="dialColor"          value="rgb(40,40,40)"/>
  <param name="hourHandColor"      value="rgb(20,20,20)"/>
  <param name="minuteHandColor"    value="rgb(20,20,20)"/>
  <param name="secondHandColor"    value="rgb(160, 50, 40)"/>
  <param name="axisCoverColor"     value="rgb(20,20,20)"/>
  <param name="axisCoverRadius"    value="7"/>
  <param name="updateInterval"     value="50"/>
</object>


Zitat von: Ellert am 04 November 2016, 17:02:06
Ich habe das Widget für Version 2.2 angepasst (...)

Vielen Dank. Einfach die JS im lib-dir ersetzt und alles läuft wieder!

Hallo zusammen,

könnt Ihr mir mal auf die Sprünge helfen. Habe die Dateien von https://github.com/roman1528/ftui_analogclock in die entsprechenden Verzeichnisse kopiert und gemäß dem Readme die Uhr in meine Oberfläche integriert. Leider bekomme ich nur eine leere Kachel ohne die Uhr angezeigt.
Muss noch etwas angepasst werden damit ich die Uhr angezeigt bekomme?
FHEM ist auf dem aktuellen Stand.

Danke & Gruß Andreas

Moin.

Das Widget ist aber nicht auf dem neusten Stand.  ::)
Und mit FHEM hat das herzlich wenig zu tun  :P

Ich mache in den nächsten Tagen mal einen Beitrag auf meiner Seite dazu... Da lade ich dann auch das Widget hoch, so wie es bei mir aktuell läuft.

Also immer mal meine Homepage im Auge behalten  ;)

Grüße^^

Ahoi,

vielen Dank für die promte Rückmeldung - werde ab und an mal auf deiner Seite vorbeischauen.

Gruß

Hallo Zusammen!

Die Uhr ist bestimmt sehr schön, schade das nirgendwo erklärt wird wie man sie einbindet. Hab jetzt schon tausend Sachen versucht und gesucht wie ein blöder.

Hab im Head auch :
<script src="/fhem/tablet/js/widget_analogclock.js" defer></script>
eingetragen. Habs aber nicht hinbekommen. Schade.

Gruß,
Burkhard

ich habe es leider immer noch nicht geschafft einen Beitrag auf meiner Seite zu starten... da ich gerade zufällig online bin...

im Anhang gibts die aktuelle Version (so wie sie bei mir läuft). Sie ist sicher nicht 100%ig in Ordnung, aber bei mir rennt sie.

Einbindung wie im ersten Post.

<div data-type="analogclock"
data-size="350"
data-body="none"
data-dial="austria"
data-dial-color="#666"
data-hour-color="#888"
data-minute-color="#888"
data-second-color="#0088CC"
data-mbehave="ebounce"
data-sbehave="ebounce">
</div>


Vielen Dank!
Muss im Kopf noch irgendwas eingertragen werden?

Zitat von: JimKnopf am 01 Juni 2017, 16:46:32
Vielen Dank!
Muss im Kopf noch irgendwas eingertragen werden?

Nein.

Grüße^^

Hi!

Super, hat geklappt ;)
Burkhard

Tolles Widget, das nicht hier im Forum "versteckt" sein sollte.

Einen Vorschlag hätte ich: Kann das Attribut "data-hide" ergänzt werden, welches sich auch an anderer Stelle schon als sehr nützlich erwiesen hat?

Nachdem die Analoguhr mich seit einem Jahr begeistert und völlig zuverlässig funktioniert, habe ich den Wikibeitrag erstellt. Dieses Widget ist wirklich sehr zu empfehlen.

https://wiki.fhem.de/wiki/FTUI_Widget_Analogclock (https://wiki.fhem.de/wiki/FTUI_Widget_Analogclock)

Habe die Analog-Uhr soeben in mein Dashboard (auf einem Raspi-Touchscreen) eingebaut. Sieht richtig nett aus (und nicht so langweilig, wie die alte Digitalanzeige).

Vielen Dank für das Widget.

Super! Herzlichen Dank!

P.S.: hat sich die SBB noch nicht bei Dir gemeldet? Apple hatte da ganz schlechte Erfahrungen gemacht ;D ;D 8)