Autor Thema: [UPDATE] Neues Widget - AnalogClock [2ter Wurf]  (Gelesen 18052 mal)

Offline roman1528

  • Sr. Member
  • ****
  • Beiträge: 753
    • ueberueck.com
[UPDATE] Neues Widget - AnalogClock [2ter Wurf]
« am: 14 März 2016, 01:06:07 »
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 - Rüdiger Appel

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

Grüße^^
« Letzte Änderung: 01 Juni 2017, 16:32:57 von roman1528 »
i3-10305T 4x3GHz;8GB RAM;250GB NVMe;1TB NVMe: FHEM 6.1,FTUI,8" Tablet's+Fully;HUE;ESPRGBWW;HM;CUL433;Duofern;ASC;MQTT (Tasmota);mySensors;netatmo;SONOS;eBus;DbLog
RPi3+: FHEM 6.1;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.1;DIY Relais-Board;I²C;GPIO;RFID;Solar
FHEM&FTUI: www.ueberueck.com

Offline bjoernbo

  • Sr. Member
  • ****
  • Beiträge: 848
Antw:Neues Widget - AnalogClock
« Antwort #1 am: 14 März 2016, 07:05:26 »
sieht super aus! werde ich heute Abend mal auf meiner Testseite integrieren !
Raspberry Pi 3 - FB6490C - Synology NAS DS916+ - NETATMO - HUE - SIEMENS G-Tag'S - FTUI - EchoDOT -

Offline takaze

  • New Member
  • *
  • Beiträge: 47
Antw:Neues Widget - AnalogClock
« Antwort #2 am: 15 März 2016, 18:10:41 »
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
« Letzte Änderung: 15 März 2016, 18:31:42 von takaze »
RPi 3B, Add-On Board mit 1.8" TFT LCD, FHEM V5.8, CULFW v1.65 RPIAddOn_CSM, Jeelink v3, Selbstbau CUL433 MHz (signalduino), z-Wave (Fibaro), 8'' WIN10 Wand-Infoboard mit FTUI

Offline kvo1

  • Hero Member
  • *****
  • Beiträge: 1475
  • FHEMonaut
Antw:Neues Widget - AnalogClock
« Antwort #3 am: 15 März 2016, 22:02:25 »
Hi Roman,

coole Idee , danke !

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

gruss klaus
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Offline HoTi

  • Sr. Member
  • ****
  • Beiträge: 770
  • Automatisierungjunky
Antw:Neues Widget - AnalogClock
« Antwort #4 am: 16 März 2016, 07:11:11 »
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  ;D

Aber ich bin zu blöd, irgendwie läuft das widget bei mir nicht, aber ich habe auch gerade wieder massive Aktualisierungsprobleme.
Viele Grüße aus  Oberbayern
Tim (RettungsTim)

Offline roman1528

  • Sr. Member
  • ****
  • Beiträge: 753
    • ueberueck.com
i3-10305T 4x3GHz;8GB RAM;250GB NVMe;1TB NVMe: FHEM 6.1,FTUI,8" Tablet's+Fully;HUE;ESPRGBWW;HM;CUL433;Duofern;ASC;MQTT (Tasmota);mySensors;netatmo;SONOS;eBus;DbLog
RPi3+: FHEM 6.1;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.1;DIY Relais-Board;I²C;GPIO;RFID;Solar
FHEM&FTUI: www.ueberueck.com

Offline takaze

  • New Member
  • *
  • Beiträge: 47
RPi 3B, Add-On Board mit 1.8" TFT LCD, FHEM V5.8, CULFW v1.65 RPIAddOn_CSM, Jeelink v3, Selbstbau CUL433 MHz (signalduino), z-Wave (Fibaro), 8'' WIN10 Wand-Infoboard mit FTUI

Offline Helmi55

  • Hero Member
  • *****
  • Beiträge: 1641
    • Helmi's Fotoseite
