В статье про Ethernet Shields рассматривался типовой пример Web-сервера. Этот «Сервер» с периодичностью в пять секунд выдавал страничку с состоянием шести аналоговых входов Arduino. Выглядит это примерно так:

В общем-то вполне прилично для микропроцессорной системы. Но…

…на Google Developers есть масса «красивых штучек», позволяющих «прятно разукрасить» страничку нашего сервера. Ниже привожу «слегка модернизированный» скетч «типового Web-сервера» из Arduino.

#include <UIPEthernet.h>   //для Ethernet shield на ENC28J60
//#include <Ethernet.h>    //эти две строки для Ethernet shield W5100
//#include <SPI.h>

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,177);

EthernetServer server(80);

const char str1[] PROGMEM = "<html><head>";
const char str2[] PROGMEM = "<script src='https://www.google.com/jsapi'></script><script>";
const char str3[] PROGMEM = "google.load('visualization','1',{packages:['gauge']});";
const char str4[] PROGMEM = "google.setOnLoadCallback(drawChart);";
const char str5[] PROGMEM = "function drawChart() {";
const char str6[] PROGMEM = "var data = google.visualization.arrayToDataTable([";
const char str7[] PROGMEM = "['Label','Value']"; 
const char str8[] PROGMEM = "var options = {width:800,height:240,redFrom:90,redTo:100,";
const char str9[] PROGMEM = "yellowFrom:75,yellowTo:90,minorTicks:5};var chart =";
const char str10[] PROGMEM = "new google.visualization.Gauge(document.getElementById('oil'));";
const char str11[] PROGMEM = "chart.draw(data,options);}</script></head><body>";
const char str12[] PROGMEM = "<div id='oil' style='width:800px;height:240px;'></div></body></html>";

const char* const string_table[] PROGMEM = {str1, str2, str3, str4, str5, str6, str7};
const char* const string_table2[] PROGMEM = {str8, str9, str10, str11, str12};
char buffer[80]; 

void setup() {
Ethernet.begin(mac, ip);
server.begin();
}

void loop() {
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 (c == '\n' && currentLineIsBlank) {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");  // the connection will be closed after completion of the response
	  client.println("Refresh: 5");  // refresh the page automatically every 5 sec
          client.println();
          client.println("<!DOCTYPE HTML>");

for (int i = 0; i < 7; i++)  {
strcpy_P(buffer, (char*)pgm_read_word(&(string_table[i]))); // Necessary casts and dereferencing, just copy.
client.print(buffer);
delay( 500 );
}
          // output the value of each analog input pin
          for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
            int sensorReading = analogRead(analogChannel)*100/1024;
            client.print(",['Input ");
            client.print(analogChannel);
            client.print("',");
            client.print(sensorReading);
            client.println("]");       
          }
client.print("]);");

for (int i = 0; i < 5; i++)  {
strcpy_P(buffer, (char*)pgm_read_word(&(string_table2[i]))); // Necessary casts and dereferencing, just copy.
client.print(buffer);
delay( 500 );
}

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();
}
}

Как видно, вместо текстовых строк с данными измерений на аналоговых входах, здесь «один-в-один» повторен пример Gauge Charts из Google Developers.

На страничке выводятся шесть стрелочных индикаторов, показывающих (в пронормированном виде) уровень напряжения на шести входах A0..A5 Arduino. Каждые 5 сек страничка обновляется с показом новых измерений.

Для достижения «красоты» используются скрипты с https://www.google.com/jsapi. Поэтому скетч будет работать только в сети, где есть доступ к интернету. Кроме Gauge есть другие «украшения»: графики, диаграммы, таблицы, позволяющие существенно улучшить наглядность выводимой информации.

В статье использованы материалы статьи А.Коновалова на Хабре (оттуда я про Google Developers и узнал…)