Pelirrojo/wss-myo-sample.html

## wss-myo-sample.html
<!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>
	<!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>