หลักสูตรการพัฒนาระบบ Hybrid Local/Cloud IoT Node ด้วย ESP32 / ESP8266
| รายการอุปกรณ์ | รายละเอียด | จำนวน |
|---|---|---|
| บอร์ดไมโครคอนโทรลเลอร์ | ESP32 (IPST-WiFi) หรือ ESP8266 (AX-WiFi / NodeMCU) | 1 บอร์ด |
| สาย USB | USB-to-Serial (Micro-USB หรือ USB-C ตามรุ่นบอร์ด) | 1 เส้น |
| คอมพิวเตอร์ + Arduino IDE | ติดตั้ง ESP32 / ESP8266 Board Package เรียบร้อยแล้ว | 1 ชุด |
`) rather than as a disconnected list.
### Pedagogical Placeholder Guidelines
Never provide direct answers inside the placeholder text. Always frame the placeholder as paired choices or category hints (e.g. `INPUT / OUTPUT`, `4095.0 / 1023.0`, `HIGH / LOW`) to encourage analytical reasoning.
### HTML Pattern
```html
lab_skeleton.ino
void setup() {
Serial.begin(115200);
pinMode(RELAY_PIN, );
}
```
### CSS Styling
```css
.code-blank {
background: rgba(99, 102, 241, 0.22);
border: 1px dashed #818cf8;
border-radius: 6px;
padding: 0.15rem 0.55rem;
color: #38bdf8;
font-family: var(--mono-font), monospace;
font-size: 0.85rem;
font-weight: 600;
outline: none;
display: inline-block;
vertical-align: middle;
transition: all 0.2s ease;
box-shadow: 0 0 8px rgba(99, 102, 241, 0.2);
}
.code-blank:focus {
border-style: solid;
border-color: #38bdf8;
background: rgba(99, 102, 241, 0.4);
color: #ffffff;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}
.code-blank::placeholder {
color: rgba(165, 180, 252, 0.65);
font-style: italic;
font-weight: 400;
font-size: 0.8rem;
}
```
---
## 8. Anti-Cheat & Plagiarism Prevention System
To maintain academic integrity and encourage genuine critical thinking, all worksheets implement client-side anti-plagiarism protection across Post-Lab Questions and Conclusion text areas:
### Features & Interceptions
- **Paste Prevention (`paste`):** Intercepts clipboard paste attempts and displays an animated warning toast.
- **Copy/Cut Prevention (`copy`, `cut`):** Prevents copying or cutting answers from analytical textareas.
- **Context Menu Lock (`contextmenu`):** Disables right-click context menus specifically over protected response fields.
- **Drag & Drop Lock (`drop`):** Prevents dragging external text directly into the answer boxes.
- **Whitelisting:** Code submission areas (`#challengeCode`) remain unrestricted to allow pasting program code from the IDE.
---
## 9. Multiple Choice Quiz & Real-time Assessment Standards
Every lab worksheet should feature a **5-Question Multiple Choice Quiz** testing theoretical fundamentals, compiler/hardware quirks, and troubleshooting awareness.
---
## 10. Wokwi Simulation & Local VS Code Template Standard (Gold Standard)
To provide 100% reliable simulation without Wokwi web server congestion or internet dropouts:
### 1. Persistent Single-Instance Simulation Engine & True Fullscreen
- Load iframe once with `view=both` to contain diagram, code, and Serial Monitor in a single session.
- **Dual-Mode True Fullscreen (`requestFullscreen()` + CSS Overlay):**
- Triggers native browser fullscreen covering 100% of the display monitor.
- Automatically overrides ancestor `.glass-card` styling (`backdrop-filter: none; overflow: visible;`) to prevent viewport clipping.
- Synchronizes UI state via `fullscreenchange` event and `Escape` key handling without iframe reloads (preserves simulation execution state).
### 2. Local VS Code Template Structure (`vscode-wokwi-template/`)
Provide an offline-ready starter template folder and `.zip` download:
```text
vscode-wokwi-template/
├── .vscode/
│ ├── extensions.json # Recommendations: PlatformIO & Wokwi for VS Code
│ └── tasks.json # 1-Click build tasks
├── src/
│ └── main.cpp # Starter firmware with setRelay() helper & guided TODOs (Never include full solution)
├── diagram.json # Microcontroller + Sensor + Actuator wiring
├── wokwi.toml # Firmware ELF mapping: '.pio/build/ipst_wifi/firmware.elf'
├── platformio.ini # Environment configs & library dependencies
└── README.md # Step-by-step local execution guide
```
> [!IMPORTANT]
> **Pedagogical Integrity Rule for Starter Templates:**
> The `main.cpp` inside the offline VS Code template must contain only the starter scaffolding (Pin setup, Serial monitor, `millis()` timer loop, and `setRelay()` helper). The challenge logic (Hysteresis, Fail-safe `isnan()`, thresholds) **must be left as `TODO` exercise comments** to ensure learners actively design and write the algorithms themselves.
### 3. Relay Active-HIGH / Active-LOW Standard Architecture
Firmware should always abstract hardware relay logic to allow seamless switching between simulation (Active-HIGH) and commercial Optocoupler relay boards (Active-LOW):
```cpp
#define RELAY_ACTIVE_LOW false // Set true when using Active-LOW relay modules
#if RELAY_ACTIVE_LOW
#define RELAY_ON LOW
#define RELAY_OFF HIGH
#else
#define RELAY_ON HIGH
#define RELAY_OFF LOW
#endif
void setRelay(uint8_t pin, bool state) {
digitalWrite(pin, state ? RELAY_ON : RELAY_OFF);
}
```
### 4. Action Toolbar Integration
```html
```
---
## 11. Real-time Regex Evaluation & 10.0-Point Pre-check Score Engine
All worksheets implement client-side pre-submission grading to give students immediate feedback before final submission.
### Standard 10.0-Point Scoring Rubric
| Component | Assessment Engine | Weight | Success Criteria |
| :--- | :--- | :---: | :--- |
| **1. Code Blanks** | Regex Pattern Matching (`evaluateLabXBlanks`) | **1.5 pts** | Syntax & keyword exact matching |
| **2. Quiz (5 MCQs)** | Multiple-Choice Quiz Engine | **2.0 pts** | 5 questions (0.4 pt each) |
| **3. Challenge Code** | Syntax & Logic Evaluator (`evaluateLabXChallenge`) | **2.5 pts** | Regex logic, fail-safe, and pin definitions |
| **4. Post-Lab Questions** | Content & Analysis (3 questions) | **2.5 pts** | Minimum text length > 10 chars each |
| **5. Attachments** | Multi-layer File Check | **1.0 pt** | Screenshot (0.5 pt) + Code File (0.5 pt) |
| **6. Conclusion** | Analytical Depth Check | **0.5 pt** | Minimum text length **> 100 characters** |
| **Total** | | **10.0 pts** | Score $\ge$ 8.0 = Ready for Submission |
---
## 12. Single-Submission Lock & Shared Station Reset Protocol
1. **Submission Lock (`lockFormAsSubmitted`):**
- Disables all form inputs and submit button upon successful submission.
- Displays a glassmorphic confirmation banner (`#submittedNoticeBanner`) in View-Only mode.
- Saves timestamp in `localStorage` under `_LAB_STORAGE_KEY + studentId`.
2. **New Student Unlock (`unlockFormForNewStudent`):**
- Provides a prominent **`[ 👤+ เริ่มทำสำหรับ นศ. คนใหม่ ]`** button on both the banner and the bottom button group.
- Shows a confirmation dialog (`Swal.fire`) warning the previous student to save/print their PDF before reset.
- Fully clears form fields, cache, Base64 uploads, and file badges, restoring the page to a fresh state for the next learner.
---
## 13. Gold Standard Reference Implementation
- **Reference Model:** `lab1/index.html` (ESP32 Smart Greenhouse IoT Node)
- **Reference Template:** `lab1/vscode-wokwi-template/` and `lab1/lab1_vscode_wokwi_template.zip`
- **Reference Backend:** `lab1/Code.gs`
---
## 14. Interactive Real-Time Waveform & Hysteresis Plotter Standard
An integrated 60 FPS HTML5 Canvas oscilloscope simulating and visualizing dynamic sensor behavior and actuator hysteresis without external charting dependencies.
### Key Capabilities & Visual Tracks
1. **Zero External Dependencies:** Built with pure HTML5 Canvas 2D context, optimized for 60 FPS rendering with zero lag and full offline functionality.
2. **Dual Analog Traces:**
- **Trace 1 (Cyan `#38bdf8`):** Temperature / Primary analog metric (0 – 50°C).
- **Trace 2 (Violet `#c084fc`):** Humidity / Secondary analog metric (0 – 100%).
3. **Dynamic Hysteresis Threshold Markers:**
- Visual dashed reference lines indicating activation thresholds (e.g. Fan ON at $30.0^\circ\text{C}$, Fan OFF at $29.5^\circ\text{C}$).
4. **Digital Actuator State Tracks (Bottom Sub-Tracks):**
- High/Low logic level step-lines for Relay Actuators (Fan & Mist).
5. **Interactive Controls & 6 Scenario Presets:**
- Real-time Sliders for manual value sweeps.
- 6 Quick-Test Presets:
- ☀️ **ร้อนจัด (>30°C):** Verifies cooling trigger.
- ❄️ **เย็น (<29.5°C):** Verifies cooling shutdown.
- 🏜️ **แห้งแล้ง (<50%):** Verifies humidification trigger.
- 🌧️ **ชื้นสูง (>60%):** Verifies humidification shutdown.
- ⚠️ **Sensor Error (`NaN`):** Verifies fail-safe shutdown of all relays.
- 🌿 **ปกติ (Normal):** Restores balanced operating setpoints.
---
## 15. Web Serial API Direct Hardware Telemetry Bridge Standard (Production-Grade)
Allows direct browser-to-ESP32 USB connection via modern Chromium standard (`navigator.serial`), enabling seamless hardware validation and live serial telemetry streaming.
### Key Architectural Standards & Best Practices
1. **DTR / RTS Auto-Release Signal Management:**
- When connecting on Chromium/Windows, always set `setSignals({ dataTerminalReady: false, requestToSend: false })` immediately after opening the port. This keeps both transistors OFF ($EN=1, IO0=1$), ensuring the ESP32 runs in Normal Flash Execution Mode without getting stuck in Reset or Download Boot.
2. **Direct Reader + Non-Fatal TextDecoder Stream:**
- Use `serialPort.readable.getReader()` with `new TextDecoder('utf-8', { fatal: false })` instead of `pipeTo()`. This prevents stream pipeline locking and gracefully skips binary noise emitted by the ESP32 bootloader (at 74880 baud).
3. **Hardware Reset Pulse via Web UI (`[ 🔄 รีเซ็ต ESP32 ]`):**
- Provide a 1-click software trigger that pulses `DTR: false, RTS: true` ($120\text{ms}$ to pull $EN$ LOW) and then releases to `DTR: false, RTS: false` ($100\text{ms}$ to release $EN$ HIGH while $IO0$ remains HIGH). This triggers a clean hardware reboot directly into **Normal Flash Boot Mode** (`SPI_FAST_FLASH_BOOT`) rather than Flashing Download Mode.
4. **On-the-Fly Baud Rate Selector:**
- Provide dropdown support (`115200`, `9600`, `57600`, `74880`, `19200`, `38400`) so learners can match their firmware configuration dynamically.
5. **Interactive Bidirectional Command TX Bar:**
- Monospace input bar to transmit commands or test parameters directly to the microcontroller over the open serial stream.
6. **Flexible Multi-Pattern Telemetry Parser:**
- Tolerates partial and mixed formats:
- Basic Skeleton: `Temp: 28.5 C | Analog: 45.0%`
- Grand Challenge: `[STATUS] Temp: 31.2 C | Hum: 55.0% | ADC: 45.0% (Raw: 1843) | Fan: ON | Mist: OFF`
- Thai & Short tags: `อุณหภูมิ: 30`, `T: 29.5`, `Hum: 60`, `ADC: 2048`, `Fan: 1`, `Mist: 0`
- Fail-Safe trigger: Automatically identifies `nan` or `[FAIL-SAFE]` lines to engage UI safe-mode chips.