WiFi 액세스 포인트로서의 Portenta H7
이 튜토리얼에서는 Portenta H7을 액세스 포인트로 구성하고 모바일 장치에서 내장 RGB LED를 제어할 수 있는 간단한 웹 서버를 구축합니다.
WiFi 액세스 포인트로서의 Portenta H7
Portenta H7에는 온보드 WiFi 및 무선 연결 및 인터넷 액세스가 필요한 IoT 애플리케이션을 개발할 수 있는 블루투스 모듈이 함께 제공됩니다. 보드를 액세스 포인트로 바꾸면 자체적으로 WiFi 네트워크를 생성하고 다른 장치를 연결할 수 있습니다. 이 튜토리얼에서는 보드를 액세스 포인트 웹 서버로 설정하고 모바일 장치 브라우저의 HTML 페이지에 액세스 하여 내장 RGB LED의 빨간색, 녹색 및 파란색 LED를 원격으로 제어하는 방법을 배웁니다.
배울 것
- 내장 WiFi + Bluetooth 모듈에 대해.
- 클라이언트-서버 모델의 작동 방식
- 보드와 외부 장치 사이에 HTTP 통신 채널을 만드는 방법.
필수 하드웨어 및 소프트웨어
- Wonders H7 보드 ( https://store.arduino.cc/portenta-h7 )
- USB C 케이블 1 개 (USB A-USB C 또는 USB C-USB C)
- Arduino IDE 1.8.10+ 또는 Arduino Pro IDE 0.0.4 +
- 스마트 폰
액세스 포인트 구성
Portenta H7에는 WiFi 802.11b / g / n + Bluetooth 5.1 BR / EDR / LE를 지원하는 고성능 칩셋 인 Murata 1DX 가 있으며 WiFi에서 최대 65 Mbps PHY 데이터 속도와 Bluetooth에서 3 Mbps PHY 데이터 속도를 지원합니다. 이 모듈은 Portenta를 세 가지 작동 모드 (액세스 포인트, 스테이션 또는 둘 다)로 구성하는 데 도움이 됩니다. 이 튜토리얼에서는 액세스 포인트 구성에만 초점을 맞출 것입니다.
보드가 액세스 포인트로 작동하도록 구성된 경우 자체 무선 LAN (WLAN) 네트워크를 만들 수 있습니다. 이 모드에서 보드는 2.4 GHz에서 신호를 송수신하여 동일한 대역폭을 사용하는 WiFi 기능이 있는 다른 전자 장치를 보드에 연결할 수 있습니다.
액세스 포인트를 설정하면 보드가 HTTP를 통해 클라이언트 장치와 통신하는 웹 서버를 제공하는 클라이언트 서버 아키텍처를 생성합니다. 연결된 장치는 서버에 HTTP GET 요청을 하여 보드의 웹 서버가 제공하는 웹 페이지를 검색할 수 있습니다. 따라서 Portenta H7은 서버에서 더 복잡한 처리 작업이 발생하는 동안 외부 클라이언트 장치가 정보를 주고받을 수 있는 IoT 설루션 개발에 이상적인 보드입니다.
웹 서버 설정
이 튜토리얼에서는 보드를 액세스 포인트로 변환하고 이를 사용하여 HTML 웹 페이지를 제공하는 웹 서버를 설정합니다. 이 페이지에는 내장 LED의 빨강, 녹색 및 파랑 색상을 전환하는 버튼이 있습니다. 그런 다음 모바일 장치를 이 액세스 포인트에 연결하고 휴대폰의 브라우저를 통해이 웹 페이지에 액세스 합니다. 검색되면 모바일 장치에서 내장 RGB LED의 빨간색, 녹색 및 파란색 LED 상태를 제어할 수 있습니다.
1. 기본 설정
USB-C 케이블을 사용하여 Portenta 보드를 컴퓨터에 연결하고 Arduino IDE 또는 Arduino Pro IDE를 엽니다. 보드에서 Arduino 스케치 파일을 처음 실행하는 경우 진행하기 전에 Arduino 용 Portenta H7을 설정하는 방법을 확인하는 것이 좋습니다.
2. 웹 서버 스케치 만들기
다음으로 HTTP GET 요청을 처리하고 클라이언트 장치에 HTML 웹 페이지를 제공할 웹 서버 스케치를 만들어야 합니다. Wifi.h의 라이브러리는 아두이노 보드는 자신의 무선 랜이 내장 와이파이 모듈이 제공하는 기능을 사용할 수 있도록 필요한 모든 방법을 제공합니다. 웹 서버를 설정하려면 다음 코드를 복사하고 새 스케치 파일에 붙여 넣고 이름을 SimpleWebServer.ino로 지정합니다.
참고 : 라이브러리 내에서 최종 스케치에 액세스 할 수 있습니다. 예제-> Arduino_Pro_Tutorials-> Portenta H7을 WiFi 액세스 포인트로 사용-> SimpleWebServer
// by default the local IP address of will be 192.168.3.1
// you can override it with the following:
// WiFi.config(IPAddress(10, 0, 0, 1));
if(strlen(pass) < 8){
Serial.println("Creating access point failed");
Serial.println("The WiFi password must be at least 8 characters long");
// don't continue
while(true);
}
// print the network name (SSID);
Serial.print("Creating access point named: ");
Serial.println(ssid);
//Create the Access point
status = WiFi.beginAP(ssid,pass);
if(status != WL_AP_LISTENING){
Serial.println("Creating access point failed");
// don't continue
while (true);
}
// wait 10 seconds for connection:
delay(10000);
// start the web server on port 80
server.begin();
// you're connected now, so print out the status
printWiFiStatus();
}
void loop() {
// compare the previous status to the current status
if (status != WiFi.status()) {
// it has changed update the variable
status = WiFi.status();
if (status == WL_AP_CONNECTED) {
// a device has connected to the AP
Serial.println("Device connected to AP");
} else {
// a device has disconnected from the AP, and we are back in listening mode
Serial.println("Device disconnected from AP");
}
}
WiFiClient client = server.available(); // listen for incoming clients
if (client) { // if you get a client,
Serial.println("new client"); // print a message out the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
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
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();
// the content of the HTTP response follows the header:
client.print("<html><head>");
client.print("<style>");
client.print("* { font-family: sans-serif;}");
client.print("body { padding: 2em; font-size: 2em; text-align: center;}");
client.print("a { -webkit-appearance: button;-moz-appearance: button;appearance: button;text-decoration: none;color: initial; padding: 25px;} #red{color:red;} #green{color:green;} #blue{color:blue;}");
client.print("</style></head>");
client.print("<body><h1> LED CONTROLS </h1>");
client.print("<h2><span id=\"red\">RED </span> LED </h2>");
client.print("<a href=\"/Hr\">ON</a> <a href=\"/Lr\">OFF</a>");
client.print("<h2> <span id=\"green\">GREEN</span> LED </h2>");
client.print("<a href=\"/Hg\">ON</a> <a href=\"/Lg\">OFF</a>");
client.print("<h2> <span id=\"blue\">BLUE</span> LED </h2>");
client.print("<a href=\"/Hb\">ON</a> <a href=\"/Lb\">OFF</a>");
client.print("</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
}
// Check to see if the client request was "GET /H" or "GET /L":
if (currentLine.endsWith("GET /Hr")) {
digitalWrite(LEDR, LOW); // GET /Hr turns the Red LED on
}
if (currentLine.endsWith("GET /Lr")) {
digitalWrite(LEDR, HIGH); // GET /Lr turns the Red LED off
}
if (currentLine.endsWith("GET /Hg")){
digitalWrite(LEDG, LOW); // GET /Hg turns the Green LED on
}
if (currentLine.endsWith("GET /Lg")){
digitalWrite(LEDG, HIGH); // GET /Hg turns the Green LED on
}
if (currentLine.endsWith("GET /Hb")){
digitalWrite(LEDB, LOW); // GET /Hg turns the Green LED on
}
if (currentLine.endsWith("GET /Lb")){
digitalWrite(LEDB, HIGH); // GET /Hg turns the Green LED on
}
}
}
// close the connection:
client.stop();
Serial.println("client disconnected");
}
}
void printWiFiStatus() {
// print the SSID of the network you're attached to:
Serial.print("SSID: ");
Serial.println(WiFi.SSID());
// print your WiFi shield's IP address:
IPAddress ip = WiFi.localIP();
Serial.print("IP Address: ");
Serial.println(ip);
// print where to go in a browser:
Serial.print("To see this page in action, open a browser to http://");
Serial.println(ip);
}
이 스케치는 서버에서 HTML 웹 페이지를 요청하고 전용 URL을 사용하여 LED 상태를 변경하는 요청 모두에서 서버가 클라이언트로부터 들어오는 HTTP GET 요청을 처리하는 방법을 설명합니다.
여기에서 웹 페이지는 LED 상태를 전환하는 버튼이 있는 간단한 HTML 페이지입니다. 웹 페이지가 작동하는 방식은 다음과 같습니다. 웹 페이지의 버튼을 누를 때마다 클라이언트 장치 (이 경우 휴대폰)는 문자로 표시된 URL (이 경우 H 또는 L)에 HTTP GET 요청을 보냅니다. H는 HIGH를, L은 LOW를 의미함) 켜거나 꺼야 하는 LED 색상 r, g 또는 b. 예를 들어 빨간색 LED를 켜려면 URL은 / Hr입니다. 서버가 이 요청을 수신하면 해당 LED 상태를 변경하고 연결을 닫고 다음 요청을 계속 수신합니다.
Portenta H7에 내장된 RGB LED를 그라운드로 당겨서 불을 밝혀야 합니다. 즉, 각 핀의 전압 레벨이 LOW 이면 LED의 특정 색상이 켜지고 전압 레벨이 HIGH 이면 꺼집니다.
3. arduino_secrets.h 탭 생성
특정 네트워크를 식별하고 연결하는 데 필요한 SSID 및 암호와 같은 민감한 데이터를 별도의 파일에 보관하는 것이 좋습니다. 직렬 모니터 버튼 아래의 화살표 아이콘을 클릭하고 Arduino IDE에서 새 탭을 엽니다. 그러면 새 파일이 생성됩니다.
arduino_secrets.h 파일 이름을 지정하고 확인을 클릭합니다.
새 탭을 만들면 IDE에 빈 페이지가 표시됩니다. 두 개의 상수를 정의 SECRET_SSID 하고 SECRET_PASS에 WiFi 네트워크의 이름과 해당 비밀번호를 넣습니다. arduino_secrets.h 파일에 다음 줄을 추가 합니다.
# define SECRET_SSID "PortentaAccessPoint"
# define SECRET_PASS "123Qwerty"
SSID (PortentaAccessPoint) 및 암호 (123 Qwerty)는 이 자습서를 위해 만든 자리 표시 문자열입니다. 보안상의 이유로 기억하기 쉽지만 추측하기 쉽지 않은 이름으로 이름을 변경해야 합니다. 비밀번호는 8 자 이상이어야 합니다.
simpleWebServer.ino 스케치 파일의 SECRET_SSID 및 SECRET_PASS상수에 액세스 하려면 방금 만든 헤더 파일이 포함되어야 합니다. 스케치 파일에서 이것은 스케치 시작 부분의 다음 줄에 의해 이미 처리되었습니다.
# include “arduino_secrets.h”
4. 코드 업로드
보드 메뉴에서 Arduino Portenta H7 (M7 코어)을 선택하고 Portenta가 연결된 포트를 선택합니다. simpleWebServer.ino 스케치를 업로드하십시오. 이렇게 하면 미리 스케치가 자동으로 컴파일됩니다.
코드를 업로드했으면 직렬 모니터를 엽니다. 액세스 포인트의 IP 주소를 볼 수 있습니다. 또한 Device disconnected from AP액세스 포인트에 연결된 장치가 아직 없음을 의미하는 메시지도 표시됩니다.
5. Portenta 액세스 포인트에 연결
액세스 포인트가 활성화되고 외부 장치와 연결할 준비가 되면 모바일 장치의 네트워크 목록에서 PortentaAccessPoint를 찾을 수 있습니다. 이전에 정의한 비밀번호를 입력하면 스마트 폰이 액세스 포인트에 연결됩니다.
이제 모바일 장치에서 브라우저 창을 열고 직렬 모니터에 표시되는 Portenta의 IP 주소가 포함된 URL을 복사하여 붙여 넣으십시오.
URL을 입력하면 클라이언트는 코드에 지정된 HTML 웹 페이지를 가져오기 위해 웹 서버에 GET 요청을 보냅니다. 로드되면 모바일 브라우저에 웹 페이지가 표시됩니다.
6. 모바일 장치에서 보드에 액세스
직렬 모니터를 살펴보면 HTTP GET 요청의 세부 정보와 액세스 포인트에 연결된 장치의 기타 세부 정보를 볼 수 있습니다. GET 요청은 항상 다음 형식입니다.
GET URL HTTP/1.1
URL은 서버로 전송되는 문자열입니다. 이 경우에는 / Hx (x는 LED의 색상을 나타냄)입니다. URL이 포함된 요청은 서버에서 수신되고 연결이 성공했음을 나타내는 다음 HTTP / 1.1 응답으로 응답합니다.
HTTP/1.1 200 OK
서버가 이 요청에 응답하면 연결을 닫고 다음 GET 요청을 계속 수신합니다.
이제 모바일 브라우저에 표시된 버튼을 통해 빨간색, 녹색 및 파란색 LED의 상태를 전환할 수 있습니다. 버튼을 누를 때마다 클라이언트는 / Hx 또는 / Lx 형식의 URL에 GET 요청을 보냅니다. 여기서 x는 HTML 페이지에서 누른 버튼에 따라 'r', 'g'또는 'b'가 될 수 있습니다. 그런 다음 웹 서버는 클라이언트가 요청한 URL을 읽고 URL에 해당하는 LED 상태를 변경하고 연결을 닫습니다.
결론
이 튜토리얼은 보드를 액세스 포인트로 구성하고 웹 서버를 설정하여 온보드 WiFi + Bluetooth 모듈의 여러 기능 중 하나를 보여줍니다. 또한 간단한 클라이언트-서버 모델과 기본 HTTP 요청 및 응답이 작동하는 방법을 배웠습니다.
다음 단계
이제 보드를 액세스 포인트로 설정하고 클라이언트-서버 모델을 이해하는 방법을 배웠으므로 simpleWebServer.ino 스케치로 실험을 시작하십시오. 이 스케치는 필요에 따라 다양한 방식으로 조정할 수 있습니다. 예를 들어, 모바일 장치에서 내장 RGB LED의 깜박임 속도를 변경하는 슬라이더를 HTML 페이지에 추가할 수 있습니다.
본 포스팅의 원문을 참고하십시오.
'개발자 > Arduino' 카테고리의 다른 글
| Arduino Serial Monitor에 온도 섭씨 기호를 출력하는 쉬운 방법 (0) | 2021.03.14 |
|---|---|
| arduino sleep mode 절전 모드 사용하기 (0) | 2021.03.12 |
| Portenta H7 BLE 연결 (0) | 2021.03.03 |
| Portenta H7 USB Host로 사용하기 (0) | 2021.03.02 |
| Nano 33 BLE LSM9ds1 952Hz 샘플링 주파수 한계 (0) | 2021.02.24 |
| Portenta H7 Dual Core Processing (0) | 2021.02.24 |
| Arduino Nano 33 BLE 코어를 Mbed OS에서 구축하기로 선택한 이유 (0) | 2021.02.23 |
| Embed OS API List (0) | 2021.02.22 |