จอ OLED สร้างกราฟเส้นแบบง่ายด้วย ESP32
จอ OLED การแสดงผลข้อมูลในรูปแบบกราฟเป็นเครื่องมือที่สำคัญในการแสดงให้เห็นถึงแนวโน้มของข้อมูล โดยเฉพาะในงานที่ต้องการตรวจสอบค่าหรือสถิติต่างๆ เมื่อเวลาผ่านไป
ตัวอย่างโค้ดในบทความนี้จะแสดงวิธีการใช้บอร์ด ESP32 และจอ OLED ขนาด 128×64 พิกเซลเพื่อแสดงข้อมูลในรูปแบบกราฟเส้น (Line Graph) ซึ่งสามารถนำไปประยุกต์ใช้ในโครงการต่างๆ เช่น การตรวจจับเซ็นเซอร์ การวัดอุณหภูมิ หรือการตรวจสอบค่าความชื้น

อุปกรณ์ที่ใช้
- ESP32: บอร์ดไมโครคอนโทรลเลอร์ที่ทรงพลังและมีความสามารถในการเชื่อมต่อ Wi-Fi และ Bluetooth เหมาะสำหรับการพัฒนาโครงการ IoT ที่หลากหลาย
- จอ OLED ขนาด 128×64 พิกเซล: จอแสดงผลขนาดเล็กที่สามารถแสดงผลข้อมูลทั้งในรูปแบบตัวอักษรและกราฟิกได้อย่างชัดเจน โดยใช้การเชื่อมต่อผ่าน I2C
- สาย Jumper และ Breadboard: ใช้สำหรับการเชื่อมต่อบอร์ด ESP32 กับจอ OLED
รายละเอียดพื้นฐานของ ESP32 คืออะไร พร้อมจุดเด่นและวิธีเริ่มต้นใช้งาน
โค้ดโปรแกรม
/*
* โค้ดตัวอย่างนี้ Devadiy สร้างขึ้นเพื่อการเรียนรู้และการพัฒนาโครงการอิเล็กทรอนิกส์แบบเปิด (Open Source)
* โดยทุกคนสามารถใช้งานเนื้อหานี้ได้ฟรี เพื่อประโยชน์ส่วนตัวหรือการศึกษา
* ขอบคุณที่สนใจและสนับสนุน www.devadiy.com
*/
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
const int graphWidth = 100;
const int graphHeight = 50;
const int graphX = 5; // เริ่มตำแหน่ง X ของกราฟ
const int graphY = 10; // เริ่มตำแหน่ง Y ของกราฟ
const int numPoints = 10; // จำนวนจุดบนกราฟ
int dataPoints[numPoints] = {0, 0, 0, 0, 0, 0, 0, 0, 0, 0}; // ข้อมูล
unsigned long previousMillis = 0; // ตัวแปรสำหรับการตั้งเวลา
const unsigned long interval = 2000; // 2 วินาที (2000 มิลลิวินาที)
void setup() {
// เริ่มต้นการเชื่อมต่อกับจอ OLED
if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F(“SSD1306 allocation failed”));
}
display.clearDisplay();
display.setTextColor(SSD1306_WHITE);
display.display();
}
void loop() {
unsigned long currentMillis = millis();
// เช็คเวลาว่า 2 วินาทีผ่านไปหรือยัง
if (currentMillis – previousMillis >= interval) {
previousMillis = currentMillis; // รีเซ็ตตัวจับเวลา
// เลื่อนข้อมูลในอาร์เรย์ไปทางซ้าย
for (int i = 0; i < numPoints – 1; i++) {
dataPoints[i] = dataPoints[i + 1];
}
// เพิ่มค่าข้อมูลใหม่ที่ตำแหน่งสุดท้าย
dataPoints[numPoints – 1] = random(40, 81); // สุ่มค่าในช่วง 40-80
}
// วาดกราฟใหม่
display.clearDisplay();
drawGraph(dataPoints);
// แสดงผลบนจอ OLED
display.display();
}
// ฟังก์ชันสำหรับวาดกราฟ
void drawGraph(int* dataPoints) {
// วาดเส้นแกน X
display.drawLine(graphX, graphY + graphHeight, graphX + graphWidth, graphY + graphHeight, SSD1306_WHITE);
// วาดเส้นแกน Y
display.drawLine(graphX, graphY + graphHeight, graphX, graphY, SSD1306_WHITE);
// วาดสเกลแกน X
for (int i = 0; i <= 10; i++) {
int x = graphX + (i * (graphWidth / 10));
display.drawLine(x, graphY + graphHeight, x, graphY + graphHeight – 2, SSD1306_WHITE);
}
// วาดสเกลแกน Y
for (int i = 0; i <= 5; i++) {
int y = graphY + (i * (graphHeight / 5));
display.drawLine(graphX, y, graphX + 2, y, SSD1306_WHITE);
}
// วาดเส้นกราฟ
for (int i = 0; i < numPoints – 1; i++) {
int x1 = graphX + (i * (graphWidth / (numPoints – 1)));
int y1 = graphY + graphHeight – map(dataPoints[i], 0, 100, 0, graphHeight);
display.fillCircle(x1, y1, 2, SSD1306_WHITE); // วาดจุด
int x2 = graphX + ((i + 1) * (graphWidth / (numPoints – 1)));
int y2 = graphY + graphHeight – map(dataPoints[i + 1], 0, 100, 0, graphHeight);
display.drawLine(x1, y1, x2, y2, SSD1306_WHITE);
display.fillCircle(x2, y2, 2, SSD1306_WHITE); // วาดจุด
}
// แสดงค่าล่าสุด
display.setTextSize(1);
display.setTextColor(SSD1306_WHITE);
display.setCursor(graphX + graphWidth – 40, 5);
display.print(“Value: “);
display.print(dataPoints[9]);
}
เริ่มต้นเขียนโปรแกรมบนบอร์ด Arduino ด้วยคู่มือพื้นฐาน “Arduino IDE Guide” — เรียนรู้วิธีติดตั้งและใช้งาน IDE สำหรับผู้เริ่มต้น
อธิบายโค้ดจอ OLED สร้างกราฟเส้น
- การเริ่มต้นใช้งานจอ OLED
- ในฟังก์ชัน
setup()มีการเริ่มต้นการทำงานของจอ OLED ด้วยdisplay.begin()โดยใช้พิกัด I2C ที่0x3Cซึ่งเป็นค่าเริ่มต้นของจอ OLED ส่วนใหญ่ จากนั้นเราทำการเคลียร์หน้าจอและแสดงข้อความเพื่อเริ่มต้น
- ในฟังก์ชัน
- การตั้งค่าตัวจับเวลา
- เราใช้ฟังก์ชัน
millis()ในloop()เพื่อจับเวลาว่า 2 วินาทีผ่านไปแล้วหรือยัง โดยถ้าครบ 2 วินาที เราจะเลื่อนข้อมูลในอาร์เรย์dataPointsไปทางซ้าย และอัปเดตข้อมูลใหม่ที่ตำแหน่งสุดท้ายด้วยค่าแบบสุ่มที่อยู่ในช่วง 40 ถึง 80
- เราใช้ฟังก์ชัน
- การวาดกราฟ
- ฟังก์ชัน
drawGraph()ถูกออกแบบมาเพื่อวาดกราฟบนจอ OLED โดยเริ่มจากการวาดแกน X และ Y ตามด้วยการวาดสเกลบนทั้งสองแกน และจุดข้อมูลจะถูกเชื่อมต่อด้วยเส้นกราฟ โดยใช้fillCircle()และdrawLine()จากไลบรารีAdafruit_GFX - ข้อมูลใหม่ที่เพิ่มเข้ามาในอาร์เรย์จะทำให้กราฟอัปเดตทุกๆ 2 วินาที
- ฟังก์ชัน
การทำงานของกราฟบนจอ OLED
- กราฟจะแสดงข้อมูล 10 จุดในแนวนอน โดยแต่ละจุดจะถูกสุ่มค่าในช่วง 40 ถึง 80 ซึ่งสามารถนำไปประยุกต์ใช้ในโครงการต่างๆ ได้ เช่น การแสดงผลข้อมูลจากเซ็นเซอร์ หรือข้อมูลสถิติที่เปลี่ยนแปลงตามเวลา
- คุณสามารถปรับเปลี่ยนช่วงเวลาในการอัปเดตกราฟได้โดยการเปลี่ยนค่าในตัวแปร
intervalซึ่งในตัวอย่างนี้ถูกตั้งค่าไว้ที่ 2000 มิลลิวินาที หรือ 2 วินาที
การปรับแต่งเพิ่มเติม
- คุณสามารถปรับความละเอียดของกราฟหรือจำนวนจุดในกราฟได้ โดยการเปลี่ยนแปลงค่าของ
numPointsและแก้ไขโค้ดที่เกี่ยวข้องให้สอดคล้องกัน - ถ้าคุณต้องการนำข้อมูลจริงจากเซ็นเซอร์มาแสดงบนกราฟ เพียงแค่แทนที่ค่า
random(40, 81)เป็นค่าที่ได้จากการอ่านข้อมูลเซ็นเซอร์
สรุป
ในบทความนี้ คุณได้เรียนรู้วิธีการสร้างกราฟเส้นบนจอ OLED ขนาด 128×64 โดยใช้บอร์ด ESP32 ซึ่งสามารถนำไปประยุกต์ใช้กับโปรเจกต์ IoT ของคุณได้ โค้ดตัวอย่างที่ให้ไว้ช่วยแสดงข้อมูลในรูปแบบที่เข้าใจง่ายและอ่านค่าข้อมูลล่าสุดได้อย่างชัดเจน การวาดกราฟเส้นและสเกลแกนต่างๆ จะช่วยให้คุณสามารถแสดงค่าจากเซ็นเซอร์หรือข้อมูลที่เปลี่ยนแปลงไปได้อย่างมีประสิทธิภาพ คุณสามารถปรับแต่งและพัฒนาโค้ดให้เหมาะสมกับการใช้งานของคุณ เช่น การเพิ่มข้อมูลจากเซ็นเซอร์เพิ่มเติม การแสดงผลที่ละเอียดขึ้น หรือการทำให้กราฟมีความน่าสนใจยิ่งขึ้น โค้ดนี้เป็นจุดเริ่มต้นที่ดีสำหรับการพัฒนาต่อยอดโปรเจกต์ด้านการแสดงผลข้อมูลแบบกราฟบนจอ OLED ได้หลากหลาย




