Сторінки 1

Відповісти

#1 2020-10-23 13:01:58

Zmey_Gorynych
Учасник
Зареєстрований: 2020-10-23
Повідомлень: 1

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

Доброго времени суток, прошу помощи. Я не программист все коды я   выдираю из примеров  и пытаюсь применить. Столкнулся с такой проблемой. Не могу послать данные с ардуино в веб страницу которая находиться на сд карте. Нужно прописать функцию в HTML  коде, помогите пожалуйста.
[code=cpp]#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)
}
[/code]


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>

Неактивний

#2 2020-10-27 19:46:53

trackball
Учасник
Зареєстрований: 2020-10-27
Повідомлень: 16

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

Звучит примерно, как: научте шашлык меня кушать.

Разберитесь в Вашем примере что и куда отправляется, тогда и вопрос сам собой отпадёт.

Неактивний

Сторінки 1

Відповісти

Швидке повідомлення

Введіть повідомлення і натисніть Надіслати

Підвал форуму