Improved the detailed graph view. Graph now stays zoomed. Added selec…

…t and slider. Added template manager functionality.

Next step: Improve preprocessing for better matches. Investigate low pass.

css/style.css

@@ -216,4 +216,39 @@ div[dropzone] .info li .label {
 
 #big {
     height: 500px;
+}
+
+input[type='range'] {
+    -webkit-appearance: none !important;
+    background: #888;
+    height: 2px;
+    width: 100%;
+}
+input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    background:#5E99FF;
+    height:10px;
+    width:10px;
+    border-radius: 5px;
+}
+
+label {
+    display: inline-block;
+}
+input,select{
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.floatleft {
+    float: left;
+}
+.floatright {
+    float: right;
+}
+.fill {
+    overflow: hidden;
+}
+.numberInput {
+    width: 50px;
 }

index.html

@@ -90,9 +90,15 @@ <h3>Global Properties:</h3>
                     </ul>
                 </div>-->
                 <div class="detailedView" ng-if="interfaceManager.menuActive=='Detailed'">
-                    Template:<input type="text" ng-change="$parent.interfaceManager.detailedUpdateRequired=true" ng-model="$parent.interfaceManager.detailedViewTemplate">
-                    z: <input type="number" ng-change="$parent.interfaceManager.detailedUpdateRequired=true" ng-model="$parent.interfaceManager.detailedViewZ">
                     <div id="big">{{interfaceManager.renderDetailed()}}</div>
+                    <label class="floatleft">Template:</label>
+                    <select class="floatleft" ng-change="$parent.interfaceManager.detailedUpdateRequired=true" ng-model="$parent.interfaceManager.detailedViewTemplate" data-ng-options="t.index as t.id + ' - ' + t.name for t in $parent.templateManager.getTemplatesAsJson()"></select>
+                    <label class="floatleft">z: </label>
+                    <input class="floatleft numberInput" type="text" ng-change="$parent.interfaceManager.detailedUpdateRequired=true" ng-model="$parent.interfaceManager.detailedViewZ">
+                    <input class="floatright numberInput" type="text" ng-model="$parent.interfaceManager.detailedViewZMax"/>
+                    <div class="fill">
+                        <input type="range" min=0 max="{{$parent.interfaceManager.detailedViewZMax}}" step="0.0001" ng-change="$parent.interfaceManager.detailedUpdateRequired=true" ng-model="$parent.interfaceManager.detailedViewZ">
+                    </div>
                 </div>
             </div>
         </div>

js/views.js

@@ -22,6 +22,7 @@ function InterfaceManager(scope, spectraManager, templateManager) {
     this.detailedViewTemplate = 0;
     this.detailedViewZ = 0;
     this.detailedUpdateRequired = false;
+    this.detailedViewZMax = 2;
 
     this.detailedChart = null;
     this.detailedRawGraph = null;
@@ -33,6 +34,9 @@ function InterfaceManager(scope, spectraManager, templateManager) {
     this.renderOverviewDone = new Array();
 
 }
+InterfaceManager.prototype.getDetailedZ = function() {
+    return parseFloat(this.detailedViewZ);
+}
 InterfaceManager.prototype.renderTemplate = function(i) {
     var canvas = document.getElementById('smallTemplateCanvas' + i);
     var arr = this.templateManager.getTemplateLambda(i);
@@ -120,7 +124,7 @@ InterfaceManager.prototype.getDetailedData = function() {
     var isMatched = spectra.isMatched();
 
     var ti = this.detailedViewTemplate;
-    var tz = this.detailedViewZ;
+    var tz = this.getDetailedZ();
 
 
     var templateYs = null;
@@ -159,6 +163,7 @@ InterfaceManager.prototype.renderDetailed = function() {
         d = [{'lambda':1,'raw':2,'preprocessed':3,'matched':4}];
         this.detailedChart = new AmCharts.AmSerialChart();
         var c = this.detailedChart;
+        c.zoomOutOnDataUpdate = false;
         c.dataProvider = this.getDetailedData();
         c.theme = "light";
         c.pathToImages = "images/";