Hello Everyone,

 

I come across small issue during preparations for UC in Berlin. I am preparing ESRI ArcGIS Demo and I wanted to display direction in Coresight Display.

I found that it will be easier to do my Custom Symbol for it. I never did it before and I am not used to programming in JavaScript. So as I don't have time to play with it to much, I would like to have it simple.

 

I have tag with value from 1 to 360 degrees as Input. And this is my output:

I decided to do not make it scalable, as I don't have time to play with it too much.

It is not customizable too, you can't change colors and other staff.

I found that the easiest way is to create template file with HTML5 Canvas:

<canvas id="container" width="200" height="200">
</canvas>

 

And paint everything on it in js function.

(function (CS) {
    function init(scope, elem) {
        var container = elem.find('#container')[0];
        var id = 'direction_' + Math.random().toString(36).substr(2, 16);
        container.id = id;
        scope.id = id;
        scope.updateGoogleMapsConfig = function (config) {
        }; 
        scope.resizeGoogleMaps = function (width, height) { 
        };
        scope.dataUpdate = function (data) {
            var angleOffset = 2 * Math.PI / 360 * 270
            // offesets for center of the canvas
            var canvasXoffset = 100;
            var canvasYoffset = 100;
            var c = document.getElementById(id); 
            var ctx = c.getContext("2d");
            //cover all previous by rectangle
            ctx.beginPath();
            ctx.fillStyle = '#333333';
            ctx.fillRect(0, 0, 200, 200);
            ctx.closePath();
            
            // print numbers on scale
            ctx.beginPath();
            ctx.fillStyle = '#FFFFFF';
            for (var i = 1; i <= 12; i++) {
                var textSize = 12;
                ctx.font = String(textSize) + "px Arial";
                //prepare string
                var txt = String(i*30) + "°";
                //offsets to place text on the center of possition
                var txtWidthOffset = ctx.measureText(txt).width / 2;
                var txtHeightOffset = textSize / 2
                //place text
                var angle = i * Math.PI / 6 + angleOffset;
                var x = canvasXoffset + 80*Math.cos(angle) - txtWidthOffset;
                var y = canvasYoffset + 80*Math.sin(angle) + txtHeightOffset;
                var c = document.getElementById(id);
                ctx.fillText(txt,x,y);
            };
            ctx.closePath();
            // pronf gry center dot
            ctx.beginPath();
            ctx.fillStyle = '#BBBBBB';
            ctx.arc(canvasXoffset,canvasYoffset,5,0,2*Math.PI);
            ctx.fill();
            ctx.closePath();
            // angle to display
            var angle = 2 * Math.PI * data.Value / 360 + angleOffset;
            // offsets for opposite points
            var offset1 = 2 * Math.PI * 165 / 360;
            var offset2 = 2 * Math.PI * 195 / 360;
            // arrow top point
            var x = canvasXoffset + 65*Math.cos(angle);
            var y = canvasYoffset + 65*Math.sin(angle);
            // arrow back points
            var x1 = canvasXoffset + 30*Math.cos(angle + offset1);
            var y1 = canvasYoffset + 30*Math.sin(angle + offset1);
            var x2 = canvasXoffset + 30*Math.cos(angle + offset2);
            var y2 = canvasYoffset + 30*Math.sin(angle + offset2);  
            // print arrow
            ctx.beginPath();
            ctx.strokeStyle = '#ffcc00';
            ctx.moveTo(x,y);
            ctx.lineTo(x1,y1);
            ctx.moveTo(x,y);
            ctx.lineTo(x2,y2);
            ctx.lineWidth = 3;
            ctx.stroke();
            ctx.closePath();
        }  
        return { dataUpdate: scope.dataUpdate, resize: scope.resizeGoogleMaps, configChange: scope.updateGoogleMapsConfig };
    }
    var def = {
        typeName: 'direction',
        displayName: CS.Messages.DirectionSymbol,
        datasourceBehavior: CS.DatasourceBehaviors.Single,
        getDefaultConfig: function() {
            return {
                DataShape: "Value",
                Height: 200,
                Width: 200,
            };
        },
        templateUrl: 'scripts/app/editor/symbols/ext/sym-direction-template.html',
        init: init
    };
    CS.symbolCatalog.register(def);
})(window.Coresight);

 

I hope that you will like it. It is just simple custom symbol, but it shows what I need.