tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #1669 from MrKartoshka/trip_animation_improvement 

UI. Trip Animation Widget
pull/1728/head
Andrew Shvayka 7 years ago
committed by GitHub
parent
3086f1fb5d 5a914f5938
commit
2d09b8914b
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 153 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      application/src/main/data/json/system/widget_bundles/maps.json
  2. 13
      ui/package-lock.json
  3. 1
      ui/package.json
  4. 154
      ui/src/app/widget/lib/tripAnimation/trip-animation-widget.js
  5. 2
      ui/src/app/widget/lib/tripAnimation/trip-animation-widget.tpl.html

34
application/src/main/data/json/system/widget_bundles/maps.json
View File

File diff suppressed because one or more lines are too long

13
ui/package-lock.json
View File

@ -7755,11 +7755,24 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.4.tgz",
"integrity": "sha512-FYL1LGFdj6v+2Ifpw+AcFIuIOqjNggfoLUwuwQv6+3sS21Za7Wvapq+LhbSE4NDXrEj6eYnW3y7LsaBICpyXtw=="
},
"leaflet-polylinedecorator": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/leaflet-polylinedecorator/-/leaflet-polylinedecorator-1.6.0.tgz",
"integrity": "sha1-nvef0bUwLWe3Lv6Vmo7NJVPycmY=",
"requires": {
"leaflet-rotatedmarker": "^0.2.0"
}
},
"leaflet-providers": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/leaflet-providers/-/leaflet-providers-1.5.0.tgz",
"integrity": "sha512-btncloSyOHrgYNexoz2dRpCl+U9iDQME91RsOWQWNAD9jQUPAkq9mxuTvL/O9VOwrqcEtzhvuHBHIOacJAZDxQ=="
},
"leaflet-rotatedmarker": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/leaflet-rotatedmarker/-/leaflet-rotatedmarker-0.2.0.tgz",
"integrity": "sha1-RGf0n5jRv9VpWb2cZwUgPdJgEnc="
},
"less": {
"version": "2.7.3",
"resolved": "https://registry.npmjs.org/less/-/less-2.7.3.tgz",

1
ui/package.json
View File

@ -63,6 +63,7 @@
"jstree": "^3.3.7",
"jstree-bootstrap-theme": "^1.0.1",
"leaflet": "^1.0.3",
"leaflet-polylinedecorator": "^1.6.0",
"leaflet-providers": "^1.1.17",
"material-ui": "^0.16.1",
"material-ui-number-input": "^5.0.16",

154
ui/src/app/widget/lib/tripAnimation/trip-animation-widget.js
View File

@ -17,6 +17,7 @@ import './trip-animation-widget.scss';
import template from "./trip-animation-widget.tpl.html";
import TbOpenStreetMap from '../openstreet-map';
import L from 'leaflet';
import 'leaflet-polylinedecorator'
import tinycolor from "tinycolor2";
import {fillPatternWithActions, isNumber, padValue, processPattern} from "../widget-utils";
@ -24,7 +25,6 @@ import {fillPatternWithActions, isNumber, padValue, processPattern} from "../wid
// save these original methods before they are overwritten
var proto_initIcon = L.Marker.prototype._initIcon;
var proto_setPos = L.Marker.prototype._setPos;
var oldIE = (L.DomUtil.TRANSFORM === 'msTransform');
L.Marker.addInitHook(function () {
@ -199,23 +199,45 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
vm.moveNext = function () {
vm.stopPlay();
moveInc(1);
}
if (vm.staticSettings.usePointAsAnchor) {
let newIndex = vm.maxTime;
for (let index = vm.index+1; index < vm.maxTime; index++) {
if (vm.trips.some(function (trip) {
return trip.timeRange[index].hasAnchor;
})) {
newIndex = index;
break;
}
}
moveToIndex(newIndex);
} else moveInc(1);
};
vm.movePrev = function () {
vm.stopPlay();
moveInc(-1);
}
if (vm.staticSettings.usePointAsAnchor) {
let newIndex = vm.minTime;
for (let index = vm.index-1; index > vm.minTime; index--) {
if (vm.trips.some(function (trip) {
return trip.timeRange[index].hasAnchor;
})) {
newIndex = index;
break;
}
}
moveToIndex(newIndex);
} else moveInc(-1);
};
vm.moveStart = function () {
vm.stopPlay();
moveToIndex(vm.minTime);
}
};
vm.moveEnd = function () {
vm.stopPlay();
moveToIndex(vm.maxTime);
}
};
vm.stopPlay = function () {
if (vm.isPlaying) {
@ -280,6 +302,7 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
let staticSettings = {};
vm.staticSettings = staticSettings;
//Calculate General Settings
staticSettings.normalizationStep = vm.ctx.settings.normalizationStep || 1000;
staticSettings.buttonColor = tinycolor(vm.widgetConfig.color).setAlpha(0.54).toRgbString();
staticSettings.disabledButtonColor = tinycolor(vm.widgetConfig.color).setAlpha(0.3).toRgbString();
staticSettings.polygonColor = tinycolor(vm.ctx.settings.polygonColor).toHexString();
@ -301,8 +324,19 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
staticSettings.showTooltip = false;
staticSettings.label = vm.ctx.settings.label || "${entityName}";
staticSettings.useLabelFunction = vm.ctx.settings.useLabelFunction || false;
staticSettings.autocloseTooltip = vm.ctx.settings.autocloseTooltip || false;
staticSettings.pointTooltipOnRightPanel = vm.ctx.settings.pointTooltipOnRightPanel || false;
staticSettings.usePointAsAnchor = vm.ctx.settings.usePointAsAnchor || false;
staticSettings.showLabel = vm.ctx.settings.showLabel || false;
staticSettings.useTooltipFunction = vm.ctx.settings.useTooltipFunction || false;
staticSettings.usePolylineDecorator = vm.ctx.settings.usePolylineDecorator || false;
staticSettings.useDecoratorCustomColor = vm.ctx.settings.useDecoratorCustomColor || false;
staticSettings.decoratorCustomColor = tinycolor(vm.ctx.settings.decoratorCustomColor).toHexString();
staticSettings.decoratorSymbol = vm.ctx.settings.decoratorSymbol || "arrowHead";
staticSettings.decoratorSymbolSize = vm.ctx.settings.decoratorSymbolSize || 10;
staticSettings.decoratorOffset = vm.ctx.settings.decoratorOffset || "20px";
staticSettings.endDecoratorOffset = vm.ctx.settings.endDecoratorOffset || "20px";
staticSettings.decoratorRepeat = vm.ctx.settings.decoratorRepeat || "20px";
staticSettings.tooltipPattern = vm.ctx.settings.tooltipPattern || "<span style=\"font-size: 26px; color: #666; font-weight: bold;\">${entityName}</span>\n" +
"<br/>\n" +
"<span style=\"font-size: 12px; color: #666; font-weight: bold;\">Time:</span><span style=\"font-size: 12px;\"> ${formattedTs}</span>\n" +
@ -347,6 +381,10 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
staticSettings.colorFunction = new Function('data, dsData, dsIndex', vm.ctx.settings.colorFunction);
}
if (staticSettings.usePointAsAnchor && angular.isDefined(vm.ctx.settings.pointAsAnchorFunction)) {
staticSettings.pointAsAnchorFunction = new Function('data, dsData, dsIndex', vm.ctx.settings.pointAsAnchorFunction);
}
if (staticSettings.usePolygonTooltipFunction && angular.isDefined(vm.ctx.settings.polygonTooltipFunction)) {
staticSettings.polygonTooltipFunction = new Function('data, dsData, dsIndex', vm.ctx.settings.polygonTooltipFunction);
}
@ -501,6 +539,27 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
return tooltip;
}
function calculatePointTooltip(trip, index) {
let tooltip = '';
if (vm.staticSettings.displayTooltip) {
let tooltipReplaceInfo;
let tooltipText = vm.staticSettings.tooltipPattern;
if (vm.staticSettings.useTooltipFunction && angular.isDefined(vm.staticSettings.tooltipFunction)) {
try {
tooltipText = vm.staticSettings.tooltipFunction(vm.ctx.data, trip.timeRange[index], trip.dSIndex);
} catch (e) {
tooltipText = null;
}
}
tooltipText = vm.utils.createLabelFromDatasource(trip.dataSource, tooltipText);
tooltipReplaceInfo = processPattern(tooltipText, vm.ctx.datasources, trip.dSIndex);
tooltip = fillPattern(tooltipText, tooltipReplaceInfo, trip.timeRange[index]);
tooltip = fillPatternWithActions(tooltip, 'onTooltipAction', null);
}
return tooltip;
}
function calculateColor(trip) {
let color = vm.staticSettings.pathColor;
let colorFn;
@ -582,6 +641,10 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
trip.polyline.remove();
delete trip.polyline;
}
if (trip.polylineDecorator) {
trip.polylineDecorator.remove();
delete trip.polylineDecorator;
}
if (trip.polygon) {
trip.polygon.remove();
delete trip.polygon;
@ -595,7 +658,7 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
});
vm.initBounds = true;
}
let normalizedTimeRange = createNormalizedTime(vm.data, 1000);
let normalizedTimeRange = createNormalizedTime(vm.data, vm.staticSettings.normalizationStep);
createNormalizedTrips(normalizedTimeRange, vm.datasources);
createTripsOnMap(apply);
if (vm.initBounds && !vm.initTrips) {
@ -667,7 +730,7 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
}
}
vm.maxTime = normalizedArray.length - 1;
vm.minTime = vm.maxTime > 1 ? 1 : 0;
//vm.minTime = vm.maxTime > 1 ? 1 : 0;
if (vm.index < vm.minTime) {
vm.index = vm.minTime;
} else if (vm.index > vm.maxTime) {
@ -761,6 +824,13 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
}
}
function createPointPopup(point, index, trip) {
let popup = L.popup();
popup.setContent(calculatePointTooltip(trip, index));
point.bindPopup(popup, {autoClose: vm.staticSettings.autocloseTooltip, closeOnClick: false});
return popup;
}
function createTripsOnMap(apply) {
if (vm.trips.length > 0) {
vm.trips.forEach(function (trip) {
@ -768,17 +838,47 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
if (trip.timeRange.length > 0 && trip.latLngs.every(el => angular.isDefined(el))) {
if (vm.staticSettings.showPoints) {
trip.points = [];
trip.latLngs.forEach(function (latLng) {
let point = L.circleMarker(latLng, {
color: trip.settings.pointColor,
radius: trip.settings.pointSize
}).addTo(vm.map.map);
trip.points.push(point);
trip.timeRange.forEach(function (tRange, index) {
if (tRange && tRange.latLng
&& (!vm.staticSettings.usePointAsAnchor || vm.staticSettings.pointAsAnchorFunction(vm.ctx.data, tRange, trip.dSIndex))) {
let point = L.circleMarker(tRange.latLng, {
color: trip.settings.pointColor,
radius: trip.settings.pointSize
}).addTo(vm.map.map);
if (vm.staticSettings.pointTooltipOnRightPanel) {
point.popup = createPointPopup(point, index, trip);
} else {
point.on('click', function () {
showHidePointTooltip(calculatePointTooltip(trip, index), index);
});
}
if (vm.staticSettings.usePointAsAnchor) tRange.hasAnchor = true;
trip.points.push(point);
}
});
}
if (angular.isUndefined(trip.marker)) {
trip.polyline = vm.map.createPolyline(trip.latLngs, trip.settings);
if (vm.staticSettings.usePolylineDecorator) {
trip.polylineDecorator = L.polylineDecorator(trip.polyline, {
patterns: [
{
offset: vm.staticSettings.decoratorOffset,
endOffset: vm.staticSettings.endDecoratorOffset,
repeat: vm.staticSettings.decoratorRepeat,
symbol: L.Symbol[vm.staticSettings.decoratorSymbol]({
pixelSize: vm.staticSettings.decoratorSymbolSize,
polygon: false,
pathOptions: {
color: vm.staticSettings.useDecoratorCustomColor ? vm.staticSettings.decoratorCustomColor : trip.settings.color,
stroke: true}
})
}
],
interactive: false,
}).addTo(vm.map.map);
}
}
@ -859,23 +959,43 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
if (vm.staticSettings.displayTooltip) {
if (vm.staticSettings.showTooltip && trip && (vm.activeTripIndex !== trip.dSIndex || vm.staticSettings.tooltipMarker !== 'marker')) {
vm.staticSettings.showTooltip = true;
vm.staticSettings.tooltipMarker = 'marker';
} else {
vm.staticSettings.showTooltip = !vm.staticSettings.showTooltip;
}
vm.staticSettings.tooltipMarker = 'marker';
}
if (trip && vm.activeTripIndex !== trip.dSIndex) vm.activeTripIndex = trip.dSIndex;
vm.mainTooltip = vm.trips[vm.activeTripIndex].settings.tooltipText;
}
function showHidePointTooltip(text, index) {
if (vm.staticSettings.displayTooltip) {
if (vm.staticSettings.tooltipMarker && vm.staticSettings.tooltipMarker.includes('point')) {
if (vm.staticSettings.tooltipMarker === 'point' + index) {
vm.staticSettings.showTooltip = !vm.staticSettings.showTooltip;
} else {
vm.staticSettings.showTooltip = true;
vm.mainTooltip = $sce.trustAsHtml(text);
vm.staticSettings.tooltipMarker = 'point' + index;
}
} else {
vm.staticSettings.showTooltip = true;
vm.mainTooltip = $sce.trustAsHtml(text);
vm.staticSettings.tooltipMarker = 'point' + index;
}
}
}
function showHidePolygonTooltip(trip) {
if (vm.staticSettings.displayTooltip) {
if (vm.staticSettings.showTooltip && trip && (vm.activeTripIndex !== trip.dSIndex || vm.staticSettings.tooltipMarker !== 'polygon')) {
vm.staticSettings.showTooltip = true;
vm.staticSettings.tooltipMarker = 'polygon';
} else {
vm.staticSettings.showTooltip = !vm.staticSettings.showTooltip;
}
vm.staticSettings.tooltipMarker = 'polygon';
}
if (trip && vm.activeTripIndex !== trip.dSIndex) vm.activeTripIndex = trip.dSIndex;
vm.mainTooltip = vm.trips[vm.activeTripIndex].settings.polygonTooltipText;
}
}

2
ui/src/app/widget/lib/tripAnimation/trip-animation-widget.tpl.html
View File

@ -27,7 +27,7 @@
<ng-md-icon icon="info_outline"></ng-md-icon>
</md-button>
</div>
<div class="trip-animation-tooltip md-whiteframe-z4" layout="column" ng-class="!vm.staticSettings.showTooltip ? 'trip-animation-tooltip-hidden':''" ng-bind-html="vm.staticSettings.tooltipMarker === 'polygon' ? vm.trips[vm.activeTripIndex].settings.polygonTooltipText : vm.trips[vm.activeTripIndex].settings.tooltipText"
<div class="trip-animation-tooltip md-whiteframe-z4" layout="column" ng-class="!vm.staticSettings.showTooltip ? 'trip-animation-tooltip-hidden':''" ng-bind-html="vm.mainTooltip"
ng-style="{'background-color': vm.staticSettings.tooltipColor, 'opacity': vm.staticSettings.tooltipOpacity, 'color': vm.staticSettings.tooltipFontColor}">
</div>
</div>

Write Preview
Loading…
Cancel
Save