การใช้งาน Radio button และ Check box

Radio button และ Check box ทำหน้าที่คล้ายกันคือ เอาไว้ให้ user เลือกตัวเลือก แต่จะต่างกันตรงที่...

Radio button เลือกได้แค่ 1 ตัวเลือก และทุกครั้งที่คลิ๊กหมายถึงการเลือกเสมอ (ไม่ใช่เลือกสลับกับยกเลิก) หรือพูดง่ายๆ ก็คือ ต่อให้คลิ๊กตัวเลือกเดิมซ้ำกัน 2 ครั้ง ค่าก็จะไม่หายไป

Check box สามารถเลือกได้หลายตัวเลือก และการคลิ๊กครั้งที่ 1 หมายถึง เลือก หากคลิ๊กครั้งที่ 2 หมายถึง ยกเลิก เครื่องหมายถูกตรง check box ก็จะหายไป

การอ่านค่าจาก Radio button และ Check box

ทำได้โดยใช้คำสั่ง get และ set เหมือนกับการอ่านค่าจาก object ทั่วไป โดยจะอ่านค่าที่ property ที่ชื่อว่า Value หาก user เลือกค่า Value ก็จะเป็น 1 หากไม่ได้เลือก ก็จะเป็น 0

การอ่านค่า

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

การกำหนดค่า

set(handles.xxx,'Value',1);

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

โปรแกรมนี้เป็นโปรแกรมแสดงสีตามที่ user เลือก ซึ่งมีทั้งหมด 3 สีคือ Red, Green, Blue โดยจะใช้ Radio button เพื่อเลือกทีละสี และใช้ Check box เพื่อเลือกหลายสี และแสดงค่าแบบผสมกัน (ผสมสี)

อัลกอริทึมของโปรแกรมนี้ไม่มีอะไรมากครับ
1. รับค่าตัวเลือกจาก Radio button หรือ Check box
2. สร้างสีตามตัวเลือก
3. แสดงผล

การจะสร้างสีได้ จริงๆ จะเข้ามีความเข้าใจเรื่องภาพดิจิตอลก่อนนะครับ ซึ่งอธิบายคร่าวๆ ก็คือภาพสีประเภท RGB ที่เราจะใช้จะมีโครงสร้างเป็นอาเรย์ 3 มิติ ที่มี 3 เลเยอร์ โดยเลเยอร์แรกคือ Red เลเยอร์สองคือ Green เลเยอร์สามคือ Blue คร่าวๆ ก็ประมาณนี้ ส่วนรายละเอียดไปศึกษาเพิ่มเติมกันเองนะครับ

ขั้นตอนที่ 1 สร้างหน้า GUI

สร้างหน้า GUI แบบนี้และกำหนด tag ตามที่ผมเขียนไว้ ส่วน button group ทั้ง 2 ตัวปล่อยให้เป็น tag อัตโนมัติ ไม่ต้องกำหนด เพราะในโปรแกรมของเราไม่มีส่วนที่ต้องเรียกใช้งาน object ทั้ง 2 ตัวนี้

ขั้นตอนการสร้างนะครับ อันดับแรกให้สร้าง button group ก่อน (คือส่วนที่เป็น 4 เหลี่ยมครอบ radio button และ check box) พอสร้างเสร็จ ค่อยสร้าง radio button กับ check box เอาไว้ใน button group ขั้นตอนตรงนี้สำคัญนะครับ ถ้าหากสร้าง Radio button ก่อนแล้วค่อยลากเข้ามาไว้ใน button group โปรแกรมอาจทำงานผิดพลาดได้ เพราะโปรแกรมจะเข้าใจว่า radio button ตัวนั้นไม่ได้อยู่ในกลุ่มเดียวกัน

พอสร้างเสร็จแล้วกด save แล้วก็ลองกดรันดูได้เลยครับ ยังไม่ต้องเขียนโค้ด ถ้าหากใช้สร้างได้ถูกต้อง user จะสามารถเลือก check box ได้ทุกตัวพร้อมกัน แต่จะเลือก radio button ได้แค่ตัวเดียวเท่านั้น

