refactoring and allow overview to reset zoom on main plot

leto · May 31, 2009 · 968adca · 968adca
1 parent e749e26
commit 968adca
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 32 deletions.
diff --git a/css/layout.css b/css/layout.css
@@ -6,6 +6,7 @@ body {
 
 #container {
  position:relative;
+ height:600px;
 }
 #hypatia_logo {
  position:relative;

diff --git a/js/hypatia_plot.js b/js/hypatia_plot.js
@@ -1,6 +1,4 @@
 $( function() {
-    $("#container").tabs({ fx: { opacity: 'toggle' } });
-    var currentOptions;
     var calcOptions = {
                     layout          : $.calculator.scientificLayout,
                     PI              : true,
@@ -10,21 +8,20 @@ $( function() {
                     buttonImageOnly : true,
                     buttonImage     : '/hypatia/img/calculator.png'
    };
-  $('input#lower').calculator( calcOptions );
-  $('input#upper').calculator( calcOptions );
 
     var startData = sampleFunction( -2*Math.PI , 2*Math.PI, 300, function (x) { return Math.sin(x*x) }, 'sin(x^2)' );
 
     var options = {
-        crosshair: { mode: "xy", color: "#ff0000" },
+        crosshair: { color: "#ff0000" },
         legend: { show: true },
         lines: { show: true  },
         points: { show: false },
         xaxis: { ticks: 5 },
-        yaxis: { ticks: 5, base:  0 },
-        selection: { mode: "xy" },
+        yaxis: { min: -5, max: 5, ticks: 5, base:  0 },
+        selection: { show:true, mode: "xy" },
         grid: { hoverable: true, clickable: true , color: "#999"}
     };
+    var currentOptions = options;
 
    var overviewOptions = {
         legend: { show: true, container: $("#overviewLegend") },
@@ -33,11 +30,15 @@ $( function() {
         xaxis: { ticks: 4 },
         yaxis: { ticks: 4, base: 0, tickDecimals: 2 },
         grid: { color: "#999" },
-        selection: { mode: "xy" }
+        selection: { show:true, mode: "xy" }
     };
 
     var previousPoint = null;
 
+    $("#container").tabs({ fx: { opacity: 'toggle' } });
+    $('input#lower').calculator( calcOptions );
+    $('input#upper').calculator( calcOptions );
+
     $("#plot1").bind("plothover", function (event, pos, item) {
             $("#x").text(pos.x.toFixed(2));
             $("#y").text(pos.y.toFixed(2));
@@ -62,13 +63,16 @@ $( function() {
             }
         });
 
- $("#plot1").bind("plotclick", function (event, pos, item) {
-        if (item) {
-            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
-            plot.highlight(item.series, item.datapoint);
-        }
+    $("#plot1").bind("plotclick", function (event, pos, item) {
+            if (item) {
+                $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
+                plot.highlight(item.series, item.datapoint);
+            }
     });
 
+    $("#overview").bind("plotselected", function (event, ranges) {
+        plot.setSelection(ranges);
+    });
 
 
 
@@ -86,32 +90,24 @@ $( function() {
         url: url,
         error: ajaxError,
         success: function(json){
-                $("input#y").val( json.values[0] );
-                $("#previousValues").prepend( '<li>' + $("select#function").val()
-                                                     + '(' + $("input#x").val() + ')'
-                                                     + ' = ' + $("input#y").val() + '</li>'
-                );
-                debug('converting data, start='+ json.start + ', end=' + json.end );
-
                 var d = [ ];
                 var step = parseFloat( (json.end - json.start)/json.points );
-                debug('step='+step);
 
                 for ( var i = parseFloat(json.start); i < json.end; i += step ) {
                    d.push( [ i, json.values.shift() ] );
                 }
-                debug('plotting');
 
                 $.plot($("#previous"), startData, overviewOptions);
 
                 startData = [ { label : $("select#function").val() , data : d }  ];
 
                 if ($("#togglePoints:checked").length > 0) {
-                    $.plot($("#plot1"), startData, $.extend(true, {}, options, {
-                            points: { show: true },
-                      }));
+                    currentOptions = $.extend(true, {}, currentOptions, {
+                                points: { show: true },
+                    });
+                    $.plot($("#plot1"), startData, currentOptions);
                 } else {
-                    $.plot($("#plot1"), startData, options);
+                    $.plot($("#plot1"), startData, currentOptions);
 
                 }
                 $.plot($("#overview"),startData, overviewOptions);
@@ -134,7 +130,7 @@ $( function() {
             ranges.yaxis.to = ranges.yaxis.from + 0.00001;
 
         // do the zooming
-        currentOptions = $.extend(true, {}, options, {
+        currentOptions = $.extend(true, {}, currentOptions, {
                           xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
                           yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
                       });
@@ -145,14 +141,18 @@ $( function() {
     });
 
     $("input#resetZoom").click(function() {
-        plot = $.plot($("#plot1"), startData, options );
+        currentOptions = $.extend(true, {}, currentOptions, { 
+            xaxis: { min: $("input#lower").val(), max: $("input#upper").val() }, 
+            yaxis: { min: $("input#lower").val(), max: $("input#upper").val() }
+        });
+        plot = $.plot($("#plot1"), startData, currentOptions);
     });
     $("input#togglePoints").click(function() {
         var toggled = $("#togglePoints:checked").length > 0;
-        $.plot($("#plot1"), startData, 
-                $.extend(true, {}, currentOptions, {
+        currentOptions = $.extend(true, {}, currentOptions, {
                     points: { show: toggled },
-            }));
+        });
+        $.plot($("#plot1"), startData, currentOptions );
 
     });
 

diff --git a/tmpl/index.tmpl b/tmpl/index.tmpl
@@ -25,7 +25,7 @@
     <script type="text/javascript" src="js/hypatia.js"></script>
     <script type="text/javascript" src="js/hypatia_plot.js"></script>
 <body bgcolor="white">
-<table border="0" width="100%">
+<table border="0" width="100%" height="100%">
 <tr>
 
 <td width="250px">
@@ -54,6 +54,8 @@ Overview
     </div>
     <div id="tab-3">
     Hypatia is a JavaScript Computer Algebra System.
+    <p>
+    It use jQuery, jQuery UI, the calculator jQuery plugin and Flot for graphing.
     </div>
 
         </div>