จอ OLED โค้ดตัวอย่างการสร้างกราฟเส้น

จอ OLED สร้างกราฟเส้นแบบง่ายด้วย ESP32

จอ OLED การแสดงผลข้อมูลในรูปแบบกราฟเป็นเครื่องมือที่สำคัญในการแสดงให้เห็นถึงแนวโน้มของข้อมูล โดยเฉพาะในงานที่ต้องการตรวจสอบค่าหรือสถิติต่างๆ เมื่อเวลาผ่านไป

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

อุปกรณ์ที่ใช้

  1. ESP32: บอร์ดไมโครคอนโทรลเลอร์ที่ทรงพลังและมีความสามารถในการเชื่อมต่อ Wi-Fi และ Bluetooth เหมาะสำหรับการพัฒนาโครงการ IoT ที่หลากหลาย
  2. จอ OLED ขนาด 128×64 พิกเซล: จอแสดงผลขนาดเล็กที่สามารถแสดงผลข้อมูลทั้งในรูปแบบตัวอักษรและกราฟิกได้อย่างชัดเจน โดยใช้การเชื่อมต่อผ่าน I2C
  3. สาย 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 สร้างกราฟเส้น

  1. การเริ่มต้นใช้งานจอ OLED
    • ในฟังก์ชัน setup() มีการเริ่มต้นการทำงานของจอ OLED ด้วย display.begin() โดยใช้พิกัด I2C ที่ 0x3C ซึ่งเป็นค่าเริ่มต้นของจอ OLED ส่วนใหญ่ จากนั้นเราทำการเคลียร์หน้าจอและแสดงข้อความเพื่อเริ่มต้น
  2. การตั้งค่าตัวจับเวลา
    • เราใช้ฟังก์ชัน millis() ใน loop() เพื่อจับเวลาว่า 2 วินาทีผ่านไปแล้วหรือยัง โดยถ้าครบ 2 วินาที เราจะเลื่อนข้อมูลในอาร์เรย์ dataPoints ไปทางซ้าย และอัปเดตข้อมูลใหม่ที่ตำแหน่งสุดท้ายด้วยค่าแบบสุ่มที่อยู่ในช่วง 40 ถึง 80
  3. การวาดกราฟ
    • ฟังก์ชัน 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 ได้หลากหลาย

Shopping Cart
Scroll to Top