iobroker.ebus 3.3.7 → 3.3.8

package/widgets/ebus/lib/js/flot/jquery.flot.hover.js

@@ -0,0 +1,361 @@
+/* global jQuery */
+
+/**
+## jquery.flot.hover.js
+
+This plugin is used for mouse hover and tap on a point of plot series.
+It supports the following options:
+```js
+grid: {
+    hoverable: false, //to trigger plothover event on mouse hover or tap on a point
+    clickable: false //to trigger plotclick event on mouse hover
+}
+```
+
+It listens to native mouse move event or click, as well as artificial generated
+tap and touchevent.
+
+When the mouse is over a point or a tap on a point is performed, that point or
+the correscponding bar will be highlighted and a "plothover" event will be generated.
+
+Custom "touchevent" is triggered when any touch interaction is made. Hover plugin
+handles this events by unhighlighting all of the previously highlighted points and generates
+"plothovercleanup" event to notify any part that is handling plothover (for exemple to cleanup
+the tooltip from webcharts).
+*/
+
+(function($) {
+    'use strict';
+
+    var options = {
+        grid: {
+            hoverable: false,
+            clickable: false
+        }
+    };
+
+    var browser = $.plot.browser;
+
+    var eventType = {
+        click: 'click',
+        hover: 'hover'
+    }
+
+    function init(plot) {
+        var lastMouseMoveEvent;
+        var highlights = [];
+
+        console.log("hover init");
+
+        function bindEvents(plot, eventHolder) {
+            var o = plot.getOptions();
+
+            if (o.grid.hoverable || o.grid.clickable) {
+                eventHolder[0].addEventListener('touchevent', triggerCleanupEvent, false);
+                eventHolder[0].addEventListener('tap', generatePlothoverEvent, false);
+            }
+
+            if (o.grid.clickable) {
+                eventHolder.bind("click", onClick);
+            }
+
+            if (o.grid.hoverable) {
+                eventHolder.bind("mousemove", onMouseMove);
+
+                // Use bind, rather than .mouseleave, because we officially
+                // still support jQuery 1.2.6, which doesn't define a shortcut
+                // for mouseenter or mouseleave.  This was a bug/oversight that
+                // was fixed somewhere around 1.3.x.  We can return to using
+                // .mouseleave when we drop support for 1.2.6.
+
+                eventHolder.bind("mouseleave", onMouseLeave);
+            }
+        }
+
+        function shutdown(plot, eventHolder) {
+            eventHolder[0].removeEventListener('tap', generatePlothoverEvent);
+            eventHolder[0].removeEventListener('touchevent', triggerCleanupEvent);
+            eventHolder.unbind("mousemove", onMouseMove);
+            eventHolder.unbind("mouseleave", onMouseLeave);
+            eventHolder.unbind("click", onClick);
+            highlights = [];
+        }
+
+        function generatePlothoverEvent(e) {
+            var o = plot.getOptions(),
+                newEvent = new CustomEvent('mouseevent');
+
+            //transform from touch event to mouse event format
+            newEvent.pageX = e.detail.changedTouches[0].pageX;
+            newEvent.pageY = e.detail.changedTouches[0].pageY;
+            newEvent.clientX = e.detail.changedTouches[0].clientX;
+            newEvent.clientY = e.detail.changedTouches[0].clientY;
+
+            if (o.grid.hoverable) {
+                doTriggerClickHoverEvent(newEvent, eventType.hover, 30);
+            }
+            return false;
+        }
+
+        function doTriggerClickHoverEvent(event, eventType, searchDistance) {
+            var series = plot.getData();
+            if (event !== undefined &&
+                series.length > 0 &&
+                series[0].xaxis.c2p !== undefined &&
+                series[0].yaxis.c2p !== undefined) {
+                var eventToTrigger = "plot" + eventType;
+                var seriesFlag = eventType + "able";
+                triggerClickHoverEvent(eventToTrigger, event,
+                    function(i) {
+                        return series[i][seriesFlag] !== false;
+                    }, searchDistance);
+            }
+        }
+
+        function onMouseMove(e) {
+            lastMouseMoveEvent = e;
+            plot.getPlaceholder()[0].lastMouseMoveEvent = e;
+            doTriggerClickHoverEvent(e, eventType.hover);
+        }
+
+        function onMouseLeave(e) {
+            lastMouseMoveEvent = undefined;
+            plot.getPlaceholder()[0].lastMouseMoveEvent = undefined;
+            triggerClickHoverEvent("plothover", e,
+                function(i) {
+                    return false;
+                });
+        }
+
+        function onClick(e) {
+            doTriggerClickHoverEvent(e, eventType.click);
+        }
+
+        function triggerCleanupEvent() {
+            plot.unhighlight();
+            plot.getPlaceholder().trigger('plothovercleanup');
+        }
+
+        // trigger click or hover event (they send the same parameters
+        // so we share their code)
+        function triggerClickHoverEvent(eventname, event, seriesFilter, searchDistance) {
+            var options = plot.getOptions(),
+                offset = plot.offset(),
+                page = browser.getPageXY(event),
+                canvasX = page.X - offset.left,
+                canvasY = page.Y - offset.top,
+                pos = plot.c2p({
+                    left: canvasX,
+                    top: canvasY
+                }),
+                distance = searchDistance !== undefined ? searchDistance : options.grid.mouseActiveRadius;
+
+            pos.pageX = page.X;
+            pos.pageY = page.Y;
+
+            var items = plot.findNearbyItems(canvasX, canvasY, seriesFilter, distance);
+            var item = items[0];
+
+            for (let i = 1; i < items.length; ++i) {
+                if (item.distance === undefined ||
+                    items[i].distance < item.distance) {
+                    item = items[i];
+                }
+            }
+
+            if (item) {
+                // fill in mouse pos for any listeners out there
+                item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left, 10);
+                item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top, 10);
+            } else {
+                item = null;
+            }
+
+            if (options.grid.autoHighlight) {
+                // clear auto-highlights
+                for (let i = 0; i < highlights.length; ++i) {
+                    var h = highlights[i];
+                    if ((h.auto === eventname &&
+                        !(item && h.series === item.series &&
+                            h.point[0] === item.datapoint[0] &&
+                            h.point[1] === item.datapoint[1])) || !item) {
+                        unhighlight(h.series, h.point);
+                    }
+                }
+
+                if (item) {
+                    highlight(item.series, item.datapoint, eventname);
+                }
+            }
+
+            plot.getPlaceholder().trigger(eventname, [pos, item, items]);
+        }
+
+        function highlight(s, point, auto) {
+            if (typeof s === "number") {
+                s = plot.getData()[s];
+            }
+
+            if (typeof point === "number") {
+                var ps = s.datapoints.pointsize;
+                point = s.datapoints.points.slice(ps * point, ps * (point + 1));
+            }
+
+            var i = indexOfHighlight(s, point);
+            if (i === -1) {
+                highlights.push({
+                    series: s,
+                    point: point,
+                    auto: auto
+                });
+
+                plot.triggerRedrawOverlay();
+            } else if (!auto) {
+                highlights[i].auto = false;
+            }
+        }
+
+        function unhighlight(s, point) {
+            if (s == null && point == null) {
+                highlights = [];
+                plot.triggerRedrawOverlay();
+                return;
+            }
+
+            if (typeof s === "number") {
+                s = plot.getData()[s];
+            }
+
+            if (typeof point === "number") {
+                var ps = s.datapoints.pointsize;
+                point = s.datapoints.points.slice(ps * point, ps * (point + 1));
+            }
+
+            var i = indexOfHighlight(s, point);
+            if (i !== -1) {
+                highlights.splice(i, 1);
+
+                plot.triggerRedrawOverlay();
+            }
+        }
+
+        function indexOfHighlight(s, p) {
+            for (var i = 0; i < highlights.length; ++i) {
+                var h = highlights[i];
+                if (h.series === s &&
+                    h.point[0] === p[0] &&
+                    h.point[1] === p[1]) {
+                    return i;
+                }
+            }
+
+            return -1;
+        }
+
+        function processDatapoints() {
+            triggerCleanupEvent();
+            doTriggerClickHoverEvent(lastMouseMoveEvent, eventType.hover);
+        }
+
+        function setupGrid() {
+            doTriggerClickHoverEvent(lastMouseMoveEvent, eventType.hover);
+        }
+
+        function drawOverlay(plot, octx, overlay) {
+            var plotOffset = plot.getPlotOffset(),
+                i, hi;
+
+            octx.save();
+            octx.translate(plotOffset.left, plotOffset.top);
+            for (i = 0; i < highlights.length; ++i) {
+                hi = highlights[i];
+
+                if (hi.series.bars.show) drawBarHighlight(hi.series, hi.point, octx);
+                else drawPointHighlight(hi.series, hi.point, octx, plot);
+            }
+            octx.restore();
+        }
+
+        function drawPointHighlight(series, point, octx, plot) {
+            var x = point[0],
+                y = point[1],
+                axisx = series.xaxis,
+                axisy = series.yaxis,
+                highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString();
+
+            if (x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max) {
+                return;
+            }
+
+            var pointRadius = series.points.radius + series.points.lineWidth / 2;
+            octx.lineWidth = pointRadius;
+            octx.strokeStyle = highlightColor;
+            var radius = 1.5 * pointRadius;
+            x = axisx.p2c(x);
+            y = axisy.p2c(y);
+
+            octx.beginPath();
+            var symbol = series.points.symbol;
+            if (symbol === 'circle') {
+                octx.arc(x, y, radius, 0, 2 * Math.PI, false);
+            } else if (typeof symbol === 'string' && plot.drawSymbol && plot.drawSymbol[symbol]) {
+                plot.drawSymbol[symbol](octx, x, y, radius, false);
+            }
+
+            octx.closePath();
+            octx.stroke();
+        }
+
+        function drawBarHighlight(series, point, octx) {
+            var highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString(),
+                fillStyle = highlightColor,
+                barLeft;
+
+            var barWidth = series.bars.barWidth[0] || series.bars.barWidth;
+            switch (series.bars.align) {
+                case "left":
+                    barLeft = 0;
+                    break;
+                case "right":
+                    barLeft = -barWidth;
+                    break;
+                default:
+                    barLeft = -barWidth / 2;
+            }
+
+            octx.lineWidth = series.bars.lineWidth;
+            octx.strokeStyle = highlightColor;
+
+            var fillTowards = series.bars.fillTowards || 0,
+                bottom = fillTowards > series.yaxis.min ? Math.min(series.yaxis.max, fillTowards) : series.yaxis.min;
+
+            $.plot.drawSeries.drawBar(point[0], point[1], point[2] || bottom, barLeft, barLeft + barWidth,
+                function() {
+                    return fillStyle;
+                }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth);
+        }
+
+        function initHover(plot, options) {
+            plot.highlight = highlight;
+            plot.unhighlight = unhighlight;
+            if (options.grid.hoverable || options.grid.clickable) {
+                plot.hooks.drawOverlay.push(drawOverlay);
+                plot.hooks.processDatapoints.push(processDatapoints);
+                plot.hooks.setupGrid.push(setupGrid);
+            }
+
+            lastMouseMoveEvent = plot.getPlaceholder()[0].lastMouseMoveEvent;
+        }
+
+        plot.hooks.bindEvents.push(bindEvents);
+        plot.hooks.shutdown.push(shutdown);
+        plot.hooks.processOptions.push(initHover);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'hover',
+        version: '0.1'
+    });
+})(jQuery);

