การใช้งาน button และ textbox

Object พื้นฐานที่สุดเลยในการสร้าง GUI ก็คงหนีไม่พื้น button กับ textbox นี่แหละครับ ดังนั้นเรามาเรียนรู้การสร้างทั้งสองอย่างนี้กันดีกว่าครับ

ก่อนอื่นมาดูกันก่อนครับว่า button กับ textbox อยู่ตรงไหน

หมายเลข 1 คือ push button หรือแปลแบบตรงตัวก็คือ "ปุ่มกด"
หมายเลข 2 คือ text box ซึ่งใน matlab จะแยก text box ออกเป็น 2 ประเภทคือ...
- Edit box (icon ด้านซ้าย) เป็นกล่องข้อความที่ user สามารถพิมพ์ข้อความใส่ได้
- Static text (icon ด้านขวา) เป็นกล่องข้อความที่เอาไว้แสดงข้อความเท่านั้น

การอ่านค่าและการกำหนดค่าให้ button และ text box

การอ่านค่าใช้คำสั่ง

A = get(handles.xxx, 'PropName');

การกำหนดค่าใช้คำสั่ง

set(handles.xxx, 'PropName', yyy);



โดยที่
xxx คือชื่อ tag ของ object (object หมายถึง button และ text box รวมทั้งเครื่องมืออื่นๆ ที่เราเอาใส่ไว้ในหน้า GUI)
PropName คือ ชื่อของ property ที่เราจะกำหนดค่า หรืออ่านค่า
A คือตัวแปรสำหรับเก็บค่าที่อ่านเข้ามาจาก PropName
yyy คือ ค่าที่เราจะกำหนดไปที่ PropName


ตัวอย่างการใช้งาน

ในตัวอย่างนี้ผมจะเอา button และ text box มาทำโจทย์ตัวอย่างง่ายๆ ให้ดูกันนะครับ นั่นก็คือการบวกเลข โดยจะสร้างหน้า GUI แบบนี้


เมื่อออกแบบหน้า GUI เสร็จแล้ว เราก็มาลงมือสร้างกันเลยครับ ก็จะได้หน้าตาประมาณนี้


ตัวหนังสือ tag: A, tag: B , tag: C , tag: X , tag: btCal ไม่ต้องเขียนนะครับ ผมแค่เขียนให้ดูว่า object แต่ละตัวมีชื่อ tag ว่าอะไรบ้าง เวลาเราเรียกใช้งาน เราจะได้ตัวว่าตัวแปรนี้อ่านมาจากช่องไหน


วิธีการตั้งค่า tag ให้ดับเบิ้ลคลิกที่ object ตัวนั้นแล้วจะปรากฎหน้า property ดังนี้


ส่วนที่ผมตั้งค่าก็จะมี
- Fontsize ปรับขนาดตัวอักษร
- String ผมใส่เป็นเลข 0 เอาไว้ user จะได้รู้ว่าจะต้องป้อนตัวเลขตรงช่องนี้
- Tag ตรงนี้แหละครับคือชื่อของ object ที่เราต้องกำหนด


เอาละเมื่อเราสร้างหน้า GUI เสร็จแล้ว เราก็มาเริ่มเขียนโค้ดกันเลยครับ


เมื่อเรากดปุ่ม Save ในหน้า GUI โปรแกรม MATLAB ก็จะสร้างโค้ดของ object แต่ละตัวให้เราโดยอัตโนมัติ ตามชื่อ tag ที่เราตั้งเอาไว้ ซึ่งเราจะได้โค้ดหน้าตาประมาณนี้


ส่วนที่ไฮไลท์เอาไว้ (B, C, btCal) ก็คือชื่อ tag ที่เราตั้งนะครับ ซึ่งทำให้เรารู้ว่าฟังก์ชันนั้นๆ คือฟังก์ชันของ object ตัวไหน

ถ้าหากลองสังเกตุดู โปรแกรม MATLAB จะสร้างฟังก์ชันมาให้ 2 แบบนะครับ นั่นก็คือ CreateFcn และ Callback

CreateFcn เป็นฟังก์ชันสำหรับสร้างหน้าตาของ object เราไม่ต้องไปแก้ไขอะไรนะครับ ส่วน Callback คือฟังก์ชันที่เอาไว้ให้เขียนเขียนโปรแกรมควบคุมการทำงานของ object

ดังนั้นเวลาเราเขียนโค้ด เราจะเขียนในฟังก์ชัน Callback เท่านั้นนะครับ ไม่งั้นโปรแกรมจะรันไม่ออกนะครับ


ก่อนจะเริ่มเขียนโปรแกรม บางคนอาจจะสงสัยว่า object มีตั้งหลายตัว ฟังก์ชันก็มีตั้งหลายตัว แล้วเราจะเขียนโค้ดใส่ฟังก์ชันไหนละ?


