เรียนรู้ครั้งที่ 13 [การเพิ่มคอนโทรลคอมโพเนนต์ HslControls]

[admin]

HslControls เป็นคอนโทรลเลอร์คอมโพเนนต์ตัวหนึ่งที่มีตัวคอมโพเนนต์ให้เลือกใช้ได้หลายตัว ตัวอย่างการใช้งานดังรูป


ขั้นตอนดังนี้
1. สร้างโปรเจคงาน
   (1) คลิกขวาที่ชื่อโปรเจค (แถบช่องด้านขวา)
   (2) คลิกเลือก Manage NuGet Packages


2. จะปรากฏแทปขึ้นดำเนินการตามลำดับดังนี้
   (1) คลิกที่แทป Browse
   (2) พิมพ์ค้นหาในช่องคำว่า hslcontrols
   (3) คลิกที่รายการ HslControls ที่ปรากฏ
   (4) คลิก Install และดำเนินการจนเสร็จสิ้น


3. เพิ่มแทปใน Toolbox ดังรูป (ตั้งชื่อแทปตามต้องการในที่นี้ตั้งชื่อว่า HslControls)
   (1) คลิกขวาบริเวณว่างของ Toolbox
   (2) คลิกที่ Add Tab ตั้งชื่อแท็บว่า HslControl


4. เลือกคอนโทรลคอมโพเนนต์ลงในแทปที่สร้างขึ้น ขั้นตอนดังรูป


5. คลิก Browse... หาไฟล์ DLL ของ HslControls


6. Browse หาไฟล์ซึ่งจะอยู่ในโฟลเดอร์ Package (อยู่ในโฟลเดอร์ของโปรเจคงานปัจจุบันที่สร้างขึ้น) ดังรูป


7. คอมโพเนนต์ที่ได้จะเป็นดังรูป


การเรียนรู้ในครั้งนี้จะเลือกศึกษาเฉพาะคอมโพเนนต์บางตัว
คอมโพเนนต์อื่น ๆ ให้ผู้ใช้งานทดลองศึกษาการใช้งานด้วยตนเอง

8. คอมโพเนนต์ LED ใช้ชื่อว่า HMILedSingle คุณสมบัติหลัก ๆ ที่ใช้ควบคุมคือ
   - Shape  กำหนดรูปร่างของ LED
   - Value   ควบคุมการสั่งให้ติด/ดับ (True, False)


9. คอมโพเนนต์ พัดลมระบายอากาศ ใช้ชื่อว่า HslCoolFan คุณสมบัติที่ใช้ควบคุมคือ
   - MoveSpeed  ใส่ตัวเลขกำหนดความเร็ว
         - ใส่ตัวเลขค่าบวก เช่น 0.5, 1 พัดลมจะหมุนตามเข็ม (เลขน้อยหมุนช้าเลขมากหมุนเร็ว)
         - ใส่เลข 0 พัดลมหยุดหมุน
         - ใส่ตัวเลขค่าลบ เช่น -0.5, -1 พัดลมจะหมุนทวนเข็ม


10. คอมโพเนนต์ เกจ ใช้ชื่อว่า HslGauge คุณสมบัติที่ใช้ควบคุมคือ
        - IsBigSemiCircle ปรับรูปให้เกจสามารถแสดงผลเกินครึ่งวงกลมได้
        - PointerSize ปรับขนาดของเข็มเกจ
        - Value ค่าที่กำหนดให้เข็มชี้


11.  คอมโพเนนต์ ตัวเลข 7-Segment ใช้ชื่อว่า HslLedDisplay คุณสมบัติที่ใช้ควบคุมคือ
        - DisplayNumber จำนวนหลักของตัวเลขที่แสดง
        - LedNumberSize ขนาดความโตของเซกเมนต์
        - LedPointSize ขนาดของจุดทศนิยม
        - DisplayText ค่าที่ใช้แสดง


12.  คอมโพเนนต์ ขวดโหลใส ใช้ชื่อว่า HslBottle คุณสมบัติที่ใช้ควบคุมคือ
       - Value ค่าที่กำหนดปริมาณของเหลวที่แสดงผล


