9 Replies Latest reply on Feb 18, 2017 3:02 PM by HUnknown1

    How do I center my clock in Animate CC 2017?

    HUnknown1 Level 1

      Hi There,

      I am trying to rebuild the canvas clock example on W3schools website in animate CC. However when I use the code my clock ends up in the upper left rather than centered on my canvas. Is there a simple way to correct this?

      The canvas is 400px with and 400px height. Background #333;

      I tried to set most of the radius to 200,200 but this messes up the arms of the clock for some reason. Animate does not let me set the center of the Stage to 0 for the HTML 5 canvas .

      This is the code I put into the Actions Panel. Any thoughts?

       

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var radius = canvas.height / 2;
      ctx.translate(radius, radius);
      radius = radius * 0.90
      //setInterval(drawClock, 1000);--- this cause the clock to flash and stall
      setInterval(drawClock);

      function drawClock() {
        drawFace(ctx, radius);
        drawNumbers(ctx, radius);
        drawTime(ctx, radius);
      }

      function drawFace(ctx, radius) {
        var grad;
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, 2*Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
        grad.addColorStop(0, '#333');
        grad.addColorStop(0.5, 'white');
        grad.addColorStop(1, '#333');
        ctx.strokeStyle = grad;
        ctx.lineWidth = radius*0.1;
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
        ctx.fillStyle = '#333';
        ctx.fill();
      }

      function drawNumbers(ctx, radius) {
        var ang;
        var num;
        ctx.font = radius*0.15 + "px arial";
        ctx.textBaseline="middle";
        ctx.textAlign="center";
        for(num = 1; num < 13; num++){
          ang = num * Math.PI / 6;
          ctx.rotate(ang);
          ctx.translate(0, -radius*0.85);
          ctx.rotate(-ang);
          ctx.fillText(num.toString(), 0, 0);
          ctx.rotate(ang);
          ctx.translate(0, radius*0.85);
          ctx.rotate(-ang);
        }
      }

      function drawTime(ctx, radius){
          var now = new Date();
          var hour = now.getHours();
          var minute = now.getMinutes();
          var second = now.getSeconds();
          //hour
          hour=hour%12;
          hour=(hour*Math.PI/6)+
          (minute*Math.PI/(6*60))+
          (second*Math.PI/(360*60));
          drawHand(ctx, hour, radius*0.5, radius*0.07);
          //minute
          minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
          drawHand(ctx, minute, radius*0.8, radius*0.07);
          // second
          second=(second*Math.PI/30);
          drawHand(ctx, second, radius*0.9, radius*0.02);
      }

      function drawHand(ctx, pos, length, width) {
          ctx.beginPath();
          ctx.lineWidth = width;
          ctx.lineCap = "round";
          ctx.moveTo(0,0);
          ctx.rotate(pos);
          ctx.lineTo(0, -length);
          ctx.stroke();
          ctx.rotate(-pos);
      }

        • 1. Re: How do I center my clock in Animate CC 2017?
          Colin Holgate MVP & Adobe Community Professional

          Publish Settings have options for making it be responsive. If you can use those it will save a lot of coding.

          1 person found this helpful
          • 2. Re: How do I center my clock in Animate CC 2017?
            HUnknown1 Level 1

            Yeah I tried center stage in publish settings. However that only centers the canvas itself in the HTML 5 file not the clock itself on inside. Here is a screen shot of what I get when I do that. Only a quarter of the clock.

            I just want to know what to change in the code to get the clock to sit in the center of canvas. I tried changing the position to 200,200, but when I do that for the draw hands they it don't function correctly.
            part_clock.jpg

            • 3. Re: How do I center my clock in Animate CC 2017?
              ClayUUID Adobe Community Professional

              Why are you trying to port something into Animate that doesn't use any of Animate's features? Seems like learning all the wrong lessons.

              • 4. Re: How do I center my clock in Animate CC 2017?
                Colin Holgate MVP & Adobe Community Professional

                I think that your Canvas example code, which uses the canvas 2D context directly is clashing in some way with CreateJS, which is also directly using the 2D context too.

                 

                See if the answer given here is of use:

                 

                javascript - createjs html5 canvas integration not working - Stack Overflow

                • 5. Re: How do I center my clock in Animate CC 2017?
                  HUnknown1 Level 1

                  Eventually it will become part of something that will be part of something else with Animate features. However I want the clock to center before I go further in my project. If you don't know the answer that's OK. Maybe some one else does. What we think are wrong lessons sometimes lead  to greater discoveries.

                  I was able now to get 2 clocks on stage One centers and one is off to the lower right. However I only want one clock. Here is the code so far: Anyone else have a suggestion?

                  var canvas = document.getElementById("canvas");
                  var ctx = canvas.getContext("2d");
                  var radius = canvas.height / 2;
                  ctx.translate(radius, radius);
                  radius = radius * 0.90
                  //
                  setInterval(drawClock);

                  function drawClock() {
                    drawFace(ctx, radius);
                    drawNumbers(ctx, radius);
                    drawTime(ctx, radius);
                  }

                  function drawFace(ctx, radius) {
                    var grad;
                    ctx.beginPath();
                    //ctx.arc(0, 0, radius, 0, 2*Math.PI);
                  ctx.arc(200, 200, radius, 0, 2*Math.PI);
                    ctx.fillStyle = 'white';
                    ctx.fill();

                  grad = ctx.createRadialGradient(200,200,radius*0.95, 200,200,radius*1.05);
                    grad.addColorStop(0, '#333');
                    grad.addColorStop(0.5, 'white');
                    grad.addColorStop(1, '#333');
                    ctx.strokeStyle = grad;
                    ctx.lineWidth = radius*0.1;
                    ctx.stroke();
                    ctx.beginPath();

                   

                  ctx.arc(200, 200, radius*0.1, 0, 2*Math.PI);
                    ctx.fillStyle = '#333';
                    ctx.fill();
                  }

                  function drawNumbers(ctx, radius) {
                    var ang;
                    var num;
                    ctx.font = radius*0.15 + "px arial";
                    ctx.textBaseline="middle";
                    ctx.textAlign="center";
                    for(num = 1; num < 13; num++){
                      ang = num * Math.PI / 6;
                      ctx.rotate(ang);
                      ctx.translate(0, -radius*0.85);
                      ctx.rotate(-ang);
                   
                  ctx.fillText(num.toString(), 200, 200);
                      ctx.rotate(ang);
                      ctx.translate(0, radius*0.85);
                      ctx.rotate(-ang);
                    }
                  }

                  function drawTime(ctx, radius){

                  // this line makes 2 clocks appear
                  ctx.translate(200, 200);
                      var now = new Date();
                      var hour = now.getHours();
                      var minute = now.getMinutes();
                      var second = now.getSeconds();
                      //hour
                      hour=hour%12;
                      hour=(hour*Math.PI/6)+
                      (minute*Math.PI/(6*60))+
                      (second*Math.PI/(360*60));
                      drawHand(ctx, hour, radius*0.5, radius*0.07);
                      //minute
                      minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
                      drawHand(ctx, minute, radius*0.8, radius*0.07);
                      // second
                      second=(second*Math.PI/30);
                      drawHand(ctx, second, radius*0.9, radius*0.02);


                  }

                  function drawHand(ctx, pos, length, width) {
                      ctx.beginPath();
                      ctx.lineWidth = width;
                      ctx.lineCap = "round";
                      ctx.moveTo(0,0);
                      ctx.rotate(pos);
                      ctx.lineTo(0, -length);
                      ctx.stroke();
                      ctx.rotate(-pos);
                  }

                  • 6. Re: How do I center my clock in Animate CC 2017?
                    HUnknown1 Level 1

                    Possibly in some instances. I understand they want you to use the createJS Library.  However it does not really answer the question of why just the arms of the clock won't center.

                    In the new code I got the arms to center properly but now 2 clocks appear on the stage when I only want one.

                    If CreateJS has a tutorial for clocks that would be good

                    • 7. Re: How do I center my clock in Animate CC 2017?
                      Colin Holgate MVP & Adobe Community Professional

                      I think that most of the math in the non-CreateJS version will be useful. You need to draw into a graphics thingy instead of a 2D context. CreateJS will take care of the making it visible part.

                       

                      See this article:

                       

                      EaselJS v0.8.2 API Documentation : Graphics

                      1 person found this helpful
                      • 8. Re: How do I center my clock in Animate CC 2017?
                        HUnknown1 Level 1

                        I tried the first code on the graphics list you showed me and copied it directly into the actions panel to test it. In a new document.

                        But it did not appear to draw anything. When I went to test.

                        var g = new createjs.Graphics();

                        g.setStrokeStyle(1);

                        g.beginStroke("#000000");

                        g.beginFill("red");

                        g.drawCircle(0,0,30);

                         

                        I could draw most of clock in animate. The area that I want to fix is the location of the arms

                        • 9. Re: How do I center my clock in Animate CC 2017?
                          HUnknown1 Level 1

                          Ok so after struggling with the code and making a few modifications I think that I got it to work in Animate.

                          Below is final code I entered into the actions panel. I realize it probably would work better with the createJS Library, but until I see them or Adobe create a full tutorial for making a working clock, it will have to do. At least now I'm not getting 2 clocks. As mentioned earlier, I would probably draw the face of the clock as a Symbol in Animate. However at least the Numbers and moving arms are in the correct coordinates..

                          var canvas = document.getElementById("canvas");
                          var ctx = canvas.getContext("2d");
                          var radius = canvas.height / 2;
                          ctx.translate(radius, radius);
                          radius = radius * 0.90
                          //setInterval(drawClock, 1000);
                          setInterval(drawClock);

                           

                          function drawClock() {
                          drawFace(ctx, radius);
                             drawNumbers(ctx, radius);
                          drawTime(ctx, radius);
                          //fixes position
                          ctx.translate(0,0);
                          ctx.translate(200,200);

                          }

                          function drawFace(ctx, radius) {
                            var grad;
                            ctx.beginPath();
                            //ctx.arc(0, 0, radius, 0, 2*Math.PI);
                          ctx.arc(200, 200, radius, 0, 2*Math.PI);
                            ctx.fillStyle = 'white';
                            ctx.fill();
                            //grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
                          grad = ctx.createRadialGradient(200,200,radius*0.95, 200,200,radius*1.05);
                            grad.addColorStop(0, '#333');
                            grad.addColorStop(0.5, 'white');
                            grad.addColorStop(1, '#333');
                            ctx.strokeStyle = grad;
                            ctx.lineWidth = radius*0.1;
                            ctx.stroke();
                            ctx.beginPath();
                            //ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
                          ctx.arc(200, 200, radius*0.1, 0, 2*Math.PI);
                            ctx.fillStyle = '#333';
                            ctx.fill();
                          }

                          function drawNumbers(ctx, radius) {
                            var ang;
                            var num;
                          //fixes position
                          ctx.translate(0,0);
                          ctx.translate(200,200)
                            ctx.font = radius*0.15 + "px arial";
                            ctx.textBaseline="middle";
                            ctx.textAlign="center";
                            for(num = 1; num < 13; num++){
                              ang = num * Math.PI / 6;
                              ctx.rotate(ang);
                              ctx.translate(0, -radius*0.85);
                              ctx.rotate(-ang);
                              ctx.fillText(num.toString(), 0, 0);
                          //ctx.fillText(num.toString(), 200, 200);
                              ctx.rotate(ang);
                              ctx.translate(0, radius*0.85);
                              ctx.rotate(-ang);
                            }
                          }

                          function drawTime(ctx, radius){
                              var now = new Date();
                              var hour = now.getHours();
                              var minute = now.getMinutes();
                              var second = now.getSeconds();
                              //hour
                              hour=hour%12;
                              hour=(hour*Math.PI/6)+
                              (minute*Math.PI/(6*60))+
                              (second*Math.PI/(360*60));
                              drawHand(ctx, hour, radius*0.5, radius*0.07);
                              //minute
                              minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
                              drawHand(ctx, minute, radius*0.8, radius*0.07);
                              // second
                              second=(second*Math.PI/30);
                              drawHand(ctx, second, radius*0.9, radius*0.02);
                          }

                          function drawHand(ctx, pos, length, width) { 

                          ctx.beginPath();
                              ctx.lineWidth = width;
                              ctx.lineCap = "round";
                              ctx.moveTo(0,0);
                              ctx.rotate(pos);
                              ctx.lineTo(0,-length);
                              ctx.stroke();
                              ctx.rotate(-pos);


                          }

                           

                           

                          clock_image.jpg