คำตอบก็คือ..... เขียนใส่ object ที่เราต้องการให้มันเกิด event ครับ ยกตัวอย่างเช่น ถ้าเราอยากให้โปรแกรมเริ่มทำงานเมื่อ user กดปุ่ม "=" เราก็ต้องเขียนโค้ดในฟังก์ชัน btCal_Callback


ก่อนจะเริ่มเขียนโปรแกรม เราต้องวางอัลกอริทึมของโปรแกรมก่อนนะครับ เราจะได้รู้ว่าต้องเขียนอะไรก่อนหลัง

ซึงในตัวอย่างนี้ อัลกอริทึมของโปรแกรมมีดังนี้

1. รับค่าจาก tag: A

2. รับค่าจาก tag: B

3. เนื่องจากค่าที่รับจาก A และ B เป็น string ดังนั้นเราต้องเอามาแปลงให้เป็นตัวเลขก่อน ถ้าแปลงได้ก็ให้โปรแกรมทำงานต่อไป ถ้าแปลงไม่ได้ (อย่างเช่นผู้ใช้ป้อนตัวอักษรเข้ามา) ก็ให้โปรแกรมหยุดทำงาน
และ reset ค่า text box ทั้งหมดให้เป็น 0

4. นำค่าจาก A และ B มาบวกกัน

5. แสดงผลใน tag: C (ซึ่งก่อนแสดงผลเราก็ต้องแปลงค่าจากตัวเลขให้เป็น string ก่อน)



เมื่อวางอัลกอริทึมเรียบร้อยแล้วเราก็มาเริ่มเขียนกันได้เลยครับ (ลองสังเกตุดูนะครับว่าโค้ดที่ผมเขียนจะเรียงลำดับบรรทัดตามอัลกอริทึมที่วางเอาไว้เลย)

Va = get(handles.A,'string');
Vb = get(handles.B,'string');

Na = str2double(Va);
Nb = str2double(Vb);

if(isnan(Na) || isnan(Nb))
    set(handles.A,'string','0');
    set(handles.B,'string','0');
    set(handles.C,'string','0');
    return;
end

Nc = Na+Nb;
Vc = num2str(Nc);
set(handles.C,'string',Vc);

โดยโค้ดทั้งหมดนี้เขียนอยู่ในฟังก์ชัน btCal_Callback แบบนี้


เมื่อเราลองรันโปรแกรมดูก็จะได้ผลลัพธ์ประมาณนี้



ถ้าหาก user ป้อนตัวอักษร เช่น A, B, C เข้าไปโปรแกรมก็จะ reset ข้อความทั้งหมดให้เป็น 0


ถ้าหากเราไม่ต้องการให้ user แก้ไขคำตอบใน tag: C เราก็เปลี่ยนประเภทของ tag: C จาก edit box เป็น static text หรือไม่ก็ กำหนดไปที่ property "enable" ให้เป็น 'off' ดังนี้


set(handles.C,'enable','off')


โดยเพิ่มโค้ดนี้เข้าไปไว้ในบรรทัดล่างสุดต่อจาก set(handles.C,'string',Vc)

เมื่อ user กดปุ่ม "=" tag: C ก็จะกลายเป็นแบบนี้



เพียงเท่านี้ user ก็จะไม่สามารถแก้ไขคำตอบใน tag: C ได้





จบหัวข้อ

ความเห็น

โพสต์ยอดนิยมจากบล็อกนี้

การแก้สมการ Differential ด้วย MATLAB

รูปภาพ
ถ้าใครเรียนด้านวิศวกรรม หรือ วิทย์คณิต หรือ ฟิสิกส์ ผมเชื่อว่าทุกคนคงจะเคยเจอสมการพวกนี้แน่นอน และสมการพวกนี้ก็จะยิ่งยุ่งยากซับซ้อนขึ้นไปเรื่อยๆ จนเราไม่สามารถแก้สมการด้วยมือได้ ยกตัวอย่างเช่น สมการของ error ฟังก์ชัน ถ้าใครจำได้สมัยเรียนอาจารย์จะแจกเป็นตารางมาให้เลย โดยที่เราไม่ต้องแก้สมการนี้ด้วยตัวเอง แต่เวลาเราใช้งานจริงๆ นั้น ไม่มีใครไปนั่งแก้สมการให้เสียเวลาหรอกครับ เพราะมันเสียเวลา และไม่รู้ว่าคำตอบที่ได้ออกมาจะถูกรึเปล่า ดังนั้นในการทำงาน หรือการทำวิจัย เราจะใช้ MATLAB เข้ามาช่วยแก้ปัญหาพวกนี้ให้แทนครับ ตัวอย่างเช่น ผมมีสมการ differential ที่ต้องการแก้อยู่ 3 สมการ ดังนี้ dy1/dt = y2*y3 dy2/dt = -y1*y3 dy3/dt = -0.51*y1*y2 โดยมีค่าเริ่มต้น (initial condition) ดังนี้ y1(0) = 0 y2(0) = 1 y3(0) = 1 ปกติแล้วค่าเริ่มต้นจะเป็นค่าใดก็ได้ เราแค่สุ่มเลือกมาใช้ก็พอ แต่....ก็ไม่ใช่ว่าทุกค่าจะใช้ได้ ซึ่งจริงๆ มันก็มีวิธีการเช็คว่าค่าไหนใช้ได้หรือไม่ได้ แต่ผมแนะนำให้เช็คด้วยการทดสอบจริงเลยง่ายกว่าครับ ค่าเริ่มต้นที่ไม่เหมาะสม จะทำให้สมการหาคำตอบไม่ได้ หรือคำตอบผิดเพี้ยน...
อ่านเพิ่มเติม

