|
|
@ -18,17 +18,19 @@ |
|
|
|
<script type="text/javascript"> |
|
|
|
<script type="text/javascript"> |
|
|
|
var sock = null; |
|
|
|
var sock = null; |
|
|
|
var ellog = null; |
|
|
|
var ellog = null; |
|
|
|
|
|
|
|
var video_sock = "http://" + window.location.hostname + ":8081/"; |
|
|
|
|
|
|
|
var servo_sock = "ws://" + window.location.hostname + ":45684/ws?a=23&foo=bar"; |
|
|
|
|
|
|
|
|
|
|
|
window.onload = function() { |
|
|
|
window.onload = function () { |
|
|
|
|
|
|
|
|
|
|
|
ellog = document.getElementById('log'); |
|
|
|
ellog = document.getElementById('log'); |
|
|
|
|
|
|
|
|
|
|
|
var wsuri; |
|
|
|
var wsuri = servo_sock; |
|
|
|
if (window.location.protocol === "file:") { |
|
|
|
//if (window.location.protocol === "file:") { |
|
|
|
wsuri = "ws://10.174.136.143:45684/ws?a=23&foo=bar"; |
|
|
|
// wsuri = "ws://10.174.136.143:45684/ws?a=23&foo=bar"; |
|
|
|
} else { |
|
|
|
//} else { |
|
|
|
wsuri = "ws://" + window.location.hostname + ":45684/ws?a=23&foo=bar"; |
|
|
|
// wsuri = "ws://" + window.location.hostname + ":45684/ws?a=23&foo=bar"; |
|
|
|
} |
|
|
|
//} |
|
|
|
|
|
|
|
|
|
|
|
if ("WebSocket" in window) { |
|
|
|
if ("WebSocket" in window) { |
|
|
|
sock = new WebSocket(wsuri); |
|
|
|
sock = new WebSocket(wsuri); |
|
|
@ -39,16 +41,16 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (sock) { |
|
|
|
if (sock) { |
|
|
|
sock.onopen = function() { |
|
|
|
sock.onopen = function () { |
|
|
|
console.log("Connected to " + wsuri); |
|
|
|
console.log("Connected to " + wsuri); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
sock.onclose = function(e) { |
|
|
|
sock.onclose = function (e) { |
|
|
|
console.log("Connection closed (wasClean = " + e.wasClean + ", code = " + e.code + ", reason = '" + e.reason + "')"); |
|
|
|
console.log("Connection closed (wasClean = " + e.wasClean + ", code = " + e.code + ", reason = '" + e.reason + "')"); |
|
|
|
sock = null; |
|
|
|
sock = null; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
sock.onmessage = function(e) { |
|
|
|
sock.onmessage = function (e) { |
|
|
|
console.log("Got echo: " + e.data); |
|
|
|
console.log("Got echo: " + e.data); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -56,7 +58,31 @@ |
|
|
|
|
|
|
|
|
|
|
|
function send() { |
|
|
|
function send() { |
|
|
|
if (sock) { |
|
|
|
if (sock) { |
|
|
|
sock.send(document.getElementById("x-pos").value + "/" + document.getElementById("y-pos").value); |
|
|
|
var msg = document.getElementById("x-pos").value + "/" + document.getElementById("y-pos").value; |
|
|
|
|
|
|
|
sock.send(msg); |
|
|
|
|
|
|
|
console.log("Sent " + msg); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
console.log("Not connected."); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function send_button(ch) { |
|
|
|
|
|
|
|
if (sock) { |
|
|
|
|
|
|
|
switch (ch) { |
|
|
|
|
|
|
|
case 'F': |
|
|
|
|
|
|
|
var msg = 'F'; |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
case 'D': |
|
|
|
|
|
|
|
var msg = 'D'; |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
case 'R': |
|
|
|
|
|
|
|
var msg = 'R'; |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
case 'L': |
|
|
|
|
|
|
|
var msg = 'L'; |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
sock.send(msg); |
|
|
|
console.log("Sent " + msg); |
|
|
|
console.log("Sent " + msg); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
console.log("Not connected."); |
|
|
|
console.log("Not connected."); |
|
|
@ -70,7 +96,8 @@ |
|
|
|
<div class="container-fluid"> |
|
|
|
<div class="container-fluid"> |
|
|
|
<!-- Brand and toggle get grouped for better mobile display --> |
|
|
|
<!-- Brand and toggle get grouped for better mobile display --> |
|
|
|
<div class="navbar-header"> |
|
|
|
<div class="navbar-header"> |
|
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> |
|
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" |
|
|
|
|
|
|
|
data-target="#bs-example-navbar-collapse-1"> |
|
|
|
<span class="sr-only">Toggle navigation</span> |
|
|
|
<span class="sr-only">Toggle navigation</span> |
|
|
|
<span class="icon-bar"></span> |
|
|
|
<span class="icon-bar"></span> |
|
|
|
<span class="icon-bar"></span> |
|
|
|
<span class="icon-bar"></span> |
|
|
@ -103,20 +130,51 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="text-center"> |
|
|
|
<div class="text-center"> |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
<img style="-webkit-user-select: none;" src="http://10.174.136.143:8081/"> |
|
|
|
<img style="-webkit-user-select: none;" src="http://10.253.35.143:8081/"> |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
|
|
|
|
<table width="100%"> |
|
|
|
|
|
|
|
<tr> |
|
|
|
|
|
|
|
<th width="20%"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p align="center"><input type="button" style="width:120px;height:35px" id="forword-butt" value=⇑ accesskey="w" |
|
|
|
|
|
|
|
onclick="send_button('F')"> |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
<p align="center"><input type="button" style="width:80px;height:35px" id="left-butt" value=⇐ accesskey="a" |
|
|
|
|
|
|
|
onclick="send_button('L')"> |
|
|
|
|
|
|
|
<input type="button" style="width:80px;height:35px" id="right-butt" value=⇒ accesskey="d" |
|
|
|
|
|
|
|
onclick="send_button('R')"> |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
<p align="center"><input type="button" style="width:120px;height:35px;" id="down-butt" value=⇓ accesskey="s" |
|
|
|
|
|
|
|
onclick="send_button('D')"> |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</th> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<th width="80%"> |
|
|
|
|
|
|
|
|
|
|
|
<form class="range-field"> |
|
|
|
<form class="range-field"> |
|
|
|
<p>Вертикаль:<input type="range" min="50" max="250" id="y-pos" oninput="send();" value="140" /></p> |
|
|
|
<p>Вертикаль:<input type="range" min="50" max="250" id="y-pos" oninput="send();" |
|
|
|
<p>Горизонталь:<input type="range" min="50" max="250" id="x-pos" oninput="send();" value="140" /></p> |
|
|
|
value="140" /> |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
<p>Горизонталь:<input type="range" min="50" max="250" id="x-pos" |
|
|
|
|
|
|
|
oninput="send();" value="140" /></p> |
|
|
|
</form> |
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</th> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</tr> |
|
|
|
|
|
|
|
</table> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<footer class="pull-left footer"> |
|
|
|
<footer class="pull-left footer"> |
|
|
|
<p class="col-md-12"> |
|
|
|
<p class="col-md-12"> |
|
|
|
<hr class="divider">Проект создан в образовательных целях, при поддержке <a href="https://t.me/baumanrobotics">Bauman |
|
|
|
<hr class="divider">Проект создан в образовательных целях, при поддержке <a |
|
|
|
|
|
|
|
href="https://t.me/baumanrobotics">Bauman |
|
|
|
Robotics</a>.</a> |
|
|
|
Robotics</a>.</a> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</footer> |
|
|
|
</footer> |
|
|
|