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

Begonnen von roman1528, 14 März 2016, 01:06:07

Vorheriges Thema - Nächstes Thema

roman1528

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^^
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

bjoernbo

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 -

takaze

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

kvo1

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

HoTi

Zitat von: kvo1 am 15 März 2016, 22:02:25
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)

roman1528

i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

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

Helmi55

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.1 auf RPi 4B mit 4GB, HMUSBConfig, DS9490R-1Wire, Busware USB 868, Pool-Solarsteuerung mit FHEM. System2 fhem 6.1 auf RPi 4B mit 4GB (Bullseye) mit Busware USB 868 und 433 und HMUARTLGW für Haussteuerung

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

kvo1

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

setstate

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.

roman1528

Zitat von: setstate 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.

Okay. Hab ich raus genommen :)

Grüße^^

P.S. Neue Version auf GitHub. Update nicht notwendig.
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

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^^
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

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^^
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

Clyde

2x Cubietruck, CUL868, HM-USB-CFG2
FS20, FHT, KS300, HM, MAX, Tradfri

knopf_piano

zotac nano mit proxmox und ganz viel zeug drauf