Chương 3 : Giao diện đồ họa GUI

CHNG3:GIAODINĐHOGUI  §1.KHÁINIMCHUNG  Đ tin dng ta có th to nên giao dinđho(GUIGraphic User Interface)giangidùngvàMATLAB.Tronggiaodinnàytacóthxutd liu di 2 dng: văn bn vàđho. Mi mt GUI có mt hay nhiu layout(dinmo).VictoGUItonênmtcôngcđhophcvnhpxut dliumtcáchtrcgiác,rtthuntin.Ngoài racóthdùngGUIđgiám sátcácquátrình,hinthcácđitng.  §2.NHPXUTKÝT,SLIURAGUI 1.Tokhunghình:Taxétcáclnhsau(luvàofilect3_0.m): f=input(Nhapnhietdo(doK):); c=(f32)*5/9; fprintf(1,nhietdo(doC)la:%g\n,c) Badòngl nhtrênthchincáccôngvicsau: nhpgiátrđuvào thchinphéptínhquyđinhitđ xutktquramànhình Bâygitatìmcáchcàicácdònglnhtrênsaochochúng thchintrên khuônkhmtkhungđhocódngsau:     Cáclnhsau(luvàofilect3_1.m)thchincôngvictrên: 42 set(gcf,DefaultUicontrolUnit,Normalized) frame_1=uicontrol(gcf,Style,Frame, . Position,[0.10.10.80.3]); frame_2=uicontrol(gcf,Style,Frame, . Position,[0.10.60.80.3]); set(frame_1,BackgroundColor,[0.50.50.5]); set(frame_2,BackgroundColor,[0.50.50.5]); text_f=uicontrol(gcf,Style,Text, . String ,Fahrenheit:, . Position,[0.30.70.20.05],HorizontalAlignment,Left); edit_f=uicontrol(gcf,Style,Edit, . String,168.0, . Position,[0.60.70.10.05], . HorizontalAlignment,Right, . Callback,ct3_3); text_c1=uicontrol(gcf,Style,Text, . String ,Celcius:, . Position,[0.30.30.20.05], . HorizontalAlignment,Left); text_c2=uicontrol(gcf,Style,Text, . String,100.0, . Position,[0.60.30.10.05], . HorizontalAlignment,Left); Bâygitasxemcáclnhtrênhotđngnhth nào.Cáclnhsau: set(gcf,DefaultUicontrolUnit,Normalized) frame1=uicontrol(gcf,Style,Frame, . Position,[0.10.10.80.3]); frame2=uicontrol(gcf,Style,Frame, . Position,[0.10.60.80.3]); set(frame1,BackgroundColor,[0.50.50.5]); set(frame2,BackgroundColor,[0.50.50.5]); to haikhunghìnhchnhttrongcasFigurehinhànhvinnmàuxám. Haikhung(Frames)cótođcácgócditráilà(0.1,0.1)và(0.1,0.6),cùng chiucao0.3đnvvàbrng0.8đnv .Đnvđctínhbng%cakích cngoàicaFigure.Vytacóthdingiinhsau: Khungthnhtcógóctráiditiđimcótođ10%chiungangvà 10%chiu caocakhungngoàiFigure. 43 Khungth2cógóctráiphíaditiđimcótođngvi10%chiu ngangvà60%chiucaocakhungngoìaFigure. Chaikhungcóchiucaobng30%chiucaovàbngangbng 80% bngangcakhungngoàiFigure.  2.Dùnglnheditvàtextđnhpxutkítvàsliu:Trênđâytađãdùng lnhuicontrolđtovàxácđnhvtríhaikhunghình.Đonlnhsaus dng uicontrolđvitchuikít“Fahrenheit”lênkhungbêntrên: text_f=uicontrol(gcf,Style,Text,String,Fahrenheit:, . Position,[0.30.70.20.05],HorizontalAlignment,Left); Chui kí t “Fahrenhaeit”đcđt vàođúng v trí dn trái c a ô có Position ghi trongđon chng trình trên.Đon lnh saudùngEditđvit chuikít “68.0”vào vtríbêncnhca“Fahrenheit”.Chuikítcóvtrí dnphitrongô(PositionBox). edit_f =uicontrol(gcf,Style,Edit, . String,168.0, . Position,[0.60.70.10.05], . HorizontalAlignment,Right, . Callback,ct3_3); Dosdngedit,chuikít“68.0”làchuicóthvitliđctrcti ptrên GUI.Saukhinhnnúttrên,giátrmivitliđctipnhnvàMATLAB sgilnhvittrongphncallbacct3_3.  Cuicùngtacònphidùnguicontrolđtotachui text,hinthchui “Celcius”và“20.0”trongkhungbêndi. text_c1=uicontrol(gcf,Style,Text,String,Celcius:, . Position,[0.30.30.20.05],HorizontalAlignment,Left); text_c2=uicontrol(gcf,Style,Text,String,20.0,Position, . [0.60.30.1 0.05],HorizontalAlignment,Left);  3.TđngcpnhtgiátrlênGUI:Đhoàn thinvídGUI ta thchin chngtrìnhvinhimvtínhquyđitđKsangđCvàtđngđinkt quvàocácôbêncnhchuiCelcius.Đonmãsauphcvmcđíchcallback (hoàntrgiátr)đcluvàofilect3_3.mvàcónidungnhsau:  f=get(edit_f,String); f=str2num(f); c= (f32)*5/9; c=num2str(c); 44 set(text_c2,String,c); Đonmãtrênnhngiátrdolnhuicontrol“edit”đcvàodidngchui (string)vàsauđó:   binđitdngstringsangdngs tínhquyđitnhitđfahrenheitsangnhit đcelcius binđitssangstring xutktqudidngstringraGUInhtext_c2  §3.NHPSLIUTTHANHTRT  Ngoài cách nhp s liu t bàn phím, ta có th nhp s liu t thanh trt.Tamuntoramtgiaodinnhsau:     Tronggiaodinnày,contrtslàmthayđigiátrnhitđđuavàovànhit đquyđitính theođCcũng sthayđitngng.Cáclnhtoragiao dinnày(lutrongfilect3_2.m) là: set(gcf,DefaultUicontrolUnit,Normalized) frame_1=uicontrol(gcf,Style,Frame,Position,[0.10.10.80.3]); frame_2=uicontrol(gcf,Style,Frame,Position,[0.10.60.80.3]); set(frame_1,BackgroundColor,[0.50.50.5]); set(frame_2,BackgroundColor,[0.50.50.5]); text_f=uicontrol(gcf,Style,Text,String, Fahrenheit:,Position, . [0.30.70.20.05],HorizontalAlignment,Left); 45 edit_f=uicontrol(gcf,Style,Edit, . String,168.0.,,, Position,[0.60.70.10.05], . HorizontalAlignment,Right, . Callback,ct3_3); text_c1=uicontrol(gcf,Style,Text, . String,Celcius:, . Position,[0.30.30.20.05], . HorizontalAlignment,Left); text_c2=uicontrol(gcf,Style,Text, . String,100.0, . Position,[0.60.30.10.05], . HorizontalAlignment,Left); slider_f=uicontrol(gcf,Style,Slider, . Min,32.0,Max,212.0, . Value,68.0, . Position,[0.60.80.20.05], .   Callback,ct3_4;ct3_3 ); Đtothanhtrttadùnglnh: slider_f=uicontrol(gcf,Style,Slider,Min,32.0,Max,212.0, . Value,68.0,Position,[0.60.80.20.05], . Callback,ct3_4;ct3_3); Nh vy Callback có th gi mt chui các lnh MATLAB, phân cách nhau bngduchmthanhayduphy.Chuicallbackgict3_4.m: f=get(slider_f,Value); f=num2str(f); set(edit_f,String,f,CallBack,ct3_5;ct3_3); vitácdngnhpnhitđgiti‘Value’c aslider_fvàovtríbêncnhô chachui“Fahrenheit”.SauđóCallbackgitipct3_3.mđtínhquyđigiá trnhitđvàgánvàoôcnhchui“Celcius”.Filect3_5.mnhsau: f=get(edit_f,String);  f=str2num(f);   set(slider_f,Value,f); cónhimvcpnhtgiátrgiti‘Value’caslider_fđrisauđóct3_3.m làmntphnviccònli:tínhđinhitđvàgánvàovtrícnhôchachu i “Celcius”.  46 §4.CHNLAKHIXUTSLIU 1.Kháinimchung:Ngoàikhnăngxutdliucđnhtheokiustringhay kius,tacóthxutdliutheomtdanhmc nàođó.Đminhho,tato filect3_6.mnhsau: f=input(Nhapnhietdo:); r=f+459.7; c=(f32)*5/9; k=c+273.15; choice=input([Nhap1choRankie,2choCelcius,3choKelvin: ]); ifchoice==1    fprintf(1,Nhietdo(doR)la:%g\n,r); elseifchoice==2    fprintf(2,Nhietdo(doC)la:%g\n,c); elseifchoice==3    fprintf(2,Nhietdo(doC)la:%g\n,c); end Tcaslnh, nhplnhct3_6thìMATLABshinhitđvàđíchquyđi rihinth ktqu.Tuy nhiêncông cGUI caMATLABcho phépta thc hinviclachnthunlih n.Tacóthchnmttrong4phngxutd liusauđây: dùngpopupmenu dùnglistbox dùngradiobutton dùngcheckbox  2.Dùngpopupmenu:Tatoragiaodinnhsau:   47 Cáclnhthchincôngvictrên(lutrongfilect3_7.m)là: set(gcf,DefaultUicontrolUnit,Normalized) frame_1=uicontrol(gcf,Style,Frame, . Position,[0.10.10.80.3]); frame_2=uicontrol(gcf,Style,Frame, . Position,[0.10.60.80.3]); set(frame_1, BackgroundColor,[0.50.50.5]); set(frame_2,BackgroundColor,[0.50.50.5]); text_f=uicontrol(gcf,Style,Text, . String,Fahrenheit:, . Position,[0.30.70.20.05], . HorizontalAlignment,Left); edit_f=uicontrol(gcf,Style,Edit, . String, .168.0, . Position,[0.60.70.10.05 ], . HorizontalAlignment,Right, . Callback,ct3_3); popup_c=uicontrol(gcf, . Style,Popupmenu, .   String,Rankine|Celcius|Kelvin, .   Value,2, .   Position,[0.30.30.20.05], .   Callback,ct3_8;ct3_10); text_c2=uicontrol(gcf,Style,Text, . String,100.0, . Position,[0.6 0.30.10.05], . HorizontalAlignment,Left); slider_f=uicontrol(gcf,Style,Slider, . Min,32.0,Max,212.0, . Value,68.0, . Position,[0.60.80.20.05], .   Callback,ct3_4;ct3_10); KhikíchchutvàoPopupmenu,cóbakhnăngchn lasxuthin.Tip tcnháychutvàomttrong3khnăngđó,Popupmenubinmtchcònli đn v đc chn. Khi dùng chut kéo thanh trtframe phía trên, ta có đcgiátrquyđisangđnvđcchnhinthphíadi.Trongđon mãtrên,giátr‘Value’đtsnlà2.KhiCallbackgict3_8.m: 48  choice=get(popup_c,’Value’); thì giá tr ca bin choiceđcđa ti ‘Value’. Sauđó Callback gi tip ct3_10.mđxemktqugitrongchoice.Filect3_10.mnhsau:  f=get(edit_f,String);  f=str2num(f); r=f+ 459.7;  c=(f32)*5/9;  k=c+273.15; choice=input([Nhap1choRankie,2choCelcius,3choKelvin:]); ifchoice==1 t=r; elseifchoice==2 t=c; elseifchoice==3  t=k end t=num2str(t); set(text_c2,String,t); Bngcáchthay‘Popupmenu’bng‘Radiobutton’uicontroltacóphng ánradiobutton.Giaodinscódng:     Cáclnhthchincôngvicnày(lutrongfilect3_11.m)là: set(gcf,DefaultUicontrolUnit,Normalized) frame_1=uicontrol(gcf,Style,Frame,Position,[0.10.10.80.3]); 49 frame_2=uicontrol(gcf,Style,Frame,Position,[0.10.60.80.3]); set(frame_1,BackgroundColor,[0.50.50.5]); set(frame_2,BackgroundColor,[0.50.50.5]); text_f=uicontrol(gcf,Style,Text,String,Fahrenheit:,Position, . [0.30.70.20.05],HorizontalAlignment,Left); edit_f=uicontrol(gcf,Style ,Edit,String,168.0,Position, . [0.60.70.10.05],HorizontalAlignment, . Right,Callback,ct3_6); strings=[Rankine;Celcius;Kelvine]; show=[0;1;0]; ys=[3;2;1]*0.075+0.075; fori=1:3  radio_c(i)=uicontrol(gcf, . Style,Radiobutton, .    String,strings(i), .    Value,show(i), . Position,[0.3ys(i)0.20.05], .    Callback,ct3_12;ct3_10); end text_c2=uicontrol(gcf,Style,Text,String,100.0,Position, . [0.60.30.10.05],HorizontalAlignment,Left); slider_f=uicontrol(gcf, Style,Slider,Min,32.0,Max,212.0, . Value,68.0,Position,[0.60.80.20.05], . Callback,ct3_4;ct3_10); Filect3_12.m: fori=1:3 ifgcbo==radio_c(i) choice=i; set(radio_c(i),Value,1); elseif set(radio_c(i),Value,0);  end; end; Đon scripttrênlàmtvònglp,sosánhs(handle)Callbackthuđc(giátr dohàmgcbotrv)vihandlecaminút.Nútnàocóstrùngsđcđóng (turnon,‘Value’=1)vànútnàokhácss bngt(turnoff,’Value’=0).Cui cùngCallbackgict3_10.mđthchinvictínhquyđiđcchnvàhin 50 thktqu.Đimkhácduynhtlàkhichn,Popupmenuchchamtphn tthìradiobuttoncóthđngthichanhiuphnt. Cuicùngtaxétphngándùnglistbox.Giaodi ncntonhsau:    Cácmãtoragiaodintrên(lutrongfilect3_13.m)là: set(gcf,DefaultUicontrolUnit,Normalized) frame_1=uicontrol(gcf,Style,Frame,Position,[0.10.10.80.3]); frame_2=uicontrol(gcf,Style,Frame,Position,[0.10.60.80.3]); set(frame_1,BackgroundColor,[0.50.50.5]);  set(frame_2,BackgroundColor,[0.50.50.5]); text_f=uicontrol(gcf,Style,Text,String,Fahrenheit:,Position, . [0.30.70.20.05],HorizontalAlignment,Left); edit_f=uicontrol(gcf,Style,Edit,String,168.0,Position, . [0.60.70.10.05],HorizontalAlignment, . Right,Callback ,ct3_3); listbox_c=uicontrol(gcf, . Style,Listbox, . String,Rankine|Celcius|Kelvin, . Value,2, . Position,[0.30.30.20.05], . Callback,ct3_14;ct3_10); text_c2=uicontrol(gcf,Style,Text,String,100.0,Position, . 51 [...]...[0.6 0 .3 0.1 0.05], HorizontalAlignment , Left ); slider_f = uicontrol(gcf, Style , Slider , Min ,32 .0, Max ,212.0, Value ,68.0, Position ,[0.6 0.8 0.2 0.05], Callback , ct3_4; ct3_10 ); §5 CÔNG C HO T O GUI 1 T o GUI b ng công c ho : Trên ây ta ã xem xét cách t o GUI b ng ph ng pháp th công Ta có th t o GUI b ng công c ho Khi nh p l nh guide ta g i trình ho (Graphics User... file *.fig dùng l u giao di n v a t o và file *.m ch a các mã l nh c n th c hi n Vi c cu i cùng là vi t các mã l n vào file *.m Trong quá trình thi t k ta có th ch y th xem sau m i b c thi t k ã t yêu c u ch a b ng cách b m vào ô ch y th 2 M t s ví d t o GUI: a m s l n b m chu t: Ta thi t k m t giao di n nh sau: 52 Ta mu n là khi b m chu t, s l n b m s c m và ghi l i Tr c h t ta g i guide và có c m t... i tên là ct3_17.fig và ct3_17.m Nhi m v ti p theo là ghi các l nh c n thi t vào file ct3_17.m File này ã c MATLAB t ng t o ra Ta ph i thêm vào ó các mã l nh khi b m chu t thì s l n b m c th hi n trên ô Edit Text Ta s ghi các mã l nh này vào ph n: function varargout = pushbuttonmot_Callback(h, eventdata, handles, varargin) do l nh c n c th c hi n khi g i pushbutton N i dung c a ct3_17.m l : function... pushbutton N i dung c a ct3_17.m l : function varargout = Ct3_17(varargin) if nargin = = 0 fig = openfig(mfilename, reuse ); set(fig, Color ,get(0, defaultUicontrolBackgroundColor )); handles = guihandles(fig); guidata(fig, handles); if nargout > 0 53 varargout{1} = fig; end elseif ischar(varargin{1}) try [varargout{1:nargout}] = feval(varargin {:} ); catch disp(lasterr); end end function varargout = pushbuttonmot_Callback(h,... dem = 0; end dem = dem + 1; str = sprintf( So lan bam chuot: %d ,dem); set(handles.editmot, String ,str); Trong ph n này, ng n g i, ta b b t các dòng gi i thích và các dòng l nh không dùng n Bây gi ta ch y ch ng trình và nó s c p nh t s l n b m chu t b Chuy n i t Fahrenheit sang Celcius: Ta thi t k m t GUI chuy n i nhi t Giao di n có d ng nh sau: 54 ... có c m t layout r ng Vào Property Inspector (ô so n th o thu c tính) và ghi vào Name chu i ct3_17 và ch p nh n thu c tích Tag m c nh c a nó là figure1; dùng Font ch m c nh, c ch 12, bold Ta dùng ô Edit Text ghi l i s l n b m Ta vào Property Inspector r i ch n String Ta nh p vào ô này chu i So lan bam chuot: 0 Ta ghi vào ô Tag chu i editmot và c ng dùng Font ch m c nh, c ch 12 và bold Ti p theo kéo... ho Khi nh p l nh guide ta g i trình ho (Graphics User Interface Development Environment) so n th o layout K t qu u tiên là ta có m t layout r ng nh sau: Alignment So n th o thu c tính Ch y th So n menu Vùng thi t k Các ph n t Vi c u tiên là ta thi t k giao di n mong mu n Ta s dùng chu t kéo các ph n t c n dùng t bên trái và th vào layout r ng bên ph i Ta có th d ch chuy n các ph n t này các v trí mong . CHNG 3: GIAO DINĐHO GUI  §1.KHÁINIMCHUNG  Đ tin dng ta có th to nên giao dinđho (GUI Graphic User Interface)giangidùngvàMATLAB.Trong giao dinnàytacóthxutd. Value,68.0,Position,[0.60.80.20.05], . Callback,ct3_4;ct3_10); Filect3_12.m: fori=1 :3 ifgcbo==radio_c(i) choice=i; set(radio_c(i),Value,1);