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:
- <style type="text/css">
- #clock2 {
- background-image: url(images/uhr.png);
- border-color: #c93;
- }
- </style>
- <script type="text/javascript">
- var bbopts = {
- noFace: true,
- hideSeconds: false,
- mImage: 'images/minutenzeiger1.png',
- mLength: 24.5,
- mOverlap: 6,
- hImage: 'images/stundenzeiger1.png',
- hLength: 12,
- hOverlap: 5,
- sImage: 'images/sekundenzeiger1.png',
- sLength: 25,
- sOverlap: 7,
- tz: 110
- };
- window.onload = function() {
- startClock('clock2',bbopts);
- };
- </script>
- <canvas width="200" height="200" id="clock2">
- <p>Browser kann Canvas nicht ausführen.</p>
- </canvas>
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.