# Wemos D1 mini × MAX7219 智慧顯示 IoT 實作課程

---

## 📘 課程簡介

本課程以 **Wemos D1 mini (ESP8266)** 為核心，結合 **MAX7219 8×32 LED 矩陣模組** 與 **DHT11 溫濕度感測器**，讓學生從基礎的 LED 顯示控制開始，逐步進入網路時間同步（NTP）、再到 MQTT 雲端通訊應用，完成一個具備「即時顯示 + 網路互動」的 IoT 智慧顯示系統。


## 🎯 課程目標

學生能夠：

1. 了解 MAX7219 8×32 LED 矩陣模組與 MD_Parola 函式庫的使用方法。
2. 能利用 NTP 網路對時，顯示「日期、時間」與 DHT11 感測之「溫濕度」。
3. 能透過 MQTT 通訊控制 LED 矩陣顯示雲端傳來的文字訊息。

## 🧰 教學器材與材料

| 名稱 | 數量 | 說明 |
|------|------|------|
| Wemos D1 mini (ESP8266) | 1 | 主控板，具 WiFi 功能 |
| MAX7219 8×32 LED 矩陣模組 | 1 | 顯示資訊用 |
| DHT11 溫濕度模組 | 1 | 感測環境資料 |
| 杜邦線 | 若干 | 模組連接用 |
| Micro USB 傳輸線 | 1 | 上傳程式與供電 |
| 電腦 (安裝 Arduino IDE) | 1 | 編寫與上傳程式 |

**🔧 腳位接線表**

| 模組 腳位 | 接 Wemos D1 mini |
|------------|----------------|
| **MAX7219 8×32 LED 矩陣模組** | VCC → 5V<br>GND → GND<br>DIN → D7(GPIO13)<br>CS → D8(GPIO15)<br>CLK → D5(GPIO14) |
| **DHT11 溫濕度感測模組** | VCC → 5V<br>GND → GND<br>DATA → D4 (GPIO2) |

---

## 🧩 課程單元設計

### 🧱 單元一：MAX7219 8×32 LED 矩陣模組硬體與 MD_Parola 函式庫應用

**學習目標：**
- 認識 MAX7219 矩陣模組結構與接線方式。
- 了解 MD_MAX72xx、MD_Parola 函式庫的功能。
- 學會設計簡單的文字滾動顯示效果。

**重點概念：**
- SPI 通訊原理
- MD_Parola 函式庫初始化與顯示控制
- 文字滾動效果設定

**範例程式：**

#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include <SPI.h>

#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4
#define DATA_PIN D7
#define CLK_PIN  D5
#define CS_PIN   D8   

MD_Parola matrix = MD_Parola(HARDWARE_TYPE, DATA_PIN, CLK_PIN, CS_PIN, MAX_DEVICES);

void setup() {
  matrix.begin();
  matrix.displayText("HELLO WORLD!", PA_CENTER, 100, 0, PA_SCROLL_LEFT, PA_SCROLL_LEFT);
}

void loop() {
  if (matrix.displayAnimate()) {
    matrix.displayReset();
  }
}

---
### 🌐單元二：NTP 網路對時、顯示日期與時間、DHT11 溫濕度整合

**學習目標：**

- 學會使用 NTP (Network Time Protocol) 自動校時。
- 使用 time.h 或 NTPClient 函式庫取得時間。
- 同時顯示「時間、日期」與 DHT11 感測的「溫濕度」。

**重點概念：**

- WiFi 連線設定
- NTP 網路對時與時間格式化
- 文字資訊滾動顯示

**範例程式：**

#include <ESP8266WiFi.h>
#include <WiFiUdp.h>
#include <NTPClient.h>
#include <DHT.h>
#include <MD_Parola.h>
#include <MD_MAX72xx.h>

#define DHTPIN D4
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);

#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4
#define DATA_PIN D7
#define CLK_PIN  D5
#define CS_PIN   D8
MD_Parola matrix = MD_Parola(HARDWARE_TYPE, DATA_PIN, CLK_PIN, CS_PIN, MAX_DEVICES);

const char* ssid = "860L";
const char* password = "abc5300abc";

WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP, "pool.ntp.org", 8 * 3600, 60000);

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) delay(500);

  dht.begin();
  matrix.begin();
  timeClient.begin();
}

void loop() {
  timeClient.update();
  float t = dht.readTemperature();
  float h = dht.readHumidity();

  String msg = timeClient.getFormattedTime() + " T:" + String((int)t) + "C H:" + String((int)h) + "%";
  matrix.displayText(msg.c_str(), PA_CENTER, 80, 0, PA_SCROLL_LEFT, PA_SCROLL_LEFT);

  while (!matrix.displayAnimate())
      {yield();}
}

---
### ☁️ 單元三：MQTT 設定與 LED 矩陣跑馬燈顯示控制
**學習目標：**
- 了解 MQTT 通訊架構（Broker、Publisher、Subscriber）。
- 能連線至公用 MQTT Broker 接收訊息並顯示於 LED 矩陣。
- 能用手機或電腦 MQTT Client 發送訊息控制顯示內容。

**重點概念**：
- MQTT 基本原理
- Topic 與訂閱機制
- 文字即時顯示控制

**範例程式：**

#include <ESP8266WiFi.h>
#include <PubSubClient.h>
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include <SPI.h>

#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4
#define DATA_PIN D7
#define CLK_PIN  D5
#define CS_PIN   D8   

MD_Parola matrix = MD_Parola(HARDWARE_TYPE, DATA_PIN, CLK_PIN, CS_PIN, MAX_DEVICES);

const char* ssid = "860L";
const char* password = "abc5300abc";
const char* mqtt_server = "mqttgo.io";

WiFiClient espClient;
PubSubClient client(espClient);
String message = "MQTT Display Ready! topic iot/display";

void callback(char* topic, byte* payload, unsigned int length) {
  message = "";
  for (int i = 0; i < length; i++) message += (char)payload[i];
  matrix.displayClear();
  matrix.displayText(message.c_str(), PA_CENTER, 100, 0, PA_SCROLL_LEFT, PA_SCROLL_LEFT);
}

void reconnect() {
  while (!client.connected()) {
    if (client.connect("WemosD1MiniDisplay")) {
      client.subscribe("iot/display");
    } else {
      delay(2000);
    }
  }
}

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) delay(500);
  client.setServer(mqtt_server, 1883);
  client.setCallback(callback);
  matrix.begin();
  matrix.displayClear();
  matrix.displayText(message.c_str(), PA_CENTER, 100, 0, PA_SCROLL_LEFT, PA_SCROLL_LEFT);
}

void loop() {
  if (!client.connected()) reconnect();
  client.loop();

  if (matrix.displayAnimate()) matrix.displayReset();
}

**測試方式：**
- 使用手機 App（如 MQTT Dash）或電腦軟體（MQTT Explorer）
- Broker：mqttgo.io
- Topic：iot/display
- 發送文字訊息，即可在 LED 矩陣上滾動顯示。
---

## 📊 課程評量建議
| 評量項目 | 指標 | 評量方式 |
| ---------------- | ---------- | ---- |
| MAX7219 顯示控制 | 能正確顯示文字或數字 | 實作檢核 |
| NTP 對時與 DHT11 整合 | 能顯示時間與溫濕度 | 顯示測試 |
| MQTT 通訊應用 | 能接收並顯示雲端文字 | 操作測試 |
| 系統整合應用 | 三功能正常運作 | 專題展示 |

## 💡延伸應用建議

- 上傳 DHT11 溫濕度資料至 ThingSpeak 平台。
- 顯示即時天氣資訊（串接 OpenWeatherMap API）。
- 設計多行滾動字幕或多段文字輪播。
- 加入光敏電阻自動調整亮度。
- 3D 列印外殼，製作智慧桌上顯示器。
## 📚 學習成果展示

- 完成本課程後，學生將能夠：
- 獨立操作 ESP8266 開發板與 LED 矩陣顯示器。
- 理解 IoT 架構中「感測 → 顯示 → 網路 → 雲端」的流程。
- 實作一個具備即時資訊顯示與遠端控制的 IoT 作品。