<!
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
margin-left:10%;
position: absolute;
text-align: center;
width: 70%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
.button:hover{
background-color: #4CAF50;
color: green;
}
</style>
</head>
<body>
<h1>2 LEG ROBOT</h1>
<div class="slidecontainer">
<a id="val1">S1:71</a><input type="range" min="30" max="86" value="71" step="1"
class="slider" id="myRange1">
<br><br><a id="val2">S2:101</a><input type="range" min="60" max="160" step="1"
value="101" class="slider" id="myRange2"><br>
<br><a id="val3">S3:</a><input type="range" min="50" max="170" value="102"
class="slider" id="myRange3"><br>
<br><a id="val4">a_right:</a><input type="range" min="1" max="15" value="1"
step="0.1" class="slider" id="myRange4"><br>
<br><a id="val5">v_right:</a><input type="range" min="60" max="180" value="40"
class="slider" id="myRange5"><br>
<br><a id="val6">S6:50</a><input type="range" min="35" step="1" max="85" value="50"
class="slider" id="myRange6"><br>
<br><a id="val7">S7:50</a><input type="range" min="40" step="1" max="90" value="50"
class="slider" id="myRange7"><br>
<br><a id="val8">S8:40</a><input type="range" min="0" step="1" max="130" value="40"
class="slider" id="myRange8"><br>
<br><a id="val9">a_left:</a><input type="range" min="1" step="0.1" max="15"
value="1" class="slider" id="myRange9"><br>
<br><a id="val10">v_left:</a><input type="range" min="60" step="1" max="180"
value="45" class="slider" id="myRange10"><br>
<br><a id="val11">buoc:10</a><input type="range" min="0" step="1.1" max="20"
value="10" class="slider" id="myRange11"><br>
<br><a id="val12">Ban_chan:5</a><input type="range" min="-5" step="1.1" max="15"
value="5" class="slider" id="myRange12"><br>
<br><a id="but_run"></a><button onclick="sendFunction()">RUN</button><br>
<button onclick="autoFunction()">AUTO</button>
<button onclick="autoFunction2()">AUTO2</button>
<button onclick="left()">LEFT</button>
<button onclick="right()">RIGHT</button>
</div>
</body>
<script>
const WS_URL = "ws://" + window.location.host + ":82";
const ws = new WebSocket(WS_URL);
var range_ = new Array();
var value_ = new Array();
range_.push(document.getElementById("myRange1"));
range_.push(document.getElementById("myRange2"));
range_.push(document.getElementById("myRange3"));
range_.push(document.getElementById("myRange4"));
range_.push(document.getElementById("myRange5"));
range_.push(document.getElementById("myRange6"));
range_.push(document.getElementById("myRange7"));
range_.push(document.getElementById("myRange8"));
range_.push(document.getElementById("myRange9"));
range_.push(document.getElementById("myRange10"));
range_.push(document.getElementById("myRange11"));
value_.push(document.getElementById("val1"));
value_.push(document.getElementById("val2"));
value_.push(document.getElementById("val3"));
value_.push(document.getElementById("val4"));
value_.push(document.getElementById("val5"));
value_.push(document.getElementById("val6"));
value_.push(document.getElementById("val7"));
value_.push(document.getElementById("val8"));
value_.push(document.getElementById("val9"));
value_.push(document.getElementById("val10"));
value_.push(document.getElementById("val11"));
range_.push(document.getElementById("myRange12"));
value_.push(document.getElementById("val12"));
for(let i = 0 ;i<10;i++)
{
range_[i].oninput = function()
{
if(i==3)
{
value_[i].innerHTML ="a_right:"+this.value;
send("s"+i+this.value);
}
else if(i==4)
{
value_[i].innerHTML ="v_right:"+this.value;
send("s"+i+this.value);
}
else if(i==8)
{
value_[i].innerHTML ="a_left:"+this.value;
send("s"+i+this.value);
}
else if(i==9)
{
value_[i].innerHTML ="v_left"+this.value;
send("s"+i+this.value);
}
else{
value_[i].innerHTML = "S"+(i+1)+":"+this.value;
send("s"+i+this.value);
}
}
}
range_[10].oninput = function()
{
value_[10].innerHTML = "buoc"+":"+this.value;
send("h"+this.value);
}
range_[11].oninput = function()
{
value_[11].innerHTML = "offset_ban_chan"+":"+this.value;
send("k"+this.value);
}
function autoFunction(){
send("td");
console.log(2);
}
function left()
{
send("u1");
}
function right()
{
send("u2");
}
function autoFunction2(){
send("l");
console.log(2);
}
function sendFunction(){
send("r");
console.log(5 + 6);
}
var lastText, lastSend, sendTimeout;
let connection_resolvers = [];
let checkConnection = () => {
return new Promise((resolve, reject) => {
if (ws.readyState === WebSocket.OPEN) {
resolve();
}
else {
connection_resolvers.push({resolve, reject});
}
});
}
ws.addEventListener('open', () => {
connection_resolvers.forEach(r => r.resolve())
});
async function send(data) {
await checkConnection();
ws.send(data);
}
</script>
</html>
