Javascript-форум - веб морда машинки

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - веб морда машинки (https://javascript.ru/forum/misc/28523-veb-morda-mashinki.html)

веб морда машинки

Делаю машинку с управлением через веб интерфейс. Так вот ребята сделали скрипт но в этом скрипте один только ползунок для управления одной сервой. Хочу добавить еще один ползунок чтобы управлять другой сервой. Я выделил жирно ползунок и номер сервы которой управляет ползунок... как переписать код, чтобы управлять двумя сервами с разных ползунков.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ROBOT</title>
<link rel="stylesheet" type="text/css" href="res/main.css"/>
<script type="text/javascript">
var lastTurn = -1;
var lastPress = -1;
var lastPos = -1;

function submitUART(uartString)
{
document.getElementById('serialData').value=uartSt ring+"\n";
document.getElementById('serialForm').submit()
};

function scrollCam(val)
{
document.getElementById("scr").parentNode.scrollLe ft=val;
};
window.setInterval(
function(){
var pos = document.getElementById("scr").parentNode.scrollLe ft;
if(lastPos!=pos){
submitUART("#9 P" +(pos + 700));
lastPos=pos;
};
},100
);

</pre>
<table>

<tr>
<td>
<br/>
Camera control:<br>
<div style="width:320px;height: 20px;margin-top: 15px;overflow-x: scroll;display: inline-block;"onscroll="scrollCam(this.scrollLeft)">
<div id="scr" style="width:1920px;height: 1px;display: block;" ></div>
</div>
</td>
</tr>
<tr>
<td>
</body>
</html>

А подробней можешь рассказать?
в том виде как написана программа не может работать
вместо </pre> должен быть </script>
где второй ползунок рядом или внизу?

Я накосячил код такой:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ROBOT</title>
<link rel="stylesheet" type="text/css" href="res/main.css"/>
<script type="text/javascript">
var lastTurn = -1;
var lastPress = -1;
var lastPos = -1;

function submitUART(uartString)
{
document.getElementById('serialData').value=uartSt ring+"\n";
document.getElementById('serialForm').submit()
};

function scrollCam(val)
{
document.getElementById("scr").parentNode.scrollLe ft=val;
};
window.setInterval(
function(){
var pos = document.getElementById("scr").parentNode.scrollLe ft;
if(lastPos!=pos){
submitUART("#9 P" +(pos + 700));
lastPos=pos;
};
},100
);

</script>
</head>

<tr>
<td>
<br/>
Camera control:<br>
<div style="width:320px;height: 20px;margin-top: 15px;overflow-x: scroll;display: inline-block;"onscroll="scrollCam(this.scrollLeft)">
<div id="scr" style="width:1920px;height: 1px;display: block;" ></div>
</div>
</td>
</tr>
<tr>
<td>
</body>
</html>

второго ползунка нет в скрипте, его хоть куда можно воткнуть, смысл в том , чтобы второй ползунок отправлял данные не на #9 серву (9-ая серва) а дапустим на 2-ю серву т.е (#2)

Есть машинка, управляется она с веб страницы через UART, ког который я привел пиал не я а ребята с форума, я хочу его доработать а именно добавить еже ползунок или несколько ползунков для управления сервоприводами. Я пробывал сам код править но не получается.

Значит Двигая этим ползунком:
<div style="width:320px;height: 20px;margin-top: 15px;overflow-x: scroll;display: inline-block;"onscroll="scrollCam(this.scrollLeft)">
<div id="scr" style="width:1920px;height: 1px;display: block;" ></div>
Я отправляю команды на девятую серву т.е. сюда:
window.setInterval(
function(){
var pos = document.getElementById("scr").parentNode.scrollLe ft;
if(lastPos!=pos){
submitUART("#9 P" +(pos + 700));
lastPos=pos;

Вооот.... я хочу добавить еще одни ползунок: но чтобы управлять не девятой сервой а дапустим второй......??? как??? я не знаю...

Мне сама идея нравится-хотел себе что то подобное сделать
Подробности интересуют как сделана сама связь с серваками-на блютуз или вайфай или еще как
со скриптом помогу-он простой
но нужен еще один файл
там есть ссылка на таблицу стилей
res/main.css
вот это файл если он есть тоже выложи
кроме того там в скрипте есть ссылки на несуществующие элементы
с id 'serialData' и 'serialForm'-это что то связанное непосредственно сервоприводами
где эти элементы?

Пока вот в таком состоянии-можно лобавить любое кол-во ползунков

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ROBOT</title>
<link rel="stylesheet" type="text/css" href="res/main.css"/>
</head>
<table>
<tr>
<td>
Camera control:9<br>
<div style="width:320px;height: 20px;margin-top: 15px;overflow-x: 
scroll;display: inline-block;"  onscroll="scrollCam(this)">
<div id="9" style="width:1920px;height:1px;display: block;" ></div>
</div>
</td></tr><tr><td>
Camera control:2<br>
<div style="width:320px;height: 20px;margin-top: 15px;overflow-x: 
scroll;display: inline-block;" onscroll="scrollCam(this)">
<div id="2"  style="width:1920px;height: 1px;display: block;" ></div>
</div>
</td>
</tr>
</tab>
<div id='vv'></div>
<script type="text/javascript">
var lastTurn = -1;
var lastPress = -1;
var lastPos = {};
lastPos[9]=-1;
var teks=9;//текущий сервопривод
function submitUART(uartString)
{document.getElementById('vv').innerHTML=
uartString;
};
function scrollCam(el)
{ var el1=el.getElementsByTagName('div')[0];
teks=el1.id;
el.parentNode.scrollLeft=
el.scrollLeft;
};
window.setInterval(
function(){
var pos = document.getElementById(teks).parentNode.scrollLeft;
if(lastPos[teks]!=pos){
submitUART("#"+teks+" P" +(pos + 700));
lastPos[teks]=pos;
};
},100
);
</script>
</body>
</html>

http://roboforum.ru/forum69/topic10929.html - обсуждение проекта, там есть все что нужно.
Идея в том, что прошивается роутер прошивкой OR далеее роутер подключается к платам OpenRobotic и к ним уже моторы сервы и датчики... Сам роутер конектится по вафле к домашней точке доступа там ip маршрут прописываеш и зная ip заходиш через инет на роутер робота и рулиш... Как то так)))

serialData' и 'serialForm я не знаю что это такое))) они с сервами не связаны..

