HslControls เป็นคอนโทรลเลอร์คอมโพเนนต์ตัวหนึ่งที่มีตัวคอมโพเนนต์ให้เลือกใช้ได้หลายตัว ตัวอย่างการใช้งานดังรูป
(http://www.praphas.com/PhotoForum/interface/HowTo13/18.png)
ขั้นตอนดังนี้
1. สร้างโปรเจคงาน
(1) คลิกขวาที่ชื่อโปรเจค (แถบช่องด้านขวา)
(2) คลิกเลือก Manage NuGet Packages
(http://www.praphas.com/PhotoForum/interface/HowTo13/1.png)
2. จะปรากฏแทปขึ้นดำเนินการตามลำดับดังนี้
(1) คลิกที่แทป Browse
(2) พิมพ์ค้นหาในช่องคำว่า hslcontrols
(3) คลิกที่รายการ HslControls ที่ปรากฏ
(4) คลิก Install และดำเนินการจนเสร็จสิ้น
(http://www.praphas.com/PhotoForum/interface/HowTo13/2.png)
3. เพิ่มแทปใน Toolbox ดังรูป (ตั้งชื่อแทปตามต้องการในที่นี้ตั้งชื่อว่า HslControls)
(1) คลิกขวาบริเวณว่างของ Toolbox
(2) คลิกที่ Add Tab ตั้งชื่อแท็บว่า HslControl
(http://www.praphas.com/PhotoForum/interface/HowTo13/3.png)
4. เลือกคอนโทรลคอมโพเนนต์ลงในแทปที่สร้างขึ้น ขั้นตอนดังรูป
(http://www.praphas.com/PhotoForum/interface/HowTo13/4.png)
5. คลิก Browse... หาไฟล์ DLL ของ HslControls
(http://www.praphas.com/PhotoForum/interface/HowTo13/5.png)
6. Browse หาไฟล์ซึ่งจะอยู่ในโฟลเดอร์ Package (อยู่ในโฟลเดอร์ของโปรเจคงานปัจจุบันที่สร้างขึ้น) ดังรูป
(http://www.praphas.com/PhotoForum/interface/HowTo13/6.png)
7. คอมโพเนนต์ที่ได้จะเป็นดังรูป
(http://www.praphas.com/PhotoForum/interface/HowTo13/7.png)
การเรียนรู้ในครั้งนี้จะเลือกศึกษาเฉพาะคอมโพเนนต์บางตัว
คอมโพเนนต์อื่น ๆ ให้ผู้ใช้งานทดลองศึกษาการใช้งานด้วยตนเอง
8. คอมโพเนนต์ LED ใช้ชื่อว่า HMILedSingle คุณสมบัติหลัก ๆ ที่ใช้ควบคุมคือ
- Shape กำหนดรูปร่างของ LED
- Value ควบคุมการสั่งให้ติด/ดับ (True, False)
(http://www.praphas.com/PhotoForum/interface/HowTo13/8.png)
9. คอมโพเนนต์ พัดลมระบายอากาศ ใช้ชื่อว่า HslCoolFan คุณสมบัติที่ใช้ควบคุมคือ
- MoveSpeed ใส่ตัวเลขกำหนดความเร็ว
- ใส่ตัวเลขค่าบวก เช่น 0.5, 1 พัดลมจะหมุนตามเข็ม (เลขน้อยหมุนช้าเลขมากหมุนเร็ว)
- ใส่เลข 0 พัดลมหยุดหมุน
- ใส่ตัวเลขค่าลบ เช่น -0.5, -1 พัดลมจะหมุนทวนเข็ม
(http://www.praphas.com/PhotoForum/interface/HowTo13/9.png)
10. คอมโพเนนต์ เกจ ใช้ชื่อว่า HslGauge คุณสมบัติที่ใช้ควบคุมคือ
- IsBigSemiCircle ปรับรูปให้เกจสามารถแสดงผลเกินครึ่งวงกลมได้
- PointerSize ปรับขนาดของเข็มเกจ
- Value ค่าที่กำหนดให้เข็มชี้
(http://www.praphas.com/PhotoForum/interface/HowTo13/10.png)
11. คอมโพเนนต์ ตัวเลข 7-Segment ใช้ชื่อว่า HslLedDisplay คุณสมบัติที่ใช้ควบคุมคือ
- DisplayNumber จำนวนหลักของตัวเลขที่แสดง
- LedNumberSize ขนาดความโตของเซกเมนต์
- LedPointSize ขนาดของจุดทศนิยม
- DisplayText ค่าที่ใช้แสดง
(http://www.praphas.com/PhotoForum/interface/HowTo13/11.png)
12. คอมโพเนนต์ ขวดโหลใส ใช้ชื่อว่า HslBottle คุณสมบัติที่ใช้ควบคุมคือ
- Value ค่าที่กำหนดปริมาณของเหลวที่แสดงผล
(http://www.praphas.com/PhotoForum/interface/HowTo13/12.png)
13. คอมโพเนนต์ ท่อ ใช้ชื่อว่า HslPipeLine คุณสมบัติที่ใช้ควบคุมคือ
- PipeLineActive แสดง/ปิดการแสดง เส้นการไหลของเหลว
- PipeLineStyle เปลี่ยนแนวการวางท่อ แนวตั้งกับแนวนอน
- PipeLineWidth ปรับขนาดความหนาของเส้นการไหลของเหลว
- MoveSpeed ใส่ตัวเลขกำหนดความเร็วการไหล
- ใส่ตัวเลขค่าบวก
- ใส่เลข 0 หยุดไหล
- ใส่ตัวเลขค่าลบ ไหลสวนทางกับค่าบวก
- PipeTurnLeft ปรับมุมโค้งท่อด้านซ้าย
- PipeTurnRight ปรับมุมโค้งท่อด้านขวา
(http://www.praphas.com/PhotoForum/interface/HowTo13/13.png)
14. คอมโพเนนต์ สวิตช์ ใช้ชื่อว่า HslSwitch คุณสมบัติที่ใช้ควบคุมคือ
- SwitchStatus ค่าสถานะสวิตช์ (False=Off ,True=On)
- SwitchStatusDescription ข้อความที่ต้องการให้แสดงบนสวิตช์ในขณะที่อยู่ในตำแหน่ง Off หรือ On
(http://www.praphas.com/PhotoForum/interface/HowTo13/14.png)
15. คอมโพเนนต์ ถังน้ำใช้ชื่อว่า HslWaterBox คุณสมบัติที่ใช้ควบคุมคือ
- Value ค่าที่กำหนดปริมาณของเหลวที่แสดงผล
(http://www.praphas.com/PhotoForum/interface/HowTo13/15.png)
16. โค้ดที่ใช้สั่งการควบคุมที่สวิตช์ เมื่อสวิตช์ On ให้ของเหลวไหลพร้อมกับเกจมีการเคลื่อนที่ สวิตช์จะส่งสถานะจากกการคลิกแต่ละครั้งที่ค่าที่ได้จากสวิตช์จะมีเพียง True กับ False เท่านั้น ดังนั้นงานที่สวิตช์จะสั่งได้ต้องเป็นคอมโพแนนท์ที่มีสถานะทำงานกับไม่ทำงานเท่านั้น ดังนั้นคอมโพแนนท์ในงานนี้ที่สั่งได้คือ
-แสดงการไหล/ไม่ไหลของท่อ
-การติด/ดับของ LED
-การหมุนและหยุดหมุนของพัดลม
ส่วนเกจ , ตัวเลข 7Segment , ปริมาณของเหลวในขวดและในอ่าง มีการเปลี่ยนแปลงอย่างต่อเนื่องจำเป็นต้องทำใน Timer
(http://www.praphas.com/PhotoForum/interface/HowTo13/16.png)
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 โกลบอลเพื่อเก็บค่าเดิมก่อนที่เวลาจะครบในรอบใหม่ในไทเมอร์)
(http://www.praphas.com/PhotoForum/interface/HowTo13/17.png)
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. รันโปรแกรมสังเกตุผลที่ได้
(http://www.praphas.com/PhotoForum/interface/HowTo13/18.png)