QT Grafika Az alap alkalmazás felhasználói felülete

Átírás

1 QT Grafika Az alap alkalmazás felhasználói felülete Az alábbiakban létrehozzuk azt a GUI-t, amit a továbbiakban használni fogunk. Ennek során áttekintünk néhány hasznos GUI elemet és azok használatát. Az elkészült GUI windows alatt: 1. ábra Linux alatt az ablak kin;zete a rendszerbeállításoktól függ. Pl.a Breeze téma esetén:

2 A fusion téma esetén:

3 Az MS Windows 9x téma esetén:

4 A projekt Hozzunk létre egy új projektet az előző projekthez hasonló módon! Legyen a neve GrafikaQtvel és ugyancsak a QMainWindow-ból származtassuk le. A használt Qt modulokhoz adjuk hozzá a PrintSupport-ot is! A Visual Studio-ba beágyazott rendszerben ez így néz ki:

5 Az alkalmazás ablakának baloldalán az egyes általunk tárgyalt területek beállításai lesznek, míg maga a grafika a jobb oldalon fog megjelenni. A bal oldalon egy Eszköztárat (Tool Box), a jobboldalon pedig egy több lapot tartalmazó Widgetet (QStackedWidget) használunk. Kattintsunk kétszer a grafikaqtvel.ui fájlra! Ellenőrizzük a szerkesztpben, hogy az ablak mérete 1013 x 788 pixel-e és, ha nem, akkor állítsuk be ennyire! Adjunk az ablakhoz egy &Fájl menü,t &Fájl/Be&zárás almenüt, aminek a gyorsbillentyűje legyen Alt+X. A hozzá tartozó action objektumot nevezzük át atnexit-re és a triggered() SIGNAL-ját kapcsoljuk össze az ablak close() SLOT-jával, ahogy azt a Szamologep programban tettük! Ezután a baloldali Widget Box-ból adjunk hozzá egy Widget-et és egy Stacked Widget-et az ablakhoz. Nevezzük át a widget-et pnlleft-re, a Stacked Widget-et pnlright-ra.

6 Állítsuk be az ablak layout-ját vízszintesre (Jobb egér gomb az ablakon a hozzáadott widgeteken kívül, majd Lay Out -> Lay Out Horizontally). Láthatjuk, hogy mindkét widgetnek ugyanakkora lesz a mérete. Azt már tudjuk, hogyan érhetjük el, hogy a bal oldali pnlleft mérete ne változzon meg, amikor az ablakot átméretezzük (Hogyan?), és most is ezt fogjuk használni, de most először azt nézzük meg milyen beállításokkal lehet elérni, hogy a widgetek relatív mérete ne változzon az ablak átméretezésekor. A méretek megadására a Property Editor-ban a geometry, a minimumsize és a maximumsize mellett van egy sizepolicy nevű tulajdonság is. Ezzel adhatjuk meg, hogyan viselkedjen a widget, egy layout-on. A Horizontal Policy és a Vertical Policy adja meg, milyen viselkedést szeretnénk. A Preferred azt jelenti, hogy az illető méret változtatható, de a beállítottat szeretnénk látni, ha lehet. Ha ezt pl. Fixed-re változtatjuk, akkor az illető méretet (pl. geometry / Width) akarjuk látni. Most mindkettőt hagyjuk meg Preferred-nek! Az alatta levő két (Horizontal Stretch és Vertical Strech) nyújtási szorzókat a widgeteket kezelő layoutok akkor használják, amikor azok nem nullák. Ekkor az illető irányban az egyes widget-ek méreteit ezeknek az arányában osztják el. A mi esetünkben pl. ha a pnlleft Horizontal Stretch-ét 15-re, a pnlright-ét 35-re állítjuk, akkor tlbleft szélessége a teljes ablakszélesség 15/50-ed része, a pnlright-é a 35/50-ed része lesz. Próbáljuk ezt ki! Jelen programhoz ez most nem a legjobb megoldás, ezért térjünk vissza a hagyományoshoz: állítsuk vissza a Horizontal Stretch eket 0 ra, állítsuk be a minimális méretet 320 pixelre és a Horizontal Policy-t Fixed-re. Így most a maximális méretet nem kell megadjuk. Amikor egy widgetre egy olyat húzunk rá, amelyik kilóg róla, pl. nála szélesebb, vagy magasabb, akkor a kilógó rész általában nem fog soha látszani. A görgető területet (Scroll Area) az a widget, amelyikre ha egy nála nagyobb méretű widgetet rakunk rá a kilógó részeket görgetősávokkal megjeleníthetjük. Ezt most arra fogjuk majd használni, hogy ha az ablakot függőlegesen összenyomjuk, attól még az eszköztár összes részét elérhessük.

