Arduino の Digital ピンと Analog ピンを Web サーバーにして表示

Arduino をサーバー化して Digital ピンと Analog ピンをブラウザで表示します。

こんな感じで表示されます。

kindle whiteでもこんな感じに表示されます（何気にこれEINKなんですよね）。

使用機材

項目	機材名
使用しているArduino	arduino nano
書き込みブートローダ	atmega328old
LAN シールド	ENC28J60

ソースコード

ReadDigitalAnalogPins.ino

# include <UIPEthernet.h>

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0D, 0x78, 0xEE  };  
IPAddress ip(192, 168, 0, 117);
IPAddress myDns(192, 168, 0, 1);                        

EthernetServer server(80);

void setup() {

  // set config
  //Serial.begin(9600);
  
  // start ip address
  Ethernet.begin(mac, ip , myDns );
  //Serial.print("IP Address: ");
  //Serial.println(Ethernet.localIP());

  // start server
  server.begin();

}

void loop() {

  EthernetClient client = server.available();

  if (client){  
    
    boolean currentLineIsBlank = true;

    while (client.connected()){
      
      if (client.available()){
        
        char c = client.read();

        if (c == '\n' && currentLineIsBlank){

          //=========================================================================================================
          // start print html
          //=========================================================================================================
          
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          // title
          client.println("<h3>Arudino read digital and analog pins</h3>");
          
          // layout table :-)
          client.println("<table>");
          client.println("<tr>");
          client.println("<td valign=top>");

          //=========================================================================================================
          // Digital pins
          //=========================================================================================================
          client.println("<table border=1 cellspacing=0 cellpadding=10>");
          for( int i = 2 ; i <= 13 ; i ++ ){
            client.println("<tr>");
            client.println("<th>D"+ String( i ) + "</th>");
            client.println("<td>" + String( digitalRead(i) ) + "</td>");
            client.println("<td><img src=\"https://chart.googleapis.com/chart?chs=100x60&amp;cht=gom&amp;chd=t:"+ String( int(  digitalRead(i) * 100 ) ) +"&amp;chco=FFFFFF,000000\"></td>");
            client.println("</tr>");

            // separate table layout 
            if( i == 7 ){
              client.println("</table>");
              client.println("</td>");
              client.println("<td valign=top>");
              client.println("<table border=1 cellspacing=0 cellpadding=10>");
            }

          }
          client.println("</table>");
          // end Digital pins

          client.println("</td>");
          client.println("<td valign=top>");

          //=========================================================================================================
          // Analog pins
          //=========================================================================================================
          client.println("<table border=1 cellspacing=0 cellpadding=10>");
          for( int i = 0 ; i <= 5 ; i ++ ){
            client.println("<tr>");
            client.println("<th>A"+ String( i ) + "</th>");
            client.println("<td>" + String( analogRead(i) ) + "</td>");
            client.println("<td><img src=\"https://chart.googleapis.com/chart?chs=100x60&amp;cht=gom&amp;chd=t:"+ String( int( analogRead(i) * 0.1023 ) ) +"&amp;chco=FFFFFF,000000\"></td>");
            client.println("</tr>");
          }
          client.println("</table>");
          // end Analog pins

          client.println("</td>");
          client.println("</table>");
          // end layout table ;-)

          break;
        
        }

        if (c == '\n') {
          currentLineIsBlank = true;
        }
        else if (c != '\r'){
          currentLineIsBlank = false;
        }

      }

    }

     delay(10);

    client.stop();
    //Serial.println("   Disconnected\n");

  }

}

描画部分に bootstrap を入れたかったのですが、どうにも Arduino nano のメモリが足りなくて仕方なく素の html 形式に

もしもっといいグラフが欲しい場合はこちら
Gallery - Image-Charts documentation
なるべくstatic（静止画）なグラフだとコードの量から相性がいいです。