src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/plugins/flot/jquery.flot.image.js

   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);