Creating a Set of Concentric Circles with Texts Using HTML5 and JavaScript

March 13, 2014

Creating a Set of Concentric Circles with Texts Using HTML5 and JavaScript

Filed under: HTML5, JavaScript — Tags: HTML5, JavaScript — Peter Holpar @ 23:48

Recently one of our customers wanted to have a webpage with an illustration including concentric circles / rings with clickable text on the arcs. When the user clicks on the texts we should display related information from SharePoint lists, but it is irrelevant to the main topic of this post. Our first idea was to create a static image map, but the customer informed us, that the texts and the arrangement might change several times, so I preferred some kind of dynamic solution and decided to apply HTML5 and JavaScript.

In this post I would like to introduce the results of my work and share the code with the community.

First I created a few JavaScript “classes” describing entities like a circle / ring (with attributes like center, inner and outer radius) and arc (with attributes like start and end angle, text and text alignment). Then I defined helper functions that enable creation of rings or appending arcs next to each other. Finally I wrote the necessary methods to draw the arcs, to write text along the arcs (supporting multiline text, various alignments like align to left, right, center or justify, and support to write text top-down at the upper part of the circle and bottom-up at the lower part), and to detect if the mouse is over an arc (and if it is, highlight the arc), and to react on mouse click.

Note: Multiline text support in this version is limited to explicit line breaks (‘\n’ in text), no automatic word wrapping.

The algorithms in the solution require a solid understanding of trigonometry. Fortunately, I found several resources on the web (see the source code at the bottom for related URLs) that helped me in the first steps.

The screenshot below illustrates a sample including a few rings and arcs for each ring. Note the various text directions (at the top and bottom parts of the circles, like the directions of “Test 2” versus direction of “Test 3”) and text alignments.

Note: In this implementation the circles and arcs are hardcoded, but you are free to get the data to initialization from a background system, like SharePoint lists or so.

When a mouse hovers over an arc, the arc is highlighted with an other background color.

Note: Using a significantly different background color for highlighting does not work well (you can try it for example using red instead of grey, like illustrated below), as after the mouse moves out from the area and the original background color is applied again, the borders of the arcs remain “dirty”.

Finally, the arc reacts on mouse click with an alert including the text of the arc, however you can extend the solution with more advanced interaction, like calling REST interfaces to display the response dynamically.

Below I publish the whole source code of this sample solution.

