Trip Animation Widget

ui/src/app/api/widget.service.js

@@ -32,6 +32,7 @@ import TbAnalogueCompass from '../widget/lib/analogue-compass';
 import TbCanvasDigitalGauge from '../widget/lib/canvas-digital-gauge';
 import TbMapWidget from '../widget/lib/map-widget';
 import TbMapWidgetV2 from '../widget/lib/map-widget2';
+import TripAnimationWidget from '../widget/lib/tripAnimation/trip-animation-widget';
 
 import 'jquery.terminal/js/jquery.terminal.min.js';
 import 'jquery.terminal/css/jquery.terminal.min.css';
@@ -43,7 +44,7 @@ import thingsboardTypes from '../common/types.constant';
 import thingsboardUtils from '../common/utils.service';
 
 export default angular.module('thingsboard.api.widget', ['oc.lazyLoad', thingsboardLedLight, thingsboardTimeseriesTableWidget,
-    thingsboardAlarmsTableWidget, thingsboardEntitiesTableWidget, thingsboardExtensionsTableWidget, thingsboardRpcWidgets, thingsboardTypes, thingsboardUtils])
+    thingsboardAlarmsTableWidget, thingsboardEntitiesTableWidget, thingsboardExtensionsTableWidget, thingsboardRpcWidgets, thingsboardTypes, thingsboardUtils, TripAnimationWidget])
     .factory('widgetService', WidgetService)
     .name;
 

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

@@ -0,0 +1,104 @@
+/**
+* Copyright © 2016-2019 The Thingsboard Authors
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+**/
+.heat-map-widget {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding-top: 35px;
+}
+
+.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 {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  width: 100%;
+}
+
+#heat-map {
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+
+  .pointsLayerMarkerIcon {
+    border-radius: 50%;
+  }
+}

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

@@ -0,0 +1,49 @@
+<!--
+    Copyright © 2016-2019 The Thingsboard Authors
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+        http://www.apache.org/licenses/LICENSE-2.0
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+
+<div class="heat-map-widget tracking-widget" layout="column" layout-align="center start">
+    <div 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">
+        <md-slider-container>
+            <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>
+            <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>
+            <div class="panel-timer">{{vm.trips[0].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>