Skip to content

Commit

Permalink
TOI working in time conductor
Browse files Browse the repository at this point in the history
  • Loading branch information
akhenry committed Oct 5, 2016
1 parent 1650aae commit 430645b
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 11 deletions.
10 changes: 7 additions & 3 deletions platform/features/conductor-v2/conductor/bundle.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ define([
"./src/ui/TimeConductorController",
"./src/TimeConductor",
"./src/ui/ConductorAxisController",
"./src/ui/ConductorTOIController",
"./src/ui/MctConductorAxis",
"./src/ui/NumberFormat",
"text!./res/templates/time-conductor.html",
Expand All @@ -36,6 +37,7 @@ define([
TimeConductorController,
TimeConductor,
ConductorAxisController,
ConductorTOIController,
MCTConductorAxis,
NumberFormat,
timeConductorTemplate,
Expand Down Expand Up @@ -83,11 +85,13 @@ define([
]
},
{
"key": "ConductorAxisController",
"implementation": ConductorAxisController,
"key": "ConductorTOIController",
"implementation": ConductorTOIController,
"depends": [
"$scope",
"timeConductor",
"formatService"
"timeConductorViewService",
"$timeout"
]
}
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,9 @@
&:hover {
// Hide the cursor, because the TOI element essentially "becomes" the cursor
// when the user is hovering over the visualization area.
cursor: none;

// AH - not any more it doesn't?
//cursor: none;
.l-toi-holder.hover {
opacity: 1;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<a class="l-page-button s-icon-button icon-pointer-left"></a>
<div class="l-data-visualization">
<!-- Note:
- val-to-right should be applied when l-toi-holder left < 160px
-->
<div class="l-toi-holder"
ng-class="{ 'pinned': true, 'val-to-right': false }"
ng-click="this.pinned = false"
style="left: 70%">
<div class="l-toi">
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
</div>
</div>
</div>
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
Original file line number Diff line number Diff line change
Expand Up @@ -95,19 +95,20 @@
</div>

<!-- Holds data visualization, time of interest -->
<div class="l-data-visualization-holder l-row-elem flex-elem">
<div class="l-data-visualization-holder l-row-elem flex-elem"
ng-controller="ConductorTOIController as toi"
ng-click="toi.click($event)">
<a class="l-page-button s-icon-button icon-pointer-left"></a>
<div class="l-data-visualization">
<!-- Note:
- val-to-right should be applied when l-toi-holder left < 160px
-->
<div class="l-toi-holder"
ng-class="{ 'pinned': true, 'val-to-right': false }"
ng-click="this.pinned = false"
style="left: 70%">
ng-class="{ 'pinned': toi.pinned, 'val-to-right': false }"
ng-style="{'left': toi.left + '%'}">
<div class="l-toi">
<a class="t-button-unpin icon-button" ng-click="unpin()"></a>
<span class="l-toi-val">21:31:30</span>
<a class="t-button-unpin icon-button" ng-click="toi.pinned = false"></a>
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is 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.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/

define(
["zepto"],
function ($) {

/**
* The mct-conductor-axis renders a horizontal axis with regular
* labelled 'ticks'. It requires 'start' and 'end' integer values to
* be specified as attributes.
*/
function ConductorTOIController($scope, conductor, conductorViewService, $timeout) {
this.conductor = conductor;
this.conductorViewService = conductorViewService;

//Bind all class functions to 'this'
Object.keys(ConductorTOIController.prototype).filter(function (key) {
return typeof ConductorTOIController.prototype[key] === 'function';
}).forEach(function (key) {
this[key] = ConductorTOIController.prototype[key].bind(this);
}.bind(this));

this.conductor.on('timeOfInterest', this.changeTimeOfInterest);
this.conductorViewService.on('zoom', this.setOffsetFromBounds);
this.conductorViewService.on('pan', this.setOffsetFromBounds);

this.$timeout = $timeout;

var generateRandomTOI = function () {
var bounds = conductor.bounds();
var range = bounds.end - bounds.start;
var toi = Math.random() * range + bounds.start;
console.log('calculated random TOI of ' + toi);
conductor.timeOfInterest(toi);
//this.timeoutHandle = $timeout(generateRandomTOI, 1000);
}.bind(this);

//this.timeoutHandle = $timeout(generateRandomTOI, 2000);

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

}

ConductorTOIController.prototype.destroy = function () {
this.conductor.off('timeOfInterest', this.setOffsetFromBounds);
this.conductorViewService.off('zoom', this.setOffsetFromBounds);
this.conductorViewService.off('pan', this.setOffsetFromBounds);

this.$timeout.cancel(this.timeoutHandle);
};

ConductorTOIController.prototype.setOffsetFromBounds = function (bounds) {
var toi = this.conductor.timeOfInterest();
var offset = toi - bounds.start;
this.left = offset / (bounds.end - bounds.start) * 100;
};

ConductorTOIController.prototype.changeTimeOfInterest = function () {
var bounds = this.conductor.bounds();
if (bounds) {
this.setOffsetFromBounds(bounds);
this.pinned = true;
}
};

ConductorTOIController.prototype.click = function (e) {
if (e.altKey) {
var element = $(e.currentTarget);
var width = element.width();
var relativeX = e.pageX - element.offset().left;
var percX = relativeX / width;
var bounds = this.conductor.bounds();
var timeRange = bounds.end - bounds.start;

this.conductor.timeOfInterest(timeRange * percX + bounds.start);
}
};

/*
ConductorTOIController.prototype.zoom = function (bounds) {
this.changeTOI(bounds)
};
ConductorTOIController.prototype.pan = function (bounds) {
this.changeTOI(bounds)
};*/

ConductorTOIController.prototype.resize = function () {
//Do something
};

return ConductorTOIController;
}
);
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@ define(
// Watch scope for selection of mode or time system by user
this.$scope.$watch('modeModel.selectedKey', this.setMode);
this.conductorViewService.on('pan', this.pan);

this.conductorViewService.on('pan-stop', this.panStop);

this.$scope.$on('$destroy', this.destroy);
Expand Down

0 comments on commit 430645b

Please sign in to comment.