Skip to content

Instantly share code, notes, and snippets.

@jaxbot

jaxbot/glass.html

Created April 20, 2014 15:55
Show Gist options
  • Save jaxbot/11117504 to your computer and use it in GitHub Desktop.
Save jaxbot/11117504 to your computer and use it in GitHub Desktop.
Download ZIP
[wearscript] playing with accel and gyro
Raw
glass.html
<html ng-app='glassApp'>
<head>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular.js'></script>
<script>
glassApp = angular.module('glassApp', []);
glassApp.controller('glassController', function($scope) {
function server() {
WS.log('Welcome to WearScript');
WS.sound('SUCCESS')
// Stream several sensors (can view in the Sensors tab)
WS.sensorOn('accelerometer', .15, function(data) {
$scope.$apply(function() {
$scope.accelerometer = data;
});
});
WS.sensorOn('gyroscope', .15, function(data) {
$scope.$apply(function() {
$scope.gyroscope = data;
});
});
}
WS.serverConnect('{{WSUrl}}', server);
});
</script>
<style>
body {
color: #fff;
font-size: 30px;
text-align: center;
-webkit-perspective: 1000px;
}
.square {
display: block;
width: 200px;
height: 200px;
background: #fff;
margin: 50px;
}
</style>
</head>
<body ng-controller='glassController'>
<div class='world' style='-webkit-transform: translateX({{ gyroscope.values[1] * 100}}px);'>
<div class='square' style='-webkit-transform: rotate({{ accelerometer.values[0] * 10 }}deg);'></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment