Last active
August 29, 2015 14:14
-
-
Save Pelirrojo/cd2f273064fe798edab9 to your computer and use it in GitHub Desktop.
Playing with the WebSocket API of Myo™ Gesture Control Armband from ThalmicLabs™
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="es"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Myo™ Gesture Control Armband from ThalmicLabs™ | WebSockets Demo</title> | |
<!-- Bootstrap --> | |
<link rel="stylesheet" href="http://getbootstrap.com/examples/sticky-footer/sticky-footer.css"> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> | |
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
<!--[if lt IE 9]> | |
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="page-header"> | |
<h1 id="title">Myo™ Gesture Control Armband from ThalmicLabs™</h1> | |
<h2>WebSockets Demo</h2> | |
</div> | |
<div class="row"> | |
<div class="col-md-8 col-md-offset-2"> | |
<div class="form-group"> | |
<label for="ws_log">Event Log</label> | |
<textarea class="form-control" id="ws_log" placeholder="Magic happens here!" rows="20"></textarea> | |
</div> | |
<button type="button" onclick="javascript:WebSocketTest()" class="btn btn-primary">Connect to Myo™</button> | |
</div> | |
</div> | |
</div> | |
<footer class="footer"> | |
<div class="container"> | |
<p class="text-muted"> | |
<a href="https://gist.github.com/Pelirrojo/cd2f273064fe798edab9#file-index-html"> | |
https://gist.github.com/Pelirrojo/cd2f273064fe798edab9#file-index-html | |
</a> | |
</p> | |
</div> | |
</footer> | |
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
<!-- Include all compiled plugins (below), or include individual files as needed --> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> | |
<script> | |
// https://developer.thalmic.com/forums/topic/534/ | |
function WebSocketTest() { | |
if ("WebSocket" in window) { | |
// Let us open a web socket (3 = API ver) | |
var ws = new WebSocket("ws://localhost:10138/myo/3"); | |
// Web Socket is connected, send data using send() | |
ws.onopen = function() { | |
ws.send("Message to send"); | |
$('#ws_log').append('> {...}'); | |
}; | |
// Message from Myo | |
ws.onmessage = function (evt) { | |
var received_msg = evt.data; | |
$('#ws_log').append('< '+evt.data); | |
}; | |
// websocket is closed. | |
ws.onclose = function() { | |
$('#ws_log').append('☠'); | |
}; | |
} else { | |
// The browser doesn't support WebSocket | |
alert("WebSocket NOT supported by your Browser!"); | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is the first demo, be careful with performance!