Html и arduino

Тема в разделе "Arduino & Shields", создана пользователем Simon, 2 июн 2020.

  1. Simon

    Simon Нерд

    Здравствуйте. Я в веб технологиях прям совсем новичок и мало что знаю про HTML и JavaScript
    Использую Ethernet Shield для вывода импульсов датчика.
    Ситуация следующая: есть поле для ввода чисел и кнопка отправки. Мне нужно, чтобы когда я ввёл число и нажал на кнопку, число, записывалось в переменную, которую я создал на Arduino.
    Пожалуйста, помогите!
    Вот код.
    Код (C++):
    #include <SPI.h>
    #include <Ethernet2.h>
    #include <EEPROM.h>
    #include <String.h>
    #define PINSENSE 3
    double gasCount;
    double waterCount;
    // Enter a MAC address and IP address for your controller below.
    // The IP address will be dependent on your local network:
    byte mac[] = {
      0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
    };
    IPAddress ip(192, 168, 0, 81);
    // Initialize the Ethernet server library
    // with the IP address and port you want to use
    // (port 80 is default for HTTP):
    EthernetServer server(80);
    int pulseCountGas = 0;
    int pulseCountWater = 0;
    boolean LEDON = false; //изначальный статус светодиода - выключен

    String readString = String(30); //string for fetching data from address


    void setup() {
      gasCount = EEPROM.read(1);
      pulseCountGas = EEPROM.read(0);
      pulseCountWater = EEPROM.read(2);
      waterCount = EEPROM.read(3);
      // 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(PINSENSE, INPUT);
      // start the Ethernet connection and the server:
      Ethernet.begin(mac, ip);
      server.begin();
      Serial.print("server is at ");
      Serial.println(Ethernet.localIP());
    }


    void loop() {
      // listen for incoming clients
      EthernetClient client = server.available();
      if (client) {
        Serial.println("new client");
        // an http request ends with a blank line
        boolean currentLineIsBlank = true;
        while (client.connected()) {
          if (client.available()) {
            char c = client.read();
            if (readString.length() < 30) {
              readString.concat( c); }
            Serial.write(c);
            // if you've gotten to the end of the line (received a newline
            // character) and the line is blank, the http request has ended,
            // so you can send a reply
            if (c == '\n' && currentLineIsBlank) {
              // send a standard http response header
              if(readString.indexOf("level=1") >=0)
              {
                digitalWrite(13, HIGH); // set the LED on
                LEDON = true;
              }else{
                digitalWrite(13, LOW); // set the LED on
                LEDON = false;
              }
              //============================HTML=========================================
              client.println("HTTP/1.1 200 OK");
              client.println("Content-Type: text/html");
              client.println("Connection: close");  // the connection will be closed after completion of the response
              client.println("Refresh: 5");  // refresh the page automatically every 5 sec
              client.println();
              client.println("<!DOCTYPE HTML>");
              client.println("<html>");
              client.println("<head>");
              client.println("<meta charset=""utf-8"">");
              //=========================script1=============================
             
              //==============================================================
              client.println("</head>");
              client.println("<body>");
              client.println("<h2>");
              client.println("GAS");
              client.println("</h2>");
              client.println("<big>");
              client.println("<style>");
              client.println("body {");
              client.println("background: #333;");
              client.println("color: #fc1;");
              client.println("}");
              client.println(".layer1 {");
              client.println("bottom: 520px;");
              client.println("right: 1300px;");
              client.println(" line-height: 1px;");
              client.println("}");
              client.println(".layer2 {");
              client.println("bottom: 510px;");
              client.println(" right: 800px;");
              client.println("line-height: 1px;");
              client.println("}");
              client.println(".layer3 {");
              client.println(" bottom: 730px;");
              client.println("right: 1000px;");
              client.println("line-height: 1px;");
              client.println("}");
              client.println("</style>");
              client.println("<big>");
              // output the value of each analog input pin
              //The sensor shows 2 values: 0 or 1
              client.print("Pulse Count(gas) = ");
              client.println(pulseCountGas);
              client.println("</br>");
              client.print("Gas: ");
              client.print(gasCount);
              client.println(" m3");
              client.println("</br>");
              client.println("EEPROM SECTOR 0 = ");
              client.println(EEPROM.read(0));
              client.println("</br>");
              client.println("EEPROM SECTOR 1 = ");
              client.println(EEPROM.read(1));
              client.println("<div class=layer3>");
              client.println("<h5>");
              client.println("<big>");
              client.println("WATER");
              client.println("</big>");
              client.println("</h5>");
              client.print("Pulse Count(Water) = ");
              client.print(pulseCountWater);
              client.println(" m3");
              client.println("<p>");
              client.println("EEPROM SECTOR 2 = ");
              client.println(EEPROM.read(2));
              client.println("<p>");
              client.println("EEPROM SECTOR 3 = ");
              client.println(EEPROM.read(3));
              client.println("<p>");
              client.print("Water: ");
              client.println(waterCount);
              client.print(" m3");
              client.println("<p>");
              client.println("</div>");
              //===========================gas counter==============================
              client.println("<div class = layer1>");
              client.println("<h3>");
              client.println("Enter a value from counter GAS");
              client.println("</h3>");
              client.println("<input name=gas1 type=number size=20 id=gascount >");
              client.println("<input type=submit name=send1 value=send onclick=");
              client.println("</div>");
              //========================water counetr===========================
              client.println("<div class = layer2>");
              client.println("<h4>");
              client.println("<big>");
              client.println(" Enter a value from counter WATER");
              client.println("</big>");
              client.println("</h4>");
              client.println("<input name=water1 type=number size=20 id=watercount >");
              client.println("<input type=submit name=send2 value=send onclick=");
              client.println("</form>");
              client.println("<p style=text-align: center>");
              client.println("</div>");
              //===================================Scripts====================================
              if (digitalRead(PINSENSE) == 0)
              {
                pulseCountGas = pulseCountGas + 1;
                gasCount = gasCount + 0.01;
                pulseCountWater = pulseCountGas + 1;
                waterCount = gasCount + 0.01;
                EEPROM.write(0, pulseCountGas);
                EEPROM.write(1, gasCount);
                EEPROM.write(2, pulseCountWater);
                EEPROM.write(3, waterCount);
              }
              else
              {
                pulseCountGas = pulseCountGas;
                pulseCountWater = pulseCountGas + 1;
              }
              if (pulseCountGas >= 100)
              {
                gasCount = gasCount + 1;
                pulseCountGas = 0;
                pulseCountWater = 0;
                waterCount = waterCount + 1;
              }
              client.println("</big>");
              client.println("</big>");
              client.println("</body>");
              client.println("</html>");
              break;
            }
            if (c == '\n') {
              // you're starting a new line
              currentLineIsBlank = true;
            }
            else if (c != '\r') {
              // you've gotten a character on the current line
              currentLineIsBlank = false;
            }
          }
        }
        // give the web browser time to receive the data
        delay(2);
        // close the connection:
        client.stop();
        Serial.println("client disconnected");
      }
    }
     
    Simon, 2 июн 2020
    #1
  2. parovoZZ

    parovoZZ Гуру

    Значит, надо потратить немного своего времени и изучить предмет. Начинать с малого. Примерно, как я.
    http://forum.amperka.ru/threads/cgi-ajax-и-распи-два.19766/
     
    parovoZZ, 2 июн 2020
    #2