아두이노 WIFI 실드-(2) wifi 응용

2014-08-12 14:40:57

개요

이 컨텐츠를 보시기 전에 "아두이노 WIFI실드를 사용하여 WIFI 연결하기"를 먼저 보시는 것을 권장합니다.

지난번에 올렸던 "아두이노 WIFI실드를 사용하여 WIFI 연결하기"에서 아두이노에 WIFI 실드를 올려서 연결하는 것을 해 보았습니다.

이번에는 WIFI 실드에 웹서버를 올려 다른 곳에서 이 웹에 접속 할 수 있도록 합니다. (같은 공유기에 있을 경우에만 접속 됩니다.)

아두이노에서 센서를 연결하여 센서값을 받아서 WIFI실드에서 센서 측정값을 출력하고, 컴퓨터나 스마트폰으로 웹에 접속하여 센서값을 볼 수 있도록 해봅시다.

미리 보기 동영상

부품 목록

NO	부품명	수량	상세설명
1	아두이노 우노 R3	1	아두이노
2	아두이노 WIFI 실드	1	WIFI 실드
3	flex 센서	1	flex sensor
4	조도센서	1
5	저항 10KΩ	2	저항이 클 수록 센서값이 작게 나옵니다.
6	브레드보드	1
7	점퍼케이블	8

부품명	아두이노 우노 R3	아두이노 WIFI 실드	flex센서
파트	x1	x1	x1

부품명	조도센서	저항 10kΩ	브레드보드	점퍼케이블
파트	x1	x2	x1	x8

하드웨어 Making

회로도

브레드보드 레이아웃

소프트웨어 Coding

#include <SPI.h>
#include <WiFi.h>

char ssid[] = "AndroidHotspot6971";      //  연결하실 와이파이 SSID
char pass[] = "00001111";   // 네트워크 보안키

int status = WL_IDLE_STATUS;

WiFiServer server(80);  // 80포트를 사용하는 웹서버 선언

void setup() {
  Serial.begin(9600); 

  if (WiFi.status() == WL_NO_SHIELD) { // 현재 아두이노에 연결된 실드를 확인
    Serial.println("WiFi shield not present"); 
    while (true);  // 와이파이 실드가 아닐 경우 계속 대기
  } 

  // 와이파이에 연결 시도
  while ( status != WL_CONNECTED) { //연결될 때까지 반복
    Serial.print("Attempting to connect to SSID: ");
    Serial.println(ssid);
    status = WiFi.begin(ssid, pass);  // WPA/WPA2 연결
  } 

  server.begin();

  printWifiStatus();  // 연결 성공시 연결된 네트워크 정보를 출력
}


void loop() {
  int flexval = analogRead(A5);
  int ldrval = analogRead(A0);
  // flex 센서와 조도센서에서 값을 가져옴

  WiFiClient client = server.available();  // 들어오는 클라이언트를 수신한다.
  if (client) {  // 클라이언트를 수신 시
    Serial.println("new client");  // 클라이언트 접속 확인 메시지 출력
    boolean currentLineIsBlank = true;

    while (client.connected ()) { 
      if (client.available()) {
        char c = client.read();
        // 문자의 끝을 입력 받으면 http 요청이 종료되고, 답신을 보낼 수 있습니다.
        if (c == '\n' && currentLineIsBlank) {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");
          client.println("Refresh: 1"); // 1초당 페이지 refresh
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<meta charset=utf-8/>");
          client.print("<meta name=view content=width=device-width, ");
          client.println("initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no />");
          client.println("<html>");
          client.println("<head>");  
          client.println("<title>Many Sensor</title>");
          client.println("</head>");
          client.println("<h1>Many Sensor</h1>");
          client.println("<div data-role=content>");
          client.print("Flex Sensor value : ");
          client.println(flexval);  // flex 센서 값 출력
          client.println("<br>");
          client.println("<br>");
          client.print("Ldr Sensor value : ");
          client.println(ldrval);  // 조도 센서 값 출력
          client.println("<br>");
          client.println("</div>");
          client.println("</body>");
          client.println("</html>");
          break;
        }
        if (c == '\n') { 
          currentLineIsBlank = true;
        }

        else if (c != '\r') {
          currentLineIsBlank = false;
        }
      }
    }
    delay(1);
    client.stop();
    Serial.println("client disonnected");
    // 클라이언트와 연결을 끊는다.
  }
}

void printWifiStatus() {  // 연결된 네트워크 정보 출력
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());
  // 네트워크 SSID 출력

  IPAddress ip = WiFi.localIP(); 
  Serial.print("IP Address: ");
  Serial.println(ip);
  // 네트워크 ip 출력

  long rssi = WiFi.RSSI();
  Serial.print("signal strength (RSSI):");
  Serial.print(rssi);
  Serial.println(" dBm");
  // 수신 강도 출력
}

소프트웨어 설명

* 본 코드는 스케치를 사용하여 작성 / 업로드 합니다. 스케치에 대한 사용법은 링크를 참고 하시기 바랍니다.

#include <SPI.h>
#include <WiFi.h>

char ssid[] = "AndroidHotspot6971";      //  연결하실 와이파이 SSID
char pass[] = "00001111";   // 네트워크 보안키

int status = WL_IDLE_STATUS;

WiFiServer server(80);  // 80포트를 사용하는 웹서버 선언

ssid[]와 pass[] 에는 각각 네트워크 SSID와 네트워크 보안키를 적어 주시면 됩니다.(자신이 연결 하고자 하는 네트워크)

이부분을 맞게 쓰지 않았을 경우는 접속이 되지 않으며 시리얼 모니터에서 Attempting to connect to WPA SSID : 네트워크 SSID 이 글이 계속 뜨게 됩니다.
(여기서는 WAP 형식만 가능 합니다.)

WiFiServer server(80)을 통해서 80포트를 사용하는 웹서버임을 선언 합니다.

void setup() {

  Serial.begin(9600); 

  if (WiFi.status() == WL_NO_SHIELD) { // 현재 아두이노에 연결된 실드를 확인
    Serial.println("WiFi shield not present"); 
    while (true);  // 와이파이 실드가 아닐경우 계속 대기
  } 

  // 와이파이에 연결 시도
  while ( status != WL_CONNECTED) { //연결이 될 때 까지 반복
    Serial.print("Attempting to connect to SSID: ");
    Serial.println(ssid);
    status = WiFi.begin(ssid, pass);  // WPA/WPA2 연결
  } 

  server.begin();

  printWifiStatus();  // 연결 성공시 연결된 네트워크 정보를 출력
}

현재 연결된 실드를 확인 하고, 와이파이 실드가 장착 되는 경우 위에서 적은 SSID 와 보안키로 와이파이에 연결을 시도합니다.(연결이 될 때 까지 계속 반복 합니다.)

연결에 성공 하면 연결된 네트워크의 정보를 출력 합니다.

  int flexval = analogRead(A5);
  int ldrval = analogRead(A0);
  // flex 센서와 조도센서에서 값을 가져옴

  WiFiClient client = server.available();  // 들어오는 클라이언트를 수신한다.
  if (client) {  // 클라이언트를 수신 시
    Serial.println("new client");  // 클라이언트 접속 확인 메세지 출력
    boolean currentLineIsBlank = true;

아날로그 5번핀에 꽂혀 있는 flex 센서와 아날로그 0번 핀에 꽂혀있는 조도 센서에서 값을 받아옵니다.

그 다음 클라이언트에서 접속 할 때 까지 대기 합니다. 클라이언트가 접속을 하면 클라이언트가 접속 했음을 알리는 메세지를 출력 합니다.

    while (client.connected ()) { 
      if (client.available()) {
        char c = client.read();
        // 문자의 끝을 입력 받으면 http 요청이 종료되고, 답신을 보낼 수 있습니다.
        if (c == '\n' && currentLineIsBlank) {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");
          client.println("Refresh: 1"); // 1초당 페이지 refresh
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<meta charset=utf-8/>");
          client.print("<meta name=view content=width=device-width, ");
          client.println("initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no />");
          client.println("<html>");
          client.println("<head>");  
          client.println("<title>Many Sensor</title>");
          client.println("</head>");
          client.println("<h1>Many Sensor</h1>");
          client.println("<div data-role=content>");
          client.print("Flex Sensor value : ");
          client.println(flexval);  // flex 센서 값 출력
          client.println("<br>");
          client.println("<br>");
          client.print("Ldr Sensor value : ");
          client.println(ldrval);  // 조도 센서 값 출력
          client.println("<br>");
          client.println("</div>");
          client.println("</body>");
          client.println("</html>");
          break;
        }

<!DOCTYPE HTML>
<meta charset=utf-8/>
<meta name=viewport content=width=device-width, initial-scale=1.0, 

maximum-scale=1.0, minimum-scale=1.0, user-scalable=no />
<html>
<head>
<title>Many Sensor</title>
</head>
<h1>Many Sensor</h1>
<div data-role=content>
	Flex Sensor value : "Flex Sensor value"
	<br>
	<br>
	Ldr Sensor value : "Ldr Sensor value"
	<br>
</div>
</body>
</html>

클라이언트에게 웹 페이지를 보내는 부분입니다. 바로 위에 소스는 우리가 보여주고자 하는 웹페이지의 HTML 소스 입니다. 이 HTML 소스를 한줄 씩 client.print() 를 써서 출력 하게 됩니다.

<!DOCTYPE HTML> 이 한줄을 아두이노 에서는 client.println("<!DOCTYPE HTML>") 이런 식으로 써주시면 됩니다.
센서 값 입력 해주시는 방법은 client.print("Flex Sensor value : "); client.println(flexval); 이런식으로 print() 를 쓰셔서 한줄에 다 들어 갈수 있도록 합니다.

(왼쪽이 HTML 문서를 바로 열었을 때(센서 값은 임의로 넣었습니다), 오른쪽이 아두이노 WiFi 실드를 통해 웹페이지를 열었을 때(센서 값은 제대로 측정 된 값입니다.))

void printWifiStatus() {  // 연결된 네트워크 정보 출력
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());
  // 네트워크 SSID 출력

  IPAddress ip = WiFi.localIP(); 
  Serial.print("IP Address: ");
  Serial.println(ip);
  // 네트워크 ip 출력

  long rssi = WiFi.RSSI();
  Serial.print("signal strength (RSSI):");
  Serial.print(rssi);
  Serial.println(" dBm");
  // 수신 강도 출력
}

void printWifiStatus() 함수는 연결 된 네트워크의 정보를 출력 하는 함수 입니다. 연결 성공시 연결된 네트워크의 SSID, ip, 신호 강도를 출력 합니다.

kocoafabeditor

항상 진취적이고, 새로운 것을 추구하는 코코아팹 에디터입니다!

WIFI쉴드, 아두이노