7 Húzzunk rá a pnlleft-re egy görgető területet (Scroll Area) de a méretét ne változtassuk meg! Nevezzük át scratools-ra! Ezzel pnlleft az scratools szülője lesz 1.Állítsuk be pnlleft VerticalScrollBarPolicy-ját ScrollBarAlwaysOn-ra! Ezzel elérjük, hogy a rá rakott widget-ek számára vízszintesen rendelkezésre álló méret ne változzon akár beleférnek a rá rakott widget-ek akár nem. Ugyanide húzzunk rá egy nyomógombot (Push Button), amit nevezzünk át btnclose nak és a szövegét írjuk át Kilépésre! Rakjunk mellé egy Horizontal Spacer-t, majd a panel layout-ját állítsuk be függőlegesre (Vertical Layout)! Használjuk a Signals & Slot szerkesztőt és rendeljük a bezáró gomb megnyomásához is a fő ablak close() slot-ját! Ezután az scratools-ra rakjunk rá egy eszköztárat (Tool Box) és nevezzük át tbxmenu-re!! Az eszköztár egy olyan widget, amelyik több lapból áll. Minden lapnak van egy fejléce, amire kattintva az illető lap nyílik meg. Minden lapra rárakhatunk widgeteket, amelyek csak akkor láthatóak, ha az illető lap meg van nyitva. Minden lapnak van egy sorszáma (indexe), fejléc felirata és neve. Az scratools layoutját állítsuk be függőlegesre. Ez gondoskodik arról, hogy az eszköztár kitöltse a maximális területet. Állítsuk be az eszköztár minimális magasságát akkorára, hogy az alul levő második fejléc még éppen beférjen az scratools-ba! Esetünkben ez 660. Válasszuk ki a tbxmenu widgetet! A jobb egér gombra felugró menüben keressük meg az Insert Page menüt és adjunk hozzá még 6 oldalt, azután a Property Editorban nevezzük át az oldalakat! Ehhez a QToolBox szakaszban mindegyik laphoz be kell állítanunk először az indexét (currentindex), utána a szövegét (currentitemtext) és a nevét (currentitemname): 1 Amikor a szerkesztőben egy A widgetet egy B widgetre (akárhonnan akár egy másik widgetről is) ráhúzunk, akkor B automatikusan az A szülője lesz.

8 Az indexet a megfelelő lap fejlécre kattintva is átállíthatjuk, de egyszerűbb beírni. Az egyes szövegek az 1. ábrán láthatóak, az egyes lapok nevei pedig: pgrajz, pggrafikon, pginterakt, pgfraktal, pgtranszform, pgalakzat, pgkepek és pgfilter. Rajzolás lap Kattintsunk rá a Rajzolás feliratú fejlécre! Rakjunk rá az alatta megjelenő üres területre az 1. ábra szerint 7 rádió gombot (Radio Button), egy vízszintes vonalat (Line), egy Tool Button-t, egy Vertical Spacer-t, 4 címkét (Label) és 4 beviteli mezőt (Line Edit). A rádiógombok, a Tool Button és a címkék szövegét írjuk át a képen láthatóra! A ToolButton neve legyen btncleardatar a rádiógombok elnevezése fentről lefelé: rbdraw, rbline, rbttriangle, rbrect, rbpoly, rbellipse és rbcircle, a beviteli mezőké ugyancsak fentről lefelé: edtx, edty, edtw és edth! Ezután állítsuk be a tbxmenu elrendezését függőlegesre! A rádiógombok közül válasszuk ki az elsőt és a Property Editorban állítsuk be bejelöltre (checked): Amikor a rádiógombokat ugyanarra a widgetre rakjuk, akkor alapértelmezésben 2 bármelyikükre kattintva az válik kijelölté a többi pedig ki nem jelölté. Az eszköztár esetén ehhez ugyanarra a lapra kell rakjuk ezeket. Mind az eredetileg, mind az újonnan kijelölt rádiógomb elküldi a toggled(bool checked) üzenetet (SIGNAL). A clicked() üzenetet csak az amelyikre kattintottunk. Az oldalunk így kell kinézzen: 2 Alapértelmezésben a gombok az autoexclusive állapotban vannak. Ha ezt nem akarjuk beállíthatjuk a független viselkedést a setautoexclusive(bool) függvénnyel. Ha viszont egy widget-re több csoportonként autoexclusive rádiógombot akarunk rárakni, akkor használjunk Button Group-okat.

