node.js で RasPi につないだRCサーボを動かす
漸く動いた！
スライドバーを動かし、send ボタンを押すと、PAN/TILT用のRCサーボモータが動く。
ただ。本当にやりたかったのは、send ボタンを使わずに、スライドバーを動かしたら
RCサーボが動く、というもの。
>|html|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(function(){
var host = "ws://192.168.123.123:8888/",
ws = new WebSocket(host);
//データの送信
$("#sendBtn").on("click",function(){
message = document.getElementById("range01").value + " " + document.getElementById("range02").value;
ws.send(message);
});
});
</script>
</head>
<body>
<ul>
<label>PAN:</label> <input id="range01" type="range" min="-90" max="90" step="5" onchange="showValue1()"/>
<span id="showRangeArea1">0</span>
</ul>
<ul>
<label>TILT:</label> <input id="range02" type="range" min="-90" max="90" step="5" onchange="showValue2()"/>
<span id="showRangeArea2">0</span>
</ul>
<ul>
<button id="sendBtn">send</button>
</ul>
<script type="text/javascript">
function showValue1 () {
message = document.getElementById("range01").value;
document.getElementById("showRangeArea1").innerHTML = message;
message = document.getElementById("range01").value;
}
function showValue2 () {
message = document.getElementById("range02").value;
document.getElementById("showRangeArea2").innerHTML = message;
}
</script>
</body>
</html>
||<
その後、格闘すること数時間。できた！スライダーを動かすとボタンを押さずにRCサーボが動く！！
もっさりと、タイムラグがあるけど(^^;;;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(function(){
var host = "ws://192.168.123.123:8888/",
ws = new WebSocket(host);
//データの送信
$("#sendBtn").on("click",function(){
message = document.getElementById("range01").value + " " + document.getElementById("range02").value;
ws.send(message);
});
$("#range01").on("input change", function(){
message = "6 " + document.getElementById("range01").value;
ws.send(message);
});
$("#range02").on("input change", function(){
message = "7 " + document.getElementById("range02").value;
ws.send(message);
});
});
</script>
</head>
<body>
<ul>
<label>PAN:</label> <input id="range01" type="range" min="-90" max="90" step="5" onchange="showValue1()"/>
<span id="showRangeArea1">0</span>
</ul>
<ul>
<label>TILT:</label> <input id="range02" type="range" min="-90" max="90" step="5" onchange="showValue2()"/>
<span id="showRangeArea2">0</span>
</ul>
<ul>
<button id="sendBtn">send</button>
</ul>
<script type="text/javascript">
function showValue1 () {
message = document.getElementById("range01").value;
document.getElementById("showRangeArea1").innerHTML = message;
}
function showValue2 () {
message = document.getElementById("range02").value;
document.getElementById("showRangeArea2").innerHTML = message;
}
</script>
</body>
</html>
