Работа с Ethernet Shield W5100 на примере метеостанции. Часть 3

2015-10-26 в 00:16 (последнее изменение 2023-11-22 в 10:10)

В предыдущей статье мы осуществили обновление только значений а не все страницы что заметно уменьшит нагрузку на Arduino. Так же начали работать с картой памяти - загрузили изображения на страницу, favicon и саму страницу грузим с карты памяти.

А теперь мы с вам сделаем нашу WEB страничку метеостанции на Arduino и все том же Ethernet shield W5100 немного красивее добавив цвета.

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

Код

.form {
   width: 400px;
   height: 230px;
   border: 3px solid rgb(0, 117, 178);
   background: rgb(6, 144, 207);
   color: white;
   }
     h2 {
           font-family: Arial;
           font-weight: normal;
           margin: 20px;
           text-align: center
          }

Теперь скажем браузеру что надо загрузить файл стилей my.css. Его вставляем в файл нашей web странички index.htm.

Код

Так же следует в прошивке добавить пару строк которые откроют файл стилей my.css

Код

else if (StrContains(HTTP_req, "GET /my.css")) {
webFile = SD.open("my.css");
if (webFile) {
client.println("HTTP/1.1 200 OK");
client.println();
}

Изменим еще немного наш старый файл web странички index.htm. Заменим только форму которая выводит значения.

Код

<body onload="GetFlameState()">
<div class="form">
<h2>WEB-Метеостанция</h2>
            <hr noshade size="1px" color="white">
            <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>

            </div>

Наши старые картинки немного не подойдут. У них имеется белый фон что испортит всю красоту. Если у вас как и у меня нет фотошопа, тогда быстро можно убрать фон картинок с помощью этого сервиса https://pixlr.com/editor/?loc=ru?loc=ru. В конце статьи найдете ссылку для их загрузки, если лень разбираться)

Было сделано еще простое но правильное решение, это размещение названия значения по центру относительно своей картинки. Решается это так:

Код

<td valign="center">Датчик дыма</td>

Весь код нашей странички arduino метеостанции выглядит так:

Код

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=0.85; maximum-scale=0.85; user-scalable=0;" />
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<title>Данные с датчиков</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 from = 0;
var to = this.responseText.indexOf(':');
document.getElementById("flame_txt").innerHTML = this.responseText.substring(from,to);
from = to+1;
to = this.responseText.indexOf(':',from);
document.getElementById("temp_txt").innerHTML = this.responseText.substring(from,to);
from = to+1;
document.getElementById("humid_txt").innerHTML = this.responseText.substring(from);
}
}
}
}
request.open("GET", "ajax_flame" + nocache, true);
request.send(null);
setTimeout('GetFlameState()', 1000);
}
</script>

</head>

Вот что должно у нас получиться:

Новые иконки без фона лежат здесь.
Если Вы что то пропустили:
Часть 1
Часть 2
Не забывайте делиться материалом со своими друзьями.
P.S. html код и стили css правил с помощью онлайн сервиса http://jsfiddle.net/. Так же можно там включить и выполнение скриптов, может вам пригодится.
UPD 05.12.2015 Доработали данный проект. Теперь можно управлять еще и нагрузками!

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

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

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

Просмотров: 23394. Оценка статьи: 4.7 из 5. Уже оценило 17 читателей

Об авторе - Администратор

More by Администратор