1 | /* Flot plugin for plotting images. |
---|
2 | |
---|
3 | Copyright (c) 2007-2013 IOLA and Ole Laursen. |
---|
4 | Licensed under the MIT license. |
---|
5 | |
---|
6 | The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and |
---|
7 | (x2, y2) are where you intend the two opposite corners of the image to end up |
---|
8 | in the plot. Image must be a fully loaded Javascript image (you can make one |
---|
9 | with new Image()). If the image is not complete, it's skipped when plotting. |
---|
10 | |
---|
11 | There are two helpers included for retrieving images. The easiest work the way |
---|
12 | that you put in URLs instead of images in the data, like this: |
---|
13 | |
---|
14 | [ "myimage.png", 0, 0, 10, 10 ] |
---|
15 | |
---|
16 | Then call $.plot.image.loadData( data, options, callback ) where data and |
---|
17 | options are the same as you pass in to $.plot. This loads the images, replaces |
---|
18 | the URLs in the data with the corresponding images and calls "callback" when |
---|
19 | all images are loaded (or failed loading). In the callback, you can then call |
---|
20 | $.plot with the data set. See the included example. |
---|
21 | |
---|
22 | A more low-level helper, $.plot.image.load(urls, callback) is also included. |
---|
23 | Given a list of URLs, it calls callback with an object mapping from URL to |
---|
24 | Image object when all images are loaded or have failed loading. |
---|
25 | |
---|
26 | The plugin supports these options: |
---|
27 | |
---|
28 | series: { |
---|
29 | images: { |
---|
30 | show: boolean |
---|
31 | anchor: "corner" or "center" |
---|
32 | alpha: [ 0, 1 ] |
---|
33 | } |
---|
34 | } |
---|
35 | |
---|
36 | They can be specified for a specific series: |
---|
37 | |
---|
38 | $.plot( $("#placeholder"), [{ |
---|
39 | data: [ ... ], |
---|
40 | images: { ... } |
---|
41 | ]) |
---|
42 | |
---|
43 | Note that because the data format is different from usual data points, you |
---|
44 | can't use images with anything else in a specific data series. |
---|
45 | |
---|
46 | Setting "anchor" to "center" causes the pixels in the image to be anchored at |
---|
47 | the corner pixel centers inside of at the pixel corners, effectively letting |
---|
48 | half a pixel stick out to each side in the plot. |
---|
49 | |
---|
50 | A possible future direction could be support for tiling for large images (like |
---|
51 | Google Maps). |
---|
52 | |
---|
53 | */ |
---|
54 | |
---|
55 | (function ($) { |
---|
56 | var options = { |
---|
57 | series: { |
---|
58 | images: { |
---|
59 | show: false, |
---|
60 | alpha: 1, |
---|
61 | anchor: "corner" // or "center" |
---|
62 | } |
---|
63 | } |
---|
64 | }; |
---|
65 | |
---|
66 | $.plot.image = {}; |
---|
67 | |
---|
68 | $.plot.image.loadDataImages = function (series, options, callback) { |
---|
69 | var urls = [], points = []; |
---|
70 | |
---|
71 | var defaultShow = options.series.images.show; |
---|
72 | |
---|
73 | $.each(series, function (i, s) { |
---|
74 | if (!(defaultShow || s.images.show)) |
---|
75 | return; |
---|
76 | |
---|
77 | if (s.data) |
---|
78 | s = s.data; |
---|
79 | |
---|
80 | $.each(s, function (i, p) { |
---|
81 | if (typeof p[0] == "string") { |
---|
82 | urls.push(p[0]); |
---|
83 | points.push(p); |
---|
84 | } |
---|
85 | }); |
---|
86 | }); |
---|
87 | |
---|
88 | $.plot.image.load(urls, function (loadedImages) { |
---|
89 | $.each(points, function (i, p) { |
---|
90 | var url = p[0]; |
---|
91 | if (loadedImages[url]) |
---|
92 | p[0] = loadedImages[url]; |
---|
93 | }); |
---|
94 | |
---|
95 | callback(); |
---|
96 | }); |
---|
97 | }; |
---|
98 | |
---|
99 | $.plot.image.load = function (urls, callback) { |
---|
100 | var missing = urls.length, loaded = {}; |
---|
101 | if (missing == 0) |
---|
102 | callback({}); |
---|
103 | |
---|
104 | $.each(urls, function (i, url) { |
---|
105 | var handler = function () { |
---|
106 | --missing; |
---|
107 | |
---|
108 | loaded[url] = this; |
---|
109 | |
---|
110 | if (missing == 0) |
---|
111 | callback(loaded); |
---|
112 | }; |
---|
113 | |
---|
114 | $('<img />').load(handler).error(handler).attr('src', url); |
---|
115 | }); |
---|
116 | }; |
---|
117 | |
---|
118 | function drawSeries(plot, ctx, series) { |
---|
119 | var plotOffset = plot.getPlotOffset(); |
---|
120 | |
---|
121 | if (!series.images || !series.images.show) |
---|
122 | return; |
---|
123 | |
---|
124 | var points = series.datapoints.points, |
---|
125 | ps = series.datapoints.pointsize; |
---|
126 | |
---|
127 | for (var i = 0; i < points.length; i += ps) { |
---|
128 | var img = points[i], |
---|
129 | x1 = points[i + 1], y1 = points[i + 2], |
---|
130 | x2 = points[i + 3], y2 = points[i + 4], |
---|
131 | xaxis = series.xaxis, yaxis = series.yaxis, |
---|
132 | tmp; |
---|
133 | |
---|
134 | // actually we should check img.complete, but it |
---|
135 | // appears to be a somewhat unreliable indicator in |
---|
136 | // IE6 (false even after load event) |
---|
137 | if (!img || img.width <= 0 || img.height <= 0) |
---|
138 | continue; |
---|
139 | |
---|
140 | if (x1 > x2) { |
---|
141 | tmp = x2; |
---|
142 | x2 = x1; |
---|
143 | x1 = tmp; |
---|
144 | } |
---|
145 | if (y1 > y2) { |
---|
146 | tmp = y2; |
---|
147 | y2 = y1; |
---|
148 | y1 = tmp; |
---|
149 | } |
---|
150 | |
---|
151 | // if the anchor is at the center of the pixel, expand the |
---|
152 | // image by 1/2 pixel in each direction |
---|
153 | if (series.images.anchor == "center") { |
---|
154 | tmp = 0.5 * (x2-x1) / (img.width - 1); |
---|
155 | x1 -= tmp; |
---|
156 | x2 += tmp; |
---|
157 | tmp = 0.5 * (y2-y1) / (img.height - 1); |
---|
158 | y1 -= tmp; |
---|
159 | y2 += tmp; |
---|
160 | } |
---|
161 | |
---|
162 | // clip |
---|
163 | if (x1 == x2 || y1 == y2 || |
---|
164 | x1 >= xaxis.max || x2 <= xaxis.min || |
---|
165 | y1 >= yaxis.max || y2 <= yaxis.min) |
---|
166 | continue; |
---|
167 | |
---|
168 | var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height; |
---|
169 | if (x1 < xaxis.min) { |
---|
170 | sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1); |
---|
171 | x1 = xaxis.min; |
---|
172 | } |
---|
173 | |
---|
174 | if (x2 > xaxis.max) { |
---|
175 | sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1); |
---|
176 | x2 = xaxis.max; |
---|
177 | } |
---|
178 | |
---|
179 | if (y1 < yaxis.min) { |
---|
180 | sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1); |
---|
181 | y1 = yaxis.min; |
---|
182 | } |
---|
183 | |
---|
184 | if (y2 > yaxis.max) { |
---|
185 | sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1); |
---|
186 | y2 = yaxis.max; |
---|
187 | } |
---|
188 | |
---|
189 | x1 = xaxis.p2c(x1); |
---|
190 | x2 = xaxis.p2c(x2); |
---|
191 | y1 = yaxis.p2c(y1); |
---|
192 | y2 = yaxis.p2c(y2); |
---|
193 | |
---|
194 | // the transformation may have swapped us |
---|
195 | if (x1 > x2) { |
---|
196 | tmp = x2; |
---|
197 | x2 = x1; |
---|
198 | x1 = tmp; |
---|
199 | } |
---|
200 | if (y1 > y2) { |
---|
201 | tmp = y2; |
---|
202 | y2 = y1; |
---|
203 | y1 = tmp; |
---|
204 | } |
---|
205 | |
---|
206 | tmp = ctx.globalAlpha; |
---|
207 | ctx.globalAlpha *= series.images.alpha; |
---|
208 | ctx.drawImage(img, |
---|
209 | sx1, sy1, sx2 - sx1, sy2 - sy1, |
---|
210 | x1 + plotOffset.left, y1 + plotOffset.top, |
---|
211 | x2 - x1, y2 - y1); |
---|
212 | ctx.globalAlpha = tmp; |
---|
213 | } |
---|
214 | } |
---|
215 | |
---|
216 | function processRawData(plot, series, data, datapoints) { |
---|
217 | if (!series.images.show) |
---|
218 | return; |
---|
219 | |
---|
220 | // format is Image, x1, y1, x2, y2 (opposite corners) |
---|
221 | datapoints.format = [ |
---|
222 | { required: true }, |
---|
223 | { x: true, number: true, required: true }, |
---|
224 | { y: true, number: true, required: true }, |
---|
225 | { x: true, number: true, required: true }, |
---|
226 | { y: true, number: true, required: true } |
---|
227 | ]; |
---|
228 | } |
---|
229 | |
---|
230 | function init(plot) { |
---|
231 | plot.hooks.processRawData.push(processRawData); |
---|
232 | plot.hooks.drawSeries.push(drawSeries); |
---|
233 | } |
---|
234 | |
---|
235 | $.plot.plugins.push({ |
---|
236 | init: init, |
---|
237 | options: options, |
---|
238 | name: 'image', |
---|
239 | version: '1.1' |
---|
240 | }); |
---|
241 | })(jQuery); |
---|