더트 너드: 식물을 기르기 전에 토양이 필요로 하는 것을 알아두세요. > 게시판

인스트

본문 계속 1/2

STEP 10. ESP32 프로그래밍

ESP32 프로그래밍

전자 장치를 조립했으므로 다음 단계는 XIAO ESP32-C6를 프로그래밍하는 것이었습니다.

펌웨어에는 네 가지 주요 작업이 있습니다:

Modbus RTU를 통해 토양 매개변수 7가지를 모두 읽습니다.
장치를 Wi-Fi에 연결합니다.
로컬 웹 서버를 통해 판독값을 JSON으로 제공합니다.
WS2812 LED를 사용해 Wi-Fi 상태를 표시합니다.

완성된 펌웨어는 프로젝트 파일과 함께 첨부되어 있지만, 아래에서 중요한 부분을 나누어 설명하겠습니다.

1. 필요한 라이브러리 설치

코드를 컴파일하기 전에 Arduino IDE의 라이브러리 관리자에서 다음 라이브러리를 설치하세요:

ModbusMaster (Doc Walker 제작)
Adafruit NeoPixel (Adafruit 제작)

Wi-Fi, WebServer 및 mDNS 라이브러리는 ESP32 보드 패키지에 포함되어 있습니다.

다음과 같은 include를 사용했습니다:

#include <Arduino.h>

#include <WiFi.h>

#include <WebServer.h>

#include <ESPmDNS.h>

#include <ModbusMaster.h>

#include <Adafruit_NeoPixel.h>

Arduino IDE에서 다음을 선택하세요:

Tools → Board → ESP32 Arduino → XIAO_ESP32C6

Serial Monitor는 115200 baud(보드레이트)로 사용했습니다.

2. Wi-Fi 및 핀 구성

Wi-Fi 자격 증명은 스케치 앞부분에 저장되어 있습니다.

여기에는 제 자격 증명 대신 자리 표시자를 넣었으므로, 사용하려는 네트워크의 자격 증명을 입력하세요:

const char* WIFI_SSID = "YOUR_WIFI_NAME";

const char* WIFI_PASSWORD = "YOUR_WIFI_PASSWORD";

하드웨어 연결에는 D6과 D7을 UART 핀으로, D3을 MAX485 방향 제어용으로, D2를 WS2812용으로 사용했습니다.

constexpr uint8_t RS485_RX_PIN = D7;

constexpr uint8_t RS485_TX_PIN = D6;

constexpr uint8_t RS485_DIR_PIN = D3;

constexpr uint8_t RGB_DATA_PIN = D2;

constexpr uint8_t RGB_PIXEL_COUNT = 1;

MAX485의 DE 핀과 /RE 핀은 서로 연결하고 D3으로 제어합니다.

3. Modbus 구성

제 센서는 Modbus RTU를 사용해 7가지 판독값을 모두 전송합니다.

구성은 한곳에 모아 두었으므로, 다른 센서가 다른 baud rate, 슬레이브 주소 또는 레지스터 레이아웃을 사용하는 경우 쉽게 변경할 수 있습니다.

constexpr uint32_t SENSOR_BAUD = 9600;

constexpr uint8_t SENSOR_SLAVE_ID = 1;

constexpr uint16_t FIRST_REGISTER = 0x0000;

constexpr uint8_t REGISTER_COUNT = 7;

constexpr bool USE_INPUT_REGISTERS = false;

constexpr unsigned long SENSOR_INTERVAL_MS = 2000;

constexpr unsigned long WIFI_RETRY_INTERVAL_MS = 10000;

USE_INPUT_REGISTERS를 false로 설정하면 펌웨어는 Modbus 기능 0x03을 사용하며, 이 기능은 홀딩 레지스터를 읽습니다.

센서 설명서에 기능 0x04가 지정되어 있다면 다음과 같이 변경하세요:

constexpr bool USE_INPUT_REGISTERS = true;

4. 주요 객체 생성

다음으로 UART 통신, Modbus, 웹 서버 및 WS2812용 객체를 각각 생성했습니다.

HardwareSerial soilSerial(1);

ModbusMaster modbus;

WebServer server(80);

Adafruit_NeoPixel statusPixel(

RGB_PIXEL_COUNT,

RGB_DATA_PIN,

NEO_GRB + NEO_KHZ800

);

웹 서버는 포트 80에서 실행되므로 별도의 포트 번호를 추가하지 않고 ESP32의 IP 주소로 판독값에 액세스할 수 있습니다.

5. 센서 판독값 저장

서로 관련 없는 전역 변수 7개를 두는 대신 모든 값을 하나의 구조체에 저장했습니다.

struct SoilReadings {

float moisture = 0.0f;

float temperature = 0.0f;

float ph = 0.0f;

float ec = 0.0f;

uint16_t nitrogen = 0;

uint16_t phosphorus = 0;

uint16_t potassium = 0;

bool valid = false;

uint8_t modbusResult = 0xFF;

unsigned long updatedAt = 0;

};

SoilReadings soil;

valid 값은 센서가 응답하는지 웹 대시보드에 알려 주고, modbusResult는 통신 오류를 디버깅하는 데 도움이 됩니다.

6. Wi-Fi 상태 LED

Serial Monitor를 열지 않아도 장치 상태를 알 수 있게 하고 싶었습니다.

ESP32의 연결이 끊겨 있는 동안 RGB LED는 빨간색으로 켜져 있고, Wi-Fi에 연결되면 녹색으로 바뀝니다.

void setStatusPixel(bool wifiConnected) {

const uint32_t color = wifiConnected

? statusPixel.Color(0, 90, 0)

: statusPixel.Color(110, 0, 0);

statusPixel.setPixelColor(0, color);

statusPixel.show();

}

LED는 표시기로만 사용하면 되므로 밝기는 상당히 낮게 설정했습니다.

statusPixel.begin();

statusPixel.setBrightness(55);

setStatusPixel(false);

7. MAX485 제어

RS485는 반이중 방식이므로 MAX485는 동시에 송신하고 수신할 수 없습니다.

Modbus 요청을 보내기 전에 펌웨어가 송신을 활성화합니다. 요청을 보내자마자 모듈을 다시 수신 모드로 전환합니다.

void preTransmission() {

digitalWrite(RS485_DIR_PIN, HIGH);

delayMicroseconds(200);

}

void postTransmission() {

delayMicroseconds(200);

digitalWrite(RS485_DIR_PIN, LOW);

}

이 함수들은 설정 중에 Modbus 라이브러리에 등록됩니다:

modbus.preTransmission(preTransmission);

modbus.postTransmission(postTransmission);

이 방향 제어가 없으면 ESP32는 요청을 올바르게 보낼 수는 있어도 센서의 응답을 전혀 받지 못할 수 있습니다.

8. 7가지 토양 매개변수 읽기

펌웨어는 주소 0x0000에서 시작하는 연속 레지스터 7개를 요청합니다.

bool readSoilSensor() {

uint8_t result;

if (USE_INPUT_REGISTERS) {

result = modbus.readInputRegisters(

FIRST_REGISTER,

REGISTER_COUNT

);

} else {

result = modbus.readHoldingRegisters(

FIRST_REGISTER,

REGISTER_COUNT

);

}

soil.modbusResult = result;

요청이 실패하면 데이터를 유효하지 않은 것으로 표시하고 Serial Monitor에 Modbus 결과를 출력합니다.

if (result != ModbusMaster::ku8MBSuccess) {

soil.valid = false;

Serial.printf(

"Modbus read failed. Result: 0x%02X\n",

result

);

return false;

}

요청이 성공하면 응답 버퍼에 7가지 측정값이 모두 들어 있습니다.

const uint16_t rawMoisture =

modbus.getResponseBuffer(0);

const int16_t rawTemperature =

static_cast<int16_t>(

modbus.getResponseBuffer(1)

);

const uint16_t rawEc =

modbus.getResponseBuffer(2);

const uint16_t rawPh =

modbus.getResponseBuffer(3);

그런 다음 원시 값을 실제 단위로 변환해야 합니다.

soil.moisture = rawMoisture / 10.0f;

soil.temperature = rawTemperature / 10.0f;

soil.ec = rawEc / 1000.0f;

soil.ph = rawPh / 10.0f;

soil.nitrogen =

modbus.getResponseBuffer(4);

soil.phosphorus =

modbus.getResponseBuffer(5);

soil.potassium =

modbus.getResponseBuffer(6);

soil.valid = true;

soil.updatedAt = millis();

여기서 사용하는 레지스터 순서는 다음과 같습니다:

마지막으로 값을 Serial Monitor에 출력합니다. 덕분에 웹사이트를 사용하기 전에 전자 장치를 더 쉽게 테스트할 수 있었습니다.

Serial.println("\n--- Soil reading ---");

Serial.printf(

"Moisture: %.1f %%\n",

soil.moisture

);

Serial.printf(

"Temperature: %.1f C\n",

soil.temperature

);

Serial.printf("pH: %.1f\n", soil.ph);

Serial.printf("EC: %.3f mS/cm\n", soil.ec);

Serial.printf(

"Nitrogen: %u mg/kg\n",

soil.nitrogen

);

Serial.printf(

"Phosphorus: %u mg/kg\n",

soil.phosphorus

);

Serial.printf(

"Potassium: %u mg/kg\n",

soil.potassium

);

return true;

}

이 센서의 버전이 다르면 서로 다른 레지스터나 스케일링을 사용하는 경우가 있습니다. 센서가 응답하지만 판독값이 잘못된 순서로 표시된다면 Modbus 설명서에 따라 조정해야 할 부분은 바로 여기입니다.

9. 판독값을 JSON으로 변환

웹사이트에는 예측 가능한 형식이 필요하므로 판독값을 JSON 객체로 변환합니다.

String readingsJson() {

String json;

json.reserve(360);

json += "{";

json += "\"moisture\":" +

String(soil.moisture, 1) + ",";

json += "\"temperature\":" +

String(soil.temperature, 1) + ",";

json += "\"ph\":" +

String(soil.ph, 1) + ",";

json += "\"ec\":" +

String(soil.ec, 3) + ",";

json += "\"nitrogen\":" +

String(soil.nitrogen) + ",";

json += "\"phosphorus\":" +

String(soil.phosphorus) + ",";

json += "\"potassium\":" +

String(soil.potassium) + ",";

json += "\"sensorConnected\":" +

String(soil.valid ? "true" : "false") + ",";

json += "\"wifiConnected\":" +

String(

WiFi.status() == WL_CONNECTED

? "true"

: "false"

) + ",";

json += "\"ip\":\"" +

WiFi.localIP().toString() + "\",";

json += "\"updatedAtMs\":" +

String(soil.updatedAt) + ",";

json += "\"modbusResult\":" +

String(soil.modbusResult);

json += "}";

return json;

}

정상적인 응답은 다음과 같습니다:

{

"moisture": 34.2,

"temperature": 26.4,

"ph": 6.9,

"ec": 1.2,

"nitrogen": 42,

"phosphorus": 38,

"potassium": 156,

"sensorConnected": true,

"wifiConnected": true,

"ip": "192.168.1.105",

"updatedAtMs": 24518,

"modbusResult": 0

}

웹사이트는 주로 처음 7개 값을 사용합니다. 나머지 필드는 장치를 확인하고 연결 문제를 진단하는 데 유용합니다.

10. 웹사이트의 데이터 요청 허용

웹사이트는 컴퓨터에서 실행되고 API는 ESP32에서 실행되므로 브라우저는 두 대상을 서로 다른 출처로 취급합니다.

localhost 대시보드가 센서 데이터를 요청할 수 있도록 CORS 헤더를 추가했습니다.

void addCorsHeaders() {

server.sendHeader(

"Access-Control-Allow-Origin",

"*"

);

server.sendHeader(

"Access-Control-Allow-Methods",

"GET, OPTIONS"

);

server.sendHeader(

"Access-Control-Allow-Headers",

"Content-Type"

);

server.sendHeader(

"Cache-Control",

"no-store"

);

}

no-store 헤더는 브라우저가 이전에 캐시된 판독값을 표시하지 않도록 합니다.

11. /data 엔드포인트 생성

Dirt Nerd에서 사용하는 주요 엔드포인트는 /data입니다.

void handleData() {

addCorsHeaders();

server.send(

200,

"application/json",

readingsJson()

);

}

ESP32와 센서가 응답하는지 확인하기 위한 더 간단한 /health 엔드포인트도 추가했습니다.

void handleHealth() {

addCorsHeaders();

String json = "{\"status\":\"";

json += soil.valid ? "ok" : "sensor_error";

json += "\",\"ip\":\"" +

WiFi.localIP().toString() +

"\"}";

server.send(

200,

"application/json",

json

);

}

서버가 시작될 때 엔드포인트가 등록됩니다:

void startWebServer() {

server.on("/", HTTP_GET, handleRoot);

server.on("/data", HTTP_GET, handleData);

server.on("/health", HTTP_GET, handleHealth);

server.on("/", HTTP_OPTIONS, handleOptions);

server.on("/data", HTTP_OPTIONS, handleOptions);

server.on("/health", HTTP_OPTIONS, handleOptions);

server.onNotFound([]() {

addCorsHeaders();

server.send(

404,

"application/json",

"{\"error\":\"Not found\"}"

);

});

server.begin();

Serial.println("HTTP server started");

}

또한 /에 간단한 진단 페이지를 포함했습니다. 이를 통해 브라우저에서 ESP32의 IP 주소를 직접 열어 전체 Dirt Nerd 대시보드를 시작하지 않고도 센서를 확인할 수 있습니다.

12. Wi-Fi 연결

시작 중에는 ESP32가 연결을 시도하는 동안 RGB LED가 빨간색으로 켜져 있습니다.

