Analoge Uhr mit Javaskript und HTML5 Canvas

  • Ich möchte hier eine Einbauanleitung (in V10) zur Verfügung stellen von einer analogen Uhr mit Javaskript und HTML5 mit dem Befehl "Canvas".


    Die Uhr wird auch auf Handys und Ipad (Tablets) sehr schnell und gut angezeigt. Im Gegensatz zu Flashprodukte !


    Was man dazu benötigt ist nur diese Javaskript Datei die man sich hier LINK oder hier LINK runterladen kann. (rechts Klick --> Ziel speichern unter)


    Weiters benötigt man eine Zifferblattgrafik die man sich selbst erstellen oder im Internet suchen kann ;) oder hier im Anhang runterladen kann. (Kann beliebig groß gestalten werden aber immer Quadratisch)


    Genau so einen Stundenzeiger, Minutenzeiter und Sekundenzeiger in Grafikformat (PNG) (Im Anhang ein Muster).


    Diese Grafiken muss man "händisch" auf den Server spielen. Im diesem Skriptbeispiel das ziffernblatt.png und die --zeiger.png in den Ordner "Images".


    Dann in WSX5 auf der gewünschten Seite ein HTML-Objekt nehmen und die Höhe auf die Grösse des Ziffernblattes anpassen.


    Im HMTL-Objekt kommt folgender Code:



    Danach wird noch die Javaskript Datei eingebunden unter "Erweitert" (gleich im HTML-Objekt)
    Bei verlinkte Dateien "hinzufügen" unter dem Serverpfad "js" z.B. und das Häkchen setzen bei "Datei mit Seite verknüpfen".


    Danach Speichern und auf den Server exportieren !


    Man kann noch verschiedene Stile oder Umrandungen um das HTML-Objekt legen, aber vorher in der Vorschau kontrollieren ob es auch Quadratisch bleibt.


    Wenn man auf die Zeigergrafiken verzichtet dann werden automatisch Zeiger generiert, jedenfalls hat es in der Vorschau so funktioniert.


    Nun viel Spass beim Uhrenbasteln und hier ein Beispiel von mir LINK


    lg Andy67


    P.S. Wenn man selber Zeiger hat die vom Mittelpunkt anders sind dann muss man bei dem JAvaskript Code die hLength, mLength und sLength dementsprechend anpassen.

    Dateien

    • uhr.png

      (92,77 kB, 229 Mal heruntergeladen, zuletzt: )
    • stundenzeiger1.png

      (886 Byte, 239 Mal heruntergeladen, zuletzt: )
    • minutenzeiger1.png

      (671 Byte, 235 Mal heruntergeladen, zuletzt: )
    • sekundenzeiger1.png

      (434 Byte, 185 Mal heruntergeladen, zuletzt: )

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    3 Mal editiert, zuletzt von andy67 ()

  • Browser kann Canvas nicht ausführen.

  • Danke werde es mal selbst versuchen gefällt mir sehr gut nur eine andere Form halt. Danke!!! ;)

    Lg.

    Thabo-Umasai

    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."

    ;)

  • Dann musst du die zwei JS Dateien händisch auf deinen Server spielen im Ordner "js"


    Danach unter "1" vor dem </head> Tag dann folgende Zeilen einfügen...


    JavaScript
    1. <script type="text/javascript" src="js/uhr.min.js"></script>
    2. <script src="js/jquery.tagcanvas.min.js" type="text/javascript"></script


    Die Js Dateien natürlich so benennen wie gewünscht oder oben ausbessern.



    Nachtrag: Wenn es im Footer angezeigt werden soll dann Code in den </body> Tag geben.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Einmal editiert, zuletzt von andy67 ()

  • Nun muss ich mich leider auch dazuschlagen, da ich nun auch Dein Angebot in Verwendung bringen möchte andy67, tritt bei mir jedoch ein kleines Problem auf. Ich möchte hingegen von Marcolino dies Uhr nicht im Header haben, sondern im Footer. Nun soweit funktioniert ja alles, nur wenn ich Deinen Code eintrage verschiebt es mit den Header um siehse Screen. Hast Du vielleicht dazu auch eine Lösung? wäre schade wenn Du dies verneine würdest, da es sehr gut in dieses neue Temp passen würde. Ich habe diesen Code genommen den Du Marcolino geschrieben hast. Danke für jede Antwort.

    JavaScript
    1. <script type="text/javascript" src="js/uhr.min.js"></script>
    2. <script src="js/jquery.tagcanvas.min.js" type="text/javascript"></script


    Problem selbst gelöst für die die diese Uhr auch im Footer haben wollen im Prinzip genau das gleiche wie es andy67 geschrieben hat nur gehören diese beiden Zeilen nicht so wie andy67 geschrieben hat "Danach unter "1" vor dem </head> Tag dann folgende Zeilen einfügen.." sondern "Danach unter "1" vor dem </boody> Tag dann folgende Zeilen einfügen.." und schon ist der Header wieder gleich.

  • Ja, hast recht Thabo ! Bei manchen Skripten werden die Dateien immer vor dem </body> Tag eingebunden, da sonst der HTML oder CSS Code nicht richtig geladen werden kann.


    Übrigens wie wäre es mit einem Anschau Link ?

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Ist noch nicht fertig die Seite dadurch bitte um etwas Geduld. Danke, hab ja erst jetzt angefangen. Wenn dann gibt es schon einen Link. ;)

    Lg.

    Thabo-Umasai

    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."

    ;)

  • Hui,


    ich mal wieder mit ´nem alten Uhr-Problem.
    Ich hatte damals mit Andy`s Uhr ganz zwar erfolgreich herumexperimentiert, mir aber etwa zeitgleich einen ähnlichen Code käuflich erworben.
    Lange habe ich das ganz nun vergessen gehabt und fiel mir heute auf dem Sonntag wieder ein.
    Mir gefällt das gekaufte ein wenig besser weil der Zeiger sich mechnisch wie eine Quarzuhr bewegt und
    nicht so butterweich digital dahingleitet wie Andy`s Uhr.
    Tja, aber leider ist das gekaufte Script nicht so gut beschrieben wie vond em Andy und
    ich weiss nicht wie ich es in WS X5 (10) integrieren kann. Bei mir landen Uhr und Zeiger ständig nebeneinander.


    Ich poste hier mal das Script als Dateianhang...


    Mache ich gerne und erhoffe mir im Gegenzug eine kleine Anleitung. Danke!
    (Die Originalanleitung ist in englisch dabei... mir würde reichen wenn jemand diese benutzt und
    mir eine kleine Orientierung für die jeweiligen Code- Parts schreibt.
    Uhr soll einfach auf eine Seite in ein HTML-Ojekt... nicht in den Header ...)


    Euer


    Marcolino

  • Im Prinzip kannst du ja mein Anleitung nehmen ! Wenn du das auf einer eigenen Seite im Content haben willst dann musst du den Code auch in den Seiten "Eigenschaften" unter "erweitert" reinschreiben ! Den Java-Code vor dem </body> eintragen ! (In Help oder im Index.html steht der drinnen) HTML-Widget mit dem Einzeiler reinschreiben! Grafikenordner "images" auf Server kopieren und natürlich die zwei "js" in den Header einbinden !


    Genauere Anleitung dauert ein paar Tage !


    Nachtrag: Hier schon mal das DEMO (untere Uhr)

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Einmal editiert, zuletzt von andy67 ()