Вітаю. На днях потрапила в руки плата Arduino з мікроконтролером ATmega32 і модуль W5100.
Разом цей бутерброд виглядає так: 
Одразу виникла ідея зробити на його базі сервер щоб через звичайний браузер можна було наприклад моніторити температуру в приміщенні і зовні а також керувати певними навантаженнями.
чистий HTML код вийшов такий:
▼HTML
<!DOCTYPE HTML5>
<html>
<head>
<title>LED switch & Temperatures</title>
<meta charset=utf-8>
▼CSS
<style>
body{
background-color: #ccc;
text-align: center;
}
button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #000;
border: none;
border-radius: 15px;
box-shadow: 0 9px #555;
border: 2px solid #555;
}
button:hover {
color: #330;
text-shadow: 0px 0px 35px #ff5, 0px 0px 35px #ff5, 0px 0px 35px #ff5;
border: 2px solid #ff5;
box-shadow: 0 9px #665;
}
button:active {
color: #ff0;
box-shadow: 0 3px #333;
transform: translateY(6px);
border: 2px solid #ff5;
}
H1{
color: #000;font-family: Georgia, 'Times New Roman', Times, serif;
margin-top: 0px;
}
p{font-size: 24px; float: center;}
div {
margin: 10px;
high: 50px;
background: #fff;
border: 1px dashed #000;
padding: 15px;
font: 18pt Tahoma;
}
</style>
</head>
<body>
<!--<hr style=color:#ccc>-->
<h1>WEB сервер "Ардуіно" 192.168.0.20</h1>
<div>
<h1>Керування навантаженнями</h1>
<p>
<a href=\"/$2\"><button style=background-color:#5c5>LED 1</button></a>
<a href=\"/$3\"><button style=background-color:#c55>LED 2</button></a>
<a href=\"/$5\"><button style=background-color:#c55>LED 3</button></a>
<a href=\"/$7\"><button style=background-color:#c55>LED 4</button></a>
</p>
</div>
<div style=color:#000><h1>Датчики температури</h1>T1: 23.50°С T2: 23.50°С T3: 23.50°С T4: 23.50°С</div>
</html>
далі я це все закинув в сішний код для ардуінки:
▼HTML + C
▼ініціалізація і настройка плати і всяка всячина, кому цікаво
#include <SPI.h>
#include <Ethernet.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define LED_1 8
#define LED_2 11
#define LED_3 9
#define LED_4 12
bool led1_state = false;
bool led2_state = false;
bool led3_state = false;
bool led4_state = false;
#define ONE_WIRE_BUS 2
#define TEMPERATURE_PRECISION 9
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
DeviceAddress TSensor[10];
short int DeviceCount = 0;
short int index;
boolean newInfo = 0;
byte mac[] = { 0x00, 0xAA, 0xBB, 0xCC, 0xDA, 0x02 };
IPAddress ip(192,168,0,20);
EthernetServer server(80);
void setup(void)
{
pinMode(LED_1, OUTPUT);
pinMode(LED_2, OUTPUT);
pinMode(LED_3, OUTPUT);
pinMode(LED_4, OUTPUT);
Ethernet.begin(mac, ip);
server.begin();
sensors.begin();
oneWire.reset_search();
DeviceCount=sensors.getDeviceCount();
for(index=0; index<DeviceCount; index++)
{
sensors.getAddress(TSensor[index], index);
sensors.setResolution(TSensor[index], TEMPERATURE_PRECISION);
}
}
void loop(void)
{
EthernetClient client = server.available(); //приймаємо данні які відправляє клієнт
if(client)
{ //якщо запит закінчується пустою стрічкою
boolean currentLineIsBlank = true; //ставим мітку кінця запиту
while (client.connected()) //доки є підключення до клієнта
{
if (client.available()) //якщо клієнт активний
{
char c = client.read(); //зчитуємо передану інфу в змінну "с"
if(newInfo && c == ' ')
{ //якщо змінна нової інфи = 1 і "с" пуста стрічка
newInfo = 0; //то обнуляємо змінну нової інфи
if(c == '$')
{ //якщо в "с" записаний $
//ставиму змінну нової інфи як true
newInfo = 1;
}
if(newInfo == 1){ //перевіряємо яке число іде після $ якщо є нова інформація
switch (c)
{
case '1':
digitalWrite(LED_1, HIGH);
led1_state = true;
break;
case '2':
digitalWrite(LED_1, LOW);
led1_state = false;
break;
▼той самий код ще 4 рази тільки на інших портах
case '3':
digitalWrite(LED_2, HIGH);
led2_state = true;
break;
case '4':
digitalWrite(LED_2, LOW);
led2_state = false;
break;
case '5':
digitalWrite(LED_3, HIGH);
led3_state = true;
break;
case '6':
digitalWrite(LED_3, LOW);
led3_state = false;
break;
case '7':
digitalWrite(LED_4, HIGH);
led4_state = true;
break;
case '8':
digitalWrite(LED_4, LOW);
led4_state = false;
break;
default:
break;
}
}
if (c == '\n') { //якщо "с" дорівнює символу нової стрічки
currentLineIsBlank = true; //починаємо нову стрічку
}
else if (c != '\r') { //інакше якщо "с" дорівнює поверненню курсора на початок стрічки
currentLineIsBlank = false; //отримуємо символ стрічки
}
if (c == '\n' && currentLineIsBlank) { //виводимо HTML сторінку
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println("Refresh: 5"); //автоматичне оновлення кожні 5 секунд
client.println();
sensors.requestTemperatures(); //запит температур від датчиків
client.println("<!DOCTYPE HTML>");
client.println("<html><head>");
client.print("<title>LED switch & Temperatures</title>");
client.print("<meta charset=utf-8>");
▼CSS + всяка всячина
client.print("<style>body{ background-color: #ccc; text-align: center;}</style>");
client.print("<style>button {background-color:#c55; padding: 15px 25px; font-size: 24px; text-align: center; cursor: pointer; outline: none; color: #000; border: none; border-radius: 15px; box-shadow: 0 9px #555; border: 2px solid #555;}");
client.print("button:hover { color: #330; text-shadow: 0px 0px 35px #ff5, 0px 0px 35px #ff5, 0px 0px 35px #ff5; border: 2px solid #ff5; box-shadow: 0 9px #665;}");
client.print("button:active { color: #ff0; box-shadow: 0 3px #333; transform: translateY(6px); border: 2px solid #ff5;}</style>");
client.print("<style> H1{ color: #000;font-family: Georgia, 'Times New Roman', Times, serif; margin-top: 0px;}</style>");
client.print("<style>p{font-size: 24px; float: center;}</style>");
client.print("<style> div { margin: 10px; high: 50px; background: #fff; border: 1px dashed #000; padding: 15px; font: 18pt Tahoma;}</style>");
client.print("</head><body><h1>WEB сервер ''Ардуіно'' 192.168.0.20</h1><div><h1>Керування навантаженнями</h1><p>");
if(led1_state){
client.print("<a href=\"/$2\"><button style=background-color:#5c5>LED 1</button></a>");
}else{
client.print("<a href=\"/$1\"><button>LED 1</button></a>");
}
if(led2_state){
client.print("<a href=\"/$4\"><button style=background-color:#5c5>LED 2</button></a>");
}else{
client.print("<a href=\"/$3\"><button>LED 2</button></a>");
}
if(led3_state){
client.print("<a href=\"/$6\"><button style=background-color:#5c5>LED 3</button></a>");
}else{
client.print("<a href=\"/$5\"><button>LED 3</button></a>");
}
if(led4_state){
client.print("<a href=\"/$8\"><button style=background-color:#5c5>LED 4</button></a>");
}else{
client.print("<a href=\"/$7\"><button>LED 4</button></a>");
}
client.println("</p></div><div style=color:#000>");
client.println("<h1> </h1>");
client.println("<h1>Датчики температури</h1>");
client.println("");
for(index=0; index<DeviceCount; index++)
{
client.println("Темп.№");
client.print(index+1);
client.println(": ");
client.print(sensors.getTempC(TSensor[index]));
client.println("°С ");
}
client.println("</div></body></html>"); //закриваємо тег HTML
break; //вихід з циклу
}
}
}
delay(1); //затримка на отримання нових даних
client.stop(); //закриваємо з'єднання
}
}]
цікава іграшка була до поки я не відкрив цей сайт в двох окремих вкладках...
суть в чому, по дефолту в CSS стилях я прописав що кнопка червона, далі якщо я отримав з сайту якусь цифру то відповідно я на порт подаю високий рівень і далі в залежності від цього рівня я відсилаю на сторінку той чи інший код і якщо порт активний то я примусово приписую кнопці зелений колір(як бачте по синтаксису коду на сі пряміше прописати колір не виходило)...
if(led1_state){
client.print("<a href=\"/$2\"><button style=background-color:#5c5>LED 1</button></a>");
}else{
client.print("<a href=\"/$1\"><button>LED 1</button></a>");
а по натисканню кнопки першого діода коли він вимкненийя маю в URL 192.168.0.20/$2 і відповідно 192.168.0.20/$1 якщо він увімкнений...
а тепер ми маємо дві вкладки на якій ми натиснули ту саму кнопку і в одній вкладці ми маємо 192.168.0.20/$2 а в іншій 192.168.0.20/$1 і обидві вкладки автоматично оновлюються кожні 5 секунд (це потрібно для оновлення температур в реальному часі)
і навантаження починає само по собі то вмикатись то вимикатись (а навантаження це може бути наприклад світло в кімнаті)
Як зробити так щоб після автоматичного оновлення сторінки там в мене після IP адреси залишалось пусте поле?
і ще може хто знає як зробити адекватніше запуск сайту з флешки як ось тут http://tehnopage.ru/ethernet-arduino-control їхній код в мене не працює, а розібратись що і як в них працює я теж не можу, але в них адекватніше бо оновлюється тільки потрібний елемент сторінки а не вся сторінка і весь сайт живе на флешці...