Я по простому скажу когда ползунок передвигаеш, значение ползунка получается разное дапустим как пример 1000. Эта тысяча подставляется в этот код submitUART("#9 P" +(pos + 700)); и что получается 1700!?
А дальше формируется пасылка в порт UART (#9 1700) - означает что серва №9 перейдет в это (1700) положение.

Цитата:

Сообщение от berkut (Сообщение 176517)

serialData' и 'serialForm я не знаю что это такое))) они с сервами не связаны..

Именно через них связь осуществляется как то
Код в таком виде неработоспособный потому что не хватает элементов связи с серверами
а функция submitUART пока что ничего не делает хотя должна передавать данные в какую то форму-которой здесь нет-а из этой формы уже на сервоприводы
zip что то не распаковывается

вот веб морда целиком
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OR-WIFI-ROBOT</title>
<link rel="stylesheet" type="text/css" href="res/main.css"/>
<script type="text/javascript">
var lastTurn = -1;
var lastPress = -1;
var lastPos = -1;

function submitUART(uartString)
{
document.getElementById('serialData').value=uartSt ring+"\n";
document.getElementById('serialForm').submit()
};

function scrollCam(val)
{
document.getElementById("scr").parentNode.scrollLe ft=val;
};

function keyPressed(e)
{
var keynum
var keychar
var numcheck

if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum);
if(keychar == "w" || keychar == "ц" || keychar == "W" || keychar == "Ц") submitUART("DrvLR=100,100");
if(keychar == "a" || keychar == "ф" || keychar == "A" || keychar == "Ф") submitUART("DrvLR=-100,100");
if(keychar == "s" || keychar == "ы" || keychar == "S" || keychar == "Ы") submitUART("DrvLR=-100,-100");
if(keychar == "d" || keychar == "в" || keychar == "D" || keychar == "В") submitUART("DrvLR=100,-100");
return true;
};

