UI: Trip Animation Widget Improvements.
This commit is contained in:
Igor Kulikov
parent
2f06be1d05
commit
2bc13b6812
File diff suppressed because one or more lines are too long
@ -17,10 +17,8 @@ import './trip-animation-widget.scss';
|
||||
import template from "./trip-animation-widget.tpl.html";
|
||||
import TbOpenStreetMap from '../openstreet-map';
|
||||
import L from 'leaflet';
|
||||
//import tinycolor from 'tinycolor2';
|
||||
import tinycolor from "tinycolor2";
|
||||
import {fillPatternWithActions, isNumber, padValue, processPattern} from "../widget-utils";
|
||||
//import {fillPatternWithActions, isNumber, padValue, processPattern, fillPattern} from "../widget-utils";
|
||||
|
||||
(function () {
|
||||
// save these original methods before they are overwritten
|
||||
@ -121,20 +119,17 @@ function tripAnimationWidget() {
|
||||
}
|
||||
|
||||
/*@ngInject*/
|
||||
function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
function tripAnimationController($document, $scope, $http, $timeout, $filter, $sce) {
|
||||
let vm = this;
|
||||
//const varsRegex = /\$\{([^\}]*)\}/g;
|
||||
//let icon;
|
||||
|
||||
vm.initBounds = true;
|
||||
|
||||
vm.markers = [];
|
||||
vm.index = 0;
|
||||
vm.dsIndex = 0;
|
||||
vm.isPlaying = false;
|
||||
vm.minTime = 0;
|
||||
vm.maxTime = 0;
|
||||
vm.isPLaying = false;
|
||||
vm.isPlaying = false;
|
||||
vm.trackingLine = {
|
||||
"type": "FeatureCollection",
|
||||
features: []
|
||||
@ -163,7 +158,7 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
|
||||
function initializeCallbacks() {
|
||||
vm.self.onDataUpdated = function () {
|
||||
createUpdatePath();
|
||||
createUpdatePath(true);
|
||||
};
|
||||
|
||||
vm.self.onResize = function () {
|
||||
@ -192,26 +187,54 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
}
|
||||
|
||||
vm.playMove = function (play) {
|
||||
if (play && vm.isPLaying) return;
|
||||
if (play || vm.isPLaying) vm.isPLaying = true;
|
||||
if (vm.isPLaying) {
|
||||
if (vm.index + 1 > vm.maxTime) return;
|
||||
vm.index++;
|
||||
vm.trips.forEach(function (trip) {
|
||||
moveMarker(trip);
|
||||
});
|
||||
if (play && vm.isPlaying) return;
|
||||
if (play || vm.isPlaying) vm.isPlaying = true;
|
||||
if (vm.isPlaying) {
|
||||
moveInc(1);
|
||||
vm.timeout = $timeout(function () {
|
||||
vm.playMove();
|
||||
}, 1000 / vm.speed)
|
||||
}
|
||||
};
|
||||
|
||||
vm.moveNext = function () {
|
||||
vm.stopPlay();
|
||||
moveInc(1);
|
||||
}
|
||||
|
||||
vm.movePrev = function () {
|
||||
vm.stopPlay();
|
||||
moveInc(-1);
|
||||
}
|
||||
|
||||
vm.moveStart = function () {
|
||||
vm.stopPlay();
|
||||
moveToIndex(vm.minTime);
|
||||
}
|
||||
|
||||
vm.moveEnd = function () {
|
||||
vm.stopPlay();
|
||||
moveToIndex(vm.maxTime);
|
||||
}
|
||||
|
||||
vm.stopPlay = function () {
|
||||
vm.isPLaying = false;
|
||||
if (vm.isPlaying) {
|
||||
vm.isPlaying = false;
|
||||
$timeout.cancel(vm.timeout);
|
||||
}
|
||||
};
|
||||
|
||||
function moveInc(inc) {
|
||||
let newIndex = vm.index + inc;
|
||||
moveToIndex(newIndex);
|
||||
}
|
||||
|
||||
function moveToIndex(newIndex) {
|
||||
if (newIndex > vm.maxTime || newIndex < vm.minTime) return;
|
||||
vm.index = newIndex;
|
||||
recalculateTrips();
|
||||
}
|
||||
|
||||
function recalculateTrips() {
|
||||
vm.trips.forEach(function (value) {
|
||||
moveMarker(value);
|
||||
@ -233,7 +256,7 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
vm.utils = vm.self.ctx.$scope.$injector.get('utils');
|
||||
|
||||
vm.showTimestamp = vm.settings.showTimestamp !== false;
|
||||
vm.ctx.$element = angular.element("#heat-map", vm.ctx.$container);
|
||||
vm.ctx.$element = angular.element("#trip-animation-map", vm.ctx.$container);
|
||||
vm.defaultZoomLevel = 2;
|
||||
if (vm.ctx.settings.defaultZoomLevel) {
|
||||
if (vm.ctx.settings.defaultZoomLevel > 0 && vm.ctx.settings.defaultZoomLevel < 21) {
|
||||
@ -257,6 +280,8 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
let staticSettings = {};
|
||||
vm.staticSettings = staticSettings;
|
||||
//Calculate General Settings
|
||||
staticSettings.buttonColor = tinycolor(vm.widgetConfig.color).setAlpha(0.54).toRgbString();
|
||||
staticSettings.disabledButtonColor = tinycolor(vm.widgetConfig.color).setAlpha(0.3).toRgbString();
|
||||
staticSettings.mapProvider = vm.ctx.settings.mapProvider || "OpenStreetMap.Mapnik";
|
||||
staticSettings.latKeyName = vm.ctx.settings.latKeyName || "latitude";
|
||||
staticSettings.lngKeyName = vm.ctx.settings.lngKeyName || "longitude";
|
||||
@ -268,10 +293,14 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
staticSettings.useLabelFunction = vm.ctx.settings.useLabelFunction || false;
|
||||
staticSettings.showLabel = vm.ctx.settings.showLabel || false;
|
||||
staticSettings.useTooltipFunction = vm.ctx.settings.useTooltipFunction || false;
|
||||
staticSettings.tooltipPattern = vm.ctx.settings.tooltipPattern || "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${latitude:7}<br/><b>Longitude:</b> ${longitude:7}<br/><b>Start Time:</b> ${maxTime}<br/><b>End Time:</b> ${minTime}";
|
||||
staticSettings.tooltipOpacity = vm.ctx.settings.tooltipOpacity || 1;
|
||||
staticSettings.tooltipColor = vm.ctx.settings.tooltipColor ? tinycolor(vm.ctx.settings.tooltipColor).toHexString() : "#ffffff";
|
||||
staticSettings.tooltipFontColor = vm.ctx.settings.tooltipFontColor ? tinycolor(vm.ctx.settings.tooltipFontColor).toHexString() : "#000000";
|
||||
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" +
|
||||
"<span style=\"font-size: 12px; color: #666; font-weight: bold;\">Latitude:</span> ${latitude:7}\n" +
|
||||
"<span style=\"font-size: 12px; color: #666; font-weight: bold;\">Longitude:</span> ${longitude:7}";
|
||||
staticSettings.tooltipOpacity = angular.isNumber(vm.ctx.settings.tooltipOpacity) ? vm.ctx.settings.tooltipOpacity : 1;
|
||||
staticSettings.tooltipColor = vm.ctx.settings.tooltipColor ? tinycolor(vm.ctx.settings.tooltipColor).toRgbString() : "#ffffff";
|
||||
staticSettings.tooltipFontColor = vm.ctx.settings.tooltipFontColor ? tinycolor(vm.ctx.settings.tooltipFontColor).toRgbString() : "#000000";
|
||||
staticSettings.pathColor = vm.ctx.settings.color ? tinycolor(vm.ctx.settings.color).toHexString() : "#ff6300";
|
||||
staticSettings.pathWeight = vm.ctx.settings.strokeWeight || 1;
|
||||
staticSettings.pathOpacity = vm.ctx.settings.strokeOpacity || 1;
|
||||
@ -351,16 +380,23 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
}
|
||||
}
|
||||
|
||||
function configureTripSettings(trip) {
|
||||
function configureTripSettings(trip, index, apply) {
|
||||
trip.settings = {};
|
||||
trip.settings.color = calculateColor(trip);
|
||||
trip.settings.strokeWeight = vm.staticSettings.pathWeight;
|
||||
trip.settings.strokeOpacity = vm.staticSettings.pathOpacity;
|
||||
trip.settings.pointColor = vm.staticSettings.pointColor;
|
||||
trip.settings.pointSize = vm.staticSettings.pointSize;
|
||||
trip.settings.labelText = calculateLabel(trip);
|
||||
trip.settings.tooltipText = calculateTooltip(trip);
|
||||
trip.settings.icon = calculateIcon(trip);
|
||||
if (apply) {
|
||||
$timeout(() => {
|
||||
trip.settings.labelText = calculateLabel(trip);
|
||||
trip.settings.tooltipText = $sce.trustAsHtml(calculateTooltip(trip));
|
||||
},0,true);
|
||||
} else {
|
||||
trip.settings.labelText = calculateLabel(trip);
|
||||
trip.settings.tooltipText = $sce.trustAsHtml(calculateTooltip(trip));
|
||||
}
|
||||
}
|
||||
|
||||
function calculateLabel(trip) {
|
||||
@ -464,7 +500,7 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
return icon;
|
||||
}
|
||||
|
||||
function createUpdatePath() {
|
||||
function createUpdatePath(apply) {
|
||||
if (vm.trips && vm.map) {
|
||||
vm.trips.forEach(function (trip) {
|
||||
if (trip.marker) {
|
||||
@ -486,7 +522,7 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
}
|
||||
let normalizedTimeRange = createNormalizedTime(vm.data, 1000);
|
||||
createNormalizedTrips(normalizedTimeRange, vm.datasources);
|
||||
createTripsOnMap();
|
||||
createTripsOnMap(apply);
|
||||
if (vm.initBounds && !vm.initTrips) {
|
||||
vm.trips.forEach(function (trip) {
|
||||
vm.map.extendBounds(vm.map.bounds, trip.polyline);
|
||||
@ -501,7 +537,6 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
|
||||
vm.map.fitBounds(vm.map.bounds);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function fillPattern(pattern, replaceInfo, currentNormalizedValue) {
|
||||
@ -549,12 +584,20 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
}
|
||||
});
|
||||
for (let i = min_time; i < max_time; i += step) {
|
||||
normalizedArray.push({ts: i})
|
||||
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')});
|
||||
}
|
||||
if (normalizedArray[normalizedArray.length - 1] && normalizedArray[normalizedArray.length - 1].ts !== max_time) normalizedArray.push({ts: max_time});
|
||||
}
|
||||
vm.maxTime = normalizedArray.length - 1;
|
||||
vm.minTime = 0;
|
||||
vm.minTime = vm.maxTime > 1 ? 1 : 0;
|
||||
if (vm.index < vm.minTime) {
|
||||
vm.index = vm.minTime;
|
||||
} else if (vm.index > vm.maxTime) {
|
||||
vm.index = vm.maxTime;
|
||||
}
|
||||
return normalizedArray;
|
||||
}
|
||||
|
||||
@ -611,27 +654,43 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
}
|
||||
el.latLngs.push(data.latLng);
|
||||
});
|
||||
addAngleForTip(el);
|
||||
addAngleForTrip(el);
|
||||
})
|
||||
}
|
||||
|
||||
function addAngleForTip(trip) {
|
||||
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];
|
||||
point.h = findAngle(prevPoint[vm.staticSettings.latKeyName], prevPoint[vm.staticSettings.lngKeyName], nextPoint[vm.staticSettings.latKeyName], nextPoint[vm.staticSettings.lngKeyName]);
|
||||
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 {
|
||||
point.h = findAngle(prevLatLng.lat, prevLatLng.lng, nextLatLng.lat, nextLatLng.lng);
|
||||
point.h += vm.staticSettings.rotationAngle;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function createTripsOnMap() {
|
||||
function createTripsOnMap(apply) {
|
||||
if (vm.trips.length > 0) {
|
||||
vm.trips.forEach(function (trip) {
|
||||
if (trip.timeRange.length > 0 && trip.latLngs.every(el => angular.isDefined(el))) {
|
||||
configureTripSettings(trip, vm.index);
|
||||
configureTripSettings(trip, vm.index, apply);
|
||||
if (vm.staticSettings.showPoints) {
|
||||
trip.points = [];
|
||||
trip.latLngs.forEach(function (latLng) {
|
||||
@ -648,14 +707,14 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
}
|
||||
|
||||
if (trip.timeRange && trip.timeRange.length && angular.isUndefined(trip.marker)) {
|
||||
trip.marker = L.marker(trip.timeRange[vm.index].latLng).addTo(vm.map.map);
|
||||
trip.marker = L.marker(trip.timeRange[vm.index].latLng);
|
||||
trip.marker.setZIndexOffset(1000);
|
||||
trip.marker.setIcon(vm.staticSettings.icon);
|
||||
trip.marker.setRotationOrigin('center center');
|
||||
// trip.marker.addTo(vm.map.map);
|
||||
trip.marker.on('click', function () {
|
||||
showHideTooltip(trip);
|
||||
});
|
||||
trip.marker.addTo(vm.map.map);
|
||||
moveMarker(trip);
|
||||
}
|
||||
}
|
||||
@ -675,10 +734,10 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
|
||||
trip.marker.setZIndexOffset(1000);
|
||||
trip.marker.setIcon(vm.staticSettings.icon);
|
||||
trip.marker.setRotationOrigin('center center');
|
||||
trip.marker.addTo(vm.map.map);
|
||||
trip.marker.on('click', function () {
|
||||
showHideTooltip(trip);
|
||||
});
|
||||
trip.marker.addTo(vm.map.map);
|
||||
trip.marker.update();
|
||||
}
|
||||
|
||||
|
||||
@ -14,88 +14,25 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.heat-map-widget {
|
||||
.trip-animation-widget {
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
||||
.trip-animation-label-container {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.heat-map-info-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
border-bottom-left-radius: 5px;
|
||||
|
||||
.md-button {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.heat-map-tooltip {
|
||||
position: absolute;
|
||||
top: 47px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
transition: .3s ease-in-out;
|
||||
|
||||
&-hidden {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.heat-map-title {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.heat-map-control-panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-right: 70px;
|
||||
padding-left: 20px;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
|
||||
md-slider-container {
|
||||
button {
|
||||
max-width: none;
|
||||
|
||||
ng-md-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-timer {
|
||||
max-width: none;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heat-map-container {
|
||||
.trip-animation-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#heat-map {
|
||||
#trip-animation-map {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -104,3 +41,96 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.trip-animation-info-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
|
||||
.md-button {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
padding: 0 0 2px;
|
||||
margin: 2px;
|
||||
line-height: 24px;
|
||||
|
||||
ng-md-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trip-animation-tooltip {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
transition: .3s ease-in-out;
|
||||
|
||||
&-hidden {
|
||||
transform: translateX(110%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trip-animation-control-panel {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
|
||||
md-slider-container {
|
||||
md-slider {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
button.md-button.md-icon-button {
|
||||
width: 44px;
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
min-height: 44px;
|
||||
margin: 0;
|
||||
line-height: 28px;
|
||||
|
||||
md-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 28px;
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
md-select {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-timer {
|
||||
max-width: none;
|
||||
padding-right: 250px;
|
||||
padding-left: 90px;
|
||||
margin-top: -20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,40 +15,53 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<div class="heat-map-widget tracking-widget" layout="column" layout-align="center start"
|
||||
<div class="trip-animation-widget" layout="column" layout-align="center start"
|
||||
ng-style="{'padding-top' : (!vm.widgetConfig.showTitle && vm.ctx.settings.showLabel) ? '5px' : '0px'}">
|
||||
<div ng-show="vm.ctx.settings.showLabel">
|
||||
<div class="trip-animation-label-container" ng-show="vm.ctx.settings.showLabel">
|
||||
{{vm.trips[vm.activeTripIndex].settings.labelText}}
|
||||
</div>
|
||||
<div class="heat-map-control-panel" lang="row" layout-align="center start">
|
||||
<div class="trip-animation-container" layout="column">
|
||||
<div flex id='trip-animation-map'></div>
|
||||
<div class="trip-animation-info-panel" layout="row">
|
||||
<md-button class="md-primary md-fab" aria-label="tooltip" ng-show="vm.staticSettings.displayTooltip" ng-click="vm.showHideTooltip()">
|
||||
<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.trips[vm.activeTripIndex].settings.tooltipText"
|
||||
ng-style="{'background-color': vm.staticSettings.tooltipColor, 'opacity': vm.staticSettings.tooltipOpacity, 'color': vm.staticSettings.tooltipFontColor}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="trip-animation-control-panel">
|
||||
<md-slider-container>
|
||||
<md-button class="md-icon-button" aria-label="Start" ng-click="vm.moveStart()">
|
||||
<md-icon class="material-icons" ng-style="{'color': vm.staticSettings.buttonColor}">fast_rewind</md-icon>
|
||||
</md-button>
|
||||
<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-button>
|
||||
<md-slider ng-model="vm.index" min="{{vm.minTime}}" max="{{vm.maxTime}}" ng-change="vm.recalculateTrips()"></md-slider>
|
||||
<md-button aria-label="Play" ng-click="vm.playMove(true)" ng-disabled="vm.isPlaying">
|
||||
<ng-md-icon icon="play_circle_outline"></ng-md-icon>
|
||||
<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-button>
|
||||
<md-button class="md-icon-button" aria-label="End" ng-click="vm.moveEnd()">
|
||||
<md-icon class="material-icons" ng-style="{'color': vm.staticSettings.buttonColor}">fast_forward</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button" aria-label="Play" ng-click="vm.playMove(true)" ng-disabled="vm.isPlaying">
|
||||
<md-icon class="material-icons" ng-style="{'color': vm.isPlaying ? vm.staticSettings.disabledButtonColor : vm.staticSettings.buttonColor}">
|
||||
play_circle_outline
|
||||
</md-icon>
|
||||
</md-button>
|
||||
<md-select ng-model="vm.speed" aria-label="Speed selector">
|
||||
<md-option ng-value="speed" flex="1" ng-repeat="speed in vm.speeds track by $index">{{ speed}}
|
||||
</md-option>
|
||||
</md-select>
|
||||
<md-button aria-label="Stop playing" ng-click="vm.stopPlay()">
|
||||
<ng-md-icon icon="pause_circle_outline"></ng-md-icon>
|
||||
<md-button class="md-icon-button" aria-label="Stop playing" ng-click="vm.stopPlay()" ng-disabled="!vm.isPlaying">
|
||||
<md-icon class="material-icons" ng-style="{'color': vm.isPlaying ? vm.staticSettings.buttonColor : vm.staticSettings.disabledButtonColor}">
|
||||
pause_circle_outline
|
||||
</md-icon>
|
||||
</md-button>
|
||||
</md-slider-container>
|
||||
<div class="panel-timer">{{vm.trips[vm.activeTripIndex].timeRange[vm.index].ts | date:'medium'}}
|
||||
</div>
|
||||
</md-slider-container>
|
||||
</div>
|
||||
<div class="heat-map-container" layout="column">
|
||||
<div flex id='heat-map'></div>
|
||||
<div class="heat-map-info-panel" layout="row">
|
||||
<md-button aria-label="tooltip" ng-show="vm.staticSettings.displayTooltip" ng-click="vm.showHideTooltip()">
|
||||
<ng-md-icon icon="info"></ng-md-icon>
|
||||
</md-button>
|
||||
<!--<md-button aria-label="settings" ng-click="vm.openHideSettings()">-->
|
||||
<!--<ng-md-icon icon="settings_applications"></ng-md-icon>-->
|
||||
<!--</md-button>-->
|
||||
</div>
|
||||
<div class="heat-map-tooltip" class="heat-map-title" layout="column" ng-class="!vm.staticSettings.showTooltip ? 'heat-map-tooltip-hidden':''" ng-bind-html="vm.trips[vm.activeTripIndex].settings.tooltipText"
|
||||
ng-style="{'background-color': vm.staticSettings.tooltipColor, 'opacity': vm.staticSettings.tooltipOpacity, 'color': vm.staticSettings.tooltipFontColor}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user