Как вывести данные с ардуино на веб страницу?

Тема в разделе "Arduino & Shields", создана пользователем Геннадий, 22 окт 2020.

Метки:
  1. Геннадий

    Геннадий Нуб

    Доброго времени суток, прошу помощи. Я не программист все коды я выдираю из примеров и пытаюсь применить. Столкнулся с такой проблемой. Не могу послать данные с ардуино в веб страницу которая находиться на сд карте. Нужно прописать функцию в HTML коде, помогите пожалуйста.
    Код (C++):
    #include <SPI.h>
    #include <Ethernet.h>
    #include <SD.h>


    #include <OneWire.h>
    #include <DallasTemperature.h>
    OneWire oneWire(2); // вход датчиков 18b20
    DallasTemperature ds(&oneWire);

    DeviceAddress sensor1 = {0x28, 0x2A, 0xC9, 0x79, 0x97, 0x08, 0x03, 0x4B};




    // MAC address from Ethernet shield sticker under board
    byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
    IPAddress ip(192,168,1,117); // IP address, may need to change depending on network
    EthernetServer server(80);  // create a server at port 80

    File webFile;







    void setup()
    {
        Ethernet.begin(mac, ip);  // initialize Ethernet device
        server.begin();           // start to listen for clients
        Serial.begin(9600);       // for debugging

        // initialize SD card
        Serial.println("Initializing SD card...");
        if (!SD.begin(4)) {
            Serial.println("ERROR - SD card initialization failed!");
            return;    // init failed
        }
        Serial.println("SUCCESS - SD card initialized.");
        // check for index.htm file
        if (!SD.exists("index.htm")) {
            Serial.println("ERROR - Can't find index.html file!");
            return;  // can't find index file
        }
        Serial.println("SUCCESS - Found index.htm file.");
    }

    void loop()
    {



    ds.requestTemperatures(); // считываем температуру с датчиков
     
        Serial.print("Sensor 1: ");
        Serial.print(ds.getTempC(sensor1)); // отправляем температуру
        Serial.println("C");





        EthernetClient client = server.available();  // try to get client

        if (client) {  // got client?
            boolean currentLineIsBlank = true;
            while (client.connected()) {
                if (client.available()) {   // client data available to read
                    char c = client.read(); // read 1 byte (character) from client
                    // last line of client request is blank and ends with \n
                    // respond to client only after last line received
                    if (c == '\n' && currentLineIsBlank) {
                        // send a standard http response header
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-Type: text/html");
                        client.println("Connection: close");
                        client.println();
                        // send web page
                        webFile = SD.open("index.htm");        // open web page file
                        if (webFile) {
                            while(webFile.available()) {
                                client.write(webFile.read()); // send web page to client
                            }
                            webFile.close();
                        }
                        break;
                    }
                    // every line of text received from the client ends with \r\n
                    if (c == '\n') {
                        // last character on line of received text
                        // starting new line with next character read
                        currentLineIsBlank = true;
                    }
                    else if (c != '\r') {
                        // a text character was received from client
                        currentLineIsBlank = false;
                    }
                } // end if (client.available())
            } // end while (client.connected())
            delay(1);      // give the web browser time to receive the data
            client.stop(); // close the connection
        } // end if (client)
    }
     

    HTML страничка что лежит на sd-карте.
    HTML:
    <!DOCTYPE html>

    <html lang="ru">
    <head>
    <meta charset="UTF-8">


    <title>Hdd Toshiba 500 Gb.</title>


    <style>
    Result
    EDIT ON
    HTML {
      height: 100%;
      }
    BODY {
      background: linear-gradient(
          rgba(255,255,255, 0) .9em, rgba(0, 0, 0, .15) 1em)
        0 0,
        linear-gradient(90deg,
          rgba(255,255,255, 0) .9em, rgba(0, 0, 0, .15) 1em)
        0 0;
      background-size: 1em 1em;
      background-color: ivory;
      font: italic 16px/2 'Trebuchet MS', Verdana, sans-serif;
      }
    P {
      margin: 2.55em 3em 1em;
    }

    <style type="text/css">
       #content {
        width: 500px;
        margin: 0 auto 50px;
       }
       #footer {
        position: fixed;
        left: 0; bottom: 0;
        padding: 10px;
        background: #39b54a;
        color: #fff;
        width: 100%;
       }
      </style>


      <style>
    h2 {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 7em;
      text-align: center;
    }



    #text3d {
      font-family: helvetica;
      text-transform: uppercase;
      text-align: center;
      color: #fefefe;
      text-shadow: #e7e7e7 3px 5px 0,
                   #3300FF 4px 6px 3px,
                   #ccc 8px 11px 10px;
    }

    #letterpress {
      background: #3300FF;
      color: transparent;
      text-align: center;

      text-shadow: 0px 1px 3px rgba(250,250,250,0.95);
      -webkit-background-clip: text;
         -moz-background-clip: text;
              background-clip: text;
    }
    </style>










    <style>
    .box h3{
        text-align:left;
        position:relative;
        top:80px;
    }
    .box {
        width:70%;
        height:300px;
        background:#FFF;
        margin:40px auto;
    }


    .effect5
    {
      position: relative;
    }
    .effect5:before, .effect5:after
    {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 25px;
      left: 10px;
      width: 50%;
      top: 80%;
      max-width:300px;
      background: #777;
      -webkit-box-shadow: 0 35px 20px #777;
      -moz-box-shadow: 0 35px 20px #777;
      box-shadow: 0 35px 20px #777;
      -webkit-transform: rotate(-8deg);
      -moz-transform: rotate(-8deg);
      -o-transform: rotate(-8deg);
      -ms-transform: rotate(-8deg);
      transform: rotate(-8deg);
    }
    .effect5:after
    {
      -webkit-transform: rotate(8deg);
      -moz-transform: rotate(8deg);
      -o-transform: rotate(8deg);
      -ms-transform: rotate(8deg);
      transform: rotate(8deg);
      right: 10px;
      left: auto;
    }
    </style>





    <style>
    container { width: 300px; margin: 10px auto 0; }
    .de .den, .de .dene, .de .denem, .de .deneme { position: absolute;  left: 50%; top: 50%; }
    .de {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    background-color: transparent;
    }
    .den {
    position: relative;
    width: 210px;
    height: 210px;
    margin: -105px 0 0 -105px;
    border-radius: 100%;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);
    background: #df3341;");
    background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));
    background: -webkit-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);
    background: linear-gradient(to right, #df3341 0%,#d4f355 50%,#61c0ec 100%);
    position:relative;");
    }");
    .dene {");
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    border-radius: 100%;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
    background: #f2f6f5;
    background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
    background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    }
    .denem {
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 100%;
    background: #cbd5d6;
    background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
    background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
    }
    .deneme {
    padding: 3px 10px 0 10px;
    width: 120px;
    height: 137px;
    display: inline-block;
    margin: -70px 0 0 -70px;
    color: #555;
    text-shadow: 1px 1px 1px white;
    font-family: 'Dosis';
    font-size: 70px;
    font-weight: 400;
    text-align: center;
    }
    .deneme span { font-size: 30px; font-weight: 200; }
    .deneme strong { position: absolute; right: 1px; top: 25px; font-size: 34px; }
    </style>



    </head>


    <body>
    <h1 id="letterpress">Hdd Toshiba 500 Gb</h1>




    <div class="box effect5">
    <div style="padding:39px 0;max-width:523px;margin: auto;">
      <div class="basenu_kopasku_texalom">
      <span class="mavexa_zekipolas"></span>
      <div class="basenu_kopasku_texalom-denug">
      <center>
      <div class="container">
        <div class="de">
            <div class="den">
              <div class="dene">
                <div class="denem">
                  <div class="deneme">
                 
                    <strong>&deg;</strong>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
      </center>




      </div>
      </div>
      </div>

    </div>


    <div class="box effect5">


    <div style="padding:39px 0;max-width:523px;margin: auto;">
      <div class="basenu_kopasku_texalom">
      <span class="mavexa_zekipolas"></span>
      <div class="basenu_kopasku_texalom-denug">
      <h3>Ключевое слово</h3>
      <p>Далее идет описание, что будет располагаться ниже, где также можно прописать ссылку для перехода.</p>
      </div>
      </div>
      </div>




    </div>



    <div id="footer"> &copy; Zmey_Gorynych</div>

    </body>





    </html>
     
    Последнее редактирование: 23 окт 2020
    Геннадий, 22 окт 2020
    #1
  2. Asper Daffy

    Asper Daffy Иксперд

    Найдите пример и выдерите код. Что Вам можно ещё посоветовать-то?
     
    Asper Daffy, 22 окт 2020
    #2
  3. Геннадий

    Геннадий Нуб

    Я вчера весь интернет облазил, не нашёл. Можно ссылку?
     
    Геннадий, 23 окт 2020
    #3
  4. parovoZZ

    parovoZZ Гуру

    parovoZZ, 23 окт 2020
    #4