return json from matrix, be pretty n'ajaxy
authorDylan Lloyd <dylan@dylansserver.com>
Sun, 14 Jul 2013 02:13:26 +0000 (22:13 -0400)
committerDylan Lloyd <dylan@dylansserver.com>
Sun, 14 Jul 2013 02:13:26 +0000 (22:13 -0400)
index.php
js/jquery.js [moved from jquery.js with 100% similarity]
js/matrix.js [new file with mode: 0644]
matrix.py
style.css
validate.js [deleted file]

index 199bd3e..d8f84ba 100644 (file)
--- a/index.php
+++ b/index.php
@@ -1,38 +1,32 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <meta charset="utf-8">
+  <meta charset='utf-8'>
   <title>matrixnullspace</title>
-  <link rel="stylesheet" href="/style.css">
-  <script type='text/javascript' src='/jquery.js'></script>
-  <script type='text/javascript' src='/validate.js'></script>
+  <link rel='stylesheet' href='/style.css'>
+  <script type='text/javascript' src='/js/jquery.js'></script>
+  <script type='text/javascript' src='/js/matrix.js'></script>
 </head>
 <body>
+  <div id='container'>
 
-<pre>
-usage: matrix.py
+  <h1>matrix.py</h1>
+  Find the kernel, determinant and eigenvalues of a given matrix.
 
-Find the kernel, determinant and eigenvalues of the given matrix.
-
-example:
-
-2 3 5
+  <form>
+      <textarea id="matrix">2 3 5
 -4 2 3
-0 0 0
-</pre>
+0 0 0</textarea></br>
+      <a id='submit' href='#'>./calculate</a>
+  </form>
 
-<br>
+  <ul id='results'></ul>
 
-<form id="calulator" action="calculate" method="post" > 
-  <textarea id="matrix" name="matrix" rows="15" cols="40"></textarea>
-  <br><br>
-  <input type="submit" value="./calculate" id="submit" />
-</form> 
+  <div id='clear'></div>
 
+  <div id="footer">
+      <h2><a href="http://dylansserver.com">dylansserver.com</a>
+  </div>
+</div>
 </body>
-
-<br>
-<h2>written by dylan@<a href="http://dylansserver.com">dylansserver.com</a>
-</h2>
-
 </html>
similarity index 100%
rename from jquery.js
rename to js/jquery.js
diff --git a/js/matrix.js b/js/matrix.js
new file mode 100644 (file)
index 0000000..83e8e27
--- /dev/null
@@ -0,0 +1,43 @@
+$(document).ready(function(){
+  $('#submit').click(function(event){
+    if ($('#matrix').val() == ''
+        || $('#matrix').val().match(/[^.\-\d\s]/) != null) {
+        event.preventDefault();
+        $('#results').fadeOut('slow', function() {
+            $('#results').html(
+                $('<span>').attr('id', 'fail').text(
+                    $('#matrix').val() == '' ?
+                        'Enter a matrix!' : 'Invalid character in matrix.'
+                    ));
+            $('#results').fadeIn();
+        });
+        return;
+    }
+    $.post('/calculate', { 'matrix' : $('#matrix').val() })
+        .done(function(data) {
+            $('#results').fadeOut('slow', function() {
+                $('#results').html('').append(
+                    $('<li>').text('eigenvalues').append(
+                        $('<pre>').text(data.eigenvalues)),
+                    $('<li>').text('determinant').append(
+                        $('<pre>').text(data.determinant)),
+                    $('<li>').text('nullspace').append(
+                        $('<pre>').text(data.nullspace))
+                );
+                $('#results').fadeIn();
+            });
+        })
+        .fail(function(data) {
+            $('#results').fadeOut('slow', function() {
+                $('#results').html(
+                    $('<span>').attr('id', 'fail')
+                        .text('Uh-oh, something\'s gone wrong!'));
+                $('#results').fadeIn();
+            });
+        });
+  });
+  $('textarea').focus(function(e) {
+      $(e.target).text('');
+      $(e.target).css({ 'color' : 'black', 'font-style' : 'none' });
+  });
+});
index ea6cd9c..5ae2eba 100755 (executable)
--- a/matrix.py
+++ b/matrix.py
@@ -1,4 +1,5 @@
 import urlparse
+import json
 
 import scipy
 import scipy.linalg
@@ -18,10 +19,6 @@ def application(environ, start_response):
     if environ['REQUEST_METHOD'] == 'POST':
         post_data = environ['wsgi.input'].read()
 
-       output = "<pre>"
-       #output += post_data
-       output += "<br>"
-
        post_data = urlparse.parse_qsl(post_data, True, True)
 
         data_string = str(post_data[0][1])
@@ -42,25 +39,13 @@ def application(environ, start_response):
 #            output += str(l)
         determinant = scipy.linalg.det(given_matrix)
 
-       output += "<h1>"
-       output += "nullspace:<br>"
-       output += str(null_space)
-       output += "<br><br>"
-       output += "eigenvalues:<br>"
-       output += str(eigenvalues(given_matrix))
-       output += "<br><br>"
-       output += "determinant:<br>"
-       output += str(determinant)
-#      output += "<br><br>"
-#      output += "eigenvalues:<br>"
-#      output += str(l1)
-#      output += "<br><br>"
-#      output += "eigenvectors:<br>"
-#      output +=  str(v[:,0][0])
-       output += "</h1>"
+    output = json.dumps({
+        'nullspace' : str(null_space),
+        'eigenvalues' : str(eigenvalues(given_matrix)),
+        'determinant' : str(determinant)
+        })
 
-    # send results
     output_len = sum(len(line) for line in output)
-    start_response('200 OK', [('Content-type', 'text/html'),
+    start_response('200 OK', [('Content-type', 'application/json'),
                               ('Content-Length', str(output_len))])
     return output
index 6bb5bd9..c9eb003 100644 (file)
--- a/style.css
+++ b/style.css
 body {
     background-image: url('/images/gray_jean.png');
     font-family: 'InconsolataMedium';
+    margin: 20px 20px 30px 20px;
+}
+
+#container {
+    margin: auto;
+    width: 960px;
+}
+
+form {
+    float: left;
+}
+
+textarea {
+    width: 300px;
+    height: 200px;
+    margin-bottom: 30px;
+    color: grey;
+    font-style: italic;
+}
+
+#results {
+    float: left;
+    margin: 0px 0px 0px 20px;
+}
+
+#results li {
+    font-weight: bold;
+}
+
+#results li :not(child) {
+    font-weight: normal;
+}
+
+#fail {
+    color: red;
+}
+
+#clear {
+    clear: both;
+}
+
+#footer {
+    width: 100%;
 }
diff --git a/validate.js b/validate.js
deleted file mode 100644 (file)
index 6f8dd5f..0000000
+++ /dev/null
@@ -1,8 +0,0 @@
-$(document).ready(function(){
-  $('#submit').click(function(event){
-    if ( $('#matrix').val() == ''
-       ){
-         event.preventDefault();
-    }
-  });
-});