1

I'm trying to show a javascript clock in a SharePoint Web Part.

In the .ascx file, I have the following code:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WorldClockUserControl.ascx.cs" Inherits="TestClock.WorldClock.WorldClockUserControl" %>

<canvas id="abcdef" width="400" height="400"></canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>

<script>
    var canvas = document.getElementById("abcdef");
    var ctx = canvas.getContext("2d");
    var radius = canvas.height / 2;

    ctx.translate(radius, radius);
    var radius = radius * 0.90;
    drawClock();
    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 = "lightgrey";
        ctx.fill()

        var 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 = 'black';
        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++) {
            var 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
        var hour = hour % 12;
        var hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60));
        drawHand(ctx, hour, radius * 0.5, radius * 0.07, "grey");

        //minute
        var minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
        drawHand(ctx, minute, radius * 0.8, radius * 0.07, "black");

        // second
        var second = (second * Math.PI / 30);
        drawHand(ctx, second, radius * 0.9, radius * 0.02, "red");
    }

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

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

</script>

Whenever I run the solution and the page tries to load the web part, an exception is thrown when it tries to run the "beginPath()" method, saying it's not supported.

Any ideas?

Thanks!

  • I think maybe because you are trying to pass an argument of ctx, remove that argument because your context is global. The runtime engine may be using the argument variable instead of global. – Mike Aug 24 '16 at 13:46
  • @Mike unfortunately that didn't work, sorry, still breaks when it tries to run ctx.beginPath() in the drawFace function! – Jamie Brace Aug 24 '16 at 14:05
  • What browser are you using? Also you don't have to use any arguments on any of those functions because ctx and radius are both global variables in this case. Also change the second var radius = radius * 0.90; to just radius = radies * 0.90;, you can't declare a new variable twice. – Mike Aug 24 '16 at 14:31
  • @Mike I'm using IE11 on Win Server 2012R2, but currently the server is down so I can't test it.. I'll let you know if removing var and the arguments works! – Jamie Brace Aug 25 '16 at 10:04
  • @Mike still not working unfortunately - strangely enough I can see it draw the clock before it then errors out on beginPath() and then it won't let me switch to the IE page once it throws an exception – Jamie Brace Aug 25 '16 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.