Skip to content

Instantly share code, notes, and snippets.

@unoseistres
Created November 12, 2014 05:03
Show Gist options
  • Save unoseistres/ef4fb8c290811fc286e4 to your computer and use it in GitHub Desktop.
Save unoseistres/ef4fb8c290811fc286e4 to your computer and use it in GitHub Desktop.
mobile.html
<html>
<head>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('http://104.131.93.171');
socket.on('connect', function() {
console.log("Connected biatch");
/* console.log("mobile"); */
});
socket.on('chatmessage', function (data) {
console.log(data);
document.getElementById('messages').innerHTML = "" + data +
+ "" + document.getElementById('messages').innerHTML;
});
socket.on ('backcolor', function(data){
console.log(data);
/* document.body.style.backgroundColor= "#000000"; */
/* document.getElementById('body').innerHTML = "#000000"; */
});
/////////MOBILE ACCEL CODE
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
//check acceleramtor ONLY if it is MOBILE
window.addEventListener('load', function() {
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.ondevicemotion = function(e) {
/* console.log("hi"); */
var x = e.accelerationIncludingGravity.x;
var y = e.accelerationIncludingGravity.y;
var z = e.accelerationIncludingGravity.z;
accX = Math.round(e.accelerationIncludingGravity.x*10) / 10;
accY = Math.round(e.accelerationIncludingGravity.y*10) / 10;
accZ = Math.round(e.accelerationIncludingGravity.z*10) / 10;
movement = 10;
x = -(accX / 10) * movement;
y = -(accY / 10) * movement;
z = -(accY / 10) * movement;
if (x >= 2){
console.log ("greater than two");
var color = (document.body.style.backgroundColor= "#F25858");
socket.emit('backcolor', color);
}else{
console.log ("less than two");
var color = (document.body.style.backgroundColor= "#AF88EC");
socket.emit('backcolor', color);
}
document.getElementById("accel").innerHTML = x + " " + y + " " + z;
}
});
//window.addEventListener('onchange', sendColor);
var sendColor = function(body){
console.log("coloring" + body);
socket.emit('backcolor', body);
/* document.body.style.backgroundColor = "yellow"; */
};
var sendmessage = function(message) {
console.log("chatmessage: " + message);
socket.emit('chatmessage', message);
};
</script>
<style>
#accel2 {
visibility: hidden;
}
body{
background-color: fuchsia;
}
</style>
</head>
<body>
<p id="accel"> "accelerometer of phone"</p>
<p id="accel2"> "accelerometer of phone"</p>
<div id="messages">
No Messages Yet
</div>
<input type="text" id="message" name="message">
<input type="submit" value="submit" onclick="sendmessage(document.getElementById('message').value);">
<input id="body" name="body">
<input type="submit" value="color"
onclick="sendColor(document.body.style.backgroundColor);">
<script> </script>
<!-- //color selector -->
<input type = "color" onchange="selectColor(this.value)">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment