Uhr-Widget

[3dots]

Hallo,

ich versuche gerade ein Widget für das Dashboard zu erstellen. Dabei möchte ich, dass das Widget auch eine analoge Uhr enthält, ähnlich wie World-Clock. Leider habe ich keine Ahnung, wie ich sowas programmieren kann.
Ich nehme an, ich brauche Canvas. Auf Apple.de habe ich ein Tutrorial gefunden, kann es aber nicht umsetzen.
Mein Java-Code sieht so aus:

function drawHands (hoursAngle, minutesAngle, secondsAngle)
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.clearRect(0, 0, 100, 100);
context.save();
context.translate(100/2, 100/2);
context.save();

context.rotate(hoursAngle);
context.drawImage(hourhand, -4, -28, 9, 25);
context.restore();
context.save();

context.rotate (minutesAngle);
context.drawImage (minhand, -8, -44, 18, 53);
context.restore();

context.rotate (secondsAngle);
context.drawImage (sechand, -4, -52, 8, 57);
context.restore();
}

und mein html-Code so:

 [FONT=Helvetica]<div class="clock">[/FONT][FONT=Helvetica] AM[/FONT][FONT=Helvetica] <canvas id="myCanvas" width='100' height='100'/>[/FONT][FONT=Helvetica]</div>[/FONT]

Kann mir jemand helfen, oder kennt jemand ein Tutorial, was einem erklärt, wie man ein Uhr-Widget erstellt?

Danke!

 

[seb2]

Wird das Canvas denn überhaupt angezeigt?
Und... bist Du Dir sicher daß die Bilder geladen sind?

Letztlich... wenn die letzten beiden Parameter bei drawImage() die tatsächliche Größe des Bildes sind kannst Du sie weglassen. drawImage() funktioniert auch nur mit drei Parametern (Bild, X, Y), die letzten beiden Parameter brauchst Du nur wenn Du das Bild gleichzeitig skalieren möchtest.

Ach ja... Deine save() und restore() solltest Du Dir mal angucken. Einmal sehe ich da direkt ein restore() hinter einem save() -- wozu? Die Zahl der restore() sollte übrigens gleich der Zahl Deiner save() sein, sonst kann das in die Hose gehen.

 

[3dots]

Hallo,

nein die Canvas wird nicht angezeigt, die Funktion aber aufgerufen. Ich habe die Funktion nochmal umgeschrieben:

function drawHands ()
{
var ctx = document.getElementById('myCanvas').getContext('2d');
var bighand = new Image();
bighand.src = 'bighand.png';

ctx.clearRect(0, 0, 100, 100); //Weil jede Sek. aktualiesiert leer, damit nicht überzeichnet
ctx.save();
ctx.translate(100/2, 100/2); //Weil Hände sich um Uhrzentrum drehen sollen
ctx.save();

//Stundenzeiger
ctx.drawImage(bighand, 50, 50);

ctx.restore(); //Weil in nächster Sek. wieder neuzeichnen muss
}

 

[seb2]

Wo und wann wird denn die drawHands() überhaupt aufgerufen?

Edit: Du hast da immer noch ein save() mehr drin als restore(). Das ganze ist ein Stack und den müllst Du mit ungültigen Zuständen zu.

 

[3dots]

drawHands() wird in setup() aufgerufen, welches in der html-Datei in <body onload="setup()"> ausgeführt wird.

 

[seb2]

Schick mir das doch mal zu oder lad es irgendwo hoch, dann guck ich mir das an.