1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Uhr-Widget

Dieses Thema im Forum "Widgets" wurde erstellt von 3dots, 05.09.06.

  1. 3dots

    3dots Gast

    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:
    Code:
     [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!
     
  2. seb2

    seb2 Gast

    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.
     
  3. 3dots

    3dots Gast

    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
    }
     
  4. seb2

    seb2 Gast

    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.
     
    #4 seb2, 06.09.06
    Zuletzt von einem Moderator bearbeitet: 06.09.06
  5. 3dots

    3dots Gast

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

    seb2 Gast

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

Diese Seite empfehlen