Arduino의 Digital 및 Analog 핀을 웹 서버로 표시

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(정지화면)인 그래프라면 코드의 양으로부터 궁합이 좋습니다.