<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@3.4.0/obniz.js" crossorigin="anonymous"></script>
<style media="screen">
table {
max-width: 600px;
}
th {
width: 20vw;
padding: 3vh 3vw;
text-align: center;
}
td {
width: 75vw;
padding: 3vh 3vw;
}
[type="range"] {
width: 100%;
}
</style>
</head>
<body>
<div id="obniz-debug"></div>
<main>
<table>
<tr>
<th>旋回 = <span id="servo1Val"></span></th>
<td><input type="range" id="servo1" value="90" max="180" min="0"></td>
</tr>
<tr>
<th>上下 = <span id="servo2Val"></span></th>
<td><input type="range" id="servo2" value="90" max="180" min="0"></td>
</tr>
<tr>
<th>掴み = <span id="servo3Val"></span></th>
<td><input type="range" id="servo3" value="0" max="180" min="0"></td>
</tr>
</table>
</main>
<script>
var obniz = new Obniz("obniz_ID");
obniz.onconnect = async function () {
var servo1 = obniz.wired("ServoMotor", {gnd:0,vcc:1,signal:2}),
servo2 = obniz.wired("ServoMotor", {gnd:3,vcc:4,signal:5}),
servo3 = obniz.wired("ServoMotor", {gnd:6,vcc:7,signal:8});
$("#servo1").change(function() {
servo1.angle($(this).val());
$("#servo1Val").text($(this).val());
});
$("#servo2").change(function() {
servo2.angle($(this).val());
$("#servo2Val").text($(this).val());
});
$("#servo3").change(function() {
servo3.angle($(this).val());
$("#servo3Val").text($(this).val());
});
}
</script>
</body>
</html>