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

UI: Trip Animation Widget Improvements.

Browse Source
This commit is contained in:
Igor Kulikov 2019-03-28 18:36:43 +02:00
parent 2f06be1d05
commit 2bc13b6812
4 changed files with 239 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@ -17,10 +17,8 @@ import './trip-animation-widget.scss';
import template from "./trip-animation-widget.tpl.html"; import template from "./trip-animation-widget.tpl.html";
import TbOpenStreetMap from '../openstreet-map'; import TbOpenStreetMap from '../openstreet-map';
import L from 'leaflet'; import L from 'leaflet';
//import tinycolor from 'tinycolor2';
import tinycolor from "tinycolor2"; import tinycolor from "tinycolor2";
import {fillPatternWithActions, isNumber, padValue, processPattern} from "../widget-utils"; import {fillPatternWithActions, isNumber, padValue, processPattern} from "../widget-utils";
//import {fillPatternWithActions, isNumber, padValue, processPattern, fillPattern} from "../widget-utils";
(function () { (function () {
// save these original methods before they are overwritten // save these original methods before they are overwritten
@ -121,20 +119,17 @@ function tripAnimationWidget() {
} }
/*@ngInject*/ /*@ngInject*/
function tripAnimationController($document, $scope, $http, $timeout, $filter) { function tripAnimationController($document, $scope, $http, $timeout, $filter, $sce) {
let vm = this; let vm = this;
//const varsRegex = /\$\{([^\}]*)\}/g;
//let icon;
vm.initBounds = true; vm.initBounds = true;
vm.markers = []; vm.markers = [];
vm.index = 0; vm.index = 0;
vm.dsIndex = 0; vm.dsIndex = 0;
vm.isPlaying = false;
vm.minTime = 0; vm.minTime = 0;
vm.maxTime = 0; vm.maxTime = 0;
vm.isPLaying = false; vm.isPlaying = false;
vm.trackingLine = { vm.trackingLine = {
"type": "FeatureCollection", "type": "FeatureCollection",
features: [] features: []
@ -163,7 +158,7 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
function initializeCallbacks() { function initializeCallbacks() {
vm.self.onDataUpdated = function () { vm.self.onDataUpdated = function () {
createUpdatePath(); createUpdatePath(true);
}; };
vm.self.onResize = function () { vm.self.onResize = function () {
@ -192,26 +187,54 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
} }
vm.playMove = function (play) { vm.playMove = function (play) {
if (play && vm.isPLaying) return; if (play && vm.isPlaying) return;
if (play || vm.isPLaying) vm.isPLaying = true; if (play || vm.isPlaying) vm.isPlaying = true;
if (vm.isPLaying) { if (vm.isPlaying) {
if (vm.index + 1 > vm.maxTime) return; moveInc(1);
vm.index++;
vm.trips.forEach(function (trip) {
moveMarker(trip);
});
vm.timeout = $timeout(function () { vm.timeout = $timeout(function () {
vm.playMove(); vm.playMove();
}, 1000 / vm.speed) }, 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.stopPlay = function () {
vm.isPLaying = false; if (vm.isPlaying) {
$timeout.cancel(vm.timeout); 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() { function recalculateTrips() {
vm.trips.forEach(function (value) { vm.trips.forEach(function (value) {
moveMarker(value); moveMarker(value);
@ -233,7 +256,7 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
vm.utils = vm.self.ctx.$scope.$injector.get('utils'); vm.utils = vm.self.ctx.$scope.$injector.get('utils');
vm.showTimestamp = vm.settings.showTimestamp !== false; 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; vm.defaultZoomLevel = 2;
if (vm.ctx.settings.defaultZoomLevel) { if (vm.ctx.settings.defaultZoomLevel) {
if (vm.ctx.settings.defaultZoomLevel > 0 && vm.ctx.settings.defaultZoomLevel < 21) { if (vm.ctx.settings.defaultZoomLevel > 0 && vm.ctx.settings.defaultZoomLevel < 21) {
@ -257,6 +280,8 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
let staticSettings = {}; let staticSettings = {};
vm.staticSettings = staticSettings; vm.staticSettings = staticSettings;
//Calculate General Settings //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.mapProvider = vm.ctx.settings.mapProvider || "OpenStreetMap.Mapnik";
staticSettings.latKeyName = vm.ctx.settings.latKeyName || "latitude"; staticSettings.latKeyName = vm.ctx.settings.latKeyName || "latitude";
staticSettings.lngKeyName = vm.ctx.settings.lngKeyName || "longitude"; 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.useLabelFunction = vm.ctx.settings.useLabelFunction || false;
staticSettings.showLabel = vm.ctx.settings.showLabel || false; staticSettings.showLabel = vm.ctx.settings.showLabel || false;
staticSettings.useTooltipFunction = vm.ctx.settings.useTooltipFunction || 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.tooltipPattern = vm.ctx.settings.tooltipPattern || "<span style=\"font-size: 26px; color: #666; font-weight: bold;\">${entityName}</span>\n" +
staticSettings.tooltipOpacity = vm.ctx.settings.tooltipOpacity || 1; "<br/>\n" +
staticSettings.tooltipColor = vm.ctx.settings.tooltipColor ? tinycolor(vm.ctx.settings.tooltipColor).toHexString() : "#ffffff"; "<span style=\"font-size: 12px; color: #666; font-weight: bold;\">Time:</span><span style=\"font-size: 12px;\"> ${formattedTs}</span>\n" +
staticSettings.tooltipFontColor = vm.ctx.settings.tooltipFontColor ? tinycolor(vm.ctx.settings.tooltipFontColor).toHexString() : "#000000"; "<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.pathColor = vm.ctx.settings.color ? tinycolor(vm.ctx.settings.color).toHexString() : "#ff6300";
staticSettings.pathWeight = vm.ctx.settings.strokeWeight || 1; staticSettings.pathWeight = vm.ctx.settings.strokeWeight || 1;
staticSettings.pathOpacity = vm.ctx.settings.strokeOpacity || 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 = {};
trip.settings.color = calculateColor(trip); trip.settings.color = calculateColor(trip);
trip.settings.strokeWeight = vm.staticSettings.pathWeight; trip.settings.strokeWeight = vm.staticSettings.pathWeight;
trip.settings.strokeOpacity = vm.staticSettings.pathOpacity; trip.settings.strokeOpacity = vm.staticSettings.pathOpacity;
trip.settings.pointColor = vm.staticSettings.pointColor; trip.settings.pointColor = vm.staticSettings.pointColor;
trip.settings.pointSize = vm.staticSettings.pointSize; trip.settings.pointSize = vm.staticSettings.pointSize;
trip.settings.labelText = calculateLabel(trip);
trip.settings.tooltipText = calculateTooltip(trip);
trip.settings.icon = calculateIcon(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) { function calculateLabel(trip) {
@ -464,7 +500,7 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
return icon; return icon;
} }
function createUpdatePath() { function createUpdatePath(apply) {
if (vm.trips && vm.map) { if (vm.trips && vm.map) {
vm.trips.forEach(function (trip) { vm.trips.forEach(function (trip) {
if (trip.marker) { if (trip.marker) {
@ -486,7 +522,7 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
} }
let normalizedTimeRange = createNormalizedTime(vm.data, 1000); let normalizedTimeRange = createNormalizedTime(vm.data, 1000);
createNormalizedTrips(normalizedTimeRange, vm.datasources); createNormalizedTrips(normalizedTimeRange, vm.datasources);
createTripsOnMap(); createTripsOnMap(apply);
if (vm.initBounds && !vm.initTrips) { if (vm.initBounds && !vm.initTrips) {
vm.trips.forEach(function (trip) { vm.trips.forEach(function (trip) {
vm.map.extendBounds(vm.map.bounds, trip.polyline); 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); vm.map.fitBounds(vm.map.bounds);
} }
} }
function fillPattern(pattern, replaceInfo, currentNormalizedValue) { 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) { 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}); 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.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; return normalizedArray;
} }
@ -611,27 +654,43 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
} }
el.latLngs.push(data.latLng); el.latLngs.push(data.latLng);
}); });
addAngleForTip(el); addAngleForTrip(el);
}) })
} }
function addAngleForTip(trip) { function addAngleForTrip(trip) {
if (trip.timeRange && trip.timeRange.length > 0) { if (trip.timeRange && trip.timeRange.length > 0) {
trip.timeRange.forEach(function (point, index) { trip.timeRange.forEach(function (point, index) {
let nextPoint, prevPoint; let nextPoint, prevPoint;
nextPoint = index === (trip.timeRange.length - 1) ? trip.timeRange[index] : trip.timeRange[index + 1]; nextPoint = index === (trip.timeRange.length - 1) ? trip.timeRange[index] : trip.timeRange[index + 1];
prevPoint = index === 0 ? trip.timeRange[0] : 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 = {
point.h += vm.staticSettings.rotationAngle; 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) { if (vm.trips.length > 0) {
vm.trips.forEach(function (trip) { vm.trips.forEach(function (trip) {
if (trip.timeRange.length > 0 && trip.latLngs.every(el => angular.isDefined(el))) { 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) { if (vm.staticSettings.showPoints) {
trip.points = []; trip.points = [];
trip.latLngs.forEach(function (latLng) { 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)) { 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.setZIndexOffset(1000);
trip.marker.setIcon(vm.staticSettings.icon); trip.marker.setIcon(vm.staticSettings.icon);
trip.marker.setRotationOrigin('center center'); trip.marker.setRotationOrigin('center center');
// trip.marker.addTo(vm.map.map); trip.marker.on('click', function () {
trip.marker.on('click', function () { showHideTooltip(trip);
showHideTooltip(trip); });
}); trip.marker.addTo(vm.map.map);
moveMarker(trip); moveMarker(trip);
} }
} }
@ -675,10 +734,10 @@ function tripAnimationController($document, $scope, $http, $timeout, $filter) {
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');
trip.marker.on('click', function () {
showHideTooltip(trip);
});
trip.marker.addTo(vm.map.map); trip.marker.addTo(vm.map.map);
trip.marker.on('click', function () {
showHideTooltip(trip);
});
trip.marker.update(); trip.marker.update();
} }

164
ui/src/app/widget/lib/tripAnimation/trip-animation-widget.scss
View File

@ -14,93 +14,123 @@
* limitations under the License. * limitations under the License.
*/ */
.heat-map-widget { .trip-animation-widget {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
}
.heat-map-info-panel { .trip-animation-label-container {
position: absolute; height: 24px;
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 { .trip-animation-container {
position: absolute; position: relative;
top: 47px; z-index: 1;
right: 0; flex: 1;
z-index: 2; width: 100%;
padding: 10px;
background-color: #fff;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
transition: .3s ease-in-out;
&-hidden { #trip-animation-map {
transform: translateX(100%); z-index: 1;
} width: 100%;
} height: 100%;
.heat-map-title { .pointsLayerMarkerIcon {
padding: 10px; border-radius: 50%;
} }
}
.heat-map-control-panel { .trip-animation-info-panel {
position: absolute; position: absolute;
bottom: 0; top: 0;
z-index: 2; right: 0;
box-sizing: border-box; z-index: 2;
width: 100%; pointer-events: none;
padding-right: 70px;
padding-left: 20px;
background: rgba(0, 0, 0, .3);
md-slider-container { .md-button {
button { top: 0;
max-width: none; left: 0;
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
padding: 0 0 2px;
margin: 2px;
line-height: 24px;
ng-md-icon { ng-md-icon {
width: 36px; width: 24px;
height: 36px; height: 24px;
svg { svg {
width: inherit; width: inherit;
height: 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 { .panel-timer {
max-width: none; max-width: none;
font-size: 20px; padding-right: 250px;
font-weight: 600; padding-left: 90px;
margin-top: -20px;
font-size: 12px;
font-weight: 500;
text-align: center;
} }
} }
} }
.heat-map-container {
position: relative;
z-index: 1;
flex: 1;
width: 100%;
}
#heat-map {
z-index: 1;
width: 100%;
height: 100%;
.pointsLayerMarkerIcon {
border-radius: 50%;
}
}

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

@ -15,40 +15,53 @@
limitations under the License. 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'}"> 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}} {{vm.trips[vm.activeTripIndex].settings.labelText}}
</div> </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-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-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"> <md-button class="md-icon-button" aria-label="Next" ng-click="vm.moveNext()">
<ng-md-icon icon="play_circle_outline"></ng-md-icon> <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-button>
<md-select ng-model="vm.speed" aria-label="Speed selector"> <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 ng-value="speed" flex="1" ng-repeat="speed in vm.speeds track by $index">{{ speed}}
</md-option> </md-option>
</md-select> </md-select>
<md-button aria-label="Stop playing" ng-click="vm.stopPlay()"> <md-button class="md-icon-button" aria-label="Stop playing" ng-click="vm.stopPlay()" ng-disabled="!vm.isPlaying">
<ng-md-icon icon="pause_circle_outline"></ng-md-icon> <md-icon class="material-icons" ng-style="{'color': vm.isPlaying ? vm.staticSettings.buttonColor : vm.staticSettings.disabledButtonColor}">
pause_circle_outline
</md-icon>
</md-button> </md-button>
<div class="panel-timer">{{vm.trips[vm.activeTripIndex].timeRange[vm.index].ts | date:'medium'}}
</div>
</md-slider-container> </md-slider-container>
</div> <div class="panel-timer">{{vm.trips[vm.activeTripIndex].timeRange[vm.index].ts | date:'medium'}}
<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> </div>
</div> </div>