void connectWifi() {

Serial.printf(

"Connecting to Wi-Fi: %s\n",

WIFI_SSID

);

WiFi.mode(WIFI_STA);

WiFi.setAutoReconnect(true);

WiFi.begin(WIFI_SSID, WIFI_PASSWORD);

const unsigned long started = millis();

while (

WiFi.status() != WL_CONNECTED &&

millis() - started < 20000

) {

setStatusPixel(false);

delay(350);

Serial.print('.');

}

Serial.println();

연결되면 LED가 녹색으로 바뀌고 IP 주소가 Serial Monitor에 출력됩니다.

const bool connected =

WiFi.status() == WL_CONNECTED;

setStatusPixel(connected);

previousWifiState = connected;

if (connected) {

Serial.println("Wi-Fi connected");

Serial.print(

"Dirt Nerd IP address: http://"

);

Serial.println(WiFi.localIP());

Serial.print("JSON endpoint: http://");

Serial.print(WiFi.localIP());

Serial.println("/data");

if (MDNS.begin("dirt-nerd")) {

Serial.println(

"Local name: http://dirt-nerd.local"

);

}

} else {

Serial.println(

"Wi-Fi connection timed out; "

"automatic retries will continue."

);

}

숫자로 표시된 IP 주소를 Dirt Nerd 웹사이트에 입력합니다.

13. 자동 Wi-Fi 재연결

라우터나 핫스팟의 연결이 일시적으로 끊길 때마다 장치를 재설정해야 하는 상황은 피하고 싶었습니다.

void monitorWifi() {

const bool connected =

WiFi.status() == WL_CONNECTED;

if (connected != previousWifiState) {

setStatusPixel(connected);

previousWifiState = connected;

if (connected) {

Serial.print(

"Wi-Fi reconnected. IP: http://"

);

Serial.println(WiFi.localIP());

} else {

Serial.println("Wi-Fi disconnected");

}

if (

!connected &&

millis() - lastWifiRetry >=

WIFI_RETRY_INTERVAL_MS

) {

lastWifiRetry = millis();

Serial.println(

"Retrying Wi-Fi connection..."

);

WiFi.disconnect();

WiFi.begin(WIFI_SSID, WIFI_PASSWORD);

}

이 함수는 시작 후에도 RGB 상태가 정확하게 유지되도록 합니다.

14. 설정

setup() 함수는 상태 LED, MAX485, UART, Modbus 연결, Wi-Fi 및 웹 서버를 초기화합니다.

void setup() {

Serial.begin(115200);

delay(1200);

Serial.println("\nStarting Dirt Nerd...");

statusPixel.begin();

statusPixel.setBrightness(55);

setStatusPixel(false);

pinMode(RS485_DIR_PIN, OUTPUT);

digitalWrite(RS485_DIR_PIN, LOW);

soilSerial.begin(

SENSOR_BAUD,

SERIAL_8N1,

RS485_RX_PIN,

RS485_TX_PIN

);

modbus.begin(

SENSOR_SLAVE_ID,

soilSerial

);

modbus.preTransmission(preTransmission);

modbus.postTransmission(postTransmission);

connectWifi();

startWebServer();

readSoilSensor();

}

15. 메인 루프

메인 루프는 상당히 간단합니다.

void loop() {

server.handleClient();

monitorWifi();

if (

millis() - lastSensorRead >=

SENSOR_INTERVAL_MS

) {

lastSensorRead = millis();

readSoilSensor();

}

delay(2);

}

ESP32는 브라우저 요청에 응답하고 Wi-Fi 연결을 모니터링하면서 2초마다 센서를 읽습니다.

펌웨어를 업로드한 후 115200 baud(보드레이트)로 Serial Monitor를 엽니다. RGB LED가 녹색으로 바뀌면 터미널에 표시된 IP 주소를 복사합니다.

그러면 센서 데이터를 다음 주소에서 이용할 수 있습니다:

http://ESP32-IP/data

이제 하드웨어가 로컬 네트워크를 통해 구조화된 데이터를 생성합니다. 웹사이트 단계에서는 Dirt Nerd가 이 엔드포인트에 요청을 보내 원시 판독값을 대시보드, 작물 비교 및 권장 사항으로 변환하는 방법을 보여드리겠습니다.

<div class="instructable-post" style="font-size:18px;line-height:1.8;">
<p><strong>본문 계속 1/2</strong></p>
<p><br></p>
<hr>
<p><br></p>
<h2 style="font-size:26px;line-height:1.4;font-weight:bold;"><strong>STEP 10. ESP32 프로그래밍</strong></h2>
<p><br></p>
<p><img src="https://gongbangunion.com/data/editor/2608/1c7d13ddbf8a5d7d573f7c71d5f510ad_1788139870_3199.png" alt="ESP32 프로그래밍" style="max-width:100%;height:auto;"></p>
<p><br></p>
<p>전자 장치를 조립했으므로 다음 단계는 XIAO ESP32-C6를 프로그래밍하는 것이었습니다.</p>
<p>펌웨어에는 네 가지 주요 작업이 있습니다:</p>
<ol><li data-list="bullet">Modbus RTU를 통해 토양 매개변수 7가지를 모두 읽습니다.</li><li data-list="bullet">장치를 Wi-Fi에 연결합니다.</li><li data-list="bullet">로컬 웹 서버를 통해 판독값을 JSON으로 제공합니다.</li><li data-list="bullet">WS2812 LED를 사용해 Wi-Fi 상태를 표시합니다.</li></ol>
<p>완성된 펌웨어는 프로젝트 파일과 함께 첨부되어 있지만, 아래에서 중요한 부분을 나누어 설명하겠습니다.</p>
<h3>1. 필요한 라이브러리 설치</h3>
<p>코드를 컴파일하기 전에 Arduino IDE의 라이브러리 관리자에서 다음 라이브러리를 설치하세요:</p>
<ol><li data-list="bullet"><strong>ModbusMaster</strong> (Doc Walker 제작)</li><li data-list="bullet"><strong>Adafruit NeoPixel</strong> (Adafruit 제작)</li></ol>
<p>Wi-Fi, WebServer 및 mDNS 라이브러리는 ESP32 보드 패키지에 포함되어 있습니다.</p>
<p>다음과 같은 include를 사용했습니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">#include &lt;Arduino.h&gt;</div><div class="ql-code-block" data-language="plain">#include &lt;WiFi.h&gt;</div><div class="ql-code-block" data-language="plain">#include &lt;WebServer.h&gt;</div><div class="ql-code-block" data-language="plain">#include &lt;ESPmDNS.h&gt;</div><div class="ql-code-block" data-language="plain">#include &lt;ModbusMaster.h&gt;</div><div class="ql-code-block" data-language="plain">#include &lt;Adafruit_NeoPixel.h&gt;</div></div>
<p>Arduino IDE에서 다음을 선택하세요:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">Tools → Board → ESP32 Arduino → XIAO_ESP32C6</div></div>
<p>Serial Monitor는 115200 baud(보드레이트)로 사용했습니다.</p>
<h3>2. Wi-Fi 및 핀 구성</h3>
<p>Wi-Fi 자격 증명은 스케치 앞부분에 저장되어 있습니다.</p>
<p>여기에는 제 자격 증명 대신 자리 표시자를 넣었으므로, 사용하려는 네트워크의 자격 증명을 입력하세요:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">const char* WIFI_SSID = "YOUR_WIFI_NAME";</div><div class="ql-code-block" data-language="plain">const char* WIFI_PASSWORD = "YOUR_WIFI_PASSWORD";</div></div>
<p>하드웨어 연결에는 D6과 D7을 UART 핀으로, D3을 MAX485 방향 제어용으로, D2를 WS2812용으로 사용했습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">constexpr uint8_t RS485_RX_PIN = D7;</div><div class="ql-code-block" data-language="plain">constexpr uint8_t RS485_TX_PIN = D6;</div><div class="ql-code-block" data-language="plain">constexpr uint8_t RS485_DIR_PIN = D3;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">constexpr uint8_t RGB_DATA_PIN = D2;</div><div class="ql-code-block" data-language="plain">constexpr uint8_t RGB_PIXEL_COUNT = 1;</div></div>
<p>MAX485의 DE 핀과 /RE 핀은 서로 연결하고 D3으로 제어합니다.</p>
<h3>3. Modbus 구성</h3>
<p>제 센서는 Modbus RTU를 사용해 7가지 판독값을 모두 전송합니다.</p>
<p>구성은 한곳에 모아 두었으므로, 다른 센서가 다른 baud rate, 슬레이브 주소 또는 레지스터 레이아웃을 사용하는 경우 쉽게 변경할 수 있습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">constexpr uint32_t SENSOR_BAUD = 9600;</div><div class="ql-code-block" data-language="plain">constexpr uint8_t SENSOR_SLAVE_ID = 1;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">constexpr uint16_t FIRST_REGISTER = 0x0000;</div><div class="ql-code-block" data-language="plain">constexpr uint8_t REGISTER_COUNT = 7;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">constexpr bool USE_INPUT_REGISTERS = false;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">constexpr unsigned long SENSOR_INTERVAL_MS = 2000;</div><div class="ql-code-block" data-language="plain">constexpr unsigned long WIFI_RETRY_INTERVAL_MS = 10000;</div></div>
<p>USE_INPUT_REGISTERS를 false로 설정하면 펌웨어는 Modbus 기능 0x03을 사용하며, 이 기능은 홀딩 레지스터를 읽습니다.</p>
<p>센서 설명서에 기능 0x04가 지정되어 있다면 다음과 같이 변경하세요:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">constexpr bool USE_INPUT_REGISTERS = true;</div></div>
<h3>4. 주요 객체 생성</h3>
<p>다음으로 UART 통신, Modbus, 웹 서버 및 WS2812용 객체를 각각 생성했습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">HardwareSerial soilSerial(1);</div><div class="ql-code-block" data-language="plain">ModbusMaster modbus;</div><div class="ql-code-block" data-language="plain">WebServer server(80);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">Adafruit_NeoPixel statusPixel(</div><div class="ql-code-block" data-language="plain">  RGB_PIXEL_COUNT,</div><div class="ql-code-block" data-language="plain">  RGB_DATA_PIN,</div><div class="ql-code-block" data-language="plain">  NEO_GRB + NEO_KHZ800</div><div class="ql-code-block" data-language="plain">);</div></div>
<p>웹 서버는 포트 80에서 실행되므로 별도의 포트 번호를 추가하지 않고 ESP32의 IP 주소로 판독값에 액세스할 수 있습니다.</p>
<h3>5. 센서 판독값 저장</h3>
<p>서로 관련 없는 전역 변수 7개를 두는 대신 모든 값을 하나의 구조체에 저장했습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">struct SoilReadings {</div><div class="ql-code-block" data-language="plain">  float moisture = 0.0f;</div><div class="ql-code-block" data-language="plain">  float temperature = 0.0f;</div><div class="ql-code-block" data-language="plain">  float ph = 0.0f;</div><div class="ql-code-block" data-language="plain">  float ec = 0.0f;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  uint16_t nitrogen = 0;</div><div class="ql-code-block" data-language="plain">  uint16_t phosphorus = 0;</div><div class="ql-code-block" data-language="plain">  uint16_t potassium = 0;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  bool valid = false;</div><div class="ql-code-block" data-language="plain">  uint8_t modbusResult = 0xFF;</div><div class="ql-code-block" data-language="plain">  unsigned long updatedAt = 0;</div><div class="ql-code-block" data-language="plain">};</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">SoilReadings soil;</div></div>
<p>valid 값은 센서가 응답하는지 웹 대시보드에 알려 주고, modbusResult는 통신 오류를 디버깅하는 데 도움이 됩니다.</p>
<h3>6. Wi-Fi 상태 LED</h3>
<p>Serial Monitor를 열지 않아도 장치 상태를 알 수 있게 하고 싶었습니다.</p>
<p>ESP32의 연결이 끊겨 있는 동안 RGB LED는 빨간색으로 켜져 있고, Wi-Fi에 연결되면 녹색으로 바뀝니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">void setStatusPixel(bool wifiConnected) {</div><div class="ql-code-block" data-language="plain">  const uint32_t color = wifiConnected</div><div class="ql-code-block" data-language="plain">    ? statusPixel.Color(0, 90, 0)</div><div class="ql-code-block" data-language="plain">    : statusPixel.Color(110, 0, 0);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  statusPixel.setPixelColor(0, color);</div><div class="ql-code-block" data-language="plain">  statusPixel.show();</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>LED는 표시기로만 사용하면 되므로 밝기는 상당히 낮게 설정했습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">statusPixel.begin();</div><div class="ql-code-block" data-language="plain">statusPixel.setBrightness(55);</div><div class="ql-code-block" data-language="plain">setStatusPixel(false);</div></div>
<h3>7. MAX485 제어</h3>
<p>RS485는 반이중 방식이므로 MAX485는 동시에 송신하고 수신할 수 없습니다.</p>
<p>Modbus 요청을 보내기 전에 펌웨어가 송신을 활성화합니다. 요청을 보내자마자 모듈을 다시 수신 모드로 전환합니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">void preTransmission() {</div><div class="ql-code-block" data-language="plain">  digitalWrite(RS485_DIR_PIN, HIGH);</div><div class="ql-code-block" data-language="plain">  delayMicroseconds(200);</div><div class="ql-code-block" data-language="plain">}</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">void postTransmission() {</div><div class="ql-code-block" data-language="plain">  delayMicroseconds(200);</div><div class="ql-code-block" data-language="plain">  digitalWrite(RS485_DIR_PIN, LOW);</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>이 함수들은 설정 중에 Modbus 라이브러리에 등록됩니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">modbus.preTransmission(preTransmission);</div><div class="ql-code-block" data-language="plain">modbus.postTransmission(postTransmission);</div></div>
<p>이 방향 제어가 없으면 ESP32는 요청을 올바르게 보낼 수는 있어도 센서의 응답을 전혀 받지 못할 수 있습니다.</p>
<h3>8. 7가지 토양 매개변수 읽기</h3>
<p>펌웨어는 주소 0x0000에서 시작하는 연속 레지스터 7개를 요청합니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">bool readSoilSensor() {</div><div class="ql-code-block" data-language="plain">  uint8_t result;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (USE_INPUT_REGISTERS) {</div><div class="ql-code-block" data-language="plain">    result = modbus.readInputRegisters(</div><div class="ql-code-block" data-language="plain">      FIRST_REGISTER,</div><div class="ql-code-block" data-language="plain">      REGISTER_COUNT</div><div class="ql-code-block" data-language="plain">    );</div><div class="ql-code-block" data-language="plain">  } else {</div><div class="ql-code-block" data-language="plain">    result = modbus.readHoldingRegisters(</div><div class="ql-code-block" data-language="plain">      FIRST_REGISTER,</div><div class="ql-code-block" data-language="plain">      REGISTER_COUNT</div><div class="ql-code-block" data-language="plain">    );</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  soil.modbusResult = result;</div></div>
<p>요청이 실패하면 데이터를 유효하지 않은 것으로 표시하고 Serial Monitor에 Modbus 결과를 출력합니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">  if (result != ModbusMaster::ku8MBSuccess) {</div><div class="ql-code-block" data-language="plain">    soil.valid = false;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    Serial.printf(</div><div class="ql-code-block" data-language="plain">      "Modbus read failed. Result: 0x%02X\n",</div><div class="ql-code-block" data-language="plain">      result</div><div class="ql-code-block" data-language="plain">    );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    return false;</div><div class="ql-code-block" data-language="plain">  }</div></div>
<p>요청이 성공하면 응답 버퍼에 7가지 측정값이 모두 들어 있습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">  const uint16_t rawMoisture =</div><div class="ql-code-block" data-language="plain">    modbus.getResponseBuffer(0);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  const int16_t rawTemperature =</div><div class="ql-code-block" data-language="plain">    static_cast&lt;int16_t&gt;(</div><div class="ql-code-block" data-language="plain">      modbus.getResponseBuffer(1)</div><div class="ql-code-block" data-language="plain">    );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  const uint16_t rawEc =</div><div class="ql-code-block" data-language="plain">    modbus.getResponseBuffer(2);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  const uint16_t rawPh =</div><div class="ql-code-block" data-language="plain">    modbus.getResponseBuffer(3);</div></div>
<p>그런 다음 원시 값을 실제 단위로 변환해야 합니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">  soil.moisture = rawMoisture / 10.0f;</div><div class="ql-code-block" data-language="plain">  soil.temperature = rawTemperature / 10.0f;</div><div class="ql-code-block" data-language="plain">  soil.ec = rawEc / 1000.0f;</div><div class="ql-code-block" data-language="plain">  soil.ph = rawPh / 10.0f;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  soil.nitrogen =</div><div class="ql-code-block" data-language="plain">    modbus.getResponseBuffer(4);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  soil.phosphorus =</div><div class="ql-code-block" data-language="plain">    modbus.getResponseBuffer(5);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  soil.potassium =</div><div class="ql-code-block" data-language="plain">    modbus.getResponseBuffer(6);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  soil.valid = true;</div><div class="ql-code-block" data-language="plain">  soil.updatedAt = millis();</div></div>
<p>여기서 사용하는 레지스터 순서는 다음과 같습니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">Register 0 → Moisture</div><div class="ql-code-block" data-language="plain">Register 1 → Temperature</div><div class="ql-code-block" data-language="plain">Register 2 → Electrical conductivity</div><div class="ql-code-block" data-language="plain">Register 3 → pH</div><div class="ql-code-block" data-language="plain">Register 4 → Nitrogen</div><div class="ql-code-block" data-language="plain">Register 5 → Phosphorus</div><div class="ql-code-block" data-language="plain">Register 6 → Potassium</div></div>
<p>마지막으로 값을 Serial Monitor에 출력합니다. 덕분에 웹사이트를 사용하기 전에 전자 장치를 더 쉽게 테스트할 수 있었습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">  Serial.println("\n--- Soil reading ---");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  Serial.printf(</div><div class="ql-code-block" data-language="plain">    "Moisture:    %.1f %%\n",</div><div class="ql-code-block" data-language="plain">    soil.moisture</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  Serial.printf(</div><div class="ql-code-block" data-language="plain">    "Temperature: %.1f C\n",</div><div class="ql-code-block" data-language="plain">    soil.temperature</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  Serial.printf("pH:          %.1f\n", soil.ph);</div><div class="ql-code-block" data-language="plain">  Serial.printf("EC:          %.3f mS/cm\n", soil.ec);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  Serial.printf(</div><div class="ql-code-block" data-language="plain">    "Nitrogen:    %u mg/kg\n",</div><div class="ql-code-block" data-language="plain">    soil.nitrogen</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  Serial.printf(</div><div class="ql-code-block" data-language="plain">    "Phosphorus:  %u mg/kg\n",</div><div class="ql-code-block" data-language="plain">    soil.phosphorus</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  Serial.printf(</div><div class="ql-code-block" data-language="plain">    "Potassium:   %u mg/kg\n",</div><div class="ql-code-block" data-language="plain">    soil.potassium</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  return true;</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>이 센서의 버전이 다르면 서로 다른 레지스터나 스케일링을 사용하는 경우가 있습니다. 센서가 응답하지만 판독값이 잘못된 순서로 표시된다면 Modbus 설명서에 따라 조정해야 할 부분은 바로 여기입니다.</p>
<h3>9. 판독값을 JSON으로 변환</h3>
<p>웹사이트에는 예측 가능한 형식이 필요하므로 판독값을 JSON 객체로 변환합니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">String readingsJson() {</div><div class="ql-code-block" data-language="plain">  String json;</div><div class="ql-code-block" data-language="plain">  json.reserve(360);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "{";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"moisture\":" +</div><div class="ql-code-block" data-language="plain">          String(soil.moisture, 1) + ",";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"temperature\":" +</div><div class="ql-code-block" data-language="plain">          String(soil.temperature, 1) + ",";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"ph\":" +</div><div class="ql-code-block" data-language="plain">          String(soil.ph, 1) + ",";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"ec\":" +</div><div class="ql-code-block" data-language="plain">          String(soil.ec, 3) + ",";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"nitrogen\":" +</div><div class="ql-code-block" data-language="plain">          String(soil.nitrogen) + ",";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"phosphorus\":" +</div><div class="ql-code-block" data-language="plain">          String(soil.phosphorus) + ",";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"potassium\":" +</div><div class="ql-code-block" data-language="plain">          String(soil.potassium) + ",";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"sensorConnected\":" +</div><div class="ql-code-block" data-language="plain">          String(soil.valid ? "true" : "false") + ",";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"wifiConnected\":" +</div><div class="ql-code-block" data-language="plain">          String(</div><div class="ql-code-block" data-language="plain">            WiFi.status() == WL_CONNECTED</div><div class="ql-code-block" data-language="plain">              ? "true"</div><div class="ql-code-block" data-language="plain">              : "false"</div><div class="ql-code-block" data-language="plain">          ) + ",";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"ip\":\"" +</div><div class="ql-code-block" data-language="plain">          WiFi.localIP().toString() + "\",";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"updatedAtMs\":" +</div><div class="ql-code-block" data-language="plain">          String(soil.updatedAt) + ",";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\"modbusResult\":" +</div><div class="ql-code-block" data-language="plain">          String(soil.modbusResult);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "}";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  return json;</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>정상적인 응답은 다음과 같습니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">{</div><div class="ql-code-block" data-language="plain">  "moisture": 34.2,</div><div class="ql-code-block" data-language="plain">  "temperature": 26.4,</div><div class="ql-code-block" data-language="plain">  "ph": 6.9,</div><div class="ql-code-block" data-language="plain">  "ec": 1.2,</div><div class="ql-code-block" data-language="plain">  "nitrogen": 42,</div><div class="ql-code-block" data-language="plain">  "phosphorus": 38,</div><div class="ql-code-block" data-language="plain">  "potassium": 156,</div><div class="ql-code-block" data-language="plain">  "sensorConnected": true,</div><div class="ql-code-block" data-language="plain">  "wifiConnected": true,</div><div class="ql-code-block" data-language="plain">  "ip": "192.168.1.105",</div><div class="ql-code-block" data-language="plain">  "updatedAtMs": 24518,</div><div class="ql-code-block" data-language="plain">  "modbusResult": 0</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>웹사이트는 주로 처음 7개 값을 사용합니다. 나머지 필드는 장치를 확인하고 연결 문제를 진단하는 데 유용합니다.</p>
<h3>10. 웹사이트의 데이터 요청 허용</h3>
<p>웹사이트는 컴퓨터에서 실행되고 API는 ESP32에서 실행되므로 브라우저는 두 대상을 서로 다른 출처로 취급합니다.</p>
<p>localhost 대시보드가 센서 데이터를 요청할 수 있도록 CORS 헤더를 추가했습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">void addCorsHeaders() {</div><div class="ql-code-block" data-language="plain">  server.sendHeader(</div><div class="ql-code-block" data-language="plain">    "Access-Control-Allow-Origin",</div><div class="ql-code-block" data-language="plain">    "*"</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  server.sendHeader(</div><div class="ql-code-block" data-language="plain">    "Access-Control-Allow-Methods",</div><div class="ql-code-block" data-language="plain">    "GET, OPTIONS"</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  server.sendHeader(</div><div class="ql-code-block" data-language="plain">    "Access-Control-Allow-Headers",</div><div class="ql-code-block" data-language="plain">    "Content-Type"</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  server.sendHeader(</div><div class="ql-code-block" data-language="plain">    "Cache-Control",</div><div class="ql-code-block" data-language="plain">    "no-store"</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>no-store 헤더는 브라우저가 이전에 캐시된 판독값을 표시하지 않도록 합니다.</p>
<h3>11. /data 엔드포인트 생성</h3>
<p>Dirt Nerd에서 사용하는 주요 엔드포인트는 /data입니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">void handleData() {</div><div class="ql-code-block" data-language="plain">  addCorsHeaders();</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  server.send(</div><div class="ql-code-block" data-language="plain">    200,</div><div class="ql-code-block" data-language="plain">    "application/json",</div><div class="ql-code-block" data-language="plain">    readingsJson()</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>ESP32와 센서가 응답하는지 확인하기 위한 더 간단한 /health 엔드포인트도 추가했습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">void handleHealth() {</div><div class="ql-code-block" data-language="plain">  addCorsHeaders();</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  String json = "{\"status\":\"";</div><div class="ql-code-block" data-language="plain">  json += soil.valid ? "ok" : "sensor_error";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  json += "\",\"ip\":\"" +</div><div class="ql-code-block" data-language="plain">          WiFi.localIP().toString() +</div><div class="ql-code-block" data-language="plain">          "\"}";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  server.send(</div><div class="ql-code-block" data-language="plain">    200,</div><div class="ql-code-block" data-language="plain">    "application/json",</div><div class="ql-code-block" data-language="plain">    json</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>서버가 시작될 때 엔드포인트가 등록됩니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">void startWebServer() {</div><div class="ql-code-block" data-language="plain">  server.on("/", HTTP_GET, handleRoot);</div><div class="ql-code-block" data-language="plain">  server.on("/data", HTTP_GET, handleData);</div><div class="ql-code-block" data-language="plain">  server.on("/health", HTTP_GET, handleHealth);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  server.on("/", HTTP_OPTIONS, handleOptions);</div><div class="ql-code-block" data-language="plain">  server.on("/data", HTTP_OPTIONS, handleOptions);</div><div class="ql-code-block" data-language="plain">  server.on("/health", HTTP_OPTIONS, handleOptions);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  server.onNotFound([]() {</div><div class="ql-code-block" data-language="plain">    addCorsHeaders();</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    server.send(</div><div class="ql-code-block" data-language="plain">      404,</div><div class="ql-code-block" data-language="plain">      "application/json",</div><div class="ql-code-block" data-language="plain">      "{\"error\":\"Not found\"}"</div><div class="ql-code-block" data-language="plain">    );</div><div class="ql-code-block" data-language="plain">  });</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  server.begin();</div><div class="ql-code-block" data-language="plain">  Serial.println("HTTP server started");</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>또한 /에 간단한 진단 페이지를 포함했습니다. 이를 통해 브라우저에서 ESP32의 IP 주소를 직접 열어 전체 Dirt Nerd 대시보드를 시작하지 않고도 센서를 확인할 수 있습니다.</p>
<h3>12. Wi-Fi 연결</h3>
<p>시작 중에는 ESP32가 연결을 시도하는 동안 RGB LED가 빨간색으로 켜져 있습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">void connectWifi() {</div><div class="ql-code-block" data-language="plain">  Serial.printf(</div><div class="ql-code-block" data-language="plain">    "Connecting to Wi-Fi: %s\n",</div><div class="ql-code-block" data-language="plain">    WIFI_SSID</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  WiFi.mode(WIFI_STA);</div><div class="ql-code-block" data-language="plain">  WiFi.setAutoReconnect(true);</div><div class="ql-code-block" data-language="plain">  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  const unsigned long started = millis();</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  while (</div><div class="ql-code-block" data-language="plain">    WiFi.status() != WL_CONNECTED &amp;&amp;</div><div class="ql-code-block" data-language="plain">    millis() - started &lt; 20000</div><div class="ql-code-block" data-language="plain">  ) {</div><div class="ql-code-block" data-language="plain">    setStatusPixel(false);</div><div class="ql-code-block" data-language="plain">    delay(350);</div><div class="ql-code-block" data-language="plain">    Serial.print('.');</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  Serial.println();</div></div>
<p>연결되면 LED가 녹색으로 바뀌고 IP 주소가 Serial Monitor에 출력됩니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">  const bool connected =</div><div class="ql-code-block" data-language="plain">    WiFi.status() == WL_CONNECTED;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  setStatusPixel(connected);</div><div class="ql-code-block" data-language="plain">  previousWifiState = connected;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (connected) {</div><div class="ql-code-block" data-language="plain">    Serial.println("Wi-Fi connected");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    Serial.print(</div><div class="ql-code-block" data-language="plain">      "Dirt Nerd IP address: http://"</div><div class="ql-code-block" data-language="plain">    );</div><div class="ql-code-block" data-language="plain">    Serial.println(WiFi.localIP());</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    Serial.print("JSON endpoint: http://");</div><div class="ql-code-block" data-language="plain">    Serial.print(WiFi.localIP());</div><div class="ql-code-block" data-language="plain">    Serial.println("/data");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    if (MDNS.begin("dirt-nerd")) {</div><div class="ql-code-block" data-language="plain">      Serial.println(</div><div class="ql-code-block" data-language="plain">        "Local name: http://dirt-nerd.local"</div><div class="ql-code-block" data-language="plain">      );</div><div class="ql-code-block" data-language="plain">    }</div><div class="ql-code-block" data-language="plain">  } else {</div><div class="ql-code-block" data-language="plain">    Serial.println(</div><div class="ql-code-block" data-language="plain">      "Wi-Fi connection timed out; "</div><div class="ql-code-block" data-language="plain">      "automatic retries will continue."</div><div class="ql-code-block" data-language="plain">    );</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>숫자로 표시된 IP 주소를 Dirt Nerd 웹사이트에 입력합니다.</p>
<h3>13. 자동 Wi-Fi 재연결</h3>
<p>라우터나 핫스팟의 연결이 일시적으로 끊길 때마다 장치를 재설정해야 하는 상황은 피하고 싶었습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">void monitorWifi() {</div><div class="ql-code-block" data-language="plain">  const bool connected =</div><div class="ql-code-block" data-language="plain">    WiFi.status() == WL_CONNECTED;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (connected != previousWifiState) {</div><div class="ql-code-block" data-language="plain">    setStatusPixel(connected);</div><div class="ql-code-block" data-language="plain">    previousWifiState = connected;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    if (connected) {</div><div class="ql-code-block" data-language="plain">      Serial.print(</div><div class="ql-code-block" data-language="plain">        "Wi-Fi reconnected. IP: http://"</div><div class="ql-code-block" data-language="plain">      );</div><div class="ql-code-block" data-language="plain">      Serial.println(WiFi.localIP());</div><div class="ql-code-block" data-language="plain">    } else {</div><div class="ql-code-block" data-language="plain">      Serial.println("Wi-Fi disconnected");</div><div class="ql-code-block" data-language="plain">    }</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (</div><div class="ql-code-block" data-language="plain">    !connected &amp;&amp;</div><div class="ql-code-block" data-language="plain">    millis() - lastWifiRetry &gt;=</div><div class="ql-code-block" data-language="plain">      WIFI_RETRY_INTERVAL_MS</div><div class="ql-code-block" data-language="plain">  ) {</div><div class="ql-code-block" data-language="plain">    lastWifiRetry = millis();</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    Serial.println(</div><div class="ql-code-block" data-language="plain">      "Retrying Wi-Fi connection..."</div><div class="ql-code-block" data-language="plain">    );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    WiFi.disconnect();</div><div class="ql-code-block" data-language="plain">    WiFi.begin(WIFI_SSID, WIFI_PASSWORD);</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>이 함수는 시작 후에도 RGB 상태가 정확하게 유지되도록 합니다.</p>
<h3>14. 설정</h3>
<p>setup() 함수는 상태 LED, MAX485, UART, Modbus 연결, Wi-Fi 및 웹 서버를 초기화합니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">void setup() {</div><div class="ql-code-block" data-language="plain">  Serial.begin(115200);</div><div class="ql-code-block" data-language="plain">  delay(1200);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  Serial.println("\nStarting Dirt Nerd...");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  statusPixel.begin();</div><div class="ql-code-block" data-language="plain">  statusPixel.setBrightness(55);</div><div class="ql-code-block" data-language="plain">  setStatusPixel(false);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  pinMode(RS485_DIR_PIN, OUTPUT);</div><div class="ql-code-block" data-language="plain">  digitalWrite(RS485_DIR_PIN, LOW);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  soilSerial.begin(</div><div class="ql-code-block" data-language="plain">    SENSOR_BAUD,</div><div class="ql-code-block" data-language="plain">    SERIAL_8N1,</div><div class="ql-code-block" data-language="plain">    RS485_RX_PIN,</div><div class="ql-code-block" data-language="plain">    RS485_TX_PIN</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  modbus.begin(</div><div class="ql-code-block" data-language="plain">    SENSOR_SLAVE_ID,</div><div class="ql-code-block" data-language="plain">    soilSerial</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  modbus.preTransmission(preTransmission);</div><div class="ql-code-block" data-language="plain">  modbus.postTransmission(postTransmission);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  connectWifi();</div><div class="ql-code-block" data-language="plain">  startWebServer();</div><div class="ql-code-block" data-language="plain">  readSoilSensor();</div><div class="ql-code-block" data-language="plain">}</div></div>
<h3>15. 메인 루프</h3>
<p>메인 루프는 상당히 간단합니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">void loop() {</div><div class="ql-code-block" data-language="plain">  server.handleClient();</div><div class="ql-code-block" data-language="plain">  monitorWifi();</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (</div><div class="ql-code-block" data-language="plain">    millis() - lastSensorRead &gt;=</div><div class="ql-code-block" data-language="plain">      SENSOR_INTERVAL_MS</div><div class="ql-code-block" data-language="plain">  ) {</div><div class="ql-code-block" data-language="plain">    lastSensorRead = millis();</div><div class="ql-code-block" data-language="plain">    readSoilSensor();</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  delay(2);</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>ESP32는 브라우저 요청에 응답하고 Wi-Fi 연결을 모니터링하면서 2초마다 센서를 읽습니다.</p>
<p>펌웨어를 업로드한 후 115200 baud(보드레이트)로 Serial Monitor를 엽니다. RGB LED가 녹색으로 바뀌면 터미널에 표시된 IP 주소를 복사합니다.</p>
<p>그러면 센서 데이터를 다음 주소에서 이용할 수 있습니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">http://ESP32-IP/data</div></div>
<p>이제 하드웨어가 로컬 네트워크를 통해 구조화된 데이터를 생성합니다. 웹사이트 단계에서는 Dirt Nerd가 이 엔드포인트에 요청을 보내 원시 판독값을 대시보드, 작물 비교 및 권장 사항으로 변환하는 방법을 보여드리겠습니다.</p>
<p><br/></p>
<p><br/></p>

</div>

인스트

본문 계속 2/2

STEP 11. 웹페이지 만들기

웹페이지 만들기

Next.js, React, TypeScript 및 CSS를 사용하여 Dirt Nerd 웹사이트를 만들었습니다. 주요 목표는 식물 옆에서 사용할 수 있을 만큼 인터페이스를 간단하게 유지하면서도 센서가 수집한 모든 정보를 표시하는 것이었습니다.

웹사이트는 두 가지 작동 모드를 지원합니다:

데모 모드에서는 편집 가능한 샘플 측정값을 사용합니다.
라이브 모드에서는 ESP32에 실제 측정값을 요청합니다.

주요 프로젝트 파일은 다음과 같습니다:

app/

├── globals.css

├── layout.tsx

├── page.tsx

└── sensor-data.ts

전체 웹사이트는 이 단계에 ZIP 파일로 첨부되어 있습니다. 다음 섹션에서는 코드의 가장 중요한 부분을 설명합니다.

센서 데이터 저장

센서 측정값은 별도의 sensor-data.ts 파일에 저장했습니다. 이렇게 하면 동일한 대시보드 구성 요소를 샘플 값과 ESP32에서 수신한 데이터 모두에 사용할 수 있습니다.

export type SensorKey =

| "moisture"

| "temperature"

| "ph"

| "ec"

| "nitrogen"

| "phosphorus"

| "potassium";

export const sensorData = {

moisture: {

label: "Soil moisture",

value: "34",

unit: "%",

status: "Low"

temperature: {

label: "Temperature",

value: "26.4",

unit: "°C",

status: "Ideal"

ph: {

label: "Soil pH",

value: "6.9",

unit: "pH",

status: "Good"

ec: {

label: "Conductivity",

value: "1.2",

unit: "mS/cm",

status: "Good"

nitrogen: {

label: "Nitrogen",

value: "42",

unit: "mg/kg",

status: "Low"

phosphorus: {

label: "Phosphorus",

value: "38",

unit: "mg/kg",

status: "Good"

potassium: {

label: "Potassium",

value: "156",

unit: "mg/kg",

status: "Medium"

}

};

웹사이트가 라이브 데이터를 수신하면 이 객체 내부의 값만 교체합니다. 나머지 인터페이스는 측정값이 데모 모드에서 왔는지 실제 센서에서 왔는지 알 필요가 없습니다.

웹사이트 상태 관리

메인 페이지에서는 현재 화면, 선택한 작물, 작동 모드, ESP32 주소 및 센서 측정값을 추적합니다.

const [screen, setScreen] =

useState("landing");

const [crop, setCrop] =

useState("tomato");

const [mode, setMode] =

useState("demo");

const [ipAddress, setIpAddress] =

useState("");

const [deviceStatus, setDeviceStatus] =

useState("demo");

const [readings, setReadings] =

useState(sensorData);

const [draftReadings, setDraftReadings] =

useState(sensorData);

화면 값에 따라 인터페이스가 랜딩 페이지, 분석 애니메이션 및 최종 대시보드 사이에서 전환됩니다.

장치 설정 저장

선택한 작동 모드와 ESP32 주소는 브라우저에 저장됩니다. 따라서 사용자는 새로 고침할 때마다 주소를 다시 입력할 필요가 없습니다.

useEffect(() => {

const savedMode =

localStorage.getItem("dirt-nerd-mode");

const savedIp =

localStorage.getItem("dirt-nerd-ip");

if (savedMode === "live") {

setMode("live");

setDeviceStatus("idle");

}

if (savedIp) {

setIpAddress(savedIp);

}

}, []);

설정은 다음을 사용하여 저장합니다:

function saveSettings() {

localStorage.setItem(

"dirt-nerd-mode",

mode

);

localStorage.setItem(

"dirt-nerd-ip",

ipAddress.trim()

);

if (mode === "demo") {

setReadings(draftReadings);

}

setDeviceStatus(

mode === "demo" ? "demo" : "idle"

);

setSettingsOpen(false);

}

사용자 지정 데모 측정값 추가

데모 모드에는 7가지 토양 매개변수 모두에 대한 입력 필드가 포함되어 있습니다. 대시보드를 설계할 때 실제 센서를 매번 연결하지 않고도 다양한 값을 테스트할 수 있어 특히 유용했습니다.

const customFields = [

{

key: "moisture",

min: 0,

max: 100,

step: 1

{

key: "temperature",

min: 0,

max: 60,

step: 0.1

{

key: "ph",

min: 0,

max: 14,

step: 0.1

{

key: "ec",

min: 0,

max: 10,

step: 0.1

{

key: "nitrogen",

min: 0,

max: 500,

step: 1

{

key: "phosphorus",

min: 0,

max: 500,

step: 1

{

key: "potassium",

min: 0,

max: 500,

step: 1

}

];

다음 함수는 나머지 데이터는 그대로 유지하면서 하나의 측정값을 업데이트합니다:

function changeReading(key, value) {

setDraftReadings((current) => ({

...current,

[key]: {

...current[key],

value: value

}

}));

}

이러한 사용자 지정 필드는 데모 모드에서만 표시됩니다. 라이브 모드에서는 ESP32에서 값이 직접 전달됩니다.

ESP32 주소 준비

사용자는 Serial Monitor에 표시된 숫자 주소만 입력하면 됩니다.

예:

192.168.1.105

웹사이트는 이를 자동으로 다음과 같이 변환합니다:

http://192.168.1.105/data

이는 다음 함수를 사용하여 처리됩니다:

function normalizedDeviceUrl() {

const clean = ipAddress

.trim()

.replace(/\/$/, "");

if (!clean) {

return "";

}

const base =

/^https?:\/\//i.test(clean)

? clean

: "http://" + clean;

if (/\/data$/i.test(base)) {

return base;

}

return base + "/data";

}

또한 완전한 엔드포인트가 이미 입력된 경우 /data가 두 번 추가되는 것도 방지합니다.

ESP32에서 데이터 수신

라이브 모드에서는 웹사이트가 ESP32에 HTTP 요청을 보내고 JSON 응답을 기다립니다.

async function fetchLiveReadings() {

const url = normalizedDeviceUrl();

if (!url) {

setDeviceStatus("error");

return false;

}

setDeviceStatus("testing");

try {

const response = await fetch(url, {

headers: {

Accept: "application/json"

signal:

AbortSignal.timeout(6000)

});

if (!response.ok) {

throw new Error(

"Device unavailable"

);

}

const data =

await response.json();

const next = {

...sensorData

};

Object.keys(sensorData).forEach(

(key) => {

if (data[key] !== undefined) {

next[key] = {

...sensorData[key],

value: String(data[key])

};

}

);

setReadings(next);

setDeviceStatus("connected");

return true;

} catch (error) {

setDeviceStatus("error");

return false;

}

ESP32는 다음 형식으로 데이터를 반환합니다:

{

"moisture": 34.2,

"temperature": 26.4,

"ph": 6.9,

"ec": 1.2,

"nitrogen": 42,

"phosphorus": 38,

"potassium": 156,

"sensorConnected": true,

"wifiConnected": true

}

웹사이트는 대시보드에 처음 7개 필드를 사용합니다. 연결 필드는 주로 장치를 테스트하고 진단할 때 유용합니다.

분석 시작

두 모드 모두에서 동일한 분석 버튼이 작동합니다.

async function runAnalysis() {

if (mode === "live") {

const connected =

await fetchLiveReadings();

if (!connected) {

return;

}

setStep(0);

setScreen("analyzing");

}

데모 모드에서는 웹사이트가 사용자 지정 값을 사용하여 즉시 애니메이션을 시작합니다. 라이브 모드에서는 먼저 ESP32 연결을 확인한 다음 새로운 측정값을 다운로드합니다.

측정 애니메이션 만들기

애니메이션은 토양 센서가 실제로 수행한 측정 과정을 따릅니다.

const analysisSteps = [

"Connecting to Soil Analyzer",

"Reading moisture sensor",

"Measuring soil temperature",

"Measuring soil pH",

"Checking electrical conductivity",

"Reading nitrogen",

"Reading phosphorus",

"Reading potassium",

"Generating soil report"

];

타이머가 목록을 순서대로 진행한 후 대시보드를 엽니다:

useEffect(() => {

if (screen !== "analyzing") {

return;

}

if (step >= analysisSteps.length) {

const finished =

window.setTimeout(() => {

setScreen("dashboard");

}, 700);

return () =>

window.clearTimeout(finished);

}

const timer =

window.setTimeout(() => {

setStep((current) =>

current + 1

);

}, step === 0 ? 650 : 430);

return () =>

window.clearTimeout(timer);

}, [screen, step]);

이 애니메이션은 실제 센서 통신을 지연시키지 않습니다. 라이브 모드에서는 먼저 데이터를 요청하고, 보고서가 준비되는 동안 애니메이션이 명확한 피드백을 제공합니다.

작물 보고서 업데이트

선택한 작물은 상태 변수에 저장됩니다:

const [crop, setCrop] =

useState("tomato");

const selected = crops[crop];

작물 버튼을 누르면 웹사이트가 해당 값을 변경합니다:

function selectCrop(cropKey) {

setCrop(cropKey);

}

호환성 백분율, 적정 범위, 상태 메시지 및 권장 사항은 모두 선택한 작물 객체에서 값을 읽습니다. 그러면 React가 페이지를 새로 고치지 않고 보고서를 자동으로 업데이트합니다.

현재 프로토타입에서는 작물 프로필을 로컬에 저장합니다. 따라서 외부 식물 데이터베이스나 인터넷 연결 없이도 웹사이트를 사용할 수 있습니다.

데이터 내보내기

데이터 내보내기 버튼은 작동 모드, 측정값 및 선택한 작물을 포함하는 JSON 파일을 생성합니다.

function exportData() {

const report = {

mode: mode,

sensorData: readings,

crop: selected

};

const file = new Blob(

[

JSON.stringify(

report,

null,

)

{

type: "application/json"

}

);

const link =

document.createElement("a");

link.href =

URL.createObjectURL(file);

link.download =

"dirt-nerd-" +

crop +

".json";

link.click();

URL.revokeObjectURL(

link.href

);

}

PDF 버튼에는 브라우저의 인쇄 대화 상자를 사용했습니다:

function downloadReport() {

window.print();

}

사용자는 인쇄 창에서 Save as PDF 를 선택할 수 있습니다. 별도의 인쇄 스타일시트는 내비게이션 버튼과 기타 불필요한 컨트롤을 숨깁니다.

모바일 최적화

데스크톱 버전에서는 페이지 전체에 7개의 측정값이 표시됩니다. 태블릿에서는 레이아웃이 4열로 변경됩니다.

@media (max-width: 1100px) {

.sensor-grid {

grid-template-columns:

repeat(4, 1fr);

}

.crop-picker {

grid-template-columns:

repeat(5, 1fr);

}

.report-grid {

grid-template-columns: 1fr;

}

휴대폰에서는 각 측정값이 작고 가로로 긴 카드가 됩니다:

@media (max-width: 700px) {

.dash-shell {

width: calc(100% - 24px);

padding-top: 28px;

}

.sensor-grid {

grid-template-columns: 1fr;

gap: 8px;

}

.sensor-card {

display: grid;

grid-template-columns:

38px 1fr auto;

grid-template-rows:

auto auto;

column-gap: 12px;

align-items: center;

padding: 13px 14px;

}

.sensor-card p,

.mini-gauge {

display: none;

}

작물 선택기는 가로로 스크롤할 수 있게 됩니다:

@media (max-width: 700px) {

.crop-picker {

display: flex;

overflow-x: auto;

gap: 8px;

scroll-snap-type:

x mandatory;

}

.crop-picker button {

min-width: 116px;

height: 66px;

scroll-snap-align:

start;

}

설정 패널도 하단 시트로 바뀌어 한 손으로 사용하기 더 편리해집니다:

@media (max-width: 700px) {

.modal-backdrop {

padding: 0;

align-items: end;

}

.settings-modal {

width: 100%;

max-height: 92vh;

overflow-y: auto;

border-radius:

24px 24px 0 0;

}

.mode-selector,

.ip-row {

grid-template-columns: 1fr;

}

웹사이트 실행

첨부된 웹사이트 ZIP 파일의 압축을 푼 후 프로젝트 폴더에서 터미널을 열고 종속 항목을 설치합니다:

npm install

로컬 개발 서버를 시작합니다:

npm run dev

웹사이트는 일반적으로 다음 주소에서 열립니다:

http://localhost:3000

라이브 모드를 사용하려면 컴퓨터와 ESP32가 동일한 Wi-Fi 네트워크에 연결되어 있어야 합니다. 설정을 열고 Live mode를 선택한 다음 숫자로 된 ESP32 주소를 입력하고 Test를 누릅니다.

현재 분석기에 직접 연결할 때는 localhost를 통해 인터페이스를 실행합니다. Vercel 배포는 HTTPS를 사용하는 반면 ESP32는 로컬 HTTP 엔드포인트를 제공하므로 일부 브라우저에서는 이 조합을 차단합니다. Localhost를 사용하면 이 문제를 피할 수 있으며 현재 버전에서 가장 안정적인 설정입니다.

STEP 12. 직면한 문제들

센서 레지스터 이해하기

가장 큰 전자기기 문제는 7-in-1 RS485 센서들이 모두 정확히 동일한 레지스터 순서나 스케일링을 사용하지 않는다는 점이었습니다.

센서는 유효한 Modbus 응답을 반환할 수 있지만, pH, EC 또는 NPK 값을 코드에서 사용된 레이아웃과 다른 레지스터에 배치할 수 있습니다.

해결책은 레지스터 주소와 스케일링을 하나의 함수에 유지하여 센서 매뉴얼을 확인한 후 변경할 수 있도록 하는 것이었습니다.

RS485 A 및 B 라벨링

RS485 A 및 B 라벨은 제조업체 간에 항상 일관되지 않습니다.

배선과 설정이 올바른 것처럼 보이지만 센서가 응답하지 않는 경우, A와 B를 한 번 바꾸는 것이 유용한 테스트입니다.

로직 레벨 차이

XIAO는 3.3V GPIO를 사용하는 반면, 전통적인 MAX485 모듈은 일반적으로 5V에서 작동합니다.

RO 출력을 ESP32에 직접 연결하면 입력이 손상될 수 있습니다. 모듈이 전기적으로 호환된다고 가정하는 대신 레벨 시프팅으로 이를 고려했습니다.

IP 주소 변경

ESP32의 로컬 IP는 라우터가 재연결될 때 변경될 수 있습니다.

이는 웹사이트에 저장된 주소가 장치가 연결되어 있음에도 불구하고 결국 작동을 멈출 수 있음을 의미합니다.

테스트 버튼은 이를 빠르게 식별하는 데 도움이 됩니다. 라우터에서 DHCP 예약을 설정하면 주소를 고정할 수도 있습니다.

로컬 HTTP 및 Vercel HTTPS

웹사이트는 Vercel에서 데모로 잘 작동하지만, ESP32와의 직접 통신은 더 복잡합니다.

Vercel은 HTTPS를 사용하는 반면, ESP32는 로컬 네트워크 내에서 HTTP 주소를 제공합니다. 브라우저는 HTTPS 페이지가 그 불안전한 로컬 엔드포인트에 요청하는 것을 차단할 수 있습니다.

현재 빌드에서는 로컬호스트에서 웹사이트를 실행하는 것이 가장 신뢰할 수 있는 솔루션입니다.

모바일 대시보드 레이아웃

원래의 데스크탑 스타일 카드가 휴대폰에서 너무 좁아졌습니다.

글꼴 크기를 줄이는 것만으로는 부족하여, 센서 카드를 컴팩트한 수평 행으로 변경하고 크롭 선택기를 수평으로 스크롤 가능하게 만들었습니다.

이렇게 하여 가독성을 유지하고 야외에서 조작하기 쉽게 만들었습니다.

인클로저 여유 공간

곡선형 인클로저는 예상보다 가장자리 근처에 여유 공간이 적었습니다.

전자기기를 배치할 때 나사 기둥, USB 커넥터 및 케이블 굴곡에 주의해야 했습니다.

삼색 PLA 마감

삼색 필라멘트는 제가 예상한 외관을 생성하지 않았습니다.

출력을 버리는 대신, 샌딩하고 페인팅했습니다. 초록색 마감이 프로젝트와 훨씬 더 잘 어울리게 되었습니다.

STEP 13. 장치 테스트

장치 테스트

테스트를 통신, 센서 응답 및 웹사이트 테스트로 나누었습니다.

먼저 대시보드를 열지 않은 상태에서 장치에 전원을 공급했습니다.

WS2812는 처음에 빨간색으로 켜졌고, ESP32가 Wi-Fi에 연결된 후 녹색으로 바뀌었습니다.

보드레이트 115200으로 시리얼 모니터를 열고, 보드가 로컬 IP 주소를 출력하는지 확인했습니다.

그런 다음 브라우저에서 다음 주소를 열었습니다:

http://ESP32-IP/data

이를 통해 ESP32가 JSON을 반환하고 7개의 측정 필드가 모두 존재하는 것을 확인했습니다.

다음으로 프로브를 토양에 넣고 토양 상태가 변할 때 측정값이 합리적인 방향으로 변하는지 관찰했습니다.

이 단계의 주요 목적은 실험실 수준의 정확성을 주장하는 것이 아니라, 명백히 잘못된 레지스터 매핑, 스케일링 또는 통신 오류를 찾는 것이었습니다.

그런 다음 localhost에서 웹사이트를 시작하고 Live 모드를 선택한 후 동일한 IP 주소를 입력했습니다.

Test 버튼으로 연결을 확인했고, 분석을 시작하자 측정값이 대시보드 카드로 전송되었습니다.

페이지를 새로 고치지 않아도 호환성 메시지, 비교표 및 권장 사항이 업데이트되는지 확인하기 위해 사용 가능한 작물 사이를 전환했습니다.

또한 데스크톱 및 휴대폰 화면 너비에서 인터페이스를 테스트했습니다.

센서 카드는 모바일 행으로 바뀌었고, 작물 옵션은 가로로 스크롤할 수 있게 되었으며, Settings 창은 하단 시트로 열렸습니다.

마지막으로 Export Data, Share Report 및 Download PDF 컨트롤을 테스트했습니다.

토양 센서의 측정값을 농업적으로 정확한 것으로 간주하려면 먼저 제조업체의 절차에 따라 센서를 보정해야 합니다.

보다 공식적인 비교를 위해 다음 단계에서는 문서화된 토양 샘플 여러 개를 테스트하고 Dirt Nerd의 측정값을 보정된 기준 기기의 측정값 또는 실험실 결과와 비교해야 합니다.

STEP 14. 최종 생각

최종 생각

Dirt Nerd는 ESP32에 연결된 센서 이상의 의미를 갖게 되었습니다.

제가 가장 즐겼던 부분은 전자기기, 펌웨어, 인터페이스 및 인클로저를 하나의 제품 같은 프로토타입으로 통합하는 것이었습니다.

이 프로젝트는 측정값을 표시하는 것이 작업의 절반에 불과하다는 것을 가르쳐 주었습니다. 사용자가 자신이 기르고자 하는 식물에 대한 의미를 이해할 수 있을 때 정보는 훨씬 더 유용해집니다.

저는 RS485 통신, Modbus 레지스터, 전압 레벨 차이, 로컬 HTTP API 및 반응형 인터페이스 디자인에 대해 많은 것을 배웠습니다.

인클로저 또한 예상치 못한 디자인 여정을 겪었습니다. 처음 상상했던 깨끗한 물방울 모양을 유지하지 않았지만, 약간 오징어 같은 최종 형태가 프로젝트를 더 인식 가능하게 만들었습니다.

미래 버전에서 개선하고 싶은 몇 가지 사항이 있습니다.

신뢰할 수 있는 기준 측정값에 대해 센서를 보정하고, 작물 데이터베이스를 확장하며, 모든 비교를 실시간 읽기에서 직접 계산하고, 펌웨어에 자격 증명을 저장하지 않고 Wi-Fi 설정을 위한 더 나은 방법을 추가하고 싶습니다.

원격 액세스를 위해서는 직접 로컬 HTTP 연결을 안전한 MQTT 또는 클라우드 기반 데이터 경로로 교체하고 싶습니다.

내부 전자기기 장착을 더 정리하고, 분석기가 별도의 전원 케이블 없이 사용될 수 있도록 충전식 배터리를 추가하고 싶습니다.

현재로서는 Dirt Nerd가 토양을 측정하고 결과를 표시하며 이를 더 이해하기 쉬운 식물별 보고서로 변환할 수 있는 완전한 프로토타입으로 작동합니다.

자신만의 버전을 만들 경우, 정확한 토양 센서에 대한 매뉴얼을 확인하고, 전압 레벨을 안전하게 유지하며, 첫 번째 읽기 세트를 최종 답변이 아닌 보정의 시작으로 간주하십시오.

읽어 주셔서 감사합니다. 이 프로젝트가 여러분이 자신만의 연결된 토양 분석기를 만드는 데 유용한 출발점이 되기를 바랍니다.

<div class="instructable-post" style="font-size:18px;line-height:1.8;">
<p><strong>본문 계속 2/2</strong></p>
<p><br></p>
<hr>
<p><br></p>
<h2 style="font-size:26px;line-height:1.4;font-weight:bold;"><strong>STEP 11. 웹페이지 만들기</strong></h2>
<p><br></p>
<p><img src="https://gongbangunion.com/data/editor/2608/1c7d13ddbf8a5d7d573f7c71d5f510ad_1788139870_6399.jpg" alt="웹페이지 만들기" style="max-width:100%;height:auto;"></p>
<p><br></p>
<p><img src="https://gongbangunion.com/data/editor/2608/1c7d13ddbf8a5d7d573f7c71d5f510ad_1788139870_6512.jpg" alt="웹페이지 만들기" style="max-width:100%;height:auto;"></p>
<p><br></p>
<p><img src="https://gongbangunion.com/data/editor/2608/1c7d13ddbf8a5d7d573f7c71d5f510ad_1788139870_6537.jpg" alt="웹페이지 만들기" style="max-width:100%;height:auto;"></p>
<p><br></p>
<p>Next.js, React, TypeScript 및 CSS를 사용하여 Dirt Nerd 웹사이트를 만들었습니다. 주요 목표는 식물 옆에서 사용할 수 있을 만큼 인터페이스를 간단하게 유지하면서도 센서가 수집한 모든 정보를 표시하는 것이었습니다.</p>
<p>웹사이트는 두 가지 작동 모드를 지원합니다:</p>
<ol><li data-list="bullet">데모 모드에서는 편집 가능한 샘플 측정값을 사용합니다.</li><li data-list="bullet">라이브 모드에서는 ESP32에 실제 측정값을 요청합니다.</li></ol>
<p>주요 프로젝트 파일은 다음과 같습니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">app/</div><div class="ql-code-block" data-language="plain">├── globals.css</div><div class="ql-code-block" data-language="plain">├── layout.tsx</div><div class="ql-code-block" data-language="plain">├── page.tsx</div><div class="ql-code-block" data-language="plain">└── sensor-data.ts</div></div>
<p>전체 웹사이트는 이 단계에 ZIP 파일로 첨부되어 있습니다. 다음 섹션에서는 코드의 가장 중요한 부분을 설명합니다.</p>
<h3>센서 데이터 저장</h3>
<p>센서 측정값은 별도의 sensor-data.ts 파일에 저장했습니다. 이렇게 하면 동일한 대시보드 구성 요소를 샘플 값과 ESP32에서 수신한 데이터 모두에 사용할 수 있습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">export type SensorKey =</div><div class="ql-code-block" data-language="plain">  | "moisture"</div><div class="ql-code-block" data-language="plain">  | "temperature"</div><div class="ql-code-block" data-language="plain">  | "ph"</div><div class="ql-code-block" data-language="plain">  | "ec"</div><div class="ql-code-block" data-language="plain">  | "nitrogen"</div><div class="ql-code-block" data-language="plain">  | "phosphorus"</div><div class="ql-code-block" data-language="plain">  | "potassium";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">export const sensorData = {</div><div class="ql-code-block" data-language="plain">  moisture: {</div><div class="ql-code-block" data-language="plain">    label: "Soil moisture",</div><div class="ql-code-block" data-language="plain">    value: "34",</div><div class="ql-code-block" data-language="plain">    unit: "%",</div><div class="ql-code-block" data-language="plain">    status: "Low"</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  temperature: {</div><div class="ql-code-block" data-language="plain">    label: "Temperature",</div><div class="ql-code-block" data-language="plain">    value: "26.4",</div><div class="ql-code-block" data-language="plain">    unit: "°C",</div><div class="ql-code-block" data-language="plain">    status: "Ideal"</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  ph: {</div><div class="ql-code-block" data-language="plain">    label: "Soil pH",</div><div class="ql-code-block" data-language="plain">    value: "6.9",</div><div class="ql-code-block" data-language="plain">    unit: "pH",</div><div class="ql-code-block" data-language="plain">    status: "Good"</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  ec: {</div><div class="ql-code-block" data-language="plain">    label: "Conductivity",</div><div class="ql-code-block" data-language="plain">    value: "1.2",</div><div class="ql-code-block" data-language="plain">    unit: "mS/cm",</div><div class="ql-code-block" data-language="plain">    status: "Good"</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  nitrogen: {</div><div class="ql-code-block" data-language="plain">    label: "Nitrogen",</div><div class="ql-code-block" data-language="plain">    value: "42",</div><div class="ql-code-block" data-language="plain">    unit: "mg/kg",</div><div class="ql-code-block" data-language="plain">    status: "Low"</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  phosphorus: {</div><div class="ql-code-block" data-language="plain">    label: "Phosphorus",</div><div class="ql-code-block" data-language="plain">    value: "38",</div><div class="ql-code-block" data-language="plain">    unit: "mg/kg",</div><div class="ql-code-block" data-language="plain">    status: "Good"</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  potassium: {</div><div class="ql-code-block" data-language="plain">    label: "Potassium",</div><div class="ql-code-block" data-language="plain">    value: "156",</div><div class="ql-code-block" data-language="plain">    unit: "mg/kg",</div><div class="ql-code-block" data-language="plain">    status: "Medium"</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">};</div></div>
<p>웹사이트가 라이브 데이터를 수신하면 이 객체 내부의 값만 교체합니다. 나머지 인터페이스는 측정값이 데모 모드에서 왔는지 실제 센서에서 왔는지 알 필요가 없습니다.</p>
<h3>웹사이트 상태 관리</h3>
<p>메인 페이지에서는 현재 화면, 선택한 작물, 작동 모드, ESP32 주소 및 센서 측정값을 추적합니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">const [screen, setScreen] =</div><div class="ql-code-block" data-language="plain">  useState("landing");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">const [crop, setCrop] =</div><div class="ql-code-block" data-language="plain">  useState("tomato");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">const [mode, setMode] =</div><div class="ql-code-block" data-language="plain">  useState("demo");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">const [ipAddress, setIpAddress] =</div><div class="ql-code-block" data-language="plain">  useState("");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">const [deviceStatus, setDeviceStatus] =</div><div class="ql-code-block" data-language="plain">  useState("demo");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">const [readings, setReadings] =</div><div class="ql-code-block" data-language="plain">  useState(sensorData);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">const [draftReadings, setDraftReadings] =</div><div class="ql-code-block" data-language="plain">  useState(sensorData);</div></div>
<p>화면 값에 따라 인터페이스가 랜딩 페이지, 분석 애니메이션 및 최종 대시보드 사이에서 전환됩니다.</p>
<h3>장치 설정 저장</h3>
<p>선택한 작동 모드와 ESP32 주소는 브라우저에 저장됩니다. 따라서 사용자는 새로 고침할 때마다 주소를 다시 입력할 필요가 없습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">useEffect(() =&gt; {</div><div class="ql-code-block" data-language="plain">  const savedMode =</div><div class="ql-code-block" data-language="plain">    localStorage.getItem("dirt-nerd-mode");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  const savedIp =</div><div class="ql-code-block" data-language="plain">    localStorage.getItem("dirt-nerd-ip");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (savedMode === "live") {</div><div class="ql-code-block" data-language="plain">    setMode("live");</div><div class="ql-code-block" data-language="plain">    setDeviceStatus("idle");</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (savedIp) {</div><div class="ql-code-block" data-language="plain">    setIpAddress(savedIp);</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">}, []);</div></div>
<p>설정은 다음을 사용하여 저장합니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">function saveSettings() {</div><div class="ql-code-block" data-language="plain">  localStorage.setItem(</div><div class="ql-code-block" data-language="plain">    "dirt-nerd-mode",</div><div class="ql-code-block" data-language="plain">    mode</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  localStorage.setItem(</div><div class="ql-code-block" data-language="plain">    "dirt-nerd-ip",</div><div class="ql-code-block" data-language="plain">    ipAddress.trim()</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (mode === "demo") {</div><div class="ql-code-block" data-language="plain">    setReadings(draftReadings);</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  setDeviceStatus(</div><div class="ql-code-block" data-language="plain">    mode === "demo" ? "demo" : "idle"</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  setSettingsOpen(false);</div><div class="ql-code-block" data-language="plain">}</div></div>
<h3>사용자 지정 데모 측정값 추가</h3>
<p>데모 모드에는 7가지 토양 매개변수 모두에 대한 입력 필드가 포함되어 있습니다. 대시보드를 설계할 때 실제 센서를 매번 연결하지 않고도 다양한 값을 테스트할 수 있어 특히 유용했습니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">const customFields = [</div><div class="ql-code-block" data-language="plain">  {</div><div class="ql-code-block" data-language="plain">    key: "moisture",</div><div class="ql-code-block" data-language="plain">    min: 0,</div><div class="ql-code-block" data-language="plain">    max: 100,</div><div class="ql-code-block" data-language="plain">    step: 1</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain">  {</div><div class="ql-code-block" data-language="plain">    key: "temperature",</div><div class="ql-code-block" data-language="plain">    min: 0,</div><div class="ql-code-block" data-language="plain">    max: 60,</div><div class="ql-code-block" data-language="plain">    step: 0.1</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain">  {</div><div class="ql-code-block" data-language="plain">    key: "ph",</div><div class="ql-code-block" data-language="plain">    min: 0,</div><div class="ql-code-block" data-language="plain">    max: 14,</div><div class="ql-code-block" data-language="plain">    step: 0.1</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain">  {</div><div class="ql-code-block" data-language="plain">    key: "ec",</div><div class="ql-code-block" data-language="plain">    min: 0,</div><div class="ql-code-block" data-language="plain">    max: 10,</div><div class="ql-code-block" data-language="plain">    step: 0.1</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain">  {</div><div class="ql-code-block" data-language="plain">    key: "nitrogen",</div><div class="ql-code-block" data-language="plain">    min: 0,</div><div class="ql-code-block" data-language="plain">    max: 500,</div><div class="ql-code-block" data-language="plain">    step: 1</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain">  {</div><div class="ql-code-block" data-language="plain">    key: "phosphorus",</div><div class="ql-code-block" data-language="plain">    min: 0,</div><div class="ql-code-block" data-language="plain">    max: 500,</div><div class="ql-code-block" data-language="plain">    step: 1</div><div class="ql-code-block" data-language="plain">  },</div><div class="ql-code-block" data-language="plain">  {</div><div class="ql-code-block" data-language="plain">    key: "potassium",</div><div class="ql-code-block" data-language="plain">    min: 0,</div><div class="ql-code-block" data-language="plain">    max: 500,</div><div class="ql-code-block" data-language="plain">    step: 1</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">];</div></div>
<p>다음 함수는 나머지 데이터는 그대로 유지하면서 하나의 측정값을 업데이트합니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">function changeReading(key, value) {</div><div class="ql-code-block" data-language="plain">  setDraftReadings((current) =&gt; ({</div><div class="ql-code-block" data-language="plain">    ...current,</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    [key]: {</div><div class="ql-code-block" data-language="plain">      ...current[key],</div><div class="ql-code-block" data-language="plain">      value: value</div><div class="ql-code-block" data-language="plain">    }</div><div class="ql-code-block" data-language="plain">  }));</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>이러한 사용자 지정 필드는 데모 모드에서만 표시됩니다. 라이브 모드에서는 ESP32에서 값이 직접 전달됩니다.</p>
<h3>ESP32 주소 준비</h3>
<p>사용자는 Serial Monitor에 표시된 숫자 주소만 입력하면 됩니다.</p>
<p>예:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">192.168.1.105</div></div>
<p>웹사이트는 이를 자동으로 다음과 같이 변환합니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">http://192.168.1.105/data</div></div>
<p>이는 다음 함수를 사용하여 처리됩니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">function normalizedDeviceUrl() {</div><div class="ql-code-block" data-language="plain">  const clean = ipAddress</div><div class="ql-code-block" data-language="plain">    .trim()</div><div class="ql-code-block" data-language="plain">    .replace(/\/$/, "");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (!clean) {</div><div class="ql-code-block" data-language="plain">    return "";</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  const base =</div><div class="ql-code-block" data-language="plain">    /^https?:\/\//i.test(clean)</div><div class="ql-code-block" data-language="plain">      ? clean</div><div class="ql-code-block" data-language="plain">      : "http://" + clean;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (/\/data$/i.test(base)) {</div><div class="ql-code-block" data-language="plain">    return base;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  return base + "/data";</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>또한 완전한 엔드포인트가 이미 입력된 경우 /data가 두 번 추가되는 것도 방지합니다.</p>
<h3>ESP32에서 데이터 수신</h3>
<p>라이브 모드에서는 웹사이트가 ESP32에 HTTP 요청을 보내고 JSON 응답을 기다립니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">async function fetchLiveReadings() {</div><div class="ql-code-block" data-language="plain">  const url = normalizedDeviceUrl();</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (!url) {</div><div class="ql-code-block" data-language="plain">    setDeviceStatus("error");</div><div class="ql-code-block" data-language="plain">    return false;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  setDeviceStatus("testing");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  try {</div><div class="ql-code-block" data-language="plain">    const response = await fetch(url, {</div><div class="ql-code-block" data-language="plain">      headers: {</div><div class="ql-code-block" data-language="plain">        Accept: "application/json"</div><div class="ql-code-block" data-language="plain">      },</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">      signal:</div><div class="ql-code-block" data-language="plain">        AbortSignal.timeout(6000)</div><div class="ql-code-block" data-language="plain">    });</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    if (!response.ok) {</div><div class="ql-code-block" data-language="plain">      throw new Error(</div><div class="ql-code-block" data-language="plain">        "Device unavailable"</div><div class="ql-code-block" data-language="plain">      );</div><div class="ql-code-block" data-language="plain">    }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    const data =</div><div class="ql-code-block" data-language="plain">      await response.json();</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    const next = {</div><div class="ql-code-block" data-language="plain">      ...sensorData</div><div class="ql-code-block" data-language="plain">    };</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    Object.keys(sensorData).forEach(</div><div class="ql-code-block" data-language="plain">      (key) =&gt; {</div><div class="ql-code-block" data-language="plain">        if (data[key] !== undefined) {</div><div class="ql-code-block" data-language="plain">          next[key] = {</div><div class="ql-code-block" data-language="plain">            ...sensorData[key],</div><div class="ql-code-block" data-language="plain">            value: String(data[key])</div><div class="ql-code-block" data-language="plain">          };</div><div class="ql-code-block" data-language="plain">        }</div><div class="ql-code-block" data-language="plain">      }</div><div class="ql-code-block" data-language="plain">    );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    setReadings(next);</div><div class="ql-code-block" data-language="plain">    setDeviceStatus("connected");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    return true;</div><div class="ql-code-block" data-language="plain">  } catch (error) {</div><div class="ql-code-block" data-language="plain">    setDeviceStatus("error");</div><div class="ql-code-block" data-language="plain">    return false;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>ESP32는 다음 형식으로 데이터를 반환합니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">{</div><div class="ql-code-block" data-language="plain">  "moisture": 34.2,</div><div class="ql-code-block" data-language="plain">  "temperature": 26.4,</div><div class="ql-code-block" data-language="plain">  "ph": 6.9,</div><div class="ql-code-block" data-language="plain">  "ec": 1.2,</div><div class="ql-code-block" data-language="plain">  "nitrogen": 42,</div><div class="ql-code-block" data-language="plain">  "phosphorus": 38,</div><div class="ql-code-block" data-language="plain">  "potassium": 156,</div><div class="ql-code-block" data-language="plain">  "sensorConnected": true,</div><div class="ql-code-block" data-language="plain">  "wifiConnected": true</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>웹사이트는 대시보드에 처음 7개 필드를 사용합니다. 연결 필드는 주로 장치를 테스트하고 진단할 때 유용합니다.</p>
<h3>분석 시작</h3>
<p>두 모드 모두에서 동일한 분석 버튼이 작동합니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">async function runAnalysis() {</div><div class="ql-code-block" data-language="plain">  if (mode === "live") {</div><div class="ql-code-block" data-language="plain">    const connected =</div><div class="ql-code-block" data-language="plain">      await fetchLiveReadings();</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    if (!connected) {</div><div class="ql-code-block" data-language="plain">      return;</div><div class="ql-code-block" data-language="plain">    }</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  setStep(0);</div><div class="ql-code-block" data-language="plain">  setScreen("analyzing");</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>데모 모드에서는 웹사이트가 사용자 지정 값을 사용하여 즉시 애니메이션을 시작합니다. 라이브 모드에서는 먼저 ESP32 연결을 확인한 다음 새로운 측정값을 다운로드합니다.</p>
<h3>측정 애니메이션 만들기</h3>
<p>애니메이션은 토양 센서가 실제로 수행한 측정 과정을 따릅니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">const analysisSteps = [</div><div class="ql-code-block" data-language="plain">  "Connecting to Soil Analyzer",</div><div class="ql-code-block" data-language="plain">  "Reading moisture sensor",</div><div class="ql-code-block" data-language="plain">  "Measuring soil temperature",</div><div class="ql-code-block" data-language="plain">  "Measuring soil pH",</div><div class="ql-code-block" data-language="plain">  "Checking electrical conductivity",</div><div class="ql-code-block" data-language="plain">  "Reading nitrogen",</div><div class="ql-code-block" data-language="plain">  "Reading phosphorus",</div><div class="ql-code-block" data-language="plain">  "Reading potassium",</div><div class="ql-code-block" data-language="plain">  "Generating soil report"</div><div class="ql-code-block" data-language="plain">];</div></div>
<p>타이머가 목록을 순서대로 진행한 후 대시보드를 엽니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">useEffect(() =&gt; {</div><div class="ql-code-block" data-language="plain">  if (screen !== "analyzing") {</div><div class="ql-code-block" data-language="plain">    return;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  if (step &gt;= analysisSteps.length) {</div><div class="ql-code-block" data-language="plain">    const finished =</div><div class="ql-code-block" data-language="plain">      window.setTimeout(() =&gt; {</div><div class="ql-code-block" data-language="plain">        setScreen("dashboard");</div><div class="ql-code-block" data-language="plain">      }, 700);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    return () =&gt;</div><div class="ql-code-block" data-language="plain">      window.clearTimeout(finished);</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  const timer =</div><div class="ql-code-block" data-language="plain">    window.setTimeout(() =&gt; {</div><div class="ql-code-block" data-language="plain">      setStep((current) =&gt;</div><div class="ql-code-block" data-language="plain">        current + 1</div><div class="ql-code-block" data-language="plain">      );</div><div class="ql-code-block" data-language="plain">    }, step === 0 ? 650 : 430);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  return () =&gt;</div><div class="ql-code-block" data-language="plain">    window.clearTimeout(timer);</div><div class="ql-code-block" data-language="plain">}, [screen, step]);</div></div>
<p>이 애니메이션은 실제 센서 통신을 지연시키지 않습니다. 라이브 모드에서는 먼저 데이터를 요청하고, 보고서가 준비되는 동안 애니메이션이 명확한 피드백을 제공합니다.</p>
<h3>작물 보고서 업데이트</h3>
<p>선택한 작물은 상태 변수에 저장됩니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">const [crop, setCrop] =</div><div class="ql-code-block" data-language="plain">  useState("tomato");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">const selected = crops[crop];</div></div>
<p>작물 버튼을 누르면 웹사이트가 해당 값을 변경합니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">function selectCrop(cropKey) {</div><div class="ql-code-block" data-language="plain">  setCrop(cropKey);</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>호환성 백분율, 적정 범위, 상태 메시지 및 권장 사항은 모두 선택한 작물 객체에서 값을 읽습니다. 그러면 React가 페이지를 새로 고치지 않고 보고서를 자동으로 업데이트합니다.</p>
<p>현재 프로토타입에서는 작물 프로필을 로컬에 저장합니다. 따라서 외부 식물 데이터베이스나 인터넷 연결 없이도 웹사이트를 사용할 수 있습니다.</p>
<h3>데이터 내보내기</h3>
<p>데이터 내보내기 버튼은 작동 모드, 측정값 및 선택한 작물을 포함하는 JSON 파일을 생성합니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">function exportData() {</div><div class="ql-code-block" data-language="plain">  const report = {</div><div class="ql-code-block" data-language="plain">    mode: mode,</div><div class="ql-code-block" data-language="plain">    sensorData: readings,</div><div class="ql-code-block" data-language="plain">    crop: selected</div><div class="ql-code-block" data-language="plain">  };</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  const file = new Blob(</div><div class="ql-code-block" data-language="plain">    [</div><div class="ql-code-block" data-language="plain">      JSON.stringify(</div><div class="ql-code-block" data-language="plain">        report,</div><div class="ql-code-block" data-language="plain">        null,</div><div class="ql-code-block" data-language="plain">        2</div><div class="ql-code-block" data-language="plain">      )</div><div class="ql-code-block" data-language="plain">    ],</div><div class="ql-code-block" data-language="plain">    {</div><div class="ql-code-block" data-language="plain">      type: "application/json"</div><div class="ql-code-block" data-language="plain">    }</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  const link =</div><div class="ql-code-block" data-language="plain">    document.createElement("a");</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  link.href =</div><div class="ql-code-block" data-language="plain">    URL.createObjectURL(file);</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  link.download =</div><div class="ql-code-block" data-language="plain">    "dirt-nerd-" +</div><div class="ql-code-block" data-language="plain">    crop +</div><div class="ql-code-block" data-language="plain">    ".json";</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  link.click();</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  URL.revokeObjectURL(</div><div class="ql-code-block" data-language="plain">    link.href</div><div class="ql-code-block" data-language="plain">  );</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>PDF 버튼에는 브라우저의 인쇄 대화 상자를 사용했습니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">function downloadReport() {</div><div class="ql-code-block" data-language="plain">  window.print();</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>사용자는 인쇄 창에서 <strong>Save as PDF</strong> 를 선택할 수 있습니다. 별도의 인쇄 스타일시트는 내비게이션 버튼과 기타 불필요한 컨트롤을 숨깁니다.</p>
<h3>모바일 최적화</h3>
<p>데스크톱 버전에서는 페이지 전체에 7개의 측정값이 표시됩니다. 태블릿에서는 레이아웃이 4열로 변경됩니다.</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">@media (max-width: 1100px) {</div><div class="ql-code-block" data-language="plain">  .sensor-grid {</div><div class="ql-code-block" data-language="plain">    grid-template-columns:</div><div class="ql-code-block" data-language="plain">      repeat(4, 1fr);</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  .crop-picker {</div><div class="ql-code-block" data-language="plain">    grid-template-columns:</div><div class="ql-code-block" data-language="plain">      repeat(5, 1fr);</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  .report-grid {</div><div class="ql-code-block" data-language="plain">    grid-template-columns: 1fr;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>휴대폰에서는 각 측정값이 작고 가로로 긴 카드가 됩니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">@media (max-width: 700px) {</div><div class="ql-code-block" data-language="plain">  .dash-shell {</div><div class="ql-code-block" data-language="plain">    width: calc(100% - 24px);</div><div class="ql-code-block" data-language="plain">    padding-top: 28px;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  .sensor-grid {</div><div class="ql-code-block" data-language="plain">    grid-template-columns: 1fr;</div><div class="ql-code-block" data-language="plain">    gap: 8px;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  .sensor-card {</div><div class="ql-code-block" data-language="plain">    display: grid;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    grid-template-columns:</div><div class="ql-code-block" data-language="plain">      38px 1fr auto;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    grid-template-rows:</div><div class="ql-code-block" data-language="plain">      auto auto;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    column-gap: 12px;</div><div class="ql-code-block" data-language="plain">    align-items: center;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    padding: 13px 14px;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  .sensor-card p,</div><div class="ql-code-block" data-language="plain">  .mini-gauge {</div><div class="ql-code-block" data-language="plain">    display: none;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>작물 선택기는 가로로 스크롤할 수 있게 됩니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">@media (max-width: 700px) {</div><div class="ql-code-block" data-language="plain">  .crop-picker {</div><div class="ql-code-block" data-language="plain">    display: flex;</div><div class="ql-code-block" data-language="plain">    overflow-x: auto;</div><div class="ql-code-block" data-language="plain">    gap: 8px;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    scroll-snap-type:</div><div class="ql-code-block" data-language="plain">      x mandatory;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  .crop-picker button {</div><div class="ql-code-block" data-language="plain">    min-width: 116px;</div><div class="ql-code-block" data-language="plain">    height: 66px;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    scroll-snap-align:</div><div class="ql-code-block" data-language="plain">      start;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">}</div></div>
<p>설정 패널도 하단 시트로 바뀌어 한 손으로 사용하기 더 편리해집니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">@media (max-width: 700px) {</div><div class="ql-code-block" data-language="plain">  .modal-backdrop {</div><div class="ql-code-block" data-language="plain">    padding: 0;</div><div class="ql-code-block" data-language="plain">    align-items: end;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  .settings-modal {</div><div class="ql-code-block" data-language="plain">    width: 100%;</div><div class="ql-code-block" data-language="plain">    max-height: 92vh;</div><div class="ql-code-block" data-language="plain">    overflow-y: auto;</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">    border-radius:</div><div class="ql-code-block" data-language="plain">      24px 24px 0 0;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain"><br/></div><div class="ql-code-block" data-language="plain">  .mode-selector,</div><div class="ql-code-block" data-language="plain">  .ip-row {</div><div class="ql-code-block" data-language="plain">    grid-template-columns: 1fr;</div><div class="ql-code-block" data-language="plain">  }</div><div class="ql-code-block" data-language="plain">}</div></div>
<h3>웹사이트 실행</h3>
<p>첨부된 웹사이트 ZIP 파일의 압축을 푼 후 프로젝트 폴더에서 터미널을 열고 종속 항목을 설치합니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">npm install</div></div>
<p>로컬 개발 서버를 시작합니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">npm run dev</div></div>
<p>웹사이트는 일반적으로 다음 주소에서 열립니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">http://localhost:3000</div></div>
<p>라이브 모드를 사용하려면 컴퓨터와 ESP32가 동일한 Wi-Fi 네트워크에 연결되어 있어야 합니다. 설정을 열고 <strong>Live mode</strong>를 선택한 다음 숫자로 된 ESP32 주소를 입력하고 <strong>Test</strong>를 누릅니다.</p>
<p>현재 분석기에 직접 연결할 때는 localhost를 통해 인터페이스를 실행합니다. Vercel 배포는 HTTPS를 사용하는 반면 ESP32는 로컬 HTTP 엔드포인트를 제공하므로 일부 브라우저에서는 이 조합을 차단합니다. Localhost를 사용하면 이 문제를 피할 수 있으며 현재 버전에서 가장 안정적인 설정입니다.</p>
<p><br></p>
<hr>
<p><br></p>
<h2 style="font-size:26px;line-height:1.4;font-weight:bold;"><strong>STEP 12. 직면한 문제들</strong></h2>
<p><br></p>
<h3>센서 레지스터 이해하기</h3>
<p>가장 큰 전자기기 문제는 7-in-1 RS485 센서들이 모두 정확히 동일한 레지스터 순서나 스케일링을 사용하지 않는다는 점이었습니다.</p>
<p>센서는 유효한 Modbus 응답을 반환할 수 있지만, pH, EC 또는 NPK 값을 코드에서 사용된 레이아웃과 다른 레지스터에 배치할 수 있습니다.</p>
<p>해결책은 레지스터 주소와 스케일링을 하나의 함수에 유지하여 센서 매뉴얼을 확인한 후 변경할 수 있도록 하는 것이었습니다.</p>
<h3>RS485 A 및 B 라벨링</h3>
<p>RS485 A 및 B 라벨은 제조업체 간에 항상 일관되지 않습니다.</p>
<p>배선과 설정이 올바른 것처럼 보이지만 센서가 응답하지 않는 경우, A와 B를 한 번 바꾸는 것이 유용한 테스트입니다.</p>
<h3>로직 레벨 차이</h3>
<p>XIAO는 3.3V GPIO를 사용하는 반면, 전통적인 MAX485 모듈은 일반적으로 5V에서 작동합니다.</p>
<p>RO 출력을 ESP32에 직접 연결하면 입력이 손상될 수 있습니다. 모듈이 전기적으로 호환된다고 가정하는 대신 레벨 시프팅으로 이를 고려했습니다.</p>
<h3>IP 주소 변경</h3>
<p>ESP32의 로컬 IP는 라우터가 재연결될 때 변경될 수 있습니다.</p>
<p>이는 웹사이트에 저장된 주소가 장치가 연결되어 있음에도 불구하고 결국 작동을 멈출 수 있음을 의미합니다.</p>
<p>테스트 버튼은 이를 빠르게 식별하는 데 도움이 됩니다. 라우터에서 DHCP 예약을 설정하면 주소를 고정할 수도 있습니다.</p>
<h3>로컬 HTTP 및 Vercel HTTPS</h3>
<p>웹사이트는 Vercel에서 데모로 잘 작동하지만, ESP32와의 직접 통신은 더 복잡합니다.</p>
<p>Vercel은 HTTPS를 사용하는 반면, ESP32는 로컬 네트워크 내에서 HTTP 주소를 제공합니다. 브라우저는 HTTPS 페이지가 그 불안전한 로컬 엔드포인트에 요청하는 것을 차단할 수 있습니다.</p>
<p>현재 빌드에서는 로컬호스트에서 웹사이트를 실행하는 것이 가장 신뢰할 수 있는 솔루션입니다.</p>
<h3>모바일 대시보드 레이아웃</h3>
<p>원래의 데스크탑 스타일 카드가 휴대폰에서 너무 좁아졌습니다.</p>
<p>글꼴 크기를 줄이는 것만으로는 부족하여, 센서 카드를 컴팩트한 수평 행으로 변경하고 크롭 선택기를 수평으로 스크롤 가능하게 만들었습니다.</p>
<p>이렇게 하여 가독성을 유지하고 야외에서 조작하기 쉽게 만들었습니다.</p>
<h3>인클로저 여유 공간</h3>
<p>곡선형 인클로저는 예상보다 가장자리 근처에 여유 공간이 적었습니다.</p>
<p>전자기기를 배치할 때 나사 기둥, USB 커넥터 및 케이블 굴곡에 주의해야 했습니다.</p>
<h3>삼색 PLA 마감</h3>
<p>삼색 필라멘트는 제가 예상한 외관을 생성하지 않았습니다.</p>
<p>출력을 버리는 대신, 샌딩하고 페인팅했습니다. 초록색 마감이 프로젝트와 훨씬 더 잘 어울리게 되었습니다.</p>
<p><br></p>
<hr>
<p><br></p>
<h2 style="font-size:26px;line-height:1.4;font-weight:bold;"><strong>STEP 13. 장치 테스트</strong></h2>
<p><br></p>
<p><img src="https://gongbangunion.com/data/editor/2608/1c7d13ddbf8a5d7d573f7c71d5f510ad_1788139871_0019.jpg" alt="장치 테스트" style="max-width:100%;height:auto;"></p>
<p><br></p>
<p><img src="https://gongbangunion.com/data/editor/2608/1c7d13ddbf8a5d7d573f7c71d5f510ad_1788139871_0072.jpg" alt="장치 테스트" style="max-width:100%;height:auto;"></p>
<p><br></p>
<p>테스트를 통신, 센서 응답 및 웹사이트 테스트로 나누었습니다.</p>
<p>먼저 대시보드를 열지 않은 상태에서 장치에 전원을 공급했습니다.</p>
<p>WS2812는 처음에 빨간색으로 켜졌고, ESP32가 Wi-Fi에 연결된 후 녹색으로 바뀌었습니다.</p>
<p>보드레이트 115200으로 시리얼 모니터를 열고, 보드가 로컬 IP 주소를 출력하는지 확인했습니다.</p>
<p>그런 다음 브라우저에서 다음 주소를 열었습니다:</p>
<div class="ql-code-block-container"><div class="ql-code-block" data-language="plain">http://ESP32-IP/data</div></div>
<p>이를 통해 ESP32가 JSON을 반환하고 7개의 측정 필드가 모두 존재하는 것을 확인했습니다.</p>
<p>다음으로 프로브를 토양에 넣고 토양 상태가 변할 때 측정값이 합리적인 방향으로 변하는지 관찰했습니다.</p>
<p>이 단계의 주요 목적은 실험실 수준의 정확성을 주장하는 것이 아니라, 명백히 잘못된 레지스터 매핑, 스케일링 또는 통신 오류를 찾는 것이었습니다.</p>
<p>그런 다음 localhost에서 웹사이트를 시작하고 Live 모드를 선택한 후 동일한 IP 주소를 입력했습니다.</p>
<p>Test 버튼으로 연결을 확인했고, 분석을 시작하자 측정값이 대시보드 카드로 전송되었습니다.</p>
<p>페이지를 새로 고치지 않아도 호환성 메시지, 비교표 및 권장 사항이 업데이트되는지 확인하기 위해 사용 가능한 작물 사이를 전환했습니다.</p>
<p>또한 데스크톱 및 휴대폰 화면 너비에서 인터페이스를 테스트했습니다.</p>
<p>센서 카드는 모바일 행으로 바뀌었고, 작물 옵션은 가로로 스크롤할 수 있게 되었으며, Settings 창은 하단 시트로 열렸습니다.</p>
<p>마지막으로 Export Data, Share Report 및 Download PDF 컨트롤을 테스트했습니다.</p>
<p>토양 센서의 측정값을 농업적으로 정확한 것으로 간주하려면 먼저 제조업체의 절차에 따라 센서를 보정해야 합니다.</p>
<p>보다 공식적인 비교를 위해 다음 단계에서는 문서화된 토양 샘플 여러 개를 테스트하고 Dirt Nerd의 측정값을 보정된 기준 기기의 측정값 또는 실험실 결과와 비교해야 합니다.</p>
<p><br></p>
<hr>
<p><br></p>
<h2 style="font-size:26px;line-height:1.4;font-weight:bold;"><strong>STEP 14. 최종 생각</strong></h2>
<p><br></p>
<p><img src="https://gongbangunion.com/data/editor/2608/1c7d13ddbf8a5d7d573f7c71d5f510ad_1788139871_3561.jpg" alt="최종 생각" style="max-width:100%;height:auto;"></p>
<p><br></p>
<p><img src="https://gongbangunion.com/data/editor/2608/1c7d13ddbf8a5d7d573f7c71d5f510ad_1788139871_364.jpg" alt="최종 생각" style="max-width:100%;height:auto;"></p>
<p><br></p>
<p><img src="https://gongbangunion.com/data/editor/2608/1c7d13ddbf8a5d7d573f7c71d5f510ad_1788139871_3693.jpg" alt="최종 생각" style="max-width:100%;height:auto;"></p>
<p><br></p>
<p><img src="https://gongbangunion.com/data/editor/2608/1c7d13ddbf8a5d7d573f7c71d5f510ad_1788139871_375.jpg" alt="최종 생각" style="max-width:100%;height:auto;"></p>
<p><br></p>
<p>Dirt Nerd는 ESP32에 연결된 센서 이상의 의미를 갖게 되었습니다.</p>
<p>제가 가장 즐겼던 부분은 전자기기, 펌웨어, 인터페이스 및 인클로저를 하나의 제품 같은 프로토타입으로 통합하는 것이었습니다.</p>
<p>이 프로젝트는 측정값을 표시하는 것이 작업의 절반에 불과하다는 것을 가르쳐 주었습니다. 사용자가 자신이 기르고자 하는 식물에 대한 의미를 이해할 수 있을 때 정보는 훨씬 더 유용해집니다.</p>
<p>저는 RS485 통신, Modbus 레지스터, 전압 레벨 차이, 로컬 HTTP API 및 반응형 인터페이스 디자인에 대해 많은 것을 배웠습니다.</p>
<p>인클로저 또한 예상치 못한 디자인 여정을 겪었습니다. 처음 상상했던 깨끗한 물방울 모양을 유지하지 않았지만, 약간 오징어 같은 최종 형태가 프로젝트를 더 인식 가능하게 만들었습니다.</p>
<p>미래 버전에서 개선하고 싶은 몇 가지 사항이 있습니다.</p>
<p>신뢰할 수 있는 기준 측정값에 대해 센서를 보정하고, 작물 데이터베이스를 확장하며, 모든 비교를 실시간 읽기에서 직접 계산하고, 펌웨어에 자격 증명을 저장하지 않고 Wi-Fi 설정을 위한 더 나은 방법을 추가하고 싶습니다.</p>
<p>원격 액세스를 위해서는 직접 로컬 HTTP 연결을 안전한 MQTT 또는 클라우드 기반 데이터 경로로 교체하고 싶습니다.</p>
<p>내부 전자기기 장착을 더 정리하고, 분석기가 별도의 전원 케이블 없이 사용될 수 있도록 충전식 배터리를 추가하고 싶습니다.</p>
<p>현재로서는 Dirt Nerd가 토양을 측정하고 결과를 표시하며 이를 더 이해하기 쉬운 식물별 보고서로 변환할 수 있는 완전한 프로토타입으로 작동합니다.</p>
<p>자신만의 버전을 만들 경우, 정확한 토양 센서에 대한 매뉴얼을 확인하고, 전압 레벨을 안전하게 유지하며, 첫 번째 읽기 세트를 최종 답변이 아닌 보정의 시작으로 간주하십시오.</p>
<p>읽어 주셔서 감사합니다. 이 프로젝트가 여러분이 자신만의 연결된 토양 분석기를 만드는 데 유용한 출발점이 되기를 바랍니다.</p>

</div>

회원메뉴

좌측슬라이드

쇼핑몰 검색

회원메뉴

STEP 1. 준비물

전자기기

제작

소프트웨어

STEP 2. 프로젝트 작동 방식

STEP 3. 인클로저 설계하기

STEP 4. 3D 프린팅

STEP 5. 페인팅 및 마감

STEP 6. 전자기기

XIAO ESP32-C6

7-in-1 토양 센서

MAX485 모듈

WS2812 LED

전원 및 접지

STEP 7. 회로도

XIAO에서 MAX485로

MAX485에서 토양 센서로

WS2812 연결

STEP 8. 최종 조립

STEP 9. 대시보드 이해하기

1. 랜딩 페이지

2. 분석 시작

3. 센서 대시보드

4. 작물 선택

5. 호환성 보고서

6. 토양 건강 점수

7. 권장 사항

8. 영양소 시각화

9. 보고서 저장 및 공유

10. 데모 및 실시간 모드

관련링크

STEP 10. ESP32 프로그래밍

1. 필요한 라이브러리 설치

2. Wi-Fi 및 핀 구성

3. Modbus 구성

4. 주요 객체 생성

5. 센서 판독값 저장

6. Wi-Fi 상태 LED

7. MAX485 제어

8. 7가지 토양 매개변수 읽기

9. 판독값을 JSON으로 변환

10. 웹사이트의 데이터 요청 허용

11. /data 엔드포인트 생성

12. Wi-Fi 연결

13. 자동 Wi-Fi 재연결

14. 설정

15. 메인 루프

STEP 11. 웹페이지 만들기

센서 데이터 저장

웹사이트 상태 관리

장치 설정 저장

사용자 지정 데모 측정값 추가

ESP32 주소 준비

ESP32에서 데이터 수신

분석 시작

측정 애니메이션 만들기

작물 보고서 업데이트

데이터 내보내기

모바일 최적화

웹사이트 실행

STEP 12. 직면한 문제들

센서 레지스터 이해하기

RS485 A 및 B 라벨링

로직 레벨 차이

IP 주소 변경

로컬 HTTP 및 Vercel HTTPS

모바일 대시보드 레이아웃

인클로저 여유 공간

삼색 PLA 마감

STEP 13. 장치 테스트

STEP 14. 최종 생각