13.  คอมโพเนนต์ ท่อ ใช้ชื่อว่า HslPipeLine คุณสมบัติที่ใช้ควบคุมคือ
   -  PipeLineActive แสดง/ปิดการแสดง เส้นการไหลของเหลว
   -  PipeLineStyle เปลี่ยนแนวการวางท่อ แนวตั้งกับแนวนอน
   -  PipeLineWidth ปรับขนาดความหนาของเส้นการไหลของเหลว
   - MoveSpeed  ใส่ตัวเลขกำหนดความเร็วการไหล
         - ใส่ตัวเลขค่าบวก
         - ใส่เลข 0 หยุดไหล
         - ใส่ตัวเลขค่าลบ ไหลสวนทางกับค่าบวก
   -  PipeTurnLeft ปรับมุมโค้งท่อด้านซ้าย
   -  PipeTurnRight ปรับมุมโค้งท่อด้านขวา


14.  คอมโพเนนต์ สวิตช์ ใช้ชื่อว่า HslSwitch คุณสมบัติที่ใช้ควบคุมคือ
        - SwitchStatus ค่าสถานะสวิตช์ (False=Off ,True=On)
        - SwitchStatusDescription ข้อความที่ต้องการให้แสดงบนสวิตช์ในขณะที่อยู่ในตำแหน่ง Off หรือ On


15.  คอมโพเนนต์ ถังน้ำใช้ชื่อว่า HslWaterBox คุณสมบัติที่ใช้ควบคุมคือ
       - Value ค่าที่กำหนดปริมาณของเหลวที่แสดงผล


16.  โค้ดที่ใช้สั่งการควบคุมที่สวิตช์ เมื่อสวิตช์ On ให้ของเหลวไหลพร้อมกับเกจมีการเคลื่อนที่ สวิตช์จะส่งสถานะจากกการคลิกแต่ละครั้งที่ค่าที่ได้จากสวิตช์จะมีเพียง True กับ  False เท่านั้น ดังนั้นงานที่สวิตช์จะสั่งได้ต้องเป็นคอมโพแนนท์ที่มีสถานะทำงานกับไม่ทำงานเท่านั้น ดังนั้นคอมโพแนนท์ในงานนี้ที่สั่งได้คือ
      -แสดงการไหล/ไม่ไหลของท่อ
      -การติด/ดับของ LED
      -การหมุนและหยุดหมุนของพัดลม
ส่วนเกจ , ตัวเลข 7Segment , ปริมาณของเหลวในขวดและในอ่าง มีการเปลี่ยนแปลงอย่างต่อเนื่องจำเป็นต้องทำใน Timer

โค๊ด: [Select]

            if (hslSwitch1.SwitchStatus == false)
            {
               timer1.Enabled = false;
                hslPipeLine1.PipeLineActive = false;
                hslPipeLine2.PipeLineActive = false;
                hslPipeLine3.PipeLineActive = false;
                hslPipeLine4.PipeLineActive = false;
                hslPipeLine5.PipeLineActive = false;
                hslPipeLine6.PipeLineActive = false;
                hmiLedSingle1.Value = false;
                hslCoolFan1.MoveSpeed = 0;
            }
 
            else
            {
                timer1.Enabled = true;
                hslPipeLine1.PipeLineActive = true;
                hslPipeLine2.PipeLineActive = true;
                hslPipeLine3.PipeLineActive = true;
                hslPipeLine4.PipeLineActive = true;
                hslPipeLine5.PipeLineActive = true;
                hslPipeLine6.PipeLineActive = true;
                hmiLedSingle1.Value = true;
                hslCoolFan1.MoveSpeed = 1;
            }

17. โค้ดใน Timer แสดงการเปลี่ยนแปลงปริมาณของเหลวในขวดและในอ่าง การกวาดขึ้นของเข็มในเกจ ค่าตัวเลขใน 7Segment ค่าสูงสุดในใบงานนี้คือ 100 (จำเป็นต้องประกาศตัวแปร x โกลบอลเพื่อเก็บค่าเดิมก่อนที่เวลาจะครบในรอบใหม่ในไทเมอร์)

โค๊ด: [Select]

            hslGauge1.Value = x;
            hslLedDisplay1.DisplayText = x.ToString();
            hslBottle1.Value = 100-x;
            hslBottle2.Value = 100-x;
            hslWaterBox1.Value = x;
            if(x<100)
                 x++;
            else
            {
                x = 0;
                timer1.Enabled = false;
                hslSwitch1.SwitchStatus = false;
            }

18. รันโปรแกรมสังเกตุผลที่ได้

[admin]

งานที่มอบหมาย

[admin]

...