Antw:[UPDATE] Neues Widget - AnalogClock [2ter Wurf]
« Antwort #7 am: 18 März 2016, 18:50:17 »
Danke für die Wiener Würfeluhr
werde ich mir ansehen wenn ich wieder auf mein Testsystem komme
Nice w/e
Helmut
System1 fhem 6.0 auf RPi 4B mit 4GB, HMUSBConfig, DS9490R-1Wire, Busware USB 868, Pool-Solarsteuerung mit FHEM. System2 fhem 6.0 auf RPi 4B mit 4GB mit Busware USB 868 und 433 und HMUARTLGW für Haussteuerung

https://www.flickr.com/photos/canonhelmi/

Offline kvo1

  • Hero Member
  • *****
  • Beiträge: 1475
  • FHEMonaut
Antw:[UPDATE] Neues Widget - AnalogClock [2ter Wurf]
« Antwort #8 am: 18 März 2016, 19:39:05 »
Moin Roman,

Danke , da hast Du ja ALLES gegeben  :)

Gruss Klaus
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4349
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:[UPDATE] Neues Widget - AnalogClock [2ter Wurf]
« Antwort #9 am: 19 März 2016, 09:48:41 »
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.

Offline roman1528

  • Sr. Member
  • ****
  • Beiträge: 753
    • ueberueck.com
Antw:[UPDATE] Neues Widget - AnalogClock [2ter Wurf]
« Antwort #10 am: 19 März 2016, 09:58:22 »
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.

Okay. Hab ich raus genommen :)

Grüße^^

P.S. Neue Version auf GitHub. Update nicht notwendig.
i3-10305T 4x3GHz;8GB RAM;250GB NVMe;1TB NVMe: FHEM 6.1,FTUI,8" Tablet's+Fully;HUE;ESPRGBWW;HM;CUL433;Duofern;ASC;MQTT (Tasmota);mySensors;netatmo;SONOS;eBus;DbLog
RPi3+: FHEM 6.1;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.1;DIY Relais-Board;I²C;GPIO;RFID;Solar
FHEM&FTUI: www.ueberueck.com

Offline roman1528

  • Sr. Member
  • ****
  • Beiträge: 753
    • ueberueck.com
Antw:[UPDATE] Neues Widget - AnalogClock [2ter Wurf]
« Antwort #11 am: 19 März 2016, 13:05:32 »
[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^^
i3-10305T 4x3GHz;8GB RAM;250GB NVMe;1TB NVMe: FHEM 6.1,FTUI,8" Tablet's+Fully;HUE;ESPRGBWW;HM;CUL433;Duofern;ASC;MQTT (Tasmota);mySensors;netatmo;SONOS;eBus;DbLog
RPi3+: FHEM 6.1;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.1;DIY Relais-Board;I²C;GPIO;RFID;Solar
FHEM&FTUI: www.ueberueck.com

Offline roman1528

  • Sr. Member
  • ****
  • Beiträge: 753
    • ueberueck.com
Antw:[UPDATE] Neues Widget - AnalogClock [2ter Wurf]
« Antwort #12 am: 19 März 2016, 13:22:18 »
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^^
i3-10305T 4x3GHz;8GB RAM;250GB NVMe;1TB NVMe: FHEM 6.1,FTUI,8" Tablet's+Fully;HUE;ESPRGBWW;HM;CUL433;Duofern;ASC;MQTT (Tasmota);mySensors;netatmo;SONOS;eBus;DbLog
RPi3+: FHEM 6.1;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.1;DIY Relais-Board;I²C;GPIO;RFID;Solar
FHEM&FTUI: www.ueberueck.com

Offline Clyde

  • Full Member
  • ***
  • Beiträge: 140
Antw:[UPDATE] Neues Widget - AnalogClock [2ter Wurf]
« Antwort #13 am: 25 März 2016, 09:16:24 »
Sieht klasse aus.  Vielen Dank :)
2x Cubietruck, CUL868, HM-USB-CFG2
FS20, FHT, KS300, HM, MAX, Tradfri

Offline knopf_piano

  • Full Member
  • ***
  • Beiträge: 444
Antw:[UPDATE] Neues Widget - AnalogClock [2ter Wurf]
« Antwort #14 am: 29 März 2016, 19:58:36 »
Fett!!!
zotac nano mit proxmox und ganz viel zeug drauf

 

decade-submarginal