]> git.proxmox.com Git - ceph.git/blame - ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/plugins/flot/jquery.flot.image.js
bump version to 12.2.2-pve1
[ceph.git] / ceph / src / pybind / mgr / dashboard / static / AdminLTE-2.3.7 / plugins / flot / jquery.flot.image.js
CommitLineData
31f18b77
FG
1/* Flot plugin for plotting images.
2
3Copyright (c) 2007-2013 IOLA and Ole Laursen.
4Licensed under the MIT license.
5
6The 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
8in the plot. Image must be a fully loaded Javascript image (you can make one
9with new Image()). If the image is not complete, it's skipped when plotting.
10
11There are two helpers included for retrieving images. The easiest work the way
12that you put in URLs instead of images in the data, like this:
13
14 [ "myimage.png", 0, 0, 10, 10 ]
15
16Then call $.plot.image.loadData( data, options, callback ) where data and
17options are the same as you pass in to $.plot. This loads the images, replaces
18the URLs in the data with the corresponding images and calls "callback" when
19all images are loaded (or failed loading). In the callback, you can then call
20$.plot with the data set. See the included example.
21
22A more low-level helper, $.plot.image.load(urls, callback) is also included.
23Given a list of URLs, it calls callback with an object mapping from URL to
24Image object when all images are loaded or have failed loading.
25
26The plugin supports these options:
27
28 series: {
29 images: {
30 show: boolean
31 anchor: "corner" or "center"
32 alpha: [ 0, 1 ]
33 }
34 }
35
36They can be specified for a specific series:
37
38 $.plot( $("#placeholder"), [{
39 data: [ ... ],
40 images: { ... }
41 ])
42
43Note that because the data format is different from usual data points, you
44can't use images with anything else in a specific data series.
45
46Setting "anchor" to "center" causes the pixels in the image to be anchored at
47the corner pixel centers inside of at the pixel corners, effectively letting
48half a pixel stick out to each side in the plot.
49
50A possible future direction could be support for tiling for large images (like
51Google 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);