web управление на основе javascript
Добрый день уважаемые программисты! Есть пару заготовок с ползунками. Идя заключается в управлении поворотом web камеры на двух сервоприводах которые бы управлялись этими ползунками по вертикали и горизонтали (Сейчас Алгоритм управления таков: На HTML странице располагаются ссылки с названиями ПОВОРОТ ВЛЕВО HTTP://192.168.1.111/?BUTTONLEFT И ПОВОРОТ ВПРАВО HTTP://192.168.1.111/?BUTTONRIGHT
при нажатии на ссылку ПОВОРОТ ВЛЕВО сервопривод поворачивается ВЛЕВО, идентично для ПРАВОЙ сервы. Возможно ли сделать так, чтобы при движении ползунка с шагом 10 web-браузер переходил по ссылке HTTP://192.168.1.111/?BUTTONLEFT, то есть каждый шаг сопровождался переходом=это если ВЛЕВО ползунок от центра потянуть и если потянуть ВПРАВО, то каждый шаг сопровождался бы переходом по ссылке HTTP://192.168.1.111/?BUTTONRIGHT? )
<head>
<body>
<label for=fader>Управление по горизонтали</label><br>
<input type=range min=-100 max=100 value=0 id=fader step=10 list=volsettings1 oninput="outputUpdate1(value)">
<output for=fader id=volume1>0%</output>
<datalist id=volsettings1>
<option>-100</option>
<option>-80</option>
<option>-60</option>
<option>-40</option>
<option>-20</option>
<option>0</option>
<option>20</option>
<option>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
</datalist><br><br>
<script>
function outputUpdate1(vol) {
document.querySelector('#volume1').value = vol+"%";}
</script>
<label for=fader>Управление по вертикали</label><br>
<input type=range min=-100 max=100 value=0 id=fader list=volsettings2 step=10 oninput="outputUpdate2(value)">
<output for=fader id=volume2>0%</output>
<datalist id=volsettings2>
<option>-100</option>
<option>-80</option>
<option>-60</option>
<option>-40</option>
<option>-20</option>
<option>0</option>
<option>20</option>
<option>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
</datalist>
<script>
function outputUpdate2(vol) {
document.querySelector('#volume2').value = vol+"%";}
</script>
</body>
|
var request = new XMLHttpRequest();
request.open('GET', '//192.168.1.111/?BUTTONRIGHT');
request.send(null);
|
Только, во-избежание рассинхрона, лучше остылай значение ползунка, а не просто сам факт, что его дернули.
|
Хм...Если тянуть ползунок от центра ВЛЕВО....отправляется запрос //192.168.1.111/?buttonleft, а если ВПРАВО, то тоже самое...//192.168.1.111/?buttonleft,а хотелось бы чтобы отправлялось //192.168.1.111/?buttoright...Где мне нужно подправить код? Спасибо!
<head>
<body>
<label for=fader>Управление по горизонтали</label><br>
<label for=fader>ВЛЕВО  </label>
<output for=fader id=volume1>0%</output>
<label for=fader>  ВПРАВО</label><br>
<input type=range min=-100 max=100 value=0 id=fader step=10 list=volsettings1 oninput="outputUpdate1(value)">
<datalist id=volsettings1>
<option>-100</option>
<option>-80</option>
<option>-60</option>
<option>-40</option>
<option>-20</option>
<option>0</option>
<option>20</option>
<option>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
</datalist><br><br>
<script>
function outputUpdate1(vol) {
document.querySelector('#volume1').value = vol+"%";
var xhr = new XMLHttpRequest();
xhr.open('GET','//192.168.1.111/?buttonleft');
xhr.send(null);
}
function outputUpdate2(vol) {
document.querySelector('#volume1').value = vol+"%";
var xhr = new XMLHttpRequest();
xhr.open('GET','//192.168.1.111/?buttoright');
xhr.send(null);
}
</script>
</body>
|
А что скажешь на это?
Цитата:
|
Рассинхрона надеюсь не будет. У меня сервер состоит из одной html страницы. То есть в xhr.send(null);заменить на xhr.send(outputUpdate1(value))"?
|
Нее че то я не в ту степь...блин...не получилось :)
|
Цитата:
|
Либо пересылай положение ползунка, и согласуй с ним положение привода, либо сделай просто две кнопки <- и ->
|
Так в том то и дело....КНОПКИ я сделал, даже обработчик клавиатуры к ним сделал....все работает....а вот с ползунком...че только не перечитал...jquery,кучу ссылок,на javascript.ru...уже неделю не могу слепить скрипт :)
Вот я алгоритм осознаю,а вот код под него разработать ума не хватает :) Подозреваю,что финиш(лечинка) данной задачи и скрывается в ПОЛОЖЕНИИ ПОЛЗУНКА...:) Если значение ползунка=10 отправляем один запрос ВПРАВО,так как оно положительное,далее значение=20 отправляем снова вправо и так до 100....ИНАЧЕ если значение = -10 отправляем запрос ВЛЕВО...ну и так дор -100... |
ТОЛЬКО В ГОЛОВУ ПРИШЛО....А ВОТ ТАК ПРАВИЛЬНО БУДЕТ?
<head>
<body>
<label for=fader>Управление по горизонтали</label><br>
<label for=fader>ВЛЕВО  </label>
<output for=fader id=volume1>0%</output>
<label for=fader>  ВПРАВО</label><br>
<input type=range min=-100 max=100 value=0 id=fader step=10 list=volsettings1 oninput="outputUpdate1(value)">
<datalist id=volsettings1>
<option>-100</option>
<option>-80</option>
<option>-60</option>
<option>-40</option>
<option>-20</option>
<option>0</option>
<option>20</option>
<option>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
</datalist><br><br>
<script>
function outputUpdate1(vol) {
document.querySelector('#volume1').value = vol+"%";
var xhr = new XMLHttpRequest();
if (vol<0){
xhr.open('GET','//192.168.1.111/?buttonleft');
xhr.send(null);
}
else {
xhr.open('GET','//192.168.1.111/?buttonright');
xhr.send(null);
}
}
</script>
</body>
|
MaksLuk, я те в который раз уже говорю: если хочешь ползунок - шли его значение, а не херню типа buttonleft/buttonright
Цитата:
|
Как еще двинуться влево?;)
function outputUpdate1(vol) {
document.querySelector('#volume1').value = vol+"%";
var xhr = new XMLHttpRequest();
if (vol<0){
xhr.open('GET','//192.168.1.111/?'+vol);
xhr.send(null);
}
else {
xhr.open('GET','//192.168.1.111/?'+vol);
xhr.send(null);
}
}
|
код для сервоприводов,которые ловят этот запрос он же никак не будет реагировать,даже если вместо ?button... вставить значение ползунка(-100...100)...получится,что поворот будет все равно однократный, если я щелкну на ползунке сначала по 90, а затем по -30...блин...мозг кипит :)
if(readString.indexOf("?button2on") >0) // ok
CAMLEFT();
if(readString.indexOf("?button2off") >0) // ok
CAMRIGHT();
if(readString.indexOf("?button3on") >0) // ok
CAMUP();
if(readString.indexOf("?button3off") >0) // ok
CAMDN();
void CAMLEFT()
{
MYDATA1.servo_lr=max(MYDATA1.servo_lr-5,-90);
microservo.attach(7);
microservo.write(MYDATA1.servo_lr+90);
delay(200);
microservo.detach();
}
void CAMRIGHT()
{
MYDATA1.servo_lr=min(MYDATA1.servo_lr+5,90);
microservo.attach(7);
microservo.write(MYDATA1.servo_lr+90);
delay(200);
microservo.detach();
}
void CAMUP()
{
MYDATA1.servo_ud=min(MYDATA1.servo_ud+5,90);
microservo2.attach(5);
microservo2.write(MYDATA1.servo_ud+90);
delay(200);
microservo2.detach();
}
void CAMDN()
{
MYDATA1.servo_ud=max(MYDATA1.servo_ud-5,-90);
microservo2.attach(5);
microservo2.write(MYDATA1.servo_ud+90);
delay(200);
microservo2.detach();
}
|
Цитата:
Сделай ползунок с шагом 5 и диапазоном от -90 до 90. И подставляй передаваемое значение ползунка вместо MYDATA1.servo_lr. |
Добрый день. Ползунок переделал от -90 до 90 с шагом 5,но так добиться результата не получилось(Подстановка значения vol вместо MYDATA1.servo_lr не дало результаты )...
Привожу полностью html страницу(страница управления)
#include <SPI.h>
#include <Ethernet.h>
#include <Servo.h>
int led = 4;
//boolean LEDON = false;
struct MYDATA // структура меню
{
int servo_ud; // положение камеры up-down
int servo_lr; // положение камеры left-right
};
MYDATA MYDATA1={0,0};
Servo microservo, microservo2 ;
int pos = 0;
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 0, 112 }; // ip in lan (that's what you need to use in your browser. ("192.168.1.178")
byte gateway[] = { 192, 168, 0, 3 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //server port
String readString;
void setup() {
// Open serial communications and wait for port to open:
Serial.begin(9600);
while (!Serial) {
; // wait for serial port to connect. Needed for Leonardo only
}
pinMode(led, OUTPUT);
microservo.attach(7);
microservo2.attach(5);
// start the Ethernet connection and the server:
Ethernet.begin(mac, ip, gateway, subnet);
server.begin();
Serial.print("server is at ");
Serial.println(Ethernet.localIP());
}
void loop() {
// Create a client connection
EthernetClient client = server.available();
if (client) {
while (client.connected()) {
if (client.available()) {
char c = client.read();
//read char by char HTTP request
if (readString.length() < 100) {
//store characters to string
readString += c;
//Serial.print(c);
}
//if HTTP request has ended
if (c == '\n') {
Serial.println(readString); //print to serial monitor for debuging
client.println("HTTP/1.1 200 OK"); //send new page
client.println("Content-Type: text/html");
client.println();
client.println("<HTML>");
client.println("<HEAD>");
client.println("<meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> ");
client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
client.println("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />");
client.println("<link rel='stylesheet' type='text/css' href='http://randomnerdtutorials.com/ethernetcss.css' />");
client.println("<TITLE>Управление LED+SERVO</TITLE>");
client.println("</HEAD>");
client.println("<BODY>");
client.println("<script type=\"text/javascript\">");
client.println("document.onkeydown = NavigateThrough;");
client.println("function NavigateThrough (event)");
client.println("{");
client.println("if (!document.getElementById) return;");
client.println("if (window.event) event = window.event;");
client.println("if (event.ctrlKey)");
client.println("{");
client.println("var link = null;");
client.println("var href = null;");
client.println("switch (event.keyCode ? event.keyCode : event.which ? event.which : null)");
client.println(" {");
client.println("case 0x25:");
client.println("link = document.getElementById ('servo_left');");
client.println("break;");
client.println("case 0x27:");
client.println("link = document.getElementById ('servo_right');");
client.println("break;");
client.println("case 0x26:");
client.println("link = document.getElementById ('servo_up');");
client.println("break;");
client.println("case 0x28:");
client.println("link = document.getElementById ('servo_dn');");
client.println("break;");
client.println("}");
client.println("if (link) document.location = link.href;");
client.println("}");
client.println("}");
client.println("</script>");
client.println("<H1>Управление LED+SERVO</H1>");
client.println("<hr />");
client.println("<br />");
client.println("<H2>Arduino + Ethernet Shield</H2>");
client.println("<br />");
client.println("<a href=\"/?button1on\"\">Включить LED</a>");
client.println("<a href=\"/?button1off\"\">Выключить LED</a><br />");
client.println("<br />");
client.println("<br />");
client.println("<a href=\"/?button2on\" id=\"servo_left\">Поворот влево</a>");
client.println("<a href=\"/?button2off\" id=\"servo_right\">Поворот вправо</a><br />");
client.println("<br />");
client.println("<br />");
client.println("<a href=\"/?button3on\" id=\"servo_up\">Поворот вверх</a>");
client.println("<a href=\"/?button3off\" id=\"servo_dn\">Поворот вниз</a><br />");
client.println("<br />");
client.println("КАМЕРА");
client.println("<br />");
client.println("<iframe src=\" http://www.alexor.ru/upload/medialibrary/8d9/10703.gif.jpg\" width=\"320\" height=\"240\"\"></iframe>");
client.println("<label for=fader>Управление по горизонтали</label><br>");
client.println("<label for=fader>ВЛЕВО  </label>");
client.println("<output for=fader id=volume1>0%</output>");
client.println("<label for=fader>  ВПРАВО</label><br>");
client.println("<input type=range min=-90 max=90 value=0 id=fader step=5 list=volsettings1 oninput=\"outputUpdate1(value)\">");
client.println("<datalist id=volsettings1>");
client.println("<option>-90</option>");
client.println("<option>-80</option>");
client.println("<option>-60</option>");
client.println("<option>-40</option>");
client.println("<option>-20</option>");
client.println("<option>0</option>");
client.println("<option>20</option>");
client.println("<option>40</option>");
client.println("<option>60</option>");
client.println("<option>80</option>");
client.println("<option>90</option>");
client.println("</datalist><br><br>");
client.println("<script>");
client.println("function outputUpdate1(vol) {");
client.println(" document.querySelector('#volume1').value = vol+\"%\";");
client.println(" var xhr = new XMLHttpRequest();");
client.println("if (vol<0){");
client.println(" xhr.open('GET','http://192.168.0.112/?'+vol);");
client.println(" xhr.send(null); ");
client.println(" }");
client.println("else {");
client.println(" xhr.open('GET','http://192.168.0.112/?'+vol);");
client.println(" xhr.send(null);");
client.println(" }");
client.println(" }");
client.println(" </script>");
client.println("</BODY>");
client.println("</HTML>");
delay(1);
//stopping client
client.stop();
//controls the Arduino if you press the buttons
if (readString.indexOf("?button1on") >0){
digitalWrite(led, HIGH);
// LEDON = true;
}
if (readString.indexOf("?button1off") >0){
digitalWrite(led, LOW);
// LEDON = false;
}
if(readString.indexOf("?button2on") >0) // ok
CAMLEFT();
if(readString.indexOf("?button2off") >0) // ok
CAMRIGHT();
if(readString.indexOf("?button3on") >0) // ok
CAMUP();
if(readString.indexOf("?button3off") >0) // ok
CAMDN();
readString="";
}
}
}
}
}
void CAMLEFT()
{
MYDATA1.servo_lr=max(MYDATA1.servo_lr-5,-90);
microservo.attach(7);
microservo.write(MYDATA1.servo_lr+90);
delay(200);
microservo.detach();
}
void CAMRIGHT()
{
MYDATA1.servo_lr=min(MYDATA1.servo_lr+5,90);
microservo.attach(7);
microservo.write(MYDATA1.servo_lr+90);
delay(200);
microservo.detach();
}
void CAMUP()
{
MYDATA1.servo_ud=min(MYDATA1.servo_ud+5,90);
microservo2.attach(5);
microservo2.write(MYDATA1.servo_ud+90);
delay(200);
microservo2.detach();
}
void CAMDN()
{
MYDATA1.servo_ud=max(MYDATA1.servo_ud-5,-90);
microservo2.attach(5);
microservo2.write(MYDATA1.servo_ud+90);
delay(200);
microservo2.detach();
}
|
Цитата:
|
Значит сервер и есть одна страница,ту которую выложил выше...внутри этой страницы написана web-морда управления...я захожу на нее и с нее же управляю....парсинга нет
Делал так....
client.println(" xhr.open('GET','http://192.168.0.112/?'+vol);");
client.println(" xhr.send(null); ");
здесь отправляется значение ползунка....далее сменил
if(readString.indexOf("?button2on") >0) // ok
CAMLEFT();
на
if(readString.indexOf("?10") >0) // значение ползунка 10
CAMLEFT();
затем вставил vol вместо MYDATA1.servo_lr
void CAMLEFT()
{
vol=max(MYDATA1.vol-5,-90);
microservo.attach(7);
microservo.write(vol+90);
delay(200);
microservo.detach();
}
При компиляции пишет что в функции void CAMLEFT vol не задекларирована.... |
MaksLuk, ой ты чудишь. Про одну страницу - это понятно.
Я не шарю в сях, и не могу найти класс String в гугле, но должно быть что-то вроде:
int queryStart = readString.indexOf("?");
if (int > -1) {
String volString = readString.substring(queryStart + 1);
int vol = тутStrintToIntФункцияХЗКакая(volString);
CAMTO(vol);
}
Ну и пишешь функцию CAMTO , похожую на CAMLEFT(до твоих правок), только в ней MYDATA1.servo_lr = vol (не забудь объявить в аргументах функции) |
Сейчас попробую вот так как подсказали....
int queryStart = readString.indexOf("?");
if (int > -1){
String volString=readString.substring(queryStart,queryStart+1) == "?10");
int vol=inString.toInt(volString)
CAMTO(vol);
}
НУ и сама функция CAMTO(vol);
void CAMTO()
{
MYDATA1.servo_lr = vol;
MYDATA1.servo_lr=max(MYDATA1.servo_lr-5,-90);
microservo.attach(7);
microservo.write(MYDATA1.servo_lr+90);
delay(200);
microservo.detach();
}
Вот на ее основании тутStrintToIntФункцияХЗКакая?
String inString = ""; // string to hold input
void setup() {
// Open serial communications and wait for port to open:
Serial.begin(9600);
while (!Serial) {
; // wait for serial port to connect. Needed for Leonardo only
}
// send an intro:
Serial.println("\n\nString toInt():");
Serial.println();
}
void loop() {
// Read serial input:
while (Serial.available() > 0) {
int inChar = Serial.read();
if (isDigit(inChar)) {
// convert the incoming byte to a char
// and add it to the string:
inString += (char)inChar;
}
// if you get a newline, print the string,
// then the string's value:
if (inChar == '\n') {
Serial.print("Value:");
Serial.println(inString.toInt());
Serial.print("String: ");
Serial.println(inString);
// clear the string for new input:
inString = "";
}
}
}
|
Цитата:
Цитата:
И нахер тут сравнение? В volString должна попасть подстрока, начиная с позиции символа "?" + 1 и до конца строки. Ты же запросы шлешь вида server?90, server?-50 ! Красным выделил нужные тебе подстроки. Про основание функции не понял. Ну если toInt работает - то прекрасно. Цитата:
|
Зациклился, так как значение ползунка 10,20,30,40....90.
Пишу код Notepad++ и потом копирую в Arduino IDE(Программа,которая компилирует весь код и сразу заливает в микроконтроллер) Да,уж очень много время ушло.....так главное в интернете куча примеров управления сервоприводами и все бля управляются только с кнопки или кнопка-ссылка.Это конечно тоже хорошо, но дожать ползунок уже нет сил:) А можно реализовать это все дело с помощью jquery? Вот нашел пример,но здесь снова управление с помощью кнопок. Реально ли втулить сюда ползунок?
<!DOCTYPE html>
<html>
<head>
<title>Механизированная камера</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {
text-align: center;
padding: 0px;
margin: 0px;
}
#controls {
width: 100px;
float: left;
}
#video {
float: left;
width: 640px;
height: 480px;
}
#video iframe {
border: 1px solid red;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
/**
* Отправляет команду на сервер.
* Временно блокирует все кнопки.
*/
function doCommand(unit, action) {
var buttons = $(':button');
buttons.attr('disabled', true);
$.post('/' + unit + '/' + action + '/', function() {
buttons.attr('disabled', false);
});
}
/**
* Слушаем клики по кнопкам.
*/
$(document).ready(function() {
$(':button').click(function() {
var id = $(this).attr('id');
var parts = id.split('_');
doCommand(parts[0], parts[1]);
});
});
</script>
<div id="controls">
<div>
<input id="motor_up1" type="button" value="↑">
</div>
<div>
<input id="motor_left" type="button" value="←">
<input id="motor_right" type="button" value="→">
</div>
<div>
<input id="motor_down" type="button" value="↓">
</div>
<div>
<input id="light_on" type="button" value="✲">
<input id="light_off" type="button" value="✱">
</div>
</div>
<div id="video">
<!-- Сюда можно вставить поток с камеры -->
<iframe src="">
</div>
</body>
</html>
|
MaksLuk, ты че такой трудный то? Ну разобрались же с ползунком. Че по десять раз об одном и том же. Дело за малым - на сервере получать значение, парсить в integer и передавать в microservo. Ты че, не можешь чтоли нагуглить как сделать substring строки? Или как распарсить число из String в int? Это все C, причем тут jQuery? Или у тебя есть jQuery для C++?
|
Трудность заключается в том что я не программист. Да,благодаря Вам я понял где у ползунка сидят изменяющиеся данные и понял как их GEТ-нуть на сервер. Вечером еще буду кодить :) Если честно гуглил все подряд про эти ползунки,передачи данных,разные варианты читал,смотрел....за неделю так "ничего"и не сделал...Просто не хочется и Вас доставать каждый раз...:)
|
Почему я за тебя должен писать код, да еще на непонятном мне C?
int queryStart = readString.indexOf("?");
if (int > -1) {
String vol = readString.substring(queryStart + 1);
CAMTO(vol.toInt());
}
void CAMTO(int vol)
{
MYDATA1.servo_lr = vol;
microservo.attach(7);
microservo.write(MYDATA1.servo_lr+90);
delay(200);
microservo.detach();
}
Вот твоя документация по всяким String: http://arduino.cc/en/Reference/StringObject |
Че за камера? Дашь порулить?
|
Приветствую Вас. Это конечно форума javascript не касается,сейчас проблемы возникли с автомобилем....радиатор,пом а,термостат меняю....как всегда к зиме что-нибудь да поломается...это же ВАЗ :) ИЗВИНЯЮСЬ перед форумчанами javascript...руки до кода не дошли...Вижу что вы ответили,но за целый день машина не дала покодить...завтра тоже самое...жду новый радиатор...Про камеру и Дашь порулить обязательно ;)Спасибо за понимание!
|
Ок, жду)
|
Приветствую форум javascript и его пользователей! Сегодня руки дошли до кода :) (да,и еще-машину починил:)) Огромное спасибо danik.js! Загрузил код, компилирование прошло успешно.....далее залил в микроконтроллер и о КУРУТО!!! Сервопривод управляется с помощью ползунка :) Завтра подправлю код,камеру подключу и выйдем в сеть(danik.js естественно первым порулит ;)
Немного про параметры моего интернет: -Местоположение=обыкновенн я деревня -Максимальная скорость интернет=512 -Внешний IP Динамический -Необходимо сделать на модеме проброс порта Ну надеюсь на лучшее и получиться законнектиться :) Еще раз огромное СПАСИБО! До завтра! |
Все пучком, MaksLuk как и обещал - открыл доступ и дал порулить )
Мужык сказал - мужык сделал ) |
;) ПРОДОЛЖЕНИЕ СЛЕДУЕТ
|
а можно скеч в студию
|
| Часовой пояс GMT +3, время: 13:25. |