<!DOCTYPE HTML>
<html>
<head>
    <style>
        body
        {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="800"></canvas>
    <script>
        // http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
        // http://www.html5canvastutorials.com/labs/html5-canvas-text-along-arc-path/
 
        var canvas = document.getElementById('myCanvas');
 
        canvas.addEventListener('mousemove', track_mouse, false);
        canvas.addEventListener('click', click_mouse, false);
 
        TextAlignment = {
            Left : 0,
            Center : 1,
            Right : 2,
            Justify : 3
        }
 
        function point (x, y) {
            this.x = x;
            this.y = y;
        }
 
        function ring (center, minRadius, maxRadius) {
            this.center = center;
            this.minRadius = minRadius;
            this.maxRadius = maxRadius;
        }
 
        function arc (ring, startAngle, endAngle, text, alignment) {
            this.ring = ring;
            this.startAngle = startAngle;
            this.endAngle = endAngle;
            this.text = text;
            this.alignment = (alignment != undefined) ? alignment : TextAlignment.Center;
            this.createArcAfter = function (angle, text) {
                return new arc(this.ring, this.endAngle, this.endAngle + angle, text);
            };
            this.createArcAfterUpTo = function (upToArc, text) {
                return new arc(this.ring, this.endAngle, upToArc.startAngle, text);
            };
            this.isInside = function (pos) {
                // http://stackoverflow.com/questions/6270785/how-to-determine-whether-a-point-x-y-is-contained-within-an-arc-section-of-a-c
                // Angle = arctan(y/x); Radius = sqrt(x * x + y * y); 
                var result = false;
                var radius = Trig.distanceBetween2Points(pos, this.ring.center);
                // we calculate atan only if the radius is OK
                if ((radius >= this.ring.minRadius) && (radius <= this.ring.maxRadius)) {
                    var angle = Trig.angleBetween2Points(this.ring.center, pos);
 
                    var a = (angle < 0) ? angle + 2 * Math.PI : angle;
                    var sa = this.startAngle;
                    var ea = this.endAngle;
 
                    if (ea > 2 * Math.PI) {
                        sa -= 2 * Math.PI;
                        ea -= 2 * Math.PI;
                    }
 
                    if (sa > ea) {
                        sa -= 2 * Math.PI;
                    }
 
                    if ((a >= sa) && (a <= ea)) {
                        result = true;
                    }
                }
                return result;
            };
 
            this.higlightIfInside = function (pos) {
                if (this.isInside(pos)) {
                    arc.isHighlighted = this;
                    drawArc(this, true);
                }
            };
 
            this.doTask = function (pos) {
                if (this.isInside(pos)) {
                    alert(this.text);
                }
            };
 
            if (arc.arcs == undefined) {
                arc.arcs = new Array();
            }
            arc.arcs.push(this);
        }
 
        arc.lastHighlighted = null;
        arc.isHighlighted = null;
 
        arc.drawAll = function () {
            arc.arcs.forEach(function (a) {
                drawArc(a);
            });
        }
        
        arc.checkMousePos = function (pos) {
            arc.lastHighlighted = arc.isHighlighted;
            arc.isHighlighted = null;
            arc.arcs.forEach(function (a) {
                a.higlightIfInside(pos);
            });
            if ((arc.lastHighlighted != null) && (arc.isHighlighted != arc.lastHighlighted)) {
                drawArc(arc.lastHighlighted);
            }
 
            // set cursor according to the highlight status
            canvas.style.cursor = (arc.isHighlighted != null) ? 'pointer' : 'default';
        }
 
        arc.doTasks = function (pos) {
            arc.arcs.forEach(function (a) {
                a.doTask(pos);
            });
        }
 
        // http://www.tricedesigns.com/2012/01/04/sketching-with-html5-canvas-and-brush-images/
        var Trig = {
            distanceBetween2Points: function (point1, point2) {
                var dx = point2.x – point1.x;
                var dy = point2.y – point1.y;
                return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
            },
            angleBetween2Points: function (point1, point2) {
                var dx = point2.x – point1.x;
                var dy = point2.y – point1.y;
                return Math.atan2(dy, dx);
            },
            angleDiff: function (startAngle, endAngle) {
                var angleDiff = (startAngle – endAngle);
                angleDiff += (angleDiff > Math.PI) ? -2 * Math.PI : (angleDiff < -Math.PI) ? 2 * Math.PI : 0
                return angleDiff;
            }
        }
     
        var center = new point(canvas.width / 2, canvas.height / 2);
 
        var r1 = new ring(center, 100, 150);
        var arc1 = new arc(r1, 1.4 * Math.PI, 1.9 * Math.PI, "It's a test");
        var arc1_2 = arc1.createArcAfter(0.6 * Math.PI, "This is a\nmultiline text");
        var arc1_3 = arc1_2.createArcAfterUpTo(arc1, "Inner test");
 
        var r2 = new ring(center, 160, 210);
        var arc2 = new arc(r2, 0 * Math.PI, 0.6 * Math.PI, "Test messgae");
        var arc2_1 = arc2.createArcAfter(0.3 * Math.PI, "Test 2");
        var arc2_2 = arc2_1.createArcAfter(0.3 * Math.PI, "Test 3");
 
        var r3 = new ring(center, 220, 270);
        var arc3 = new arc(r3, 0 * Math.PI, 1 * Math.PI, "Left aligned text", TextAlignment.Left);
        var arc3_1 = new arc(r3, 1 * Math.PI, 1.5 * Math.PI, "Right aligned text", TextAlignment.Right);
        var arc3_2 = new arc(r3, 1.5 * Math.PI, 2 * Math.PI, "Justified text", TextAlignment.Justify);
 
        var context = canvas.getContext('2d');
 
        arc.drawAll();
 
        function drawArc(arc, isHighlighted) {
            var gapsAtEdgeAngle = Math.PI / 400;
            var isCounterClockwise = false;
 
            var startAngle = arc.startAngle + gapsAtEdgeAngle;
            var endAngle = arc.endAngle – gapsAtEdgeAngle;
            context.beginPath();
            var radAvg = (arc.ring.maxRadius + arc.ring.minRadius) / 2;
            context.arc(arc.ring.center.x, arc.ring.center.y, radAvg, startAngle, endAngle, isCounterClockwise);
            context.lineWidth = arc.ring.maxRadius – arc.ring.minRadius;
 
            // line color
            context.strokeStyle = isHighlighted ? 'grey' : 'lightgrey';
            context.stroke();
 
            drawTextAlongArc(arc.text, center, radAvg, startAngle, endAngle, arc.alignment);
        }
 
        function drawTextAlongArc(text, center, radius, startAngle, endAngle, alignment) {
            var fontSize = 12;
            var lineSpacing = 4;
            var lines = text.split('\n');
            var lineCount = lines.length;
 
            radius = radius + (lineCount – 1) / 2 * (fontSize + lineSpacing)
 
            lines.forEach(function (line) {
                drawLineAlongArc(context, line, center, radius, startAngle, endAngle, fontSize, alignment);
                radius -= (fontSize + lineSpacing);
            });           
        }
 
        function drawLineAlongArc(context, str, center, radius, startAngle, endAngle, fontSize, alignment) {
            var len = str.length, s;
            context.save();
 
            context.font = fontSize + 'pt Calibri';
            context.textAlign = 'center';
            context.fillStyle = 'black';
 
            // check if the arc is more at the top or at the bottom part of the ring
            var upperPart = ((startAngle + endAngle) / 2) > Math.PI;
 
            // reverse the aligment direction if the arc is at the bottom
            // Center and Justify is neutral in this sence
            if (!upperPart) {
                if (alignment == TextAlignment.Left) {
                    alignment = TextAlignment.Right;
                }
                else if (alignment == TextAlignment.Right) {
                    alignment = TextAlignment.Left;
                }
            }
 
            //var metrics = context.measureText(str);
            var metrics = context.measureText(str.replace(/./gi, 'W'));
            var textAngle = metrics.width / (radius – fontSize / 2);
 
            var gapsAtEdgeAngle = Math.PI / 80;
 
            if (alignment == TextAlignment.Left) {
                startAngle += gapsAtEdgeAngle;
                endAngle = startAngle + textAngle;
            }
            else if (alignment == TextAlignment.Center) {
                var ad = (Trig.angleDiff(endAngle, startAngle) – textAngle) / 2;
                startAngle += ad;
                endAngle -= ad;
            }
            else if (alignment == TextAlignment.Right) {
                endAngle -= gapsAtEdgeAngle;
                startAngle = endAngle – textAngle;
            }
            else if (alignment == TextAlignment.Justify) {
                startAngle += gapsAtEdgeAngle;
                endAngle -= gapsAtEdgeAngle;
            }
            else {
                // alignmet not supported
                // show some kind of warning
                // or fallback to default?
            }
 
            // calculate text height and adjust radius according to font size
            if (upperPart) {
                // if it is in the upper part, we have to change the orientation as well -> multiply by -1
                radius = -1 * (radius – fontSize / 2);
            }
            else {
                radius += fontSize / 2; //*
            }
 
            context.translate(center.x, center.y);
 
            var angleStep = Trig.angleDiff(endAngle, startAngle) / len;
 
            if (upperPart) {
                angleStep *= -1;
                context.rotate(startAngle + Math.PI / 2);
            }
            else {
                context.rotate(endAngle – Math.PI / 2);
            }
 
            context.rotate(angleStep / 2);
 
            for (var n = 0; n < len; n++) {
                context.rotate(-angleStep);
                context.save();
                context.translate(0, radius);
                s = str[n];
                context.fillText(s, 0, 0);
                context.restore();
            }
            context.restore();
        }
 
 
        function track_mouse(e) {
            var target = e.currentTarget;
            var mousePos = getMousePos(target, e);
 
            arc.checkMousePos(mousePos);
        }
 
        function click_mouse(e) {
            var target = e.currentTarget;
            var mousePos = getMousePos(target, e);
 
            arc.doTasks(mousePos);
        }
 
        function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
                x: evt.clientX – rect.left,
                y: evt.clientY – rect.top
            };
        }
    </script>
</body>
</html>

Any comments and ideas to further enhancements are welcome.

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Second Life of a Hungarian SharePoint Geek

March 13, 2014