Usability improvments

.gitignore

@@ -1,4 +1,5 @@
 _site
 node_modules
 .DS_Store
-.idea
+.idea
+results.json

README.md

@@ -48,6 +48,10 @@ A gesture training application is available online at [http://uwdata.github.io/g
 
 The application is intended to work with both mouse and touch input. The code for the training application is included in this repository under the `trainer` folder. Simply open the `index.html` file in a browser to run locally.
 
+You can use provided `express.js` node script to spawn a webserver that starts the trainer and give you access to a POST method which records the results into a `results.json` file at root of this repo.
+This is useful if you intend to produce tablet / mobile gesture.
+If you append a `GET` parameter `bg` to the url, targeting an image, it will display it under the `designer` zone to give you some help.
+
 ## Build Process
 
 We use the [gulp](http://gulpjs.com/) build system along with [browserify](http://browserify.org/) to build gestrec.min.js.

express.js

@@ -0,0 +1,27 @@
+var express = require('express')
+var bodyParser = require('body-parser')
+var morgan = require('morgan')
+
+console.log('---------------')
+console.log('\tGestRec Trainer')
+console.log('')
+console.log('\tYou can browse : http://127.0.0.1:8080/')
+console.log('---------------')
+console.log('')
+
+var app = express()
+app.use(morgan())
+
+var urlencodedParser = bodyParser.urlencoded({ extended: false, limit: '50mb' })
+app.get('/gestrec.min.js', urlencodedParser, function (req, res) {
+  require('fs').createReadStream('gestrec.min.js').pipe(res)
+})
+
+app.post('/data', urlencodedParser, function (req, res) {
+  require('fs').writeFileSync('results.json', JSON.stringify(JSON.parse(req.body.train), null, 2))
+  res.send(200)
+})
+
+app.use(express.static('trainer'));
+
+app.listen(8080);

package.json

@@ -26,7 +26,10 @@
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^1.2.0",
     "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.1.0"
+    "vinyl-source-stream": "^1.1.0",
+    "body-parser": "^1.13.2",
+    "express": "^4.13.1",
+    "morgan": "^1.6.1"
   },
   "main": "src/index.js"
 }

trainer/index.html

@@ -4,6 +4,7 @@
     <title>Gesture Designer</title>
     <link rel="stylesheet" type="text/css" href="library.css">
     <script src="d3.v3.min.js" charset="utf-8"></script>
+    <script src="jquery-2.1.3.min.js" charset="utf-8"></script>
     <script src="../gestrec.min.js" charset="utf-8"></script>
     <script src="library.js" charset="utf-8"></script>
     <style>
@@ -36,6 +37,10 @@
   border: 1px solid #dedede;
   transition: all 1s;
 }
+#message {
+  position: absolute;
+  top: 450px;
+}
 #panel {
   margin-left: 430px;
   padding-bottom: 20px;
@@ -81,6 +86,7 @@
         <div class="header">
           Gesture Loader
           <div class="controls">
+            <button id="post">Post</button>
             <button id="download">Download</button>
             <button id="import">Import</button>
           </div>
@@ -112,7 +118,6 @@
     d3.select("#export").style("display", "none");
   }
   d3.select("#canvas")
-    .style("background", mode===TRAIN ? "#faf5f5" : "#f5f5f5")
     .style("border", mode===TRAIN ? "1px solid #a33" : null);
   clearCanvas();
 }
@@ -141,6 +146,11 @@
   }
 });
 
+d3.select("#post").on("click", function() {
+    var json = d3.select("#json").property("value");
+    $.post('/data', {train: json})
+});
+
 function download(filename, text) {
   var a = document.createElement("a");
   a.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
@@ -150,6 +160,44 @@
 
 // ---
 
+var bg = false
+if (location.search.match(/bg=/))
+    bg = location.search.match(/bg=([^&]+)/)[1]
+
+if (bg) {
+    $('canvas')
+            .css('background-color', 'transparent')
+            .css('position', 'absolute')
+            .css('z-index', '1');
+    $('<img>').attr('src', bg)
+            .css('position', 'absolute')
+            .css('top', '35px')
+            .css('left', '50px')
+            .css('z-index', '0')
+            .appendTo('#designer')
+            .one('load', function () {
+                var h = $(this).height()
+                var w = $(this).width()
+
+                var rW = 400 / w * 100;
+                var rH = 400 / h * 100;
+
+                if (rW<rH) {
+                    $(this).css('height', h * rW /100 )
+                    $(this).css('width', w* rW /100 )
+                } else {
+                    $(this).css('height', h* rH /100)
+                    $(this).css('width', w* rH /100)
+                }
+            })
+}
+/*
+
+ top: 35px;
+ left: 61px;
+ */
+// ---
+
 var canvas = d3.select("#canvas").node();
 var width = canvas.width;
 var height = canvas.height;