[Simple Viewer] Add tilt degree change function.

tmpvar · Apr 23, 2011 · a2dfbf1 · a2dfbf1
1 parent a164008
commit a2dfbf1
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 34 deletions.
diff --git a/example/simpleviewer/public/javascripts/main.js b/example/simpleviewer/public/javascripts/main.js
@@ -5,24 +5,34 @@ require(
 ],
 function(socket) {
   require.ready(function() {
-    var startButton = $('#start'),
-        stopButton = $('#stop'),
-        ledSwitch = $('input[name=led]');
+    var startButton = $('#startButton'),
+        stopButton = $('#stopButton'),
+        ledSwitch = $('input[name=led]'),
+        tiltDegInput = $('#tiltDegInput'),
+        tiltDegButton = $('#tiltDegButton');
 
     socket.connect();
 
-    startButton.click(function() {
+    startButton.click(function(e) {
+	    e.preventDefault();
       socket.sendCommand('start');
     });
 
-    stopButton.click(function() {
-      socket.sendCommand('stop');
+    stopButton.click(function(e) {
+      e.preventDefault();
+	    socket.sendCommand('stop');
     });
 
-    ledSwitch.click(function() {
-      socket.sendCommand('setLed', { color: $(this).val() });
+    ledSwitch.click(function(e) {
+	    socket.sendCommand('setLed', { color: $(this).val() });
     });
 
+	  tiltDegButton.click(function(e) {
+	    e.preventDefault();
+		  var degs
+		  socket.sendCommand('setTiltDegs', { degree: parseFloat(tiltDegInput.val()) });
+	  });
+
     socket.connect();
   });
 });
diff --git a/example/simpleviewer/public/stylesheets/style.css b/example/simpleviewer/public/stylesheets/style.css
@@ -18,11 +18,17 @@ a {
 }
 
 header {
-
+	padding: 0 20px;
+	color: #000;
+	background-color: #eee;
 }
 
 #contents {
-  padding: 20px;
+  padding: 10px 20px;
+}
+
+fieldset {
+	margin: 10px 0;
 }
 
 footer {

diff --git a/example/simpleviewer/server.js b/example/simpleviewer/server.js
@@ -77,12 +77,15 @@ app.get('/', function(req, res) {
 
 var commands = {
   start: function(cmd) {
-    kinect.init();
-    kinect.start();
+	  var ret = kinect.init();
+	  if (ret) {
+		  return kinect.start();
+	  }
+	  return false;
   },
 
   stop: function(cmd) {
-    kinect.stop();
+    return kinect.stop();
   },
 
   setLed: function(cmd) {
@@ -91,7 +94,15 @@ var commands = {
       color = 5; // BLINK GREEN
     }
     kinect.setLed(color);
-  }
+  },
+
+	setTiltDegs: function(cmd) {
+		var deg = parseFloat(cmd.degree);
+		if (isNaN(deg)) {
+			return false;
+		}
+		kinect.setTiltDegs(deg);
+	}
 };
 
 app.listen(port);

diff --git a/example/simpleviewer/views/index.ejs b/example/simpleviewer/views/index.ejs
@@ -1,20 +1,29 @@
-<section id="control">
-  <section>
-    <span id="status"></span>
-  </section>
-  <h2>Start/Stop</h2>
-  <div>
-    <button id="start">Start</button>
-    <button id="stop">Stop</button>
-  </div>
-  <h2>LED Control</h2>
-  <div>
-    <input type="radio" name="led" value="0"/> OFF
-    <input type="radio" name="led" value="1"/> GREEN
-    <input type="radio" name="led" value="2"/> RED
-    <input type="radio" name="led" value="3"/> YELLOW
-    <input type="radio" name="led" value="4"/> BLINK YELLOW
-    <input type="radio" name="led" value="5" checked="checked"/> BLINK GREEN
-    <input type="radio" name="led" value="6"/> BLINK RED YELLOW
-  </div>
-</section>
+<form id="control">
+	<fieldset>
+		<legend>Status</legend>
+		<div>
+			<button id="startButton">Start</button>
+			<button id="stopButton">Stop</button>
+			Status: <span id="status"></span>
+		</div>
+	</fieldset>
+	<fieldset>
+		<legend>LED Control</legend>
+		<div>
+			<input type="radio" name="led" value="0"/> OFF
+			<input type="radio" name="led" value="1"/> GREEN
+			<input type="radio" name="led" value="2"/> RED
+			<input type="radio" name="led" value="3"/> YELLOW
+			<input type="radio" name="led" value="4"/> BLINK YELLOW
+			<input type="radio" name="led" value="5" checked="checked"/> BLINK GREEN
+			<input type="radio" name="led" value="6"/> BLINK RED YELLOW
+		</div>
+	</fieldset>
+	<fieldset>
+		<legend>Tilt Degrees</legend>
+		<div>
+			<input type="text" id="tiltDegInput" maxlength="5" value="0" size="10"/>
+			<button id="tiltDegButton">Change</button>
+		</div>
+	</fieldset>
+</form>