ESP32 web server

ESP32 web server

2023. 2. 28. 16:42ㆍ개발/Arduino

새로 제작중인 PCB 보드를 테스트 한다.

Wifi, BLE 신호를 RS-232 RS-485 유선신호로 변경하는 기능을 구현한다.

----- 동작확인 -----

1. ESP32 실행한 뒤 할당받은 ip에 접속한다.

RS 232 버튼을 누르면

해당 ip/232/on 경로로 접속되면서

수신받는 보드에서 RS-232 데이터를 확인할 수 있다.

RS 485 버튼을 클릭했을 시 마찬가지로

수신받는 보드의 화면에서 확인 가능하다.

1) WiFi 테스트 - WiFi 송신코드

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

// Load Wi-Fi library
#include <WiFi.h>

// Replace with your network credentials
const char* ssid = "와이파이 이름";
const char* password = "와이파이 비밀번호";

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output232state = "off";
String output485state = "off";

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

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

  Serial2.begin(115200, SERIAL_8N1, 16, 17); //RS-485
  Serial1.begin(115200, SERIAL_8N1, 26, 27); //RS-232

  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    currentTime = millis();
    previousTime = currentTime;
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected() && currentTime - previousTime <= timeoutTime) {  // loop while the client's connected
      currentTime = millis();
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            if (header.indexOf("GET /232/on") >= 0) {
              Serial.println("232 send");
              output232state = "on";
              Serial1.print("232offA");
            } else if (header.indexOf("GET /232/off") >= 0) {
              Serial.println("232 send");
              output232state = "off";
              Serial1.print("232onA");
            } else if (header.indexOf("GET /485/on") >= 0) {
              Serial.println("485 send");
              output485state = "on";
              Serial2.print("485offB");
            } else if (header.indexOf("GET /485/off") >= 0) {
              Serial.println("485 send");
              output485state = "off";
              Serial2.print("485onB");
            }
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #555555;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>RS232 RS485 WiFi test</h1>");
            
            // Display current state, and ON/OFF buttons for GPIO 26  
            //client.println("<p>RS 232 - " + output232state + "</p>");
            client.println("<p>RS 232</p>");
            // If the output232state is off, it displays the ON button       
            if (output232state=="off") {
              client.println("<p><a href=\"/232/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/232/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 27  
            //client.println("<p>RS 485 - " + output485state + "</p>");
            client.println("<p>RS 485</p>");
            // If the output485state is off, it displays the ON button       
            if (output485state=="off") {
              client.println("<p><a href=\"/485/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/485/off\"><button class=\"button button2\">OFF</button></a></p>");
            }
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

WiFi 데이터를 전송하는 소스코드다.

WiFi 에 접속되면 웹 서버를 할당받는다.

기본 포트 80번을 사용하고

위와 같이 시리얼 모니터 상에 IP를 부여받는다.

해당 IP에 접속하면

html로 작성된 웹 페이지가 생성된다.

코드 설명

WiFiServer server(80);

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

  Serial2.begin(115200, SERIAL_8N1, 16, 17); //RS-485
  Serial1.begin(115200, SERIAL_8N1, 26, 27); //RS-232

  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

ESP32의 유선포트 Serial1, Serial2 를 사용해서

RS-485 RS-232 통신을 사용한다.

와이파이 접속 및

server.begin() 및 server.available()로 서버를 생성한다.

client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");

html 포맷 및 css를 정의해준다.

client.println("<body><h1>RS232 RS485 WiFi test</h1>");
            
client.println("<p>RS 232</p>");
if (output232state=="off") {
	client.println("<p><a href=\"/232/on\"><button class=\"button\">ON</button></a></p>");
} else {
	client.println("<p><a href=\"/232/off\"><button class=\"button button2\">OFF</button></a></p>");
}

웹 상에서 버튼을 누를때 마다

토글 형식으로 동작하며

output232state 환경변수가 1,0 스위칭 된다.

RS-232 버튼이 on 일때와 off 일때를 구분해서

다른 button class를 불러온다.

client.println("<p>RS 485</p>");
if (output485state=="off") {
	client.println("<p><a href=\"/485/on\"><button class=\"button\">ON</button></a></p>");
} else {
	client.println("<p><a href=\"/485/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");

마찬가지로 RS-485 버튼도 생성한다.

버튼을 클릭 시 a 태그의 href 속성에 의해

/485/on 혹은 /485/off주소로 접속한다.

if (header.indexOf("GET /232/on") >= 0) {
              Serial.println("232 send");
              output232state = "on";
              Serial1.print("232offA");
            } else if (header.indexOf("GET /232/off") >= 0) {
              Serial.println("232 send");
              output232state = "off";
              Serial1.print("232onA");
            } else if (header.indexOf("GET /485/on") >= 0) {
              Serial.println("485 send");
              output485state = "on";
              Serial2.print("485offB");
            } else if (header.indexOf("GET /485/off") >= 0) {
              Serial.println("485 send");
              output485state = "off";
              Serial2.print("485onB");
            }

각각 http 경로마다 처리문을 설정해뒀다.

output232state, output485state 환경변수를 스위칭 해주고

Serial1( RS-232 ), Serial2( RS-485 ) 포트로 데이터를 전송한다.

( 글 맨 위 배선도 참고 )

RS-232,RS-485로 변환된 데이터 수신코드

#include <arduino.h>

int end232,end485 =0;
String inputString232,inputString485;

void setup() {
  Serial.begin(115200);
  
  // RX 16핀, TX 17핀, 8비트, 페리티 비트 없음, Stop 비트 1
  Serial2.begin(115200, SERIAL_8N1, 16, 17); //RS-485
  Serial1.begin(115200, SERIAL_8N1, 26, 27); //RS-232

}

void loop() {    
  /*
  //모니터 프로그램으로 입릭이 들어오면
  if(Serial.available()){
    //들어온 데이터를 Serial2로 그대로 전송
    unsigned char Rcv_Byte = Serial.read();
    Serial2.write(Rcv_Byte);
    Serial1.write(Rcv_Byte);

  }
  */
  serial232Event();
  serial485Event();
}

void serial232Event() {
  if (Serial1.available()) {
    // get the new byte:
    char inChar232 = (char)Serial1.read();
    if(inChar232 == 0x41) // 마지막에 A가 들어오면 출력
      end232=1;
    inputString232 += inChar232;
  }
  if(end232==1) {
    Serial.println("-----RS232 received-----");
    Serial.print("Received data :  ");
    Serial.println(inputString232);
    Serial.println("");
    inputString232="";
    end232=0;
   }

}

void serial485Event() {
  if (Serial2.available()) {
    // get the new byte:
    char inChar485 = (char)Serial2.read();
    if(inChar485 == 0x42) // 마지막에 B 가 들어오면 출력
      end485=1;
    inputString485 += inChar485;
  }
  if(end485==1) {
    Serial.println("-----RS485 received-----");
    Serial.print("Received data :  ");
    Serial.println(inputString485);
    Serial.println("");
    inputString485="";
    end485=0;
   }

}

데이터를 수신받는 보드의 소스코드다.

void setup() {
  Serial.begin(115200);
  
  Serial2.begin(115200, SERIAL_8N1, 16, 17); //RS-485
  Serial1.begin(115200, SERIAL_8N1, 26, 27); //RS-232

}

송신 보드와 마찬가지로 Serial1, Serial2 포트를 열어준다.

void loop() {    
  /*
  //모니터 프로그램으로 입릭이 들어오면
  if(Serial.available()){
    //들어온 데이터를 Serial2로 그대로 전송
    unsigned char Rcv_Byte = Serial.read();
    Serial2.write(Rcv_Byte);
    Serial1.write(Rcv_Byte);

  }
  */
  serial232Event();
  serial485Event();
}

주석처리한 부분은 시리얼모니터에서 직접 입력해주는 경우다.

위와 같이 직접 입력해줘서 테스트 했었는데

나는 보드를 2개 사용하므로 필요없어졌다.

void serial232Event() {
  if (Serial1.available()) {
    // get the new byte:
    char inChar232 = (char)Serial1.read();
    if(inChar232 == 0x41) // 마지막에 A가 들어오면 출력
      end232=1;
    inputString232 += inChar232;
  }
  if(end232==1) {
    Serial.println("-----RS232 received-----");
    Serial.print("Received data :  ");
    Serial.println(inputString232);
    Serial.println("");
    inputString232="";
    end232=0;
   }

}

Serial232Event() 함수는

RS-232 신호를 수신받아서

시리얼모니터에 출력한다.

데이터를 무작정 받아오면

나중에 크기가 큰 데이터가 들어올때를 고려해서

RS-232 신호는 0x41 (아스키코드 A) 가 수신됐을때만

시리얼모니터에 출력하도록 했다.

void serial485Event() {
  if (Serial2.available()) {
    // get the new byte:
    char inChar485 = (char)Serial2.read();
    if(inChar485 == 0x42) // 마지막에 B 가 들어오면 출력
      end485=1;
    inputString485 += inChar485;
  }
  if(end485==1) {
    Serial.println("-----RS485 received-----");
    Serial.print("Received data :  ");
    Serial.println(inputString485);
    Serial.println("");
    inputString485="";
    end485=0;
   }

}

RS-485신호는 0x42 (아스키코드 B) 가 수신됐을때만

시리얼모니터에 출력하도록 했다.

RS-232, RS-485 데이터를 주고받으면서

ASCII 코드표도 다시 보게돼서 반가웠다.

ESP32로 웹 서버를 구축해서

http 통신으로 데이터를 다룰 수 있었다.

github : https://github.com/choiprin/Arduino/tree/main/WiFi/ESP32_WiFi

저작자표시

'개발 > Arduino' 카테고리의 다른 글

Xiaomi Flower care + ESP32 / BLE통신 (0)	2023.03.13
Lora 및 485 통신 (0)	2023.03.08
ESP32 BLE & RS-232 RS-485통신 (0)	2023.03.02
성능지표 테스트 (0)	2023.01.10
성능지표 및 Arduino 함수 트리거 처리 (2)	2023.01.04

기록

기록

태그

댓글

공지사항

아카이브

----- 동작확인 -----

1) WiFi 테스트 - WiFi 송신코드

코드 설명

RS-232,RS-485로 변환된 데이터 수신코드

'개발 > Arduino' 카테고리의 다른 글

관련글

티스토리툴바