9 Grafikon lap Most kattintsunk a Grafikon fejlécre és ehhez a laphoz adjunk egy cimkét, egy beviteli mezőt egy Tool Button-t egy sorba, alá egy jelölőnégyzetet (Check Box), két másik Tool Button-t és ezek alá egy másik cimkét és állítsuk elő a következő elrendezést:

10 A beviteli mező neve legyen edtfile1, a mellete levő Tool Button-é btnbrowse, a jelölőnégyzeté chkoverwrite, a második Tool Button-é btnplot, a harmadiké btnprint! Az első címke szövege: Adat fájl neve:. A jelölőnégyzethez a Property Editorban állítsuk be a checked opciót! A Tool Button-hoz adjunk egy felugró súgót (tooltip): A második címke szövege több sorra terjed ki és dőlt betűs és vastagított részek is vannak benne. Ennek beírásához válasszuk ki a Property Editor QLabel blokkjából a text mezőt és kattintsunk a jobb oldalán a három pontra:. Erre a szövegszerkesztő ablak nyílik meg, amelyiknek válasszuk a Rich Text opcióját:

11 Ide írjuk be a súgó szövegét: Írja be egy adat fájl nevét, vagy válasszon ki egy adat fájlt! Az adat fájl a következő szerkezetú szövegfájl kel legyen: Teszt Adat Fájl szöveggel kezdődik. Ezt üres, megjegyzés, vagy adat sorok követhetik. Minden adatsorban két vesszővel elválasztott lebegőpontos ér ték van, az első az X, a második az Y koordináta. Minden #-el kezdődő sor megjegyzés sor, de a # adat sorok végén is állhat. A # utáni szöveget a program figyelmen kívül hagyja. Ha most átkapcsolunk a Source fülre, akkor láthatjuk, hogy a beírt szöveget a szerkesztő egy beírt CSS stílusokat tartalmazó HTML dokumentummá alakítja át. A QLabel érti a HTML és a CSS egy részét. Állítsuk be a kiegyenlítést és a sortörést (Word Wrap), hogy a szöveg szépen jelenjen meg: Adjunk hozzá egy rácsos elrendezést (Grid Layout)! Interaktivitás lap A következő lap (Interaktivitás) majdnem ugyanaz, mint a mostani, ezért megtehetjük, hogy a Grafikon lap teljes tartalmát átmásoljuk a következő lapra.

12 A Ctrl gombot nyomva tartva kattintsunk rá mindegyik widgetre, majd továbbra is lenyomva tartva a Ctrl-t, húzzuk rá a kijelölt elemek másolatát a jobb oldalra! Ezután engedjük fel a Ctrl gombot és kattintsunk az Interaktivitás fejlécre! Most a jobboldalon jelöljük ki az összes oda húzott elemet (vigyázzunk, hogy a hátterüket ne!) és a Ctrl gomb felengedése után húzzuk rá a kijelölteket az Interaktivitás lapra! Adjunk hozzá két rádió gombot (a nevük rbmeasongraph és rbzoomongraph), majd állítsuk be az elrendezést itt is! A lap ekkor így kell kinézzen: Fraktálok lap A Fraktálok lapnak így kell kinéznie:

