Skip to content

Instantly share code, notes, and snippets.

@sp-ice
Created August 31, 2014 16:12
Show Gist options
  • Save sp-ice/944396ca6cff0a051dbf to your computer and use it in GitHub Desktop.
Save sp-ice/944396ca6cff0a051dbf to your computer and use it in GitHub Desktop.
JavaScriptでArduinoとシリアル通信
<!DOCTYPE html>
<html lang="en">
<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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Home Remote!!</h1>
<h2>エアコン</h2>
<div class="btn-group">
<button id="btn_off" type="button" class="btn btn-default">OFF</button>
<button id="btn_on" type="button" class="btn btn-default">ON</button>
</div>
<h2>気温</h2>
<div id="temp"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
(function(){
//websocket接続
var ws = new WebSocket('ws://localhost:8784');
ws.onmessage = function(e){
$('#temp').html(e.data + '℃');
};
$('#btn_on').click(function(){
ws.send('y');
});
$('#btn_off').click(function(){
ws.send('n');
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment