Ethernet shield w5100 регулятор мощности на веб странице

2015-12-13 в 22:42 (последнее изменение 2020-02-16 в 12:11)

Постепенно наша страничка из простой Arduino метеостанции превращается в полноценную систему удаленного управления различными устройствами а так же сбор и вывод информации с датчиков по веб интерфейсу Arduino Web Control. Поможет нам в этом Ethernet Shield W5100 а так же Arduino UNO.
Данная статья является логическим продолжением предыдущего материала где мы установили кнопки управления реле. Думаю у вас не возникло сложностей с повторением, поэтому предлагаю продолжить.

Ethernet Shield W5100 управление нагрузками и мощностью

Давайте по кусочкам разберемся.
Html код вызова "ползунка"выглядит так:

Код

Так как ползунок у нас не стандартный, применим к нему стили.

Код

.rangeP { /* линия, по которой он ездит в Firefox */
background: none;
border: none;
}
.rangeP { /* контейнер */
padding: 0;
border: 5px solid #ccc;
border-radius: 5px;
box-shadow: inset 0 1px #ccc, inset 0 1px 1px #575555, inset 0 -2px #ccc;
background: #fff linear-gradient(#BCBCBC, #fff0f5);
overflow: hidden;
}
.rangeP::-moz-range-thumb { /* ползунок в Firefox */
border-radius: 2px;
cursor: pointer /* ставим другой курсор */

Скрипт, который отвечает за работу ползунка и отправку значения исходя из его положения будет следующим:

Код

function PWM(){
value = document.getElementById("led_PWM").value;
var request = new XMLHttpRequest();
request.open("GET", "\setpin?pin=5?value=" + value, false);
request.send(null);
}

Нагрузку подключаем на 9 цифровой выход. На плате даже есть подсказка в виде "~" что означает что вывод поддерживает широтно-импульсную модуляцию.

В прошивке указываем 9 пин как цифровой выход.

Код

pinMode(9, OUTPUT);

Эти строки в прошивке отвечают за управление регулятором мощности (в моем случае) яркостью светодиода. Работает благодаря ШИМ.

Код

else if (StrContains(HTTP_req,"setpin?pin=5")) {
String input = HTTP_req;
int posStart = input.indexOf("value=");
int posEnd = input.indexOf(' ',posStart);
String param = input.substring(posStart+6,posEnd+1);
pin5 = param.toInt();
analogWrite(9,pin5);
sendBaseAnswer(client);
}

Так же решил изменить немного оформление странички. Теперь ведь это уже не совсем метеостанция как определили в начале.
Добавили стиль для тега "<h2>". Он будет применяться для названий строк функций.

Код

h2 {
font-family: Arial;
font-weight: normal;
margin: 20px;
text-align: center
}

А еще весь блок информации стал маловат, поэтому добавил ширины и высоты для тега "form".

Код

.form {
width: 600px;
height: 450px;
border: 3px solid rgb(0, 117, 178);
background: rgb(6, 144, 207);
color: #fff;
}

С учетом всех изменений, указанных и не указанных файл "index.htm" будет следующим:

Код

<html>

<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<title>Arduino WEB контроль</title>
<link type="text/css" rel="StyleSheet" href="/my.css" />
<script>
function GetFlameState() {
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseText != null) {
var arrayOfStrings = this.responseText.split(":");

document.getElementById("flame_txt").innerHTML = arrayOfStrings[0];
document.getElementById("temp_txt").innerHTML = arrayOfStrings[1];
document.getElementById("humid_txt").innerHTML = arrayOfStrings[2];
for(var i = 1 ; i < 5 ; i++)
if(arrayOfStrings[2+i] == "1")
document.getElementById("led_"+i).setAttribute("class","button_enabled");
else
document.getElementById("led_"+i).setAttribute("class","button_disabled");
}
}
}
}
request.open("GET", "ajax_flame" + nocache, true);
request.send(null);
setTimeout('GetFlameState()', 1000);
}
function onClick(pin){
var request = new XMLHttpRequest();
request.open("GET", "\setpin?pin=" + pin , false);
request.send(null);
}
function PWM(){
value = document.getElementById("led_PWM").value;
var request = new XMLHttpRequest();
request.open("GET", "\setpin?pin=5?value=" + value, false);
request.send(null);
}
</script>

</head>

<body onload="GetFlameState()">
<div class="form">
<h2>Arduino WEB контроль</h2>
<hr noshade size="1px" color="white">
<h3>Метеостанция</h3>
<table align="center">
<tr>
<td><img src='flame.png' /></td>
<td valign="center">Датчик дыма</td>
<td><span id="flame_txt"> 0</span></td>
</tr>

<tr>
<td><img src='temp.png' /></td>
<td valign="center">Температура</td>
<td><span id="temp_txt">0</span> °C</td>
</tr>

<tr>
<td><img src='humid.png' /></td>
<td valign="center">Влажность</td>
<td><span id="humid_txt">0</span> %</td>
</tr>
</table>
<center>
<hr noshade size="1px" color="white">
    <h3>Управление нагрузками</h3>
<button type="button" id="led_1" class="button_disabled" onClick="onClick(1)">Реле №1</button>
<button type="button" id="led_2" class="button_disabled" onClick="onClick(2)">Реле №2</button>
<button type="button" id="led_3" class="button_disabled" onClick="onClick(3)">Реле №3</button>
<button type="button" id="led_4" class="button_disabled" onClick="onClick(4)">Реле №4</button><br>
    <hr noshade size="1px" color="white">
    <h3>Регулировка мощности</h3><input type="range" min="0" max="255" id="led_PWM" step="2.55" oninput="PWM()" value="0" class="rangeP">
<hr noshade size="1px" color="white">
</center>
</div>
</Body>
</html>

Файл "my.css" стал теперь таким:

Код

.form {
width: 600px;
height: 450px;
border: 3px solid rgb(0, 117, 178);
background: rgb(6, 144, 207);
color: #fff;
}

td{color: #fff}

h2 {
font-family: Arial;
font-weight: normal;
margin: 20px;
text-align: center
}
h3 {
font-family: Arial;
font-weight: normal;
margin: 15px;
text-align: center
}

.button_disabled {color: #fff; /* цвет текста */
background: rgb(212, 75, 56);/* фон кнопки */
border: none; /* не показывать границу */
border-radius:5px; /* закругление углов */
cursor: pointer /* ставим другой курсор */
}

.button_disabled:hover {background: rgb(232, 95, 76);}/* при наведении курсора мышки */
.button_disabled:active {background: rgb(152, 15, 0);}/* при нажатии */

.button_enabled {color: #000; /* цвет текста */
background: rgb(17,237,105); /* фон кнопки */
border: none; /* не показывать границу */
border-radius:5px; /* закругление углов */
cursor: pointer /* ставим другой курсор */
}

.button_enabled:hover { background: rgb(94,242,153); } /* при наведении курсора мышки */
.button_enabled:active { background: rgb(84,184,124); } /* при нажатии */

Ну а прошивка для Arduino будет такой:

Код

#include <dht11.h>
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
#define DHT11_PIN 7
#define REQ_BUF_SZ 40

dht11 DHT;
File webFile;
char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0; // index into HTTP_req buffer
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};
IPAddress ip(192, 168, 0, 20);

EthernetServer server(80);
bool pin1;
bool pin2;
bool pin3;
bool pin4;
int pin5;
void setup() {
pinMode(2, OUTPUT);
pinMode(3, OUTPUT);
pinMode(5, OUTPUT);
pinMode(6, OUTPUT);
pinMode(9, OUTPUT);

SD.begin(4);
Ethernet.begin(mac, ip);
server.begin();
pin1 = pin2 = pin3 = pin4 = 0;
}

void loop() {
// listen for incoming clients
EthernetClient client = server.available();
if (client) {

    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (req_index < (REQ_BUF_SZ - 1)) {
          HTTP_req[req_index] = c; // save HTTP request character
          req_index++;
        }
        if (c == '\n' && currentLineIsBlank) {
          if (StrContains(HTTP_req, "GET / ") || StrContains(HTTP_req, "GET /index.htm")) {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-Type: text/html");
            client.println("Connnection: close");
            client.println();
            webFile = SD.open("index.htm");
          } else if (StrContains(HTTP_req, "GET /favicon.ico")) {
            webFile = SD.open("favicon.ico");
            if (webFile) {
              client.println("HTTP/1.1 200 OK");
              client.println();
            }
          } else if (StrContains(HTTP_req, "GET /temp.png")) {
            webFile = SD.open("temp.png");
            if (webFile) {
              client.println("HTTP/1.1 200 OK");
              client.println();
            }
          } else if (StrContains(HTTP_req, "GET /humid.png")) {
            webFile = SD.open("humid.png");
            if (webFile) {
              client.println("HTTP/1.1 200 OK");
              client.println();
            }
          } else if (StrContains(HTTP_req, "GET /flame.png")) {
            webFile = SD.open("flame.png");
            if (webFile) {
              client.println("HTTP/1.1 200 OK");
              client.println();
            }
          } else if (StrContains(HTTP_req, "GET /my.css")) {
            webFile = SD.open("my.css");
            if (webFile) {
              client.println("HTTP/1.1 200 OK");
              client.println();
            }
          } else if (StrContains(HTTP_req, "ajax_flame")) {
            sendBaseAnswer(client);
            int smoke_gas = 0; //пин на котором подключен MQ-2
            int sensorReading = analogRead(smoke_gas);
            int chk;
            chk = DHT.read(DHT11_PIN);
            client.print(sensorReading);
            client.print(":");
            client.print(DHT.temperature);
            client.print(":");
            client.print(DHT.humidity);
            client.print(":");
            client.print((digitalRead(2)) ? "1" : "0");
            client.print(":");
            client.print((digitalRead(3)) ? "1" : "0");
            client.print(":");
            client.print((digitalRead(5)) ? "1" : "0");
            client.print(":");
            client.print((digitalRead(6)) ? "1" : "0");
            client.print(":");
            client.print(pin5);

          } else if (StrContains(HTTP_req, "setpin?pin=1")) {
            pin1 = !pin1;
            digitalWrite(2, pin1);
            sendBaseAnswer(client);
          } else if (StrContains(HTTP_req, "setpin?pin=2")) {
            pin2 = !pin2;
            digitalWrite(3, pin2);
            sendBaseAnswer(client);
          } else if (StrContains(HTTP_req, "setpin?pin=3")) {
            pin3 = !pin3;
            digitalWrite(5, pin3);
            sendBaseAnswer(client);
          } else if (StrContains(HTTP_req, "setpin?pin=4")) {
            pin4 = !pin4;
            digitalWrite(6, pin4);
            sendBaseAnswer(client);
          } else if (StrContains(HTTP_req, "setpin?pin=5")) {
            String input = HTTP_req;
            int posStart = input.indexOf("value=");
            int posEnd = input.indexOf(' ', posStart);
            String param = input.substring(posStart + 6, posEnd + 1);
            pin5 = param.toInt();
            analogWrite(9, pin5);
            sendBaseAnswer(client);
          }

          if (webFile) {
            while (webFile.available()) {
              client.write(webFile.read()); // send web page to client
            }
            webFile.close();
          }
          req_index = 0;
          StrClear(HTTP_req, REQ_BUF_SZ);
          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(1);
    // close the connection:
    client.stop();
}
}
void sendBaseAnswer(EthernetClient client) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connnection: close");
client.println();
}
void StrClear(char *str, char length)
{
for (int i = 0; i < length; i++) {
    str[i] = 0;
}
}

char StrContains(char *str, char *sfind)
{
char found = 0;
char index = 0;
char len;
len = strlen(str);
if (strlen(sfind) > len) {
    return 0;
}
while (index < len) {
    if (str[index] == sfind[found]) {
      found++;
      if (strlen(sfind) == found) {
        return 1;
      }
    }
    else {
      found = 0;
    }
    index++;
}
return 0;
}

Файлы "index.htm" и "my.css" загружаем в корень карты памяти. Index.htm сохраняем в кодировке utf-8! Так же и файлами картинок. Они в архиве. Его распаковываем и так же в корень карты.

В качестве удаленно управляемых устройств вы можете использовать различные светильники, вентиляторы и прочее. Только нужно будет устанавливать модуль реле. В случае с регулятором мощности, можно использовать как полевые транзисторы так и симисторы. Все зависит от регулируемого напряжения. Можно регулировать яркость свечения к примеру светильника, люстры в комнате, вентилятора или светодиодной ленты. Ну вам виднее где вы его сможете применить.
Все названия кнопок и остального вы легко можете поменять на свои. Так же и с регулятором мощности. Изменяйте названия в файле "index.htm".

UPD.15.01.2016
Был произведен рефакторинг, что позволило сэкономить 6% объема памяти Ардуино.

Рефакторинг — это процесс улучшения написанного ранее кода путем такого изменения его внутренней структуры, которое не влияет на внешнее поведение.

Вот собственно и измененный код. Никаких доп функций здесь нет, только лишь код стал короче.

Код

#include <dht11.h>
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
#define DHT11_PIN 7
#define REQ_BUF_SZ 40

EthernetServer server(80);
bool pin1;
bool pin2;
bool pin3;
bool pin4;
int pin5;
void setup() {
pinMode(2, OUTPUT);
pinMode(3, OUTPUT);
pinMode(5, OUTPUT);
pinMode(6, OUTPUT);
pinMode(9, OUTPUT);

SD.begin(4);
Ethernet.begin(mac, ip);
server.begin();
pin1 = pin2 = pin3 = pin4 = 0;
}

void loop() {
// listen for incoming clients
EthernetClient client = server.available();
if (client) {

              char buff[32];
              sprintf(buff, "%d:%d:%d:%d:%d:%d:%d:%d:",
                      sensorReading, DHT.temperature, DHT.humidity,
                      digitalRead(2), digitalRead(3), digitalRead(5), digitalRead(6),
                      pin5);
              client.println(buff);
            } else if (StrContains(HTTP_req, "setpin?")) {
              if (StrContains(HTTP_req, "pin=1")) {
                pin1 = !pin1;
                digitalWrite(2, pin1);
              } else if (StrContains(HTTP_req, "pin=2")) {
                pin2 = !pin2;
                digitalWrite(3, pin2);
              } else if (StrContains(HTTP_req, "pin=3")) {
                pin3 = !pin3;
                digitalWrite(5, pin3);
              } else if (StrContains(HTTP_req, "pin=4")) {
                pin4 = !pin4;
                digitalWrite(6, pin4);
              } else if (StrContains(HTTP_req, "pin=5")) {
                String input = HTTP_req;
                int posStart = input.indexOf("value=");
                int posEnd = input.indexOf(' ', posStart);
                String param = input.substring(posStart + 6, posEnd + 1);
                pin5 = param.toInt();
                analogWrite(9, pin5);
              }
              sendBaseAnswer(client);
            }
          }
          req_index = 0;
          StrClear(HTTP_req, REQ_BUF_SZ);
          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(1);
    // close the connection:
    client.stop();
}
}
bool sendHtmlFile(EthernetClient client, char *fileName) {
webFile = SD.open(fileName);
sendBaseAnswer(client);
return sendFile(client, webFile);
}
bool sendFile(EthernetClient client, char *fileName) {
webFile = SD.open(fileName);
sendHttpOkAnswer(client);
client.println();
return sendFile(client, webFile);
}
bool sendFile(EthernetClient client, File &webFile) {
if (webFile) {
    while (webFile.available())
      client.write(webFile.read()); // send web page to client
    webFile.close();
    return 1;
}
return 0;
}
void sendBaseAnswer(EthernetClient client) {
sendHttpOkAnswer(client);
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close"));
client.println();
}
void sendHttpOkAnswer(EthernetClient client) {
client.println(F("HTTP/1.1 200 OK"));
}

void StrClear(char *str, char length) {
for (int i = 0; i < length; i++) {
str[i] = 0;
}
}

char StrContains(char *str, char *sfind) {
char found = 0;
char index = 0;
char len;
len = strlen(str);
if (strlen(sfind) > len) {
    return 0;
}
while (index < len) {
    if (str[index] == sfind[found]) {
      found++;
      if (strlen(sfind) == found) {
        return 1;
      }
    }
    else {
      found = 0;
    }
    index++;
}
return 0;
}

Если возникают вопросы, пишите в комментарии либо на форум.

Список электронных компонентов.

Наименование	Тип	Количество	Магазин
Arduino	UNO R3	1	Найти
Ethernet Shield	W5100	1	Найти
Датчик температуры и влажности	DHT-11	1	Найти
Датчик дыма и газов	MQ-2	1	Найти
Модуль реле	4 канала	1	Найти
Провода Dupont Папа-Мама	Провода Dupont Папа-Мама	Комплект	Найти
Cashback на Aliexpress

Не пропустите обновления! Подписывайтесь на нашу группу Вконтакте.
Так же у нас есть Telegram канал.
Вам понравился наш материал? Поделитесь с коллегами!