13 Az eddig nem használt elemek az oldalon: 1. A két kontrol csoport (Group Box), egyik címe (title) Paraméterek, másiké Színek. Ha csak ezeket írjuk át akkor a címek nem lesznek megvastagítottak. A félkövér (bold) vastagítást a betű (Font) beállításoknál adhatjuk meg, ha bejelöljük a Bold-ot. Ekkor azonban az összes, Group Box-beli szöveg, ami kontrol csoportba kerül félkövér lesz. Ezt nem akarjuk, tehát ki kell kapcsoljuk a Bold opciót. Ezt megtehetjük csoportosan is: válasszuk ki az összes szöveget és utána töröljük ki a kijelölést. 2. Az iterációk számát egy Spin Box-al állíthatjuk be. Ennek beállíthatjuk a minimumát (minimum), maximumát (maximum) és lépésközét (singlestep), valamint az aktuális értékét (value) a Property Editor-ban. Itt ezeket 100, és 100-ra állítsuk be! A színes négyzetek valójában szöveg nélküli Tool Button-ok, amiknek a stílus lapjában megadjuk a háttér színét:. A stílus lapok (CSS Cascading Style Sheets) tulajdonságokat és ezek értékeit tartalmazzák. A tulajdonság és az érték között kettőspont, az egyes tulajdonságok között pontosvessző kell álljon. Itt az elem háttérszínét (background) adjuk meg. Sok színt megadhatunk angol nevükkel (pl. red, green, yellow, fuchsia, etc), és bármelyiket egy # után a három színkomponens hexadecimális értékeivel. Itt a 3 gomb hátterének színei #0000FF, #FF0000 és #FFFF00.

14 Az egyes elemek nevei fentről lefelé és balról jobbra: edtfractleft, edtfracttop, edtfractright, edtfractbottom, sbfractiter, btnfractlowcolor, btnmandelbrot Transzformációk lap A következő lap a Transzformációk lapja: ahol az egyetlen eddig nem használt elem a Double Spin Box.Ez hasonló a Spin Box-hoz csak ez lebegőpontos számokkal dolgozik és a tizedesjegyek számát (decimals) is beállíthatjuk. Legyenek ezek most 0.0, és 10.0 Az egyes elemek nevei: rbtranstriangle, rbtransrectangle, rbtransellipse, edttransdeltax, edttransdeltay, edttranszoomx, edttranszoomy és dsbtransrotate.

15 Alakzatok lap Az új elem ezen az oldalon egy lenyíló lista: (Combo Box), amiben felsoroljuk az alakzatokat. A Combo Box-beli szövegeket a jobb egérgombra felugró menü Edit items pontjában adhatjuk meg: Minden új elemhez a gombot kell először megnyomni.

16 Az itt levő elemek nevei: cbshape, edtshapewidth, edtshapeheight, dsbshaperotate. Képek lap Ezen a lapon egy új elem van a vízszintes csúszka (Horizontal Slider). Ez tartalmilag olyan, mint egy Spin Box csak a megjelenése és kezelése más. Az elemek nevei: edtimagefile, btnimagebrowse, hsimagezoom, btnimagefit, btnimagefull, dsbimagerotate. Szűrők lap A gombok (Tool Button) nevei: btnneg, btnbw, btnsharpen, btnblur, btnlines és btnmatrix. Ezzel a bal oldallal lényegében elkészültünk. Egy két ikonnal azért egy kicsit még feldobhatjuk. Ezekhez valamilyen képekre van szükség. Ilyen képeket rajzolhatunk,

17 vásárolhatunk sőt egyeseket ingyen is letölthetünk. Ezeket az ikonokat kényelmesen a Resource Browser-rel adhatjuk hozzá a projekthez. A következő képeket fogjuk használni: A képeket letölthetjük a oldalra belépve a Letöltések fülről. Meg kell nyomni a Bejelentkezés Védett Fájlok Letöltéséhez gombot és jelszó a NEPTUN kód, csupa nagybetűvel. Ezután kiválaszthatjuk a Programozás 3 mappabeli 2016/17 I. félév mappából a fájlokat. Hozzunk létre (amennyiben nincs) egy Resources nevű könyvtárat és abba töltsük le a fájlokat. Kattintsunk rá a ceruzára! A bal oldalon a resource fájl neve szerepel, a jobboldalon a programunk neve

18 . A jobb oldali ikonra kattintva kiválaszthatjuk a képeket és hozzáadhatjuk azokat a programhoz. Adjuk hozzá a paint_brush nevű ikont az első lap fejlécéhez! Kattintsunk a Rajzolás ra és a Property Editorban keressük meg a QToolBox lapon a currentitemicon mezőt! Kattintsunk rá, majd a mellette levő ra, és válasszuk a Choose Resource-ot!

