dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix calculate trip to big interval time (#2161)

Browse Source
This commit is contained in:
Vladyslav 2019-11-08 14:19:49 +02:00 committed by Igor Kulikov
parent ac8e67eff0
commit 1059c21eab
2 changed files with 136 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -128,7 +128,8 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
vm.index = 0; vm.index = 0;
vm.dsIndex = 0; vm.dsIndex = 0;
vm.minTime = 0; vm.minTime = 0;
vm.maxTime = 0; vm.minTimeIndex = 0;
vm.maxTimeIndex = 0;
vm.isPlaying = false; vm.isPlaying = false;
vm.trackingLine = { vm.trackingLine = {
"type": "FeatureCollection", "type": "FeatureCollection",
@ -200,10 +201,10 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
vm.moveNext = function () { vm.moveNext = function () {
vm.stopPlay(); vm.stopPlay();
if (vm.staticSettings.usePointAsAnchor) { if (vm.staticSettings.usePointAsAnchor) {
let newIndex = vm.maxTime; let newIndex = vm.maxTimeIndex;
for (let index = vm.index+1; index < vm.maxTime; index++) { for (let index = vm.index + 1; index < vm.maxTimeIndex; index++) {
if (vm.trips.some(function (trip) { if (vm.trips.some(function (trip) {
return trip.timeRange[index].hasAnchor; return calculateCurrentDate(trip.timeRange, index).hasAnchor;
})) { })) {
newIndex = index; newIndex = index;
break; break;
@ -216,27 +217,27 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
vm.movePrev = function () { vm.movePrev = function () {
vm.stopPlay(); vm.stopPlay();
if (vm.staticSettings.usePointAsAnchor) { if (vm.staticSettings.usePointAsAnchor) {
let newIndex = vm.minTime; let newIndex = vm.minTimeIndex;
for (let index = vm.index-1; index > vm.minTime; index--) { for (let index = vm.index - 1; index > vm.minTimeIndex; index--) {
if (vm.trips.some(function (trip) { if (vm.trips.some(function (trip) {
return trip.timeRange[index].hasAnchor; return calculateCurrentDate(trip.timeRange, index).hasAnchor;
})) { })) {
newIndex = index; newIndex = index;
break; break;
} }
} }
moveToIndex(newIndex); moveToIndex(newIndex);
} else moveInc(-1); } else moveInc(-1);
}; };
vm.moveStart = function () { vm.moveStart = function () {
vm.stopPlay(); vm.stopPlay();
moveToIndex(vm.minTime); moveToIndex(vm.minTimeIndex);
}; };
vm.moveEnd = function () { vm.moveEnd = function () {
vm.stopPlay(); vm.stopPlay();
moveToIndex(vm.maxTime); moveToIndex(vm.maxTimeIndex);
}; };
vm.stopPlay = function () { vm.stopPlay = function () {
@ -252,8 +253,9 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
} }
function moveToIndex(newIndex) { function moveToIndex(newIndex) {
if (newIndex > vm.maxTime || newIndex < vm.minTime) return; if (newIndex > vm.maxTimeIndex || newIndex < vm.minTimeIndex) return;
vm.index = newIndex; vm.index = newIndex;
vm.animationTime = vm.minTime + vm.index * vm.staticSettings.normalizationStep;
recalculateTrips(); recalculateTrips();
} }
@ -263,12 +265,6 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
}) })
} }
function findAngle(lat1, lng1, lat2, lng2) {
let angle = Math.atan2(0, 0) - Math.atan2(lat2 - lat1, lng2 - lng1);
angle = angle * 180 / Math.PI;
return parseInt(angle.toFixed(2));
}
function initialize() { function initialize() {
$scope.currentDate = $filter('date')(0, "yyyy.MM.dd HH:mm:ss"); $scope.currentDate = $filter('date')(0, "yyyy.MM.dd HH:mm:ss");
@ -445,7 +441,7 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
} }
} }
function configureTripSettings(trip, index, apply) { function configureTripSettings(trip, apply) {
trip.settings = {}; trip.settings = {};
trip.settings.color = calculateColor(trip); trip.settings.color = calculateColor(trip);
trip.settings.polygonColor = calculatePolygonColor(trip); trip.settings.polygonColor = calculatePolygonColor(trip);
@ -478,17 +474,17 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
let labelText = vm.staticSettings.label; let labelText = vm.staticSettings.label;
if (vm.staticSettings.useLabelFunction && angular.isDefined(vm.staticSettings.labelFunction)) { if (vm.staticSettings.useLabelFunction && angular.isDefined(vm.staticSettings.labelFunction)) {
try { try {
labelText = vm.staticSettings.labelFunction(vm.ctx.data, trip.timeRange[vm.index], trip.dsIndex); labelText = vm.staticSettings.labelFunction(vm.ctx.data, calculateCurrentDate(trip.timeRange, vm.index), trip.dsIndex);
} catch (e) { } catch (e) {
labelText = null; labelText = null;
} }
} }
labelText = vm.utils.createLabelFromDatasource(trip.dataSource, labelText); labelText = vm.utils.createLabelFromDatasource(trip.dataSource, labelText);
labelReplaceInfo = processPattern(labelText, vm.ctx.datasources, trip.dSIndex); labelReplaceInfo = processPattern(labelText, vm.ctx.datasources, trip.dSIndex);
label = fillPattern(labelText, labelReplaceInfo, trip.timeRange[vm.index]); label = fillPattern(labelText, labelReplaceInfo, calculateCurrentDate(trip.timeRange, vm.index));
if (vm.staticSettings.useLabelFunction && angular.isDefined(vm.staticSettings.labelFunction)) { if (vm.staticSettings.useLabelFunction && angular.isDefined(vm.staticSettings.labelFunction)) {
try { try {
labelText = vm.staticSettings.labelFunction(vm.ctx.data, trip.timeRange[vm.index], trip.dSIndex); labelText = vm.staticSettings.labelFunction(vm.ctx.data, calculateCurrentDate(trip.timeRange, vm.index), trip.dSIndex);
} catch (e) { } catch (e) {
labelText = null; labelText = null;
} }
@ -504,14 +500,14 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
let tooltipText = vm.staticSettings.tooltipPattern; let tooltipText = vm.staticSettings.tooltipPattern;
if (vm.staticSettings.useTooltipFunction && angular.isDefined(vm.staticSettings.tooltipFunction)) { if (vm.staticSettings.useTooltipFunction && angular.isDefined(vm.staticSettings.tooltipFunction)) {
try { try {
tooltipText = vm.staticSettings.tooltipFunction(vm.ctx.data, trip.timeRange[vm.index], trip.dSIndex); tooltipText = vm.staticSettings.tooltipFunction(vm.ctx.data, calculateCurrentDate(trip.timeRange, vm.index), trip.dSIndex);
} catch (e) { } catch (e) {
tooltipText = null; tooltipText = null;
} }
} }
tooltipText = vm.utils.createLabelFromDatasource(trip.dataSource, tooltipText); tooltipText = vm.utils.createLabelFromDatasource(trip.dataSource, tooltipText);
tooltipReplaceInfo = processPattern(tooltipText, vm.ctx.datasources, trip.dSIndex); tooltipReplaceInfo = processPattern(tooltipText, vm.ctx.datasources, trip.dSIndex);
tooltip = fillPattern(tooltipText, tooltipReplaceInfo, trip.timeRange[vm.index]); tooltip = fillPattern(tooltipText, tooltipReplaceInfo, calculateCurrentDate(trip.timeRange, vm.index));
tooltip = fillPatternWithActions(tooltip, 'onTooltipAction', null); tooltip = fillPatternWithActions(tooltip, 'onTooltipAction', null);
} }
@ -525,14 +521,14 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
let tooltipText = vm.staticSettings.polygonTooltipPattern; let tooltipText = vm.staticSettings.polygonTooltipPattern;
if (vm.staticSettings.usePolygonTooltipFunction && angular.isDefined(vm.staticSettings.polygonTooltipFunction)) { if (vm.staticSettings.usePolygonTooltipFunction && angular.isDefined(vm.staticSettings.polygonTooltipFunction)) {
try { try {
tooltipText = vm.staticSettings.polygonTooltipFunction(vm.ctx.data, trip.timeRange[vm.index], trip.dSIndex); tooltipText = vm.staticSettings.polygonTooltipFunction(vm.ctx.data, calculateCurrentDate(trip.timeRange, vm.index), trip.dSIndex);
} catch (e) { } catch (e) {
tooltipText = null; tooltipText = null;
} }
} }
tooltipText = vm.utils.createLabelFromDatasource(trip.dataSource, tooltipText); tooltipText = vm.utils.createLabelFromDatasource(trip.dataSource, tooltipText);
tooltipReplaceInfo = processPattern(tooltipText, vm.ctx.datasources, trip.dSIndex); tooltipReplaceInfo = processPattern(tooltipText, vm.ctx.datasources, trip.dSIndex);
tooltip = fillPattern(tooltipText, tooltipReplaceInfo, trip.timeRange[vm.index]); tooltip = fillPattern(tooltipText, tooltipReplaceInfo, calculateCurrentDate(trip.timeRange, vm.index));
tooltip = fillPatternWithActions(tooltip, 'onTooltipAction', null); tooltip = fillPatternWithActions(tooltip, 'onTooltipAction', null);
} }
@ -546,14 +542,14 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
let tooltipText = vm.staticSettings.tooltipPattern; let tooltipText = vm.staticSettings.tooltipPattern;
if (vm.staticSettings.useTooltipFunction && angular.isDefined(vm.staticSettings.tooltipFunction)) { if (vm.staticSettings.useTooltipFunction && angular.isDefined(vm.staticSettings.tooltipFunction)) {
try { try {
tooltipText = vm.staticSettings.tooltipFunction(vm.ctx.data, trip.timeRange[index], trip.dSIndex); tooltipText = vm.staticSettings.tooltipFunction(vm.ctx.data, calculateCurrentDate(trip.timeRange, index), trip.dSIndex);
} catch (e) { } catch (e) {
tooltipText = null; tooltipText = null;
} }
} }
tooltipText = vm.utils.createLabelFromDatasource(trip.dataSource, tooltipText); tooltipText = vm.utils.createLabelFromDatasource(trip.dataSource, tooltipText);
tooltipReplaceInfo = processPattern(tooltipText, vm.ctx.datasources, trip.dSIndex); tooltipReplaceInfo = processPattern(tooltipText, vm.ctx.datasources, trip.dSIndex);
tooltip = fillPattern(tooltipText, tooltipReplaceInfo, trip.timeRange[index]); tooltip = fillPattern(tooltipText, tooltipReplaceInfo, calculateCurrentDate(trip.timeRange, index));
tooltip = fillPatternWithActions(tooltip, 'onTooltipAction', null); tooltip = fillPatternWithActions(tooltip, 'onTooltipAction', null);
} }
@ -565,7 +561,7 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
let colorFn; let colorFn;
if (vm.staticSettings.usePathColorFunction && angular.isDefined(vm.staticSettings.colorFunction)) { if (vm.staticSettings.usePathColorFunction && angular.isDefined(vm.staticSettings.colorFunction)) {
try { try {
colorFn = vm.staticSettings.colorFunction(vm.ctx.data, trip.timeRange[vm.index], trip.dSIndex); colorFn = vm.staticSettings.colorFunction(vm.ctx.data, calculateCurrentDate(trip.timeRange, vm.index), trip.dSIndex);
} catch (e) { } catch (e) {
colorFn = null; colorFn = null;
} }
@ -581,7 +577,7 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
let colorFn; let colorFn;
if (vm.staticSettings.usePolygonColorFunction && angular.isDefined(vm.staticSettings.polygonColorFunction)) { if (vm.staticSettings.usePolygonColorFunction && angular.isDefined(vm.staticSettings.polygonColorFunction)) {
try { try {
colorFn = vm.staticSettings.polygonColorFunction(vm.ctx.data, trip.timeRange[vm.index], trip.dSIndex); colorFn = vm.staticSettings.polygonColorFunction(vm.ctx.data, calculateCurrentDate(trip.timeRange, vm.index), trip.dSIndex);
} catch (e) { } catch (e) {
colorFn = null; colorFn = null;
} }
@ -597,7 +593,7 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
if (vm.staticSettings.useMarkerImageFunction && angular.isDefined(vm.staticSettings.markerImageFunction)) { if (vm.staticSettings.useMarkerImageFunction && angular.isDefined(vm.staticSettings.markerImageFunction)) {
let rawIcon; let rawIcon;
try { try {
rawIcon = vm.staticSettings.markerImageFunction(vm.ctx.data, vm.staticSettings.markerImages, trip.timeRange[vm.index], trip.dSIndex); rawIcon = vm.staticSettings.markerImageFunction(vm.ctx.data, vm.staticSettings.markerImages, calculateCurrentDate(trip.timeRange, vm.index), trip.dSIndex);
} catch (e) { } catch (e) {
rawIcon = null; rawIcon = null;
} }
@ -658,8 +654,8 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
}); });
vm.initBounds = true; vm.initBounds = true;
} }
let normalizedTimeRange = createNormalizedTime(vm.data, vm.staticSettings.normalizationStep); createNormalizedTime(vm.data, vm.staticSettings.normalizationStep);
createNormalizedTrips(normalizedTimeRange, vm.datasources); createNormalizedTrips(vm.datasources, vm.data, vm.staticSettings.normalizationStep);
createTripsOnMap(apply); createTripsOnMap(apply);
if (vm.initBounds && !vm.initTrips) { if (vm.initBounds && !vm.initTrips) {
vm.trips.forEach(function (trip) { vm.trips.forEach(function (trip) {
@ -701,127 +697,82 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
function createNormalizedTime(data, step) { function createNormalizedTime(data, step) {
if (!step) step = 1000; if (!step) step = 1000;
let max_time = null; let max_time = -Infinity;
let min_time = null; let min_time = Infinity;
let normalizedArray = []; if (data) {
if (data && data.length > 0) { for (let i = 0; i < data.length; i++) {
vm.data.forEach(function (data) { for (let j = 0; j < data[i].data.length; j++) {
if (data.data.length > 0) { if (max_time < data[i].data[j][0]) {
data.data.forEach(function (sData) { max_time = data[i].data[j][0]
if (max_time === null) { }
max_time = sData[0]; if (min_time > data[i].data[j][0]) {
} else if (max_time < sData[0]) { min_time = data[i].data[j][0];
max_time = sData[0] }
}
if (min_time === null) {
min_time = sData[0];
} else if (min_time > sData[0]) {
min_time = sData[0];
}
})
} }
});
for (let i = min_time; i < max_time; i += step) {
normalizedArray.push({ts: i, formattedTs: $filter('date')(i, 'medium')});
}
if (normalizedArray[normalizedArray.length - 1] && normalizedArray[normalizedArray.length - 1].ts !== max_time) {
normalizedArray.push({ts: max_time, formattedTs: $filter('date')(max_time, 'medium')});
} }
} }
vm.maxTime = normalizedArray.length - 1; vm.minTime = vm.animationTime = min_time;
//vm.minTime = vm.maxTime > 1 ? 1 : 0; if(min_time === Infinity){
if (vm.index < vm.minTime) { vm.animationTime = null;
vm.index = vm.minTime; } else {
} else if (vm.index > vm.maxTime) { vm.animationTime = min_time
vm.index = vm.maxTime; }
vm.maxTimeIndex = Math.ceil((max_time - min_time) / step);
if (vm.index < vm.minTimeIndex) {
vm.index = vm.minTimeIndex;
} else if (vm.index > vm.maxTimeIndex) {
vm.index = vm.maxTimeIndex;
} }
return normalizedArray;
} }
function createNormalizedTrips(timeRange, dataSources) { function createNormalizedTrips(dataSources, data, step) {
vm.trips = []; vm.trips = [];
if (timeRange && timeRange.length > 0 && dataSources && dataSources.length > 0 && vm.data && vm.data.length > 0) { step = step || 1000;
dataSources.forEach(function (dS, index) { if (dataSources && data) {
for (let i = 0; i < dataSources.length; i++) {
vm.trips.push({ vm.trips.push({
dataSource: dS, dataSource: dataSources[i],
dSIndex: index, dSIndex: i,
timeRange: angular.copy(timeRange) timeRange: {}
}) })
}); }
vm.data.forEach(function (data) { for (let i = 0; i < data.length; i++) {
let ds = data.datasource; let ds = data[i].datasource;
let tripIndex = vm.trips.findIndex(function (el) { let tripIndex = vm.trips.findIndex(function (el) {
return el.dataSource.entityId === ds.entityId; return el.dataSource.entityId === ds.entityId;
}); });
if (tripIndex > -1) { if (tripIndex > -1) {
createNormalizedValue(data.data, data.dataKey.label, vm.trips[tripIndex].timeRange); createNormalizedValue(data[i].data, data[i].dataKey.label, vm.trips[tripIndex].timeRange, step);
} }
}) }
} }
createNormalizedLatLngs(); createNormalizedLatLngs();
} }
function createNormalizedValue(dataArray, dataKey, timeRangeArray) { function createNormalizedValue(dataArray, dataKey, timeRange, step) {
timeRangeArray.forEach(function (timeStamp) { for (let i = 0; i < dataArray.length; i++) {
let targetTDiff = null; let normalizeTime = vm.minTime + Math.ceil((dataArray[i][0] - vm.minTime) / step) * step;
let value = null; timeRange[normalizeTime] = timeRange[normalizeTime] || {};
for (let i = 0; i < dataArray.length; i++) { timeRange[normalizeTime][dataKey] = dataArray[i][1];
let tDiff = dataArray[i][0] - timeStamp.ts; }
if (targetTDiff === null || (tDiff <= 0 && targetTDiff < tDiff)) {
targetTDiff = tDiff;
value = dataArray[i][1];
}
}
if (value !== null) timeStamp[dataKey] = value;
});
} }
function createNormalizedLatLngs() { function createNormalizedLatLngs() {
vm.trips.forEach(function (el) { vm.trips.forEach(function (item) {
el.latLngs = []; item.latLngs = [];
el.timeRange.forEach(function (data) { for (let timestamp in item.timeRange) {
let lat = data[vm.staticSettings.latKeyName]; if(Object.prototype.hasOwnProperty.call(item.timeRange, timestamp)) {
let lng = data[vm.staticSettings.lngKeyName]; let lat = item.timeRange[timestamp][vm.staticSettings.latKeyName];
if (lat && lng && vm.map) { let lng = item.timeRange[timestamp][vm.staticSettings.lngKeyName];
data.latLng = vm.map.createLatLng(lat, lng); if (lat && lng && vm.map) {
} item.timeRange[timestamp].latLng = vm.map.createLatLng(lat, lng);
el.latLngs.push(data.latLng);
});
addAngleForTrip(el);
})
}
function addAngleForTrip(trip) {
if (trip.timeRange && trip.timeRange.length > 0) {
trip.timeRange.forEach(function (point, index) {
let nextPoint, prevPoint;
nextPoint = index === (trip.timeRange.length - 1) ? trip.timeRange[index] : trip.timeRange[index + 1];
prevPoint = index === 0 ? trip.timeRange[0] : trip.timeRange[index - 1];
let nextLatLng = {
lat: nextPoint[vm.staticSettings.latKeyName],
lng: nextPoint[vm.staticSettings.lngKeyName]
};
let prevLatLng = {
lat: prevPoint[vm.staticSettings.latKeyName],
lng: prevPoint[vm.staticSettings.lngKeyName]
};
if (nextLatLng.lat === prevLatLng.lat && nextLatLng.lng === prevLatLng.lng) {
if (angular.isNumber(prevPoint.h)) {
point.h = prevPoint.h;
} else {
point.h = vm.staticSettings.rotationAngle;
} }
} else { item.latLngs.push(item.timeRange[timestamp].latLng);
point.h = findAngle(prevLatLng.lat, prevLatLng.lng, nextLatLng.lat, nextLatLng.lng);
point.h += vm.staticSettings.rotationAngle;
} }
}); }
} });
} }
function createPointPopup(point, index, trip) { function createPointPopup(point, index, trip) {
@ -834,14 +785,14 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
function createTripsOnMap(apply) { function createTripsOnMap(apply) {
if (vm.trips.length > 0) { if (vm.trips.length > 0) {
vm.trips.forEach(function (trip) { vm.trips.forEach(function (trip) {
configureTripSettings(trip, vm.index, apply); configureTripSettings(trip, apply);
if (trip.timeRange.length > 0 && trip.latLngs.every(el => angular.isDefined(el))) { if (Object.keys(trip.timeRange).length > 0 && trip.latLngs.every(el => angular.isDefined(el))) {
if (vm.staticSettings.showPoints) { if (vm.staticSettings.showPoints) {
trip.points = []; trip.points = [];
trip.timeRange.forEach(function (tRange, index) { Object.keys(trip.timeRange).forEach(function (tRange, index) {
if (tRange && tRange.latLng if (trip.timeRange[tRange] && trip.timeRange[tRange].latLng
&& (!vm.staticSettings.usePointAsAnchor || vm.staticSettings.pointAsAnchorFunction(vm.ctx.data, tRange, trip.dSIndex))) { && (!vm.staticSettings.usePointAsAnchor || vm.staticSettings.pointAsAnchorFunction(vm.ctx.data, trip.timeRange[tRange], trip.dSIndex))) {
let point = L.circleMarker(tRange.latLng, { let point = L.circleMarker(trip.timeRange[tRange].latLng, {
color: trip.settings.pointColor, color: trip.settings.pointColor,
radius: trip.settings.pointSize radius: trip.settings.pointSize
}).addTo(vm.map.map); }).addTo(vm.map.map);
@ -852,7 +803,7 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
showHidePointTooltip(calculatePointTooltip(trip, index), index); showHidePointTooltip(calculatePointTooltip(trip, index), index);
}); });
} }
if (vm.staticSettings.usePointAsAnchor) tRange.hasAnchor = true; if (vm.staticSettings.usePointAsAnchor) trip.timeRange[tRange].hasAnchor = true;
trip.points.push(point); trip.points.push(point);
} }
}); });
@ -872,7 +823,8 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
polygon: false, polygon: false,
pathOptions: { pathOptions: {
color: vm.staticSettings.useDecoratorCustomColor ? vm.staticSettings.decoratorCustomColor : trip.settings.color, color: vm.staticSettings.useDecoratorCustomColor ? vm.staticSettings.decoratorCustomColor : trip.settings.color,
stroke: true} stroke: true
}
}) })
} }
], ],
@ -882,8 +834,8 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
} }
if (trip.timeRange && trip.timeRange.length && angular.isUndefined(trip.marker)) { if (trip.timeRange && Object.keys(trip.timeRange).length && angular.isUndefined(trip.marker)) {
trip.marker = L.marker(trip.timeRange[vm.index].latLng); trip.marker = L.marker(calculateCurrentDate(trip.timeRange, vm.index).latLng);
trip.marker.setZIndexOffset(1000); trip.marker.setZIndexOffset(1000);
trip.marker.setIcon(vm.staticSettings.icon); trip.marker.setIcon(vm.staticSettings.icon);
trip.marker.setRotationOrigin('center center'); trip.marker.setRotationOrigin('center center');
@ -895,7 +847,7 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
} }
} }
if (vm.staticSettings.showPolygon && angular.isDefined(trip.timeRange[vm.index][vm.staticSettings.polKeyName])) { if (vm.staticSettings.showPolygon && angular.isDefined(calculateCurrentDate(trip.timeRange, vm.index)[vm.staticSettings.polKeyName])) {
let polygonSettings = { let polygonSettings = {
fill: true, fill: true,
fillColor: trip.settings.polygonColor, fillColor: trip.settings.polygonColor,
@ -904,7 +856,7 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
fillOpacity: trip.settings.polygonOpacity, fillOpacity: trip.settings.polygonOpacity,
opacity: trip.settings.polygonStrokeOpacity opacity: trip.settings.polygonStrokeOpacity
}; };
let polygonLatLngsRaw = mapPolygonArray(angular.fromJson(trip.timeRange[vm.index][vm.staticSettings.polKeyName])); let polygonLatLngsRaw = mapPolygonArray(angular.fromJson(calculateCurrentDate(trip.timeRange, vm.index)[vm.staticSettings.polKeyName]));
trip.polygon = L.polygon(polygonLatLngsRaw, polygonSettings).addTo(vm.map.map); trip.polygon = L.polygon(polygonLatLngsRaw, polygonSettings).addTo(vm.map.map);
trip.polygon.on('click',function(){showHidePolygonTooltip(trip)}); trip.polygon.on('click',function(){showHidePolygonTooltip(trip)});
} }
@ -912,6 +864,35 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
} }
} }
function calculateCurrentDate(tripTimeRange, index) {
let time = vm.minTime + index * vm.staticSettings.normalizationStep;
if (Object.hasOwnProperty.call(tripTimeRange, time)) {
return tripTimeRange[time];
} else {
let timeInterval = Object.keys(tripTimeRange);
for (let i = 1; i < timeInterval.length; i++) {
if (timeInterval[i - 1] < time && timeInterval[i] > time) {
let calcPosition = angular.copy(tripTimeRange[timeInterval[i - 1]]);
let startLatLng = tripTimeRange[timeInterval[i - 1]].latLng;
let finishLatLng = tripTimeRange[timeInterval[i]].latLng;
let percentRouteComplete = (time - timeInterval[i - 1]) / (timeInterval[i] - timeInterval[i - 1]);
calcPosition[vm.staticSettings.latKeyName] = startLatLng.lat + (finishLatLng.lat - startLatLng.lat) * percentRouteComplete;
calcPosition[vm.staticSettings.lngKeyName] = startLatLng.lng + (finishLatLng.lng - startLatLng.lng) * percentRouteComplete;
calcPosition.latLng = vm.map.createLatLng(calcPosition[vm.staticSettings.latKeyName], calcPosition[vm.staticSettings.lngKeyName]);
calcPosition.angle = vm.staticSettings.rotationAngle + findAngle(startLatLng, finishLatLng);
return calcPosition;
}
}
}
return {};
}
function findAngle(startPoint, endPoint) {
let angle = -Math.atan2(endPoint.lat - startPoint.lat, endPoint.lng - startPoint.lng);
angle = angle * 180 / Math.PI;
return parseInt(angle.toFixed(2));
}
function mapPolygonArray(rawArray) { function mapPolygonArray(rawArray) {
return rawArray.map(function (el) { return rawArray.map(function (el) {
if (el.length === 2) { if (el.length === 2) {
@ -931,15 +912,16 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
} }
function moveMarker(trip) { function moveMarker(trip) {
if (angular.isDefined(trip.timeRange[vm.index].latLng)) { let postionMarker = calculateCurrentDate(trip.timeRange, vm.index);
if (angular.isDefined(postionMarker)) {
if (angular.isDefined(trip.marker)) { if (angular.isDefined(trip.marker)) {
trip.markerAngleIsSet = true; trip.markerAngleIsSet = true;
trip.marker.setLatLng(trip.timeRange[vm.index].latLng); trip.marker.setLatLng(postionMarker.latLng);
trip.marker.setRotationAngle(trip.timeRange[vm.index].h); trip.marker.setRotationAngle(postionMarker.angle);
trip.marker.update(); trip.marker.update();
} else { } else {
if (trip.timeRange && trip.timeRange.length) { if (trip.timeRange && trip.timeRange.length) {
trip.marker = L.marker(trip.timeRange[vm.index].latLng); trip.marker = L.marker(postionMarker.latLng);
trip.marker.setZIndexOffset(1000); trip.marker.setZIndexOffset(1000);
trip.marker.setIcon(vm.staticSettings.icon); trip.marker.setIcon(vm.staticSettings.icon);
trip.marker.setRotationOrigin('center center'); trip.marker.setRotationOrigin('center center');
@ -1000,4 +982,4 @@ function tripAnimationController($document, $scope, $log, $http, $timeout, $filt
if (trip && vm.activeTripIndex !== trip.dSIndex) vm.activeTripIndex = trip.dSIndex; if (trip && vm.activeTripIndex !== trip.dSIndex) vm.activeTripIndex = trip.dSIndex;
vm.mainTooltip = vm.trips[vm.activeTripIndex].settings.polygonTooltipText; vm.mainTooltip = vm.trips[vm.activeTripIndex].settings.polygonTooltipText;
} }
} }

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

@ -27,8 +27,10 @@
<ng-md-icon icon="info_outline"></ng-md-icon> <ng-md-icon icon="info_outline"></ng-md-icon>
</md-button> </md-button>
</div> </div>
<div class="trip-animation-tooltip md-whiteframe-z4" layout="column" ng-class="!vm.staticSettings.showTooltip ? 'trip-animation-tooltip-hidden':''" ng-bind-html="vm.mainTooltip" <div class="trip-animation-tooltip md-whiteframe-z4" layout="column"
ng-style="{'background-color': vm.staticSettings.tooltipColor, 'opacity': vm.staticSettings.tooltipOpacity, 'color': vm.staticSettings.tooltipFontColor}"> 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>
</div> </div>
<div class="trip-animation-control-panel"> <div class="trip-animation-control-panel">
@ -39,7 +41,7 @@
<md-button class="md-icon-button" aria-label="Previous" ng-click="vm.movePrev()"> <md-button class="md-icon-button" aria-label="Previous" ng-click="vm.movePrev()">
<md-icon class="material-icons" ng-style="{'color': vm.staticSettings.buttonColor}">skip_previous</md-icon> <md-icon class="material-icons" ng-style="{'color': vm.staticSettings.buttonColor}">skip_previous</md-icon>
</md-button> </md-button>
<md-slider ng-model="vm.index" min="{{vm.minTime}}" max="{{vm.maxTime}}" ng-change="vm.recalculateTrips()"></md-slider> <md-slider ng-model="vm.index" min="{{vm.minTimeIndex}}" max="{{vm.maxTimeIndex}}" ng-change="vm.recalculateTrips()"></md-slider>
<md-button class="md-icon-button" aria-label="Next" ng-click="vm.moveNext()"> <md-button class="md-icon-button" aria-label="Next" ng-click="vm.moveNext()">
<md-icon class="material-icons" ng-style="{'color': vm.staticSettings.buttonColor}">skip_next</md-icon> <md-icon class="material-icons" ng-style="{'color': vm.staticSettings.buttonColor}">skip_next</md-icon>
</md-button> </md-button>
@ -61,7 +63,9 @@
</md-icon> </md-icon>
</md-button> </md-button>
</md-slider-container> </md-slider-container>
<div class="panel-timer">{{vm.trips[vm.activeTripIndex].timeRange[vm.index].ts | date:'medium'}} <div class="panel-timer">
<span ng-show="vm.animationTime">{{ vm.animationTime | date:'medium'}}</span>
<span ng-hide="vm.animationTime">{{ "widget.no-data" | translate}}</span>
</div> </div>
</div> </div>
</div> </div>