読者です 読者をやめる 読者になる 読者になる

node.js で RasPi につないだRCサーボを動かす

漸く動いた!

f:id:kzono:20141111233141p:plain

スライドバーを動かし、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>