19 Keressük meg a paint_brush.png-t és válasszuk ki azt! A fejlécen megjelenik a rajzolás ikon. Hasonlóképpen adhatunk ikont hozzá a gombokhoz, stb is. Az ikon hozzáadása mező megnevezése változhat, pl a Tool Button-oknál a név csak icon és a kis gomboknál a hozzáadás után célszerű a három pont szöveget kitörölni. Toll és ecset A rajzoláshoz mindig egy adott tollat (Pen) és egy adott ecsetet (Brush) használunk. A toll határozza meg a húzott vonalak fajtáját, színét és vastagságát. Az ecset ezek hátterének illetve zárt alakzatok belsejének kifestésére alkalmas. Ezen a lapon ezeket tudjuk beállítani.

20 A nevek: sbpenwidth, cbpenstyle, cbpencap, cbpenjoin, btnpencolor, cbbrushstyle, btnbrushcolor. Az egyes lenyíló listák szövegei: chkpenstyle: Folytonos, Szaggatott, Pont, Vonal Pont, Vonal Pont Pont, nincs chkpencap: Lapos, Négyzetes, Lekerekített chkpenjoin: Ferde illesztés (Miter), Sűlyesztett (Bevel), Lekerekitett

21 chkbrushstyle: Üres, Egy színű, Lineáris átmenet, Sugaras átmenet, Kúpos átmenet, Mintázat, Vízszintes mintázat, Függőleges mintázat, Kereszthálós, Átlós visszafele, Átlós előre, Sűrű1, Sűrű2, Sűrű3, Sűrű4, Sűrű5, Sűrű6, Sűrű7 A toll háttérszínét állítsuk feketére, az ecset színét fehérre! Ehhez használjuk a stylesheeteket a background:black és background:white-tal. Ikonok Adjunk hozzá ikonokat az egyes lapokhoz, gombokhoz és menükhöz! Az elkészült GUI egyes lapjai a következőek:

22

23

24

25

26

27

28

29

30

31 A GrafikaQtvel projekt GUI fájljai main.cpp #include "grafikaqtvel.h" #include <QtWidgets/QApplication> int main(int argc, char *argv[]) { QApplication a(argc, argv); GrafikaQTvel w; w.show(); return a.exec(); } grafikaqtvel.h #ifndef GRAFIKAQTVEL_H #define GRAFIKAQTVEL_H #include <QtWidgets/QMainWindow> #include "ui_grafikaqtvel.h" class GrafikaQTvel : public QMainWindow { Q_OBJECT public: GrafikaQTvel(QWidget *parent = 0); ~GrafikaQTvel(); private: Ui::GrafikaQTvelClass ui; }; #endif // GRAFIKAQTVEL_H grafikaqtvel.cpp #include "grafikaqtvel.h" GrafikaQTvel::GrafikaQTvel(QWidget *parent) : QMainWindow(parent) { ui.setupui(this); } GrafikaQTvel::~GrafikaQTvel() { }

32 grafikaqtvel.qrc <RCC> <qresource prefix="grafikaqtvel"> <file>resources/print.png</file> <file>resources/ellipse.png</file> <file>resources/exit.png</file> <file>resources/folder.png</file> <file>resources/gradient.png</file> <file>resources/new_document.png</file> <file>resources/open.png</file> <file>resources/paint_brush.png</file> <file>resources/process.png</file> <file>resources/rectangle.png</file> <file>resources/rotateleft.png</file> <file>resources/rotateright.png</file> <file>resources/save.png</file> <file>resources/search.png</file> <file>resources/undo.png</file> </qresource> </RCC> grafikaqtvel.ui Ezt a fájlt a tanszéki szerverről töltsük le! grafikaqtvel.pro A következő fájl csak akkor kell, ha a QtCreator-t használjuk. Használatához konfigurálnunk kell a projektet, mielőtt le tudjuk fordítani. ##################################################################### # Automatically generated by qmake (3.0) Sze okt :05: ###################################################################### TEMPLATE = app TARGET = GrafikaQtvel INCLUDEPATH +=. # Input HEADERS += grafikaqtvel.h FORMS += grafikaqtvel.ui SOURCES += grafikaqtvel.cpp \ main.cpp RESOURCES += grafikaqtvel.qrc QMAKE_CXXFLAGS += -std=c++11 greaterthan(qt_major_version, 4): QT += core gui widgets