บทความประกอบการเรียนรู้ => เทคนิคการอินเตอร์เฟส Visual C# => ข้อความที่เริ่มโดย: admin ที่ กันยายน 20, 2018, 11:00:20 PM

หัวข้อ: เรียนรู้ครั้งที่ 10 [การสร้างโปรแกรมแสดงผลสวิตช์ควบคุม LED]
เริ่มหัวข้อโดย: admin ที่ กันยายน 20, 2018, 11:00:20 PM
การสร้างโปรแกรมควบคุมการติดดับของ LED เฉพาะส่วนการแสดงผลหน้าจอสามารถใช้คอนโทรลที่เป็นปุ่มกดได้เพียงแต่ความสวยงามจะด้อยตลอดการแสดงผลที่เป็นหลอดไฟก็เช่นกัน หากสามารถสร้างโปรแกรมที่มีหน้าต่างแสดงรูปเป็นตัวสวิตช์และ LED จะทำให้น่าสนใจมายิ่งขึ้น
การสร้างโปรแกรมเสร็จหน้าตาจะได้เช่นนี้
(http://www.praphas.com/PhotoForum/interface/HowTo10/11.png)
ขั้นตอนมีดังนี้

1. ค้นหารูปภาพที่ใช้แทนสวิตช์และ LED โดยให้มีทั้ง 2 สภาวะคือ ON/OFF หรือเข้าไปที่เวปไซต์
http://www.clker.com/clipart-6515.html (http://www.clker.com/clipart-6515.html)
เมื่อได้ภาพที่ต้องการแล้วให้คลิกขวาที่ภาพแล้วเลือก Save as บันทึกภาพเก็บลงเครื่อง
ตัวอย่างภาพที่ใช้งาน
(http://www.praphas.com/PhotoForum/interface/HowTo10/led-green.png)(http://www.praphas.com/PhotoForum/interface/HowTo10/led-green1.png)(http://www.praphas.com/PhotoForum/interface/HowTo10/led-purple.png)(http://www.praphas.com/PhotoForum/interface/HowTo10/led-purple1.png)
(http://www.praphas.com/PhotoForum/interface/HowTo10/led-red.png)(http://www.praphas.com/PhotoForum/interface/HowTo10/led-red1.png)(http://www.praphas.com/PhotoForum/interface/HowTo10/led-yellow.png)(http://www.praphas.com/PhotoForum/interface/HowTo10/led-yellow1.png)
(http://www.praphas.com/PhotoForum/interface/HowTo10/sw-on.png) (http://www.praphas.com/PhotoForum/interface/HowTo10/sw-off.png)

วิธีการเก็บภาพลงเครื่อง ให้คลิกขวากลางภาพที่ต้องการแล้วเลือก Save image as... ดังรูป
(http://www.praphas.com/PhotoForum/interface/HowTo10/1.png)

2. วางคอนโทรล PictureBox ลงบน Form ทำการเลือกภาพที่ดาวน์โหลดจากข้อ 1
(http://www.praphas.com/PhotoForum/interface/HowTo10/2.png)

3. คลิกตามรูปแล้วทำการเลือกรูปที่ดาวน์โหลดมาทุกรูป
(http://www.praphas.com/PhotoForum/interface/HowTo10/3.png)

4. คลิกเลือกรูป
(http://www.praphas.com/PhotoForum/interface/HowTo10/4.png)

5. ตั้งค่าคุณสมบัติ SizeMode เป็น AutoSize
(http://www.praphas.com/PhotoForum/interface/HowTo10/5.png)

6. เปลี่ยนชื่อรูปจากเดิมที่เป็น picturebox1 เป็นชื่อแทนโดยให้มีความหมายที่ใช้งาน
(http://www.praphas.com/PhotoForum/interface/HowTo10/6.png)

7. คัดลอก PictureBox จากข้อ 6 วาง แล้วเปลี่ยนรูปพร้อมเปลี่ยนชื่อดังรูป
* LON,LOFF เป็นต้นแบบภาพ LED ในสภาวะติดและดับ
SON,SOFF เป็นต้นแบบสวิตช์ที่เป็นสวิตช์สภาวะ ON และ OFF ไม่ได้แสดงผลโดยตรงด้านหน้าโปรแกรม

(http://www.praphas.com/PhotoForum/interface/HowTo10/7.png)

8. ปรับขนาด Form ให้ปิดบังต้นแบบภาพ
(http://www.praphas.com/PhotoForum/interface/HowTo10/8.png)

9. จะได้หน้าตาโปรแกรมดังรูป ทำการดับเบิลคลิกที่ตัวสวิตช์ทุกตัวเพื่อเขียนโค้ด
(http://www.praphas.com/PhotoForum/interface/HowTo10/9.png)

10. เขียนโค้ดซึ่งมีรายละเอียดดังนี้
   - ส่วนที่ 1 เป็นการประกาศตัวแปรเพื่อเก็นสถานะของสวิตช์
   - ส่วนที่ 2 เป็นโค้ดควบคุมการแสดงผลเมื่อมีการคลิกที่ตัวสวิตช์ โดยเมื่อมีการกดสวิตช์แต่ละครั้งตัวเก็บสถานะจะเปลี่ยนเป็นตรงกันข้ามพร้อมกับเปลี่ยนรูป LED และสวิตช์ตามสถานะที่เป็นปัจจุบัน
(http://www.praphas.com/PhotoForum/interface/HowTo10/10.png)
   ทำการเขียนโค้ดให้ครบทุกสวิตช์โดยใช้โค้ดคล้าย ๆ กับสวิตช์ตัวแรกเพียงแต่เปลี่ยนตัวแปรให้ตรงกับตัวสวิตช์นั้น ๆ
โค้ดโปรแกรม(เฉพาะส่วนประกาศตัวแปรเก็บสถานะ)
โค๊ด: [Select]
        Boolean SS0 = false;    // Status of Switch S0
        Boolean SS1 = false;    // Status of Switch S1
        Boolean SS2 = false;    // Status of Switch S2
        Boolean SS3 = false;    // Status of Switch S3

โค้ดโปรแกรม(เฉพาะส่วนสวิตช์ S0)
โค๊ด: [Select]
            if (SS0 == false)
            {
                S0.Image = SON.Image;
                L0.Image = LON.Image;
                SS0 = true;
            }
            else
            {
                S0.Image = SOFF.Image;
                L0.Image = LOFF.Image;
                SS0 = false;
            }

11. รันโปรแกรม ทดสอบโดยการคลิกที่ตัวสวิตช์แต่ละตัวแล้วสังเกตุผล
(http://www.praphas.com/PhotoForum/interface/HowTo10/11.png)
หัวข้อ: Re: เรียนรู้ครั้งที่ 10 [การสร้างโปรแกรมแสดงผลสวิตช์ควบคุม LED]
เริ่มหัวข้อโดย: admin ที่ กันยายน 20, 2018, 11:00:53 PM
...
หัวข้อ: Re: เรียนรู้ครั้งที่ 10 [การสร้างโปรแกรมแสดงผลสวิตช์ควบคุม LED]
เริ่มหัวข้อโดย: admin ที่ กันยายน 20, 2018, 11:01:07 PM
...