How can we help?

New post
2

Set of clocks as a klip

Avatar
Artem Rybalko
None
Follow

Is it possible to add a set of clocks in the clip from several timezones (or at least one clock)? I know this was asked before in a post but there was no answer to that, would be great to find the way to do that. 

Date Votes

7 comments

  • 0
    Avatar
    Meggan King

    Hi Art -

    I have had customers build clocks using the HTML component and Java Script. I will see if we can find a simple example for you and share it here.

    Thanks!

    Meggan

  • 2
    Avatar
    Kavya Mallur

    Hello Art,

    I have a sample clock klip that I built. I used the same code as put in here- http://www.w3schools.com/canvas/tryit.asp?filename=trycanvas_clock_start

    Here are the steps to build a clock klip-

    a. Start to build a new klip. Drag and drop HTML component.

    b. In the 'HTML Template' copy and paste the following HTML code-

     

    <!DOCTYPE html>
    <html>
    <body>

    <canvas id="canvas" width="400" height="400"
    style="background-color:#333">
    </canvas>

    </body>

    </html>

     

    c. Click on 'Use Java Script with this HTML Template' option. This will open up a 'Script' block for you. Paste the below javascript code block in here-

    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);

    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);
    }

     

    d. Save and exit out of the klip.

    You will see the clock as shown in the screenshot-

    Hope this is helpful!

     

     

  • 0
    Avatar
    Artem Rybalko

    @Kavya Mallur thank you, that was useful information :)

  • 0
    Avatar
    Kavya Mallur

    Hello Art,

     

    Can you try this out-

    http://jsfiddle.net/mplungjan/mQrJn/

    But this will need you to hard code the timezone. You can use this script to build klips, one for each of different timezones/cities that you are interested in.

    I will play with my original klip and see how I can alter the javascript to include timezone :-)

     

  • 0
    Avatar
    Catherine Parkinson

    I appreciate this is an old thread, but I have just started experimenting with java, and this seemed like a good place to start. I have managed to get the clock in this example : http://jsfiddle.net/mplungjan/mQrJn/ to render in the klip preview, but when I save and load to the dashboard the value disappears.

    Why ?

  • 0
    Avatar
    Meggan King

    Hi Catherine

    Do you have more than one clock on your dashboard? If so, the class IDs must be unique. You'll see in the example <span id="theTime"></span> has an id of theTime. If you put the same Klip on the same dashboard, the second (third, fourth, etc) Klips must have unique ids. This is a constraint of HTML, not a Klipfolio constraint. 

     

    You'll see in the JavaScript, the element is being referenced by the id:

    document.getElementById('theTime').innerHTML

     

    Hope this helps,

    Meggan

  • 0
    Avatar
    Catherine Parkinson

    Nope only one clock... This is my first day working with Javascript so I'm trying to start easy. I can get the clock to show in preview, just not in the klip.
    I'm raising a support ticket, to ensure my set up is correct.

     

    UPDATE - Ok this is weird. After 5 mins or so the clock suddenly appeared ?

Please sign in to leave a comment.