package/widgets/ebus/lib/js/flot/jquery.flot.image.js

@@ -0,0 +1,249 @@
+/* Flot plugin for plotting images.
+
+Copyright (c) 2007-2014 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The data syntax is [ [ image, x1, y1, x2, y2 ], ... ] where (x1, y1) and
+(x2, y2) are where you intend the two opposite corners of the image to end up
+in the plot. Image must be a fully loaded Javascript image (you can make one
+with new Image()). If the image is not complete, it's skipped when plotting.
+
+There are two helpers included for retrieving images. The easiest work the way
+that you put in URLs instead of images in the data, like this:
+
+    [ "myimage.png", 0, 0, 10, 10 ]
+
+Then call $.plot.image.loadData( data, options, callback ) where data and
+options are the same as you pass in to $.plot. This loads the images, replaces
+the URLs in the data with the corresponding images and calls "callback" when
+all images are loaded (or failed loading). In the callback, you can then call
+$.plot with the data set. See the included example.
+
+A more low-level helper, $.plot.image.load(urls, callback) is also included.
+Given a list of URLs, it calls callback with an object mapping from URL to
+Image object when all images are loaded or have failed loading.
+
+The plugin supports these options:
+
+    series: {
+        images: {
+            show: boolean
+            anchor: "corner" or "center"
+            alpha: [ 0, 1 ]
+        }
+    }
+
+They can be specified for a specific series:
+
+    $.plot( $("#placeholder"), [{
+        data: [ ... ],
+        images: { ... }
+    ])
+
+Note that because the data format is different from usual data points, you
+can't use images with anything else in a specific data series.
+
+Setting "anchor" to "center" causes the pixels in the image to be anchored at
+the corner pixel centers inside of at the pixel corners, effectively letting
+half a pixel stick out to each side in the plot.
+
+A possible future direction could be support for tiling for large images (like
+Google Maps).
+
+*/
+
+(function ($) {
+    var options = {
+        series: {
+            images: {
+                show: false,
+                alpha: 1,
+                anchor: "corner" // or "center"
+            }
+        }
+    };
+
+    $.plot.image = {};
+
+    $.plot.image.loadDataImages = function (series, options, callback) {
+        var urls = [], points = [];
+
+        var defaultShow = options.series.images.show;
+
+        $.each(series, function (i, s) {
+            if (!(defaultShow || s.images.show)) {
+                return;
+            }
+
+            if (s.data) {
+                s = s.data;
+            }
+
+            $.each(s, function (i, p) {
+                if (typeof p[0] === "string") {
+                    urls.push(p[0]);
+                    points.push(p);
+                }
+            });
+        });
+
+        $.plot.image.load(urls, function (loadedImages) {
+            $.each(points, function (i, p) {
+                var url = p[0];
+                if (loadedImages[url]) {
+                    p[0] = loadedImages[url];
+                }
+            });
+
+            callback();
+        });
+    }
+
+    $.plot.image.load = function (urls, callback) {
+        var missing = urls.length, loaded = {};
+        if (missing === 0) {
+            callback({});
+        }
+
+        $.each(urls, function (i, url) {
+            var handler = function () {
+                --missing;
+                loaded[url] = this;
+
+                if (missing === 0) {
+                    callback(loaded);
+                }
+            };
+
+            $('<img />').load(handler).error(handler).attr('src', url);
+        });
+    };
+
+    function drawSeries(plot, ctx, series) {
+        var plotOffset = plot.getPlotOffset();
+
+        if (!series.images || !series.images.show) {
+            return;
+        }
+
+        var points = series.datapoints.points,
+            ps = series.datapoints.pointsize;
+
+        for (var i = 0; i < points.length; i += ps) {
+            var img = points[i],
+                x1 = points[i + 1], y1 = points[i + 2],
+                x2 = points[i + 3], y2 = points[i + 4],
+                xaxis = series.xaxis, yaxis = series.yaxis,
+                tmp;
+
+            // actually we should check img.complete, but it
+            // appears to be a somewhat unreliable indicator in
+            // IE6 (false even after load event)
+            if (!img || img.width <= 0 || img.height <= 0) {
+                continue;
+            }
+
+            if (x1 > x2) {
+                tmp = x2;
+                x2 = x1;
+                x1 = tmp;
+            }
+            if (y1 > y2) {
+                tmp = y2;
+                y2 = y1;
+                y1 = tmp;
+            }
+
+            // if the anchor is at the center of the pixel, expand the
+            // image by 1/2 pixel in each direction
+            if (series.images.anchor === "center") {
+                tmp = 0.5 * (x2 - x1) / (img.width - 1);
+                x1 -= tmp;
+                x2 += tmp;
+                tmp = 0.5 * (y2 - y1) / (img.height - 1);
+                y1 -= tmp;
+                y2 += tmp;
+            }
+
+            // clip
+            if (x1 === x2 || y1 === y2 ||
+                x1 >= xaxis.max || x2 <= xaxis.min ||
+                y1 >= yaxis.max || y2 <= yaxis.min) {
+                continue;
+            }
+
+            var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
+            if (x1 < xaxis.min) {
+                sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
+                x1 = xaxis.min;
+            }
+
+            if (x2 > xaxis.max) {
+                sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
+                x2 = xaxis.max;
+            }
+
+            if (y1 < yaxis.min) {
+                sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
+                y1 = yaxis.min;
+            }
+
+            if (y2 > yaxis.max) {
+                sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
+                y2 = yaxis.max;
+            }
+
+            x1 = xaxis.p2c(x1);
+            x2 = xaxis.p2c(x2);
+            y1 = yaxis.p2c(y1);
+            y2 = yaxis.p2c(y2);
+
+            // the transformation may have swapped us
+            if (x1 > x2) {
+                tmp = x2;
+                x2 = x1;
+                x1 = tmp;
+            }
+            if (y1 > y2) {
+                tmp = y2;
+                y2 = y1;
+                y1 = tmp;
+            }
+
+            tmp = ctx.globalAlpha;
+            ctx.globalAlpha *= series.images.alpha;
+            ctx.drawImage(img,
+                          sx1, sy1, sx2 - sx1, sy2 - sy1,
+                          x1 + plotOffset.left, y1 + plotOffset.top,
+                          x2 - x1, y2 - y1);
+            ctx.globalAlpha = tmp;
+        }
+    }
+
+    function processRawData(plot, series, data, datapoints) {
+        if (!series.images.show) {
+            return;
+        }
+
+        // format is Image, x1, y1, x2, y2 (opposite corners)
+        datapoints.format = [
+            { required: true },
+            { x: true, number: true, required: true },
+            { y: true, number: true, required: true },
+            { x: true, number: true, required: true },
+            { y: true, number: true, required: true }
+        ];
+    }
+
+    function init(plot) {
+        plot.hooks.processRawData.push(processRawData);
+        plot.hooks.drawSeries.push(drawSeries);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'image',
+        version: '1.1'
+    });
+})(jQuery);