ขั้นตอนที่ 2 เริ่มเขียนโปรแกรม

2.1 เขียนโปรแกรมกำหนดค่า axes ในฟังก์ชัน OpeningFcn

pic = 255.*ones(100,100,3);
pic = uint8(pic);
image(pic,'Parent',handles.axes1);
axis off

%Clear all check box and radio button
set(handles.rbRed,'value',0);
set(handles.rbGreen,'value',0);
set(handles.rbBlue,'value',0);
set(handles.cbRed,'value',0);
set(handles.cbGreen,'value',0);
set(handles.cbBlue,'value',0);

เมื่อกดรันโปรแกรมก็จะได้แบบนี้

จะเห็นว่าตัวเลขและสเกลตรง axes1 หายไปแล้ว และ radio button กับ check box ทุกตัวถูกเคลียร์ค่า ไม่มีตัวไหนถูกติ๊กเอาไว้

2.2 เขียนโปรแกรมที่ Radio button

ถ้าสังเกตุดูจะเห็นว่าโปรแกรมนี้ผมไม่ได้ทำปุ่มเอาไว้กด Run นะครับ นั่นเพราะว่าผมจะออกแบบให้โปรแกรมทำงานทันทีที่ user คลิก Radio button หรือ Check box แล้วแสดงผลไปที่ axes1 ทันที ดังนั้นเราจึงเขียนโค้ดกำกับการทำงานลงไปใน Callback ของแต่ละตัว

ถ้าใครหา Callback ของ Radio button ไม่เจอ ก็ไม่ต้องตกใจนะครับ ให้คลิกขวาที่ radio button แล้วเลือก view callback ได้ ดังรูป

rbRed_Callback

V = get(handles.rbRed,'value');
pic = ones(100,100,3);
pic(:,:,1) = V*255;
pic = uint8(pic);
image(pic,'Parent',handles.axes1);
axis off;

ผลรัน

rbGreen_Callback

V = get(handles.rbGreen,'value');
pic = ones(100,100,3);
pic(:,:,2) = V*255;
pic = uint8(pic);
image(pic,'Parent',handles.axes1);
axis off;

ผลรัน

rbBlue_Callback

V = get(handles.rbBlue,'value');
pic = ones(100,100,3);
pic(:,:,3) = V*255;
pic = uint8(pic);
image(pic,'Parent',handles.axes1);
axis off;

ผลรัน

เท่านี้โปรแกรมฝั่ง Radio button ก็เสร็จเรียบร้อยครับ ต่อไปก็ไปเขียนโปรแกรมฝั่ง check box ต่อ

2.3 เขียนโปรแกรมที่ Check box

ฝั่ง check box ก็ต้องเขียนโปรแกรมใส่ callback ฟังก์ชันเหมือนกับ radio button ครับ ถ้าใครหา callback ไม่เจอ ก็ให้คลิกขวาที่ objec แล้วเลือก view callback เหมือนเดิมนะครับ

แต่ว่าโค้ดที่ใส่ใน callback ของ check box ทุกตัวจะใช้โค้ดเหมือนกันดังนี้นะครับ

V1 = get(handles.cbRed,'value');
V2 = get(handles.cbGreen,'value');
V3 = get(handles.cbBlue,'value');

pic = ones(100,100,3);
pic(:,:,1) = V1*255;
pic(:,:,2) = V2*255;
pic(:,:,3) = V3*255;

pic = uint8(pic);
image(pic,'Parent',handles.axes1);
axis off;

ผลรัน

ถ้าหากคลิ๊กสีเดียว โปรแกรมก็จะแสดงผลเป็นสีนั้นๆ แต่ถ้าหากคลิกหลายสีพร้อมกัน โปรแกรมก็จะผสมสีออกมาให้แล้วค่อยแสดงผล

---

จบบทความ