[UPDATE] Neues Widget - AnalogClock [2ter Wurf]

[roman1528]

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

Code Auswählen Erweitern


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

Stellt eine circa 100 Pixel große Analoguhr dar.


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

Code Auswählen Erweitern


<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

Code Auswählen Erweitern


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



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

Code Auswählen Erweitern


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

Code Auswählen Erweitern


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

Code Auswählen Erweitern


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



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

Code Auswählen Erweitern


<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

Code Auswählen Erweitern


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



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

Code Auswählen Erweitern


<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

Code Auswählen Erweitern


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



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

Code Auswählen Erweitern


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

Code Auswählen Erweitern


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



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

Code Auswählen Erweitern


<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

Code Auswählen Erweitern


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



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

Code Auswählen Erweitern


<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

Code Auswählen Erweitern


<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

Code Auswählen Erweitern


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



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

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

Code Auswählen Erweitern


<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 - Rüdiger Appel

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

Grüße^^

[bjoernbo]

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

[takaze]

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? 

Grüße,
Florian

[kvo1]

Hi Roman,

coole Idee , danke !

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

gruss klaus

[HoTi]

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

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

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

[roman1528]

UPDATE

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

[takaze]

UPDATE

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

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

[Helmi55]

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

[kvo1]

Moin Roman,

Danke , da hast Du ja ALLES gegeben 

Gruss Klaus

[setstate]

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.

[roman1528]

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.

[roman1528]

[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

Grüße^^

[roman1528]

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

[Clyde]

Sieht klasse aus.  Vielen Dank

[knopf_piano]

Fett!!!

[takaze]

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

Grüße,
Florian

[roman1528]

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

[takaze]

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  wollte nur mal nachfragen, da mir die Uhr in meiner aktuellen Umgebung doch irgendwo abgeht 

Grüße,
Florian

[pcjogi]

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

[roman1528]

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

[pcjogi]

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

Danke

[accessburn]

Code Auswählen Erweitern

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

[NilsB]

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

[knopf_piano]

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

Gesendet von meinem GT-I9301I mit Tapatalk

[lullebammel]

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.

Code Auswählen Erweitern

<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

[knopf_piano]

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

Gesendet von meinem GT-I9301I mit Tapatalk

[lullebammel]

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

[knopf_piano]

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

[Ellert]

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

[Tommy82]

Also ich bekomme sie damit nicht angezeigt

[lullebammel]

Hi,

Ich 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

[Ellert]

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.

[knopf_piano]

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.

Code Auswählen Erweitern


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


[NilsB]

Ich habe das Widget für Version 2.2 angepasst (...)

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

[mrniceguy]

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

[roman1528]

Moin.

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

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

[mrniceguy]

Ahoi,

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

Gruß

[JimKnopf]

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

[roman1528]

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.

Code Auswählen Erweitern

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


[JimKnopf]

Vielen Dank!
Muss im Kopf noch irgendwas eingertragen werden?

[roman1528]

Vielen Dank!
Muss im Kopf noch irgendwas eingertragen werden?

Nein.

Grüße^^

[JimKnopf]

Hi!

Super, hat geklappt
Burkhard

[Ulm32b]

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?

[Ulm32b]

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

[ThaiDai]

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.

[dmoibm]

Super! Herzlichen Dank!

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