การหาค่าเฉลี่ยโดยไม่ต้องเก็บค่า

รูปภาพ
ทุกคนคงทราบอยู่แล้วว่าวิธีการหาค่าเฉลี่ยคือ เอาค่าทั้งหมดมาบวกกัน แล้วหารด้วยจำนวนทั้งหมด ดังสมการนี้ Avr = sum(X)/length(X) แต่ในทางปฎิบัติ เราสามารถเก็บค่าได้จำกัด เพราะว่าในขณะที่โปรแกรมกำลังทำงานอยู่ ข้อมูลในตัวแปรทุกตัวจะถูกเก็บเอาไว้ที่ RAM ซึ่งคอมทุกเครื่องมี RAM จำนวนจำกัด ดังนั้นหากเราเก็บข้อมูลไว้ในตัวแปรเยอะเกินไป ก็จะทำให้พื้นที่ RAM ไม่พอใช้งาน ซึ่งจะทำให้คอมพิวเตอร์ค้างได้ ถ้าเราไม่เก็บข้อมูลทุกตัวเอาไว้ แล้วเราจะคำนวณค่าเฉลี่ยได้ยังไงล่ะ? หลายๆ คนอาจจะกำลังคิดว่าน่าจะคำนวณแบบนี้ ค่าเฉลี่ย = (ค่าใหม่ + ค่าเก่า)/2 อย่างเช่น ค่าเฉลี่ยระหว่าง 1 กับ 2 ค่าเฉลี่ย = (2 + 1)/2 = 1.5 คำตอบก็ถูกต้อง วิธีนี้น่าจะใช้ได้นะ แต่มันใช้ได้จริงรึเปล่า เราลองมาทดสอบกับตัวอย่างอื่นดู เช่น ค่าเฉลี่ยระหว่าง 1 , 2 และ 3 AV1 = (1+2)/2 = 1.5 AV2 = (AV1+3)/2 = 2.25 จะเห็นว่าผลลัพธ์ไม่ถูกต้อง เพราะ AV = (1+2+3)/3 = 2 ดังนั้นวิธีการแบบนี้จึงใช้ไม่ได้ แล้ววิธีการที่ถูกต้องควรจะทำยังไงละ มาดูกันเลยครับ AV = AV - (AV/N) AV = AV + (X/N) โ...
อ่านเพิ่มเติม

ว่าด้วยเรื่องของ ERROR

รูปภาพ
ในบทความก่อนหน้านี้ ผมได้อธิบายวิธีการดู error ใน MATLAB ไปแล้วนะครับ แต่ในการเขียนโปรแกรมระดับสูงนั้น error ไม่ได้มีแค่เท่าที่ตาเห็นนะครับ ซึ่งการแก้ไขก็จะยากขึ้นไปอีก ดังนั้นในบททความนี้ เราจะมาดูกันครับว่า error มันมีกี่ประเภท อะไรบ้าง ประเภทของ error ประเภทแรก เรียกว่า Compile error คือ error ที่เกิดตอนเวลาคอมไพล์โปรแกรม ซึ่งเกิดจากเราเขียนโค้ดไม่ถูกนั่นแหละครับ ก็แก้ด้วยการกลับไปเขียนให้ถูกซะ ประเภทที่สอง เรียกว่า Runtime error คือ error ที่เกิดตอนรันโปรแกรม บางคนอาจจะสงสัยว่า ถ้าคอมไพล์แล้วไม่ error โปรแกรมก็น่าจะถูกต้องแล้วหนิ ทำไมเวลารันถึงมี error อยู่อีกละ? ดังนั้นเราจะมาดูกันครับว่าถ้าโค้ดไม่ผิด ทำไมรันแล้วถึง error ได้ละ Runtime error มีแบบไหนบ้าง? 1. โปรแกรมทำงานได้ปกติ (คำนวณผลลัพธ์ออกมาได้) แต่คำตอบผิด เป็นเคสที่เกิดขึ้นบ่อยมากครับ (และคนที่เขียนก็ไม่รู้ตัวด้วยว่าผิด) ปัญหานี้เกิดจาก "มื่อใหม่" ที่ไม่เข้าใจความหมายของ "คำสั่ง" ดีพอ แล้วก็นำไปใช้แบบผิดๆ เช่น >> A = B.*C; >> D = B*C; หลายๆ คนไม่เข้าใจว่าการใช้ ดอท-คูณ (.*...
อ่านเพิ่มเติม