https://weatherfile.com/js/wf/wind_direction.js

1function WFWindWidget(canvasID, shapeColour, textColour){
2    this.canvas = document.getElementById(canvasID);
3    this.tHeight = (this.canvas.width / 2) / 3.5;
4    this.tWidth = (this.canvas.width / 2) / 3.5;
5    this.centre = this.canvas.width / 2;
6    this.centrey = this.canvas.height / 2;
7    
8    this.newWindDirection = 0;
9    this.directionDegrees = 0;
10    this.centreInfoValue = "";
11    this.centreInfoText = "";
12    this.tweening = false;
13
14    this.shapeColour = shapeColour || "#FFFFFF";
15    this.textColour = textColour || "#FFFFFF";
16}
17
18WFWindWidget.prototype.update = function (directionDegrees, centreInfoValue, centreInfoText) {
19    this.newWindDirection = directionDegrees;
20    this.centreInfoValue = centreInfoValue;
21    this.centreInfoText = centreInfoText;
22    this.draw(); // make sure the widget has been drawn
23    if (!this.tweening) {
24        this.tweening = true;
25        this.tweenDirection();
26    }
27}
28
29WFWindWidget.prototype.reset = function () {
30    this.newWindDirection = 0;
31    this.centreInfoValue = "";
32    this.centreInfoText = "";
33    this.tweening = false;
34}
35
36WFWindWidget.prototype.getFont = function (size) {
37        var ratio = size / 200; // calc ratio, first number is normal font, based on he second number of normal width
38        var size = this.canvas.width * ratio; // get font size based on current width
39        return (size | 0) + 'px Open Sans'; // set font
40}
41
42WFWindWidget.prototype.draw = function () {
43    var size;
44    var ctx = this.canvas.getContext("2d");
45    // crisper image for good browsers
46    ctx.webkitImageSmoothingEnabled = false;
47    ctx.mozImageSmoothingEnabled = false;
48    ctx.imageSmoothingEnabled = false; /// future
49
50    ctx.clearRect(0, 0, 2 * this.centre, 2 * this.centre); /* clear canvas */
51    ctx.fillStyle = this.shapeColour;
52    ctx.strokeStyle = this.shapeColour;
53    ctx.globalAlpha = 0.9;
54    ctx.shadowColor = '#000';
55    ctx.shadowBlur = 1;
56    ctx.shadowOffsetX = 0.1;
57    ctx.shadowOffsetY = 0.1;
58
59    var direction = this.directionDegrees;
60
61    /* draw arrow */
62    ctx.beginPath();
63    ctx.lineWidth = 5;
64
65    size = (this.canvas.width / 2);
66    var rAngle = ((direction * Math.PI / 180) - Math.PI / 2) - Math.PI; /* -Math.PI flips the direction (for outer arrow display)*/
67
68    var x0 = this.centre + size * Math.cos(rAngle);
69    var y0 = this.centrey + size * Math.sin(rAngle);
70
71    var tricx = this.centre + (size - this.tHeight) * Math.cos(rAngle);
72    var tricy = this.centrey + (size - this.tHeight) * Math.sin(rAngle);
73
74    var x1 = tricx + (this.tWidth) * Math.cos(rAngle - Math.PI / 2);
75    var y1 = tricy + (this.tWidth) * Math.sin(rAngle - Math.PI / 2);
76
77    var x2 = tricx + (this.tWidth) * Math.cos(rAngle + Math.PI / 2);
78    var y2 = tricy + (this.tWidth) * Math.sin(rAngle + Math.PI / 2);
79
80
81    ctx.moveTo(x0, y0);
82    ctx.lineTo(x1, y1);
83    ctx.lineTo(x2, y2);
84    ctx.closePath();
85    ctx.fill();
86
87    // draw circle
88    size = (this.canvas.width / 2) - this.tHeight;
89    ctx.beginPath();
90    ctx.lineWidth = size / 6.5; //7;
91
92    /*  x, y, radius, start angle (-90 so it starts facing north), arc length (2 * PI === 360 degreess === full circle) */
93    ctx.arc(this.centre, this.centrey, size, 0, (2 * Math.PI), false);
94    ctx.stroke();
95
96    // draw text
97    ctx.globalAlpha = 1;
98    var bigFont = 40;
99    ctx.font = this.getFont(bigFont);
100
101    ctx.fillStyle = this.textColour;
102    ctx.strokeStyle = this.textColour;
103    // ctx.fillText(currentWindDirection, centre - parseInt(ctx.measureText(currentWindDirection).width/2), centrey + centrey/8);
104    ctx.fillText(this.centreInfoValue, this.centre - parseInt(ctx.measureText(this.centreInfoValue).width / 2), this.centrey + this.centrey / 6);
105    var smallFont = 26;
106    ctx.globalAlpha = 0.8;
107    ctx.font = this.getFont(smallFont);
108    ctx.fillText(this.centreInfoText, this.centre - parseInt(ctx.measureText(this.centreInfoText).width / 2), (this.centrey + this.centrey / 4) + bigFont / 4);
109}
110
111WFWindWidget.prototype.tweenDirection = function () {
112    var self = this;
113    setTimeout(function () { // change to requestAnimationFrame?
114        self.draw(self.directionDegrees, self.centreInfoValue, self.centreInfoText);
115        if (self.directionDegrees === self.newWindDirection || self.tweening === false) {
116            self.tweening = false;

117        } else if (getDifference(self.directionDegrees, self.newWindDirection) < 0) {
118            self.directionDegrees -= 1
119            if (self.directionDegrees <= 0) self.directionDegrees = 360;
120            self.tweenDirection(self.directionDegrees);
121        } else if (getDifference(self.directionDegrees, self.newWindDirection) > 0) {
122            self.directionDegrees += 1;
123            if (self.directionDegrees >= 360) self.directionDegrees = 0;
124            self.tweenDirection(self.directionDegrees);
125        } else {
126            self.tweening = false;
127        }
128    }, ((1 / (Math.abs(self.directionDegrees - self.newWindDirection))) + 10) * 5); // ((45 - (Math.abs(current - currentWindDirection)/8)))
129}
130
131function getDifference(firstAngle, secondAngle) {
132    var difference = secondAngle - firstAngle;
133    while (difference < -180) difference += 360;
134    while (difference > 180) difference -= 360;
135    return difference;
136}