Страница 2 из 4 < 1 2 34 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   web управление на основе javascript (https://javascript.ru/forum/dom-window/50772-web-upravlenie-na-osnove-javascript.html)

MaksLuk 10.10.2014 20:53
ТОЛЬКО В ГОЛОВУ ПРИШЛО....А ВОТ ТАК ПРАВИЛЬНО БУДЕТ?

<head>
<body>
<label for=fader>Управление по горизонтали</label><br>
<label for=fader>ВЛЕВО&nbsp&nbsp</label>
<output for=fader id=volume1>0%</output>
<label for=fader>&nbsp&nbspВПРАВО</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>

danik.js 10.10.2014 20:55
MaksLuk, я те в который раз уже говорю: если хочешь ползунок - шли его значение, а не херню типа buttonleft/buttonright
Цитата:
Сообщение от MaksLuk
так как оно положительное,далее значение=20 отправляем снова вправо и так до 100....ИНАЧЕ если значение = -10 отправляем запрос ВЛЕВО...ну и так дор -100
Смотри. Ползунок у нас на нуле. Я тыкаю в -100, тебе на сервер уходит buttonleft, камера дрыгнулась чутка, но ползунок уже до упора доведен. И че делать? Как еще двинуться влево?

MaksLuk 10.10.2014 21:07
Как еще двинуться влево?;) 

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);
       }
}

MaksLuk 10.10.2014 21:53
код для сервоприводов,которые ловят этот запрос он же никак не будет реагировать,даже если вместо ?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();

}

danik.js 11.10.2014 04:31
Цитата:
Сообщение от MaksLuk
MYDATA1.servo_lr=max(MYDATA1.servo_lr-5,-90);
microservo.attach(7);
microservo.write(MYDATA1.servo_lr+90);
Судя по этому коду microservo ждет число от 0 до 180. Так в чем проблема?
Сделай ползунок с шагом 5 и диапазоном от -90 до 90.
И подставляй передаваемое значение ползунка вместо MYDATA1.servo_lr.

MaksLuk 11.10.2014 12:38
Добрый день. Ползунок переделал от -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>ВЛЕВО&nbsp&nbsp</label>");
          client.println("<output for=fader id=volume1>0%</output>");
          client.println("<label for=fader>&nbsp&nbspВПРАВО</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();

}

danik.js 11.10.2014 12:44
Цитата:
Сообщение от MaksLuk
(Подстановка значения vol вместо MYDATA1.servo_lr не дало результаты )...
А где у тя в коде сервера идет эта подстановка? Почему не дало? Какая разница между числом 90, записанным в vol и числом 90, записанным в какой-то другой переменной? Где код, который парсит число из url'а?

MaksLuk 11.10.2014 12:56
Значит сервер и есть одна страница,ту которую выложил выше...внутри этой страницы написана 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 не задекларирована....

danik.js 11.10.2014 13:22
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 (не забудь объявить в аргументах функции)

MaksLuk 11.10.2014 14:03
Сейчас попробую вот так как подсказали....
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 = ""; 
    }
  }
}


Часовой пояс GMT +3, время: 21:08.
Страница 2 из 4 < 1 2 34 >
Показывать 40 сообщений этой темы на одной странице