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	Найти

Посмотрите еще эти статьи
Управляем вытяжкой на кухне пультом от телевизора на Arduino
Вывод картинки на дисплей 128x64
Детектор микронаушников
Ethernet shield w5100 таймер включения на веб странице
Вывод различных данных на дисплей LCD 128x64
Подключение датчиков газа и дыма серии MQ к Arduino

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

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

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

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

Зарядное устройство с питанием от солнца для мобильного телефона 2011-05-08 9307 1	Пайка разъёма СР-50-74П 2016-03-14 6273
Усилитель звука на TDA1904 2011-03-27 6441	Пропал звук из динамика Yaesu FT-60R. Что делать? 2012-06-29 5350
9 лучших аналогов сервисов Trello и Jira 2023-08-14 2164	Ошибка на iPhone при копировании 2021-11-05 11271
Перегревается ноутбук HP 625 2015-09-18 9342 2	Ремонт дозиметра Сосна Анри-01 2015-02-18 9447
Усилитель мощности TDA2003 (5Watt) 2011-02-27 6041	Заливаем скетч в Atmega328 при помощи Arduino UNO 2021-07-28 12753

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

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

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