Skip to content

Commit 430645b

Browse files
committed
TOI working in time conductor
1 parent 1650aae commit 430645b

File tree

6 files changed

+146
-11
lines changed

6 files changed

+146
-11
lines changed

platform/features/conductor-v2/conductor/bundle.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ define([
2525
"./src/ui/TimeConductorController",
2626
"./src/TimeConductor",
2727
"./src/ui/ConductorAxisController",
28+
"./src/ui/ConductorTOIController",
2829
"./src/ui/MctConductorAxis",
2930
"./src/ui/NumberFormat",
3031
"text!./res/templates/time-conductor.html",
@@ -36,6 +37,7 @@ define([
3637
TimeConductorController,
3738
TimeConductor,
3839
ConductorAxisController,
40+
ConductorTOIController,
3941
MCTConductorAxis,
4042
NumberFormat,
4143
timeConductorTemplate,
@@ -83,11 +85,13 @@ define([
8385
]
8486
},
8587
{
86-
"key": "ConductorAxisController",
87-
"implementation": ConductorAxisController,
88+
"key": "ConductorTOIController",
89+
"implementation": ConductorTOIController,
8890
"depends": [
91+
"$scope",
8992
"timeConductor",
90-
"formatService"
93+
"timeConductorViewService",
94+
"$timeout"
9195
]
9296
}
9397
],

platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,9 @@
246246
&:hover {
247247
// Hide the cursor, because the TOI element essentially "becomes" the cursor
248248
// when the user is hovering over the visualization area.
249-
cursor: none;
249+
250+
// AH - not any more it doesn't?
251+
//cursor: none;
250252
.l-toi-holder.hover {
251253
opacity: 1;
252254
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<a class="l-page-button s-icon-button icon-pointer-left"></a>
2+
<div class="l-data-visualization">
3+
<!-- Note:
4+
- val-to-right should be applied when l-toi-holder left < 160px
5+
-->
6+
<div class="l-toi-holder"
7+
ng-class="{ 'pinned': true, 'val-to-right': false }"
8+
ng-click="this.pinned = false"
9+
style="left: 70%">
10+
<div class="l-toi">
11+
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
12+
</div>
13+
</div>
14+
</div>
15+
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>

platform/features/conductor-v2/conductor/res/templates/time-conductor.html

+7-6
Original file line numberDiff line numberDiff line change
@@ -95,19 +95,20 @@
9595
</div>
9696

9797
<!-- Holds data visualization, time of interest -->
98-
<div class="l-data-visualization-holder l-row-elem flex-elem">
98+
<div class="l-data-visualization-holder l-row-elem flex-elem"
99+
ng-controller="ConductorTOIController as toi"
100+
ng-click="toi.click($event)">
99101
<a class="l-page-button s-icon-button icon-pointer-left"></a>
100102
<div class="l-data-visualization">
101103
<!-- Note:
102104
- val-to-right should be applied when l-toi-holder left < 160px
103105
-->
104106
<div class="l-toi-holder"
105-
ng-class="{ 'pinned': true, 'val-to-right': false }"
106-
ng-click="this.pinned = false"
107-
style="left: 70%">
107+
ng-class="{ 'pinned': toi.pinned, 'val-to-right': false }"
108+
ng-style="{'left': toi.left + '%'}">
108109
<div class="l-toi">
109-
<a class="t-button-unpin icon-button" ng-click="unpin()"></a>
110-
<span class="l-toi-val">21:31:30</span>
110+
<a class="t-button-unpin icon-button" ng-click="toi.pinned = false"></a>
111+
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
111112
</div>
112113
</div>
113114
</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/*****************************************************************************
2+
* Open MCT Web, Copyright (c) 2014-2015, United States Government
3+
* as represented by the Administrator of the National Aeronautics and Space
4+
* Administration. All rights reserved.
5+
*
6+
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
* http://www.apache.org/licenses/LICENSE-2.0.
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
13+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
14+
* License for the specific language governing permissions and limitations
15+
* under the License.
16+
*
17+
* Open MCT Web includes source code licensed under additional open source
18+
* licenses. See the Open Source Licenses file (LICENSES.md) included with
19+
* this source code distribution or the Licensing information page available
20+
* at runtime from the About dialog for additional information.
21+
*****************************************************************************/
22+
23+
define(
24+
["zepto"],
25+
function ($) {
26+
27+
/**
28+
* The mct-conductor-axis renders a horizontal axis with regular
29+
* labelled 'ticks'. It requires 'start' and 'end' integer values to
30+
* be specified as attributes.
31+
*/
32+
function ConductorTOIController($scope, conductor, conductorViewService, $timeout) {
33+
this.conductor = conductor;
34+
this.conductorViewService = conductorViewService;
35+
36+
//Bind all class functions to 'this'
37+
Object.keys(ConductorTOIController.prototype).filter(function (key) {
38+
return typeof ConductorTOIController.prototype[key] === 'function';
39+
}).forEach(function (key) {
40+
this[key] = ConductorTOIController.prototype[key].bind(this);
41+
}.bind(this));
42+
43+
this.conductor.on('timeOfInterest', this.changeTimeOfInterest);
44+
this.conductorViewService.on('zoom', this.setOffsetFromBounds);
45+
this.conductorViewService.on('pan', this.setOffsetFromBounds);
46+
47+
this.$timeout = $timeout;
48+
49+
var generateRandomTOI = function () {
50+
var bounds = conductor.bounds();
51+
var range = bounds.end - bounds.start;
52+
var toi = Math.random() * range + bounds.start;
53+
console.log('calculated random TOI of ' + toi);
54+
conductor.timeOfInterest(toi);
55+
//this.timeoutHandle = $timeout(generateRandomTOI, 1000);
56+
}.bind(this);
57+
58+
//this.timeoutHandle = $timeout(generateRandomTOI, 2000);
59+
60+
$scope.$on('$destroy', this.destroy);
61+
62+
}
63+
64+
ConductorTOIController.prototype.destroy = function () {
65+
this.conductor.off('timeOfInterest', this.setOffsetFromBounds);
66+
this.conductorViewService.off('zoom', this.setOffsetFromBounds);
67+
this.conductorViewService.off('pan', this.setOffsetFromBounds);
68+
69+
this.$timeout.cancel(this.timeoutHandle);
70+
};
71+
72+
ConductorTOIController.prototype.setOffsetFromBounds = function (bounds) {
73+
var toi = this.conductor.timeOfInterest();
74+
var offset = toi - bounds.start;
75+
this.left = offset / (bounds.end - bounds.start) * 100;
76+
};
77+
78+
ConductorTOIController.prototype.changeTimeOfInterest = function () {
79+
var bounds = this.conductor.bounds();
80+
if (bounds) {
81+
this.setOffsetFromBounds(bounds);
82+
this.pinned = true;
83+
}
84+
};
85+
86+
ConductorTOIController.prototype.click = function (e) {
87+
if (e.altKey) {
88+
var element = $(e.currentTarget);
89+
var width = element.width();
90+
var relativeX = e.pageX - element.offset().left;
91+
var percX = relativeX / width;
92+
var bounds = this.conductor.bounds();
93+
var timeRange = bounds.end - bounds.start;
94+
95+
this.conductor.timeOfInterest(timeRange * percX + bounds.start);
96+
}
97+
};
98+
99+
/*
100+
ConductorTOIController.prototype.zoom = function (bounds) {
101+
this.changeTOI(bounds)
102+
};
103+
104+
ConductorTOIController.prototype.pan = function (bounds) {
105+
this.changeTOI(bounds)
106+
};*/
107+
108+
ConductorTOIController.prototype.resize = function () {
109+
//Do something
110+
};
111+
112+
return ConductorTOIController;
113+
}
114+
);

platform/features/conductor-v2/conductor/src/ui/TimeConductorController.js

-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,6 @@ define(
9999
// Watch scope for selection of mode or time system by user
100100
this.$scope.$watch('modeModel.selectedKey', this.setMode);
101101
this.conductorViewService.on('pan', this.pan);
102-
103102
this.conductorViewService.on('pan-stop', this.panStop);
104103

105104
this.$scope.$on('$destroy', this.destroy);

0 commit comments

Comments
 (0)