function keyUp(e)
{
var keynum
var keychar
var numcheck

if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum);
if(keychar == "w" || keychar == "ц" || keychar == "W" || keychar == "Ц") submitUART("DrvLR=0,0");
if(keychar == "a" || keychar == "ф" || keychar == "A" || keychar == "Ф") submitUART("DrvLR=0,0");
if(keychar == "s" || keychar == "ы" || keychar == "S" || keychar == "Ы") submitUART("DrvLR=0,0");
if(keychar == "d" || keychar == "в" || keychar == "D" || keychar == "В") submitUART("DrvLR=0,0");
return true;
};

window.setInterval(
function(){
var pos = document.getElementById("scr").parentNode.scrollLe ft;
if(lastPos!=pos){
submitUART("#9 P" +(pos + 700));
lastPos=pos;
};
},100
);

</script>
</head>
<body onKeyPress="return keyPressed(event)" onKeyUp="keyUp(event)">
<pre class="banner">
************************************************** ******************************************
* ____ ____ __ __ _ *
* / __ \____ ___ ____ / __ \____ / /_ ____ / /_(_)__________ _______ __ *
* / / / / __ \/ _ \/ __ \______/ /_/ / __ \/ __ \/ __ \/ __/ // ___/ ___/ / ___/ / / / *
* / /_/ / /_/ / __/ / / /_____/ _, _/ /_/ / /_/ / /_/ / /_/ // /__(__ )_ / / / /_/ / *
* \____/ .___/\___/_/ /_/ /_/ |_|\____/_.___/\____/\__/_/ \___/____/(_)_/ \__,_/ *
* /_/ *
* *
************************************************** ******************************************
</pre>
<table>

<tr>
<td>
<script type="text/javascript">
document.write("<img alt='Robot Eye' class='bot-eye' src='http://" + document.location.host + ":8080/?action=stream'/>")
</script>
<br/>
Camera control:<br>
<button type="button" onclick="scrollCam(0)">Left</button>
<button type="button" onclick="scrollCam(800)">Center</button>
<button type="button" onclick="scrollCam(1600)">Right</button>
<br/>
<div style="width:320px;height: 20px;margin-top: 15px;overflow-x: scroll;display: inline-block;"
onscroll="scrollCam(this.scrollLeft)">
<div id="scr" style="width:1920px;height: 1px;display: block;" ></div>
</div>
</td>
</tr>
<tr>
<td>
<hr style="width: 240px;margin-top: 15px">
Chassis control:<br>
<button type="button" onclick="submitUART('DrvLR=100,100')">Forward</button><br>
<button type="button" onclick="submitUART('DrvLR=-100,100')">Left</button>
<button type="button" onclick="submitUART('DrvLR=0,0')">STOP</button>
<button type="button" onclick="submitUART('DrvLR=100,-100')">Right</button><br>
<button type="button" onclick="submitUART('DrvLR=-100,-100')">Backward</button>
</td>
</tr>
<tr>
<td>
<hr style="width: 240px;margin-top: 15px">
<form id="serialForm" action="/cgi-bin/serial.cgi" method="POST" target="hidden">
<label>Serial data:<br/>
<textarea id="serialData" name="SERIAL_DATA" rows="2" cols="40">TEST SERIAL</textarea>
</label><br/>
<input type="submit" value="Send">
</form>
</td>
</tr>
</table>
<hr/>
<iframe name="hidden" src="/nothing.html" style="width: 1px;height: 1px;visibility: hidden"></iframe>
<a href="admin/index.html">Robot administration</a>
</body>
</html>

вот что в файле main:
.bot-eye {
background-color: yellow;
width: 320px;
height: 240px;
border: black dashed 10px;
margin-bottom: 15px
}

.banner {
background-color: #A0a0a0;
text-align: center;
}

td {
text-align: center;
}
table{width: 100%}

.admin-title {
font-size: 150%;
font-weight: bold;
background-color: #600000;
color: #d0d0d0
}

.form-title {
text-align: right;
width: 40%
}

.form-value {
text-align: left;
}

.controlRow TD {
border-bottom: 1px solid #a9a9a9
}