forked from paphko/mmm-weatherchart
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathmmm-weatherchart.js
204 lines (168 loc) · 8.73 KB
/
mmm-weatherchart.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
Module.register("mmm-weatherchart", {
defaults: {
locationId: "2-6619832", // from the url of the related page of yr.no. e.g.: https://www.yr.no/en/forecast/daily-table/2-6619832/United%20Kingdom/England/Greater%20London/Trafalgar%20Square
updateInterval: 60 * 60 * 1000, // every hour
hideBorder: true,
negativeImage: true,
retryDelay: 2500,
domain: "www.yr.no",
path: "/en/content/",
mmDirectory: "/home/pi/MagicMirror/", // not sure whether it is possible to ask MM for this path?
customiseSVG: true, // change colours in hex values
background_colour: "#000000",
default_text_colour : "#d9d9d9", // "Meteogram for...."
label_text_colour : "#f2f2f2", // "Tuesday"
default_fill_colour : "#999999", // wind direction arrows, etc.
below_zero_line_colour: "#1165ed",
above_zero_line_colour: "#ffdb48",
minor_gridline_colour: "#43443c",
major_gridline_colour: "#9d9f93",
rain_colour: "#83d2fe",
snow_colour: "#ffffff",
moon_colour_a: "#afb3b6",
moon_colour_b: "#acafb3",
yr_logo_circle: "#004a61",
hide_branding: false, // hide the yr, nrk & mi logos
// properties to override the image size.
// to use them, set customize_size: true
// this is a bit experimental and not guaranteed to work well. getting the correct values for your set up is fiddly and
// will probably need a lot of trial & error, and inspecting the svg in the browser to test the values.
customize_size: false, // whether to override the size of the forecast image.
override_scale_factor: 1.1, // forecast will be 10% bigger. requires customize_size: true
override_width: 1200, // image canvas needs to be expanded to draw a bigger forecast.
override_height: 500, // as above
override_x_location: 200, // shift image horizontally
override_y_location: -40, // shift image vertically
override_precipitation_key_location_x: 176, // shift rain key horizontally
override_wind_key_location_x: 348, // shift wind key horizontally
},
// Define required scripts.
getScripts: function() {
return ["moment.js", "hashmap.js"];
},
getDom: function() {
var wrapper = document.createElement("div");
var object = document.createElement("object"); // FIX chrome not rendering temperature line when using <img>
object.data = this.srcMap;
if (this.config.hideBorder) {
wrapper.style.width = "810px";
wrapper.style.height = "241px";
wrapper.style.overflow = "hidden";
wrapper.style.position = "relative";
}
wrapper.appendChild(object);
return wrapper;
},
start: function() {
Log.info("Starting module: " + this.name);
this.loaded = false;
this.scheduleUpdate(3); // wait some 3 secs and run initial update
this.updateTimer = null;
this.customColours = this.createCustomColourArray();
this.customSize = this.createCustomSizeArray();
},
getWeatherMap: function() {
var self = this;
var mapLocal = this.config.path + this.config.locationId + "/meteogram.svg";
var payload = {
domain: this.config.domain,
path: mapLocal,
mmDir: this.config.mmDirectory,
customiseSVG: this.config.customiseSVG,
customColours: this.customColours,
customSize: this.customSize
};
console.log("Downloading weather map from URL: " + payload.domain + payload.path);
self.sendSocketNotification("FETCH_MAP", payload);
},
socketNotificationReceived: function(notification, payload) {
var self = this;
if (notification === "MAPPED"){
this.srcMap = payload;
if (typeof this.srcMap !== "undefined") {
this.loaded = true;
this.updateDom();
}
this.scheduleUpdate();
}
else if (notification === "FAILED"){
this.scheduleUpdate(retryDelay);
}
},
// return 2d array (map) of new colours to be set in the meteogram
// key = colour; value = replacement colour from config
createCustomColourArray: function() {
var array = [
["Weather forecast for ", ''],
['currentColor', this.config.default_fill_colour], // wind arrows, etc
['fill="white', 'fill="'+this.config.background_colour],
['fill="#ffffff', 'fill="'+this.config.background_colour],
['fill: #ffffff', 'fill: '+this.config.background_colour],
['background-color:#ffffff', 'background-color:'+this.config.background_colour],
["#21292b", this.config.default_text_colour],
["#56616c", this.config.label_text_colour],
["#c3d0d8", this.config.minor_gridline_colour],
["#56616c", this.config.major_gridline_colour],
["#c60000", this.config.above_zero_line_colour],
['stop-color="#006edb', 'stop-color="' + this.config.below_zero_line_colour],
["#47c0e3", this.config.snow_colour],
["#006EDB", this.config.rain_colour], // rain drop
['fill="#006edb', 'fill="' + this.config.rain_colour], // rain level
['height="20%" fill="' + this.config.rain_colour, 'height="20%" fill="' + this.config.below_zero_line_colour], // revert the temperature key
['#00b9f1', this.config.yr_logo_circle ],
['#686e73', this.config.moon_colour_a],
['#6a7075', this.config.moon_colour_b],
['1.3-1>', '1.3-1.7,2.2-2.1,2.4l0,0l0,0L6,12c0.8-0.5,2.9-1.4,2.9-4.4L9,0.4L9,0.4z" /></g></svg>'] // bugfix? for dodgy, unclosed yr logo xml
];
if(this.config.hide_branding) {
var branding = [
['width="30"', 'width="0"'], // hide yr logo
['height="30"', 'height="0"'],
['Served by', ''],
['width="39.5"', 'width="0"'], // hide nrk logo
['height="13.941176470588236"', 'height="0"'],
['width="82.5"', 'width="0"'], //hide Met. Institutt logo
['height="22.247191011235955"', 'height="0"']
];
array = array.concat(branding);
}
return array;
},
// return 2d array (map) of new dimensions to be set in the meteogram
// key = raw value from yr; value = replacement colour from config
createCustomSizeArray: function() {
if(!this.config.customize_size) {
var array = [];
return array;
}
var array = [
// scale the main canvas
['height="391"', 'height="' + this.config.override_height + '"'],
['width="782"', 'transform="translate(' + this.config.override_x_location + ', ' + this.config.override_y_location + ') scale(' + this.config.override_scale_factor + ')" width="' + this.config.override_width + '"'],
// HACK: don't translate the <rect> element
['rect x="0" y="0" transform="translate\\(' + this.config.override_x_location + ', ' + this.config.override_y_location + '\\) ', 'rect x="0" y="0" transform="translate(0, 0) '],
// scale the forecast
['translate\\(0', 'scale(' + this.config.override_scale_factor + ') translate(0'],
['translate\\(30 ', 'scale(' + this.config.override_scale_factor + ') translate(30 '],
['translate\\(30, ', 'scale(' + this.config.override_scale_factor + ') translate(30, '],
['translate\\(30 180', 'translate(30 200'], // increase separation between main forecast & wind forecast
['translate\\(30 252', 'translate(30 282'],
['translate\\(30, 278', 'translate(30 308'],
// shift the key elements
['translate\\(126, 0', 'translate(' + this.config.override_precipitation_key_location_x + ', 0'], // precipitation key
['translate\\(258, 0', 'translate(' + this.config.override_wind_key_location_x + ', 0'] // wind key
];
return array;
},
scheduleUpdate: function(delay) {
var nextLoad = this.config.updateInterval;
if (typeof delay !== "undefined" && delay >= 0) {
nextLoad = delay;
}
var self = this;
clearTimeout(this.updateTimer);
this.updateTimer = setTimeout(function() {
self.getWeatherMap();
}, nextLoad);
},
});