เรียนรู้ครั้งที่ 19 [การสร้างโปรแกรมแสดงอุณหภูมิ/ความชื้นด้วย Visual C#]

[admin]

การเรียนรู้ในครั้งนี้เป็นการพัฒนาต่อยอดจากครั้งที่ 17 ครั้งนี้ค่าที่อ่านเข้ามาเป็นค่าของอุณหภูมิกับค่าความชื้นสัมพัทธ์ที่ตรวจจับด้วย DHT22 ด้วยบอร์ดไมโครคอนโทรลเลอร์ Arduino โดยค่าที่วัดได้จะส่งออกมาจากบอร์ด Arduino ผ่านทางพอร์ตอนุกรมทั้ง 2 ค่าจะถูกคั้นด้วยอักขระ , ตัวโปรแกรมที่สร้างด้วย visual c# จะต้องแยกค่าให้เป็น 2 ค่าแล้วนำไปแสดงผล
DHT22 และ DHT11 จะให้ค่าเหมือนกัน ต่างตรงที่ DHT22 วัดค่าอุณหภูมิที่กว้างกว่า ค่าที่วัดได้แม่นยำมากกว่า (โค้ดที่เขียนใน Arduino ใช้โค้ดเดียวกันต่างตรงกำหนดชื่อเซนเซอร์เพียงบรรทัดเดียว)

คอนเซปของการสร้าง
   -บอร์ด Arduino อ่านค่าอุณหภูมิและความชื้นโดยเอาเฉพาะค่าที่วัดได้เท่านั้น ดำเนินการรวมข้อมูลทั้ง 2 รวมเป็นข้อความเดียวกันโดยแยกข้อมูลด้วย , ส่งออกทางพอร์ตอนุกรม
   -โปรแกรมอินเตอร์เฟสที่สร้างขึ้นด้วย Visual C# รับข้อมูลเข้ามาทางพอร์ตอนุกรมแล้วทำการแยกข้อมูลที่เข้ามาออกเป็นส่วน ๆ โดยอาศัยเครื่องหมาย , เป็นตัวแยก แล้วนำค่าที่ได้ไปแสดงผล

การดำเนินการตามขั้นตอนดังนี้
1. วงจรที่ใช้ทดลอง เชื่อมต่อตัวเซนเซอร DHT22 (หรือจะใช้ DHT11 ก็ได้)โดยขาสัญญาณเข้าที่ขา D8 และต่อขาไฟบวกและกราวด์พร้อมทั้งต่อตัวต้านทานพูลอัพระหว่าขาสัญญาณกับไฟบวกขนาด 4.7k ดังรูป


2. สร้างโปรเจคไฟล์แล้ววางตัวคอนโทรลและแก้ไขชื่อดังรูป ตัวคอนโทรลที่ใช้งานได้แก่
    -Button
    -ComboBox
    -GroupBox
    -Label
    -SerialPort
    -TextBox


3. คลิกเพิ่มรายการในคอมโบบ็อกที่ใช้เลือกความเร็วในการสื่อสาร

ความเร็วที่ให้เลือกใช้มีดังนี้

โค๊ด: [Select]

9600
19200
38400
57600
74880
115200

4. กดปุ่ม Shift ค้างไว้แล้วคลิกที่คอมโบบ็อกทั้ง 2 ตัวตั้งค่าคุณสมบัติเริ่มต้นให้ DropDownStyle ให้เป็น DropDownList เพื่อไม่ให้ผู้ใช้งานพิมพ์ทับลงในช่องขณะรันโปรแกรม (ให้เลือกอย่างเดียว)


5. คลิกที่ Text Box เลือกให้เป็น MultiLine แล้วลากปรับขนาดเพื่อให้แสดงข้อมูลที่รับมาได้หลายบรรทัด


6. ปรับคุณสมบัติของ Label ที่ใช้แสดงค่าอุณหภูมิและความชื้นโดยตั้งค่า 2 ค่าตามรูป


7. ปรับขนาดฟอนต์ให้เหมาะสมกับขนาดความกว้างของกล่อง Label
   -ให้พิมพ์คำว่า 88.8°C (สัญลักษณะองศาให้คัดลอกจากหน้าเวป) ในช่องแสดงอุณหภูมิ
   -ให้พิมพ์คำว่า 99.9% ในช่องแสดงความชื้น
  แล้วประขนาดความกว้างของช่องให้แสดงผลได้พอดี


8. ดับเบิลคลิกที่ฟอร์ม เขียนโค้ดเพื่อให้โปรแกรมสแกนหาพอร์ตอนุกรมที่คอมพิวเตอร์มองเห็น

โค้ด

โค๊ด: [Select]

using System.IO.Ports;

โค๊ด: [Select]

            baudrate_cbb.SelectedIndex = 0;
            string[] ports = SerialPort.GetPortNames();
            port_cbb.Items.AddRange(ports);
            port_cbb.SelectedIndex = 0;

9. คลิกที่คอมโบบ็อกที่ใช้เลือกพอร์ต แล้วคลิกเลือกเหตุการณ์กระตุ้นเป็น MouseClick (แล้วดับเบิลคลิก) เพื่อเขียนโค้ดให้ทำงานเมื่อมีเมาส์มาคลิกที่คอมโบบ็อกตัวนี้


10. เขียนโค้ดให้โปรแกรมสแกนหาพอร์ตอนุกรมใหม่ที่คอมพิวเตอร์มองเห็นในจังหวะที่มีการคลิกเมาส์ที่คอมโบบ็อกนี้

โค้ด

โค๊ด: [Select]

            port_cbb.Items.Clear();
            string[] ports = SerialPort.GetPortNames();
            port_cbb.Items.AddRange(ports);
            port_cbb.SelectedIndex = 0;

11. คลิกที่ปุ่ม Disconnect ตั้งค่าเริ่มต้นให้ Enable เป็น False


12. ดับเบิลคลิกที่ปุ่ม Connect (ปุ่มสำหรับเปิดการทำงานพอร์ตอนุกรม) แล้วเขียนโค้ด
  -เปิดการทำงานของปุ่ม Disconnect
  -ปิดการทำงานของปุ่ม Connect เพื่อป้องกันการเปิดพอร์ตซ้ำ
  -เปิดการทำงานพอร์ตอนุกรมโดยนำค่าหมายเลขพอร์ตและค่าความเร็วสื่อสารที่ปรากฎข้อความในคอมโบบ็อกมาใช้งาน

โค้ด

โค๊ด: [Select]

            con_btn.Enabled = false;
            dis_btn.Enabled = true;
            if (serialPort1.IsOpen)
                serialPort1.Close();
            serialPort1.PortName = port_cbb.Text;
            serialPort1.BaudRate = Convert.ToInt32(baudrate_cbb.Text);
            try
            {
                serialPort1.Open();
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message, "Message", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }

13. ดับเบิลคลิกที่ปุ่ม Disconnect เขียนคำสั่งปิดการใช้พอร์ต

โค้ด

โค๊ด: [Select]

            con_btn.Enabled = true;
            dis_btn.Enabled = false;
            if (serialPort1.IsOpen)
                serialPort1.Close();

14. คลิกไอคอน Serial Port เลือกการกระตุ้นเป็น DataReceived แล้วเบิลคลิก


15. เขียนโค้ดเพื่อให้ทำงานเมื่อมีข้อมูลเข้ามาทางพอร์ตอนุกรม
   -แสดงข้อมูลที่รับเข้ามาไว้ที่ textBox1
   -แสดงค่าอุณหภูมิใน temp_label (สัญลักษณ์องศาให้คัดลอกจากหน้าเวปไปวาง ° )
   -แสดงค่าความชื้นใน humid_label

โค้ดส่วนที่ 1

โค๊ด: [Select]

private string DispString;   //used to store the values read

โค้ดส่วนที่ 2

โค๊ด: [Select]

            DispString = serialPort1.ReadExisting();
            this.Invoke(new EventHandler(DisplayText));

โค้ดส่วนที่ 3

โค๊ด: [Select]

        private void DisplayText(object sender, EventArgs e)
        {
            textBox1.AppendText(DispString);
            string[] value = DispString.Split(new string[] { "," }, StringSplitOptions.None);
            temp_label.Text = value[0] + "°C";
            humid_label.Text = value[1] + "%";
        }

16. คลิกที่ฟอร์มเลือกเหตุการณ์กระตุ้นเป็น FormClosing


17. เขียนโค้ดให้ปิดการใช้งานพอร์ตอนุกรมก่อนปิดโปรแกรม

โค้ด

โค๊ด: [Select]

            if (serialPort1.IsOpen)
                serialPort1.Close();
            Application.Exit();

ส่วนของโค้ดสำหรับบอร์ด Arduino
โค้ดสำหรับเขียนอ่านค่าอุณหภูมิและความชื้นจาก DHT11,DHT22 ต้องใช้ไลบรารี่ช่วย 2 ตัวคือ
-DHT.h https://github.com/adafruit/DHT-sensor-library
-Adafruit_Sensor.h https://github.com/adafruit/Adafruit_Sensor

18. เข้าเวปแรกแล้วดาวน์โหลด


19.เข้าเวปที่สองแล้วดาวน์โหลด


20. ทำการเพิ่มไลบรารี่ลงในโปรแกรม Arduino IDE โดยการเพิ่มจากไฟล์ zip แล้วทำการหาไฟล์ zip ที่ได้จากการดาวน์โหลดข้อ 18,19


21. โค้ดที่ใช้อ่านอุณหภูมิและความชื้นโดนส่งค่าทั้งสองออกทางพอร์ตอนุกรม

โค้ด

โค๊ด: [Select]

#include <DHT.h>
#define DHTPIN 8       // pin to connect DHT22
#define DHTTYPE DHT22  // Type of use DHT11,DHT21,DHT22 

DHT dht(DHTPIN, DHTTYPE);
void setup() {
  Serial.begin(9600);
  Serial.println("DHT test!");
  dht.begin();
}
void loop() {
  delay(2000);
  float h = dht.readHumidity();
  float t = dht.readTemperature();
  if (isnan(h) || isnan(t)) 
  {
     Serial.println("Failed to read sensor!");
     return;
  }
  Serial.print(t,1);
  Serial.print(",");
  Serial.print(h,1);
  Serial.println(",");
}

22. อัพโหลดแล้วทดสอบด้วยการเปิด Serial monitor ดูค่าที่ตรวจวัดได้ (เสร็จแล้วปิดหน้าต่างเพื่อปิดพอร์ตใช้งาน)


22. ทดลองรันโปรแกรม (ที่เขียนด้วย Visual C#) เลือกพอร์ตและคลิก connect ดูผลการแสดงค่า

[admin]

...

[admin]

...