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 канал.
Вам понравился наш материал? Поделитесь с коллегами!

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

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

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

Подключение к Arduino датчика влажности и температуры DHT11 2015-10-13 15615 2	Управление нагрузкой с пульта 2011-05-09 10354
Российские ученые приступают к реализации нового проекта по импортозамещению 2024-02-15 3327	ШИМ регулятор своими руками 2021-07-31 5702 1
Как наложить сетку на карту 2015-01-21 36348 7	Зарядное устройство с питанием от солнца для мобильного телефона 2011-05-08 9097 1
Настройка системы автообзвона SpRobot 2019-11-19 3174	Ремонт проблескового маячка 2013-05-02 8081
Ремонт клавиши обогрева зеркал Opel Frontera 2018-04-16 4964	Эмулятор 8080 на Arduino 2020-01-12 5140

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

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

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