Skip to content

Instantly share code, notes, and snippets.

@cshepp

cshepp/gyro.html

Last active December 15, 2015 02:19
Show Gist options
  • Save cshepp/5186848 to your computer and use it in GitHub Desktop.
Save cshepp/5186848 to your computer and use it in GitHub Desktop.
Download ZIP
Excuse the ugly code - this was just a proof-of-concept. Because my "server" wasn't always at the same IP address, I made my phonegap app load a generic index.html file (from the /assets/www directory within the app) that would allow me to specify a page to load - in this case, I would load my.server.ip.address:port/gyro.html. Gyro.html takes ca…
Raw
gyro.html
<!doctype html>
<head>
<title>controller</title>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />-->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>-->
<script src="socket.io/socket.io.js"></script>
<script src="cordova-2.0.0.js"></script>
<script>
var transmit = false;
var socket = new io.connect();
var ID;
socket.on('connect', function(){
socket.emit('init', 1);
socket.on('ID', function(data){
ID = data;
});
socket.on('message', function(message){
//
});
socket.on('disconnect', function(){
//
});
});
function send(x, y, z){
var arr = [ID, x, y, z];
socket.emit('input', arr);
}
function touchStart(){
transmit = true;
$('body').css('background-color', 'green');
}
function touchEnd(){
transmit = false;
$('body').css('background-color', 'blue');
}
// The watch id references the current `watchAcceleration`
var watchID = null;
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
startWatch();
}
// Start watching the acceleration
//
function startWatch() {
// Update acceleration every 3 seconds
var options = { frequency: 1 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
// Stop watching the acceleration
//
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {
if(transmit){
send(acceleration.x, acceleration.y, acceleration.z);
}
}
// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}
</script>
<style>
.btn{
height:200px;
width:200px;
border-radius:200px;
float:left;
margin-top:140px;
text-align:center;
color:#FFF;
font-size:72px;
}
body{
width:100%;
height:800px;
background-color:blue;
}
</style>
</head>
<body ontouchstart="javascript: touchStart();" ontouchend="javascript: touchEnd();">
</body>
</html>
Raw
index.html
<!--This index.html displays the squares and such (not to be confused with the index.html in the phonegap app)-->
<!doctype html>
<head>
<title>Index</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="socket.io/socket.io.js"></script>
<script>
var socket = new io.connect();
socket.on('connect', function(){
socket.emit('init', 0);
socket.on('message', function(message){
//
});
socket.on('disconnect', function(){
//
});
socket.on('newController', function(socketID){
//create new controlled object
console.log('newController : ' + socketID)
var el = document.createElement('div');
el.className = "controlled";
el.id = "controlled" + socketID;
el.innerHTML = socketID;
document.getElementById('field').appendChild(el);
});
socket.on('update', function(message){
var ele = document.getElementById('controlled' + message[0]);
var el = "#controlled" + message[0];
//ele.innerHTML = "X: " + message[1] + "<br />Y: " + message[2] + "<br />Z: " + message[3];
if(message[1] > 0){
var currentValue = parseInt($(el).css('left'));
var newValue = currentValue - (1 * message[1]);
$(el).css('left', newValue + "px");
}
else{
var currentValue = parseInt($(el).css('left'));
var newValue = currentValue - (1 * message[1]);
$(el).css('left', newValue + "px");
}
if(message[2] > 0){
var currentValue = parseInt($(el).css('top'));
var newValue = currentValue - (1 * message[2]);
$(el).css('top', newValue + "px");
}
else{
var currentValue = parseInt($(el).css('top'));
var newValue = currentValue - (1 * message[2]);
$(el).css('top', newValue + "px");
}
var display = document.getElementById('display');
display.innerHTML = "X: " + message[1] + "<br />Y: " + message[2] + "<br />Z: " + message[3];
});
socket.on('destroy', function(socketIndex){
var removeMe = document.getElementById("controlled" + socketIndex);
console.log(removeMe);
document.getElementById('field').removeChild(removeMe);
});
});
</script>
<style>
#field{
width:500px;
height:500px;
}
.controlled{
width:200px;
height:200px;
position:absolute;
top:0px;
left:0px;
background-color:blue;
color:#fff;
}
</style>
</head>
<body>
Index<br />
Message: <div id='display'></div>
<div id='field'></div>
</body>
</html>
Raw
index2.html
<!--This index.html file is located in the /assets/www directory within the phonegap app-->
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
function goto(){
var address = document.getElementById("address").value;
if(confirm(address)){
navigator.app.loadUrl(address);
}
}
</script>
</head>
<body>
<form onsubmit="javascript: goto();">
<input type="text" id="address" name="address" />
<input type="submit" />
</form>
</body>
</html>
Raw
server.js
var http = require('http');
var express = require('express');
var socket = require('socket.io');
var app = express();
var server = http.createServer(app).listen((1234), function(){
console.log("Express server on)");
});
var io = socket.listen(server);
app.get('/index.html', function(req, res){
res.sendfile(__dirname + '/index.html');
});
app.get('/controller.html', function(req, res){
res.sendfile(__dirname + '/controller.html');
});
app.get('/gyro.html', function(req, res){
res.sendfile(__dirname + '/gyro.html');
});
app.get('/cordova-2.0.0.js', function(req, res){
res.sendfile(__dirname + '/cordova-2.0.0.js');
});
var nextId = 0;
var display;
var sockets = [];
io.sockets.on('connection', function(socket){
socket.on('init', function(data){
if(data === 0){
display = socket;
}
else{
sockets[nextId] = socket;
sockets[nextId].emit('ID', nextId);
display.emit('newController', nextId);
nextId++;
}
});
socket.on('input', function(input){
display.emit('update', input);
});
socket.on('disconnect', function(){
var socketIndex = sockets.indexOf(socket);
display.emit('destroy', socketIndex);
console.log("DESTROY: " + socketIndex);
sockets.splice(socketIndex, 1);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment