Počítače a programování 2 pro obor EST KPC2E TUTORIÁL 3 OSNOVA: a) Úvod do MS Visual Studia b) Formulářová aplikace c) Příklady formulářových aplikací d) Úvod - GDI, OpenGL, DirectX e) Událost Paint() f) GDI - příklady Jiří Šebesta Ústav radioelektroniky, FEKT VUT v Brně

Úvod do MS Visual Studia (1/4) Projekt pro Windows: hlavičkové soubory soubory xxx.h zdrojové soubory soubory xxx.c nebo xxx.cpp zdroje (resources) = především grafické objekty s danými vlastnostmi a chováním soubory xxx.rc (xxx.ico)

Úvod do MS Visual Studia (2/4) Zdroje: nabídky klávesové zkratky bitové rastry, ikony, kurzory znakové řetězce panely nástrojů dialogová okna Dialogové okno: základní objekt (každé okno je dialogové okno) ovládací prvky v dialogovém okně jsou opět dialogová okna se speciálními vlastnostmi platí princip nadřízený vs. podřízený dialog

Úvod do MS Visual Studia (3/4) Dialogové okno (resp. prvek): vlastnosti (properties) – proměnné defi-nující vlastnosti okna (prvku) a události (events), tj. funkce vyvolané při vzniku určité události v objektu (okně), např. kliknutí myší modalita oken modální okno, ne-lze opustit bez za-vření (příznak stylu WS_VISIBLE nastaven) nemodální lze kdykoli opustit (defokusovat)

Úvod do MS Visual Studia (4/4) Základní typy Win aplikací: využívající MFC (Microsoft Foundation Class Library) SDI (Single-document interface) – aplikace, kdy se pracuje pouze s jedním dokumentem MDI (Multiple-document interface) – aplikace, kdy se pracuje s více dokumenty současně (např. MS Visual Studio je MDI aplikace) Aplikace na bázi dialogu – jedno dialogové okno pro jednodušší programy využívající standardní prostředky Windows Formulářová aplikace pro Windows Kde získat MS Visual Studio Professional 2005/2008/2010/2012/2013: MSDN AA FEKT VUT v Brně

Formulářová aplikace (1/10) Založení projektu (MSVS 2008/2010): new project

Formulářová aplikace (2/10) Tvorba formuláře (úprava vlastností + vkládání ovládacích prvků do designu Form1.h[design]) :

Formulářová aplikace (3/10) Automaticky vygenerovaný kód pro nastavení ovládacího prvku ve Form1.h : this->ColorBox->BackColor = system::Drawing::Color::Transparent; this->ColorBox->Controls->Add(this->RB_blue); this->ColorBox->Controls->Add(this->RB_green); this->ColorBox->Controls->Add(this->RB_red); this->ColorBox->ForeColor = system::Drawing::SystemColors::ControlText; this->ColorBox->Location = System::Drawing::Point(2, 86); this->ColorBox->Name = L"ColorBox"; this->ColorBox->Size = System::Drawing::Size(88, 100); this->ColorBox->TabIndex = 1; this->ColorBox->TabStop = false; this->ColorBox->Text = L"Color"; this reprezentuje ukazatel na tento formulář

Formulářová aplikace (4/10) Generování funkce pro ošetření události ve Form1.h je vygenerována hlavička funkce události, do které lze vepsat tělo s poža-dovaným kódem … private: System::Void RB_blue_Click(System::Object^ sender, System::EventArgs^ e) { this->My_text->ForeColor = System::Drawing::Color::Blue; }

Formulářová aplikace (5/10) Funkce main() ve Form1.cpp #include <stdafx.h> #include "Form1.h" using namespace KPC2E_Ex106; [STAThreadAttribute] int main(array<System::String ^> ^args) { Application::EnableVisualStyles(); Application::SetCompatibleTextRenderingDefault (false); // Create the main window and run it Application::Run(gcnew Form1()); return 0; } Projekt: KPC2E_Ex106

Formulářová aplikace (6/10) Windows Form aplikace ve MSVS2013: new project Nelze založit formulářovou aplikaci přímo, je nutné nejprve založit prázdný projekt CLR Empty Project s vhodným jménem

Formulářová aplikace (7/10) Pro formulářovou aplikaci je třeba přidat v Project – Add (vyvolat pravým tlačítkem): UI – Windows Form s vhodným jménem např. MyForm.h nebo Form.h

Formulářová aplikace (8/10) Dále je třeba doplnit MyForm.cpp o následující kód: #include "MyForm.h" using namespace System; using namespace System::Windows::Forms; [STAThread] void Main(array<System::String ^> ^args) { Application::EnableVisualStyles(); Application::SetCompatibleTextRenderingDefault (false); Ex105::MyForm form; Application::Run(%form); return 0; } Podle názvu projektu a formuláře upravit.

Formulářová aplikace (9/10) Nastavit v Project – Properties: Linker - System

Formulářová aplikace (10/10) Nastavit Linker – Advanced – Entry Point na jméno startovací funkce v MyForm.cpp, např. Main

Příklady formulářových aplikací (1/7) Příklad 1: Vytvořte program jako formulářovou aplikaci pro jednoduchou kalkulačku – sčítání, odečítání, násobení a dělení dvou racionálních čísel. Vizuální návrh formuláře ve Form.h[design]

Příklady formulářových aplikací (2/7) Funkce pro načtení textu z TextBoxu s konverzí na double double get_A(void) { return System::Convert::ToDouble(this->text_A->Text); } double get_B(void) return System::Convert::ToDouble(this->text_B->Text); ovládací prvek formuláře TextBox pojmenovaný text_B proměnná (člen) TextBoxu volání konverzní metody ukazatel na tento formulář

Příklady formulářových aplikací (3/7) Ošetření událostí – kliknutí na jednotlivá tlačítka private: System::Void bt_plus_Click(System::Object^ sender, System::EventArgs^ e) { this->Res->Text = System::Convert::ToString(get_A()+get_B()); } … private: System::Void bt_div_Click(System::Object^ sender, System::EventArgs^ e) this->Res->Text = System::Convert::ToString(get_A()/get_B()); třída System metoda třídy System ukazatel na tento formulář volání konverzní metody volání funkcí pro čtení vstupů Projekt: KPC2E_Ex107

Příklady formulářových aplikací (4/7) Příklad 2: Vytvořte formulářový program pro jednoduchou databázi počítačů (položky: výrobce, cena a velikost paměti) se záznam až 20ti počítačů s dynamickým přístupem. Vizuální návrh formuláře

Příklady formulářových aplikací (5/7) Sestavení vlastní knihovny funkci pocitac.h #include <stdlib.h> #include <string.h> #include "stdafx.h" typedef struct t_pc { char prod[ 20]; // name of the producer int price; // price of the computer float mem; // RAM capacity in GB } a_pc; void add(char* _prod, int _price, float _mem); // adding new computer void sort(void); // sorting according to the price t_pc* get_fwd(void); // point out to the next computer t_pc* get_bwd(void); // point out to the prev. computer int show_price(void);// get price of an added pc int show_cheap(void);// get price of the cheapest pc

Příklady formulářových aplikací (6/7) Deklarace pole ukazatelů na záznamy + příklad funkce add() v pocitac.cpp #include <stdafx.h> #include "pocitac.h" // definition of the struct t_pc t_pc *katalog[20]; // array of pointers to computers int index=0; // first free position in the katalog int ptr=index-1; // pointer to a pc displayed in edits void add(char* _prod, int _price, float _mem) { t_pc *my_pc; my_pc = (t_pc*) malloc(sizeof(t_pc)); strcpy(my_pc->prod, _prod); my_pc->price = _price; my_pc->mem = _mem; katalog[ptr=index++] = my_pc; }

Příklady formulářových aplikací (7/7) Přilinkování knihovny a ošetření události stisku tlačítka Add ve Form1.h #pragma once #include "pocitac.h" using namespace System::Runtime::InteropServices; namespace BPC2E_Ex114 { …. private: System::Void AddBtn_Click(System::Object^ sender, System::EventArgs^ e) { add((char*)Marshal::StringToHGlobalAnsi(ProdEdit->Text).ToPointer(), System::Convert::ToInt32(PriceEdit->Text), System::Convert::ToDouble(MemEdit->Text)); ShowLbl->Text = System::Convert::ToString(show_price()); } volání konverzní metody VisualString => *char Projekt: KPC2E_Ex108

Téma následující přednášky DĚKUJI ZA POZORNOST Téma následující přednášky Grafika pro Windows ve MS Visual Studiu

Úvod – GDI, DirectX, OpenGL (1/2) GDI (Graphics Device Interface): 2D grafický ovladač standardní součást Widows sloužící k reprezentaci grafických objektů a jejich transformací do výstupních zařízení (obrazovka, tiskárna) zajišťuje kreslení čar, křivek a dalších grafických objektů, renderování fontů, správu barevných palet atd. nezajišťuje přímo vykreslování vlastních Windows objektů (okna, dialogy, menu, atd.), GDI je k těmto úkolům využívána uživatelským subsystémem (v knihovně user32.dll) všechny dále uvedené příklady jsou řešené pomocí GDI

Úvod – GDI, DirectX, OpenGL (2/2) DirectX (Graphics Device Interface): - sada knihoven od Microsoftu pro funkce aplikačních rozhraní API pro Windows, mezi které jsou zařazeny i knihovny pro grafické výstupy DirectDraw (vykreslování 2D grafiky do okna, není jednoduché jako u GDI, avšak rychlejší) a Direct3D (výkonný 3D engine). OpenGL (Open Graphics Library): - otevřený API standard pro tvorbu aplikací počítačové grafiky ve 3D, zdarma použivatelný. Hlavní výhodou je velký počet tutoriálů a návodů pro grafické výstupy.

GDI - událost Paint() (1/3) Většina ovládacích prvků (objektů) včetně vlastního formuláře nabízí aplikaci události Paint() , která umožňuje grafický výstup v rámci plochy daného objektu. vložení události Paint() do formuláře aplikace hlavička události Paint() aktivace grafického objektu se jménem e private: System::Void Form1_Paint(System::Object^ sender, System::Windows::Forms::PaintEventArgs^ e) { Graphics ^ g = e->Graphics; }

GDI - událost Paint() (2/3) Modrá a červená čára ve formulářovém okně nový objekt pera se jménem MyPen private: System::Void Form1_Paint(System::Object^ sender, System::Windows::Forms::PaintEventArgs^ e) { Graphics ^ g = e->Graphics; Pen^ MyPen = gcnew Pen(Color::Blue,3.0f); Point point_A = Point(100,100); Point point_B = Point(300,300); e->Graphics->DrawLine(MyPen, point_A, point_B); e->Graphics->DrawLine(gcnew Pen(Color::Red,3.0f), 100, 300, 300, 100); } barva tloušťka bod se jménem point_A souřadnice x souřadnice y vykreslení čáry z point_A do point_B perem MyPen alternativní vykreslení čáry s přímou definicí pero XA YA XB YB

GDI - událost Paint() (3/3) Událost Paint() se volá při vykreslování okna A=[100, 100] B=[300, 300] Projekt: KPC2E_Ex109

GDI - příklady (1/11) Příklad: Vykreslete do objektu PictureBox v cyklech následující obrazec: Vykreslení obdélníků a čar v metodě pro událost Paint() v objektu typu PictureBox se jménem PictureBox

GDI - příklady (2/11) private: System::Void PictureBox_Paint(System::Object^ sender, System::Windows::Forms::PaintEventArgs^ e) { Graphics ^ g = e->Graphics; Pen^ BluePen = gcnew Pen(Color::Blue,2.0f); Pen^ RedPen = gcnew Pen(Color::Red,2.0f); Pen^ MyPen; Point point_A = Point(200,200); Point point_B; int angle=0; // starting angle for radial lines int anstep=5;// step of angle int anstop=360; // ending angle for rad. lines int width=200; // initial width of rectangle int wstep=10; // step of rectangle width int wstop=400; // ending width of rectangle MyPen=RedPen; // initial pen is red

GDI - příklady (3/11) Projekt: KPC2E_Ex110 while (angle<=anstop) //radial lines { point_B =Point((int)(200+100*cos(angle*PI/180.0)), (int)(200+100*sin(angle*PI/180.0))); e->Graphics->DrawLine(BluePen, point_A, point_B); angle+=anstep; } while (width<=wstop) //rectangles { e->Graphics->DrawRectangle(MyPen, 200-width/2, 200-width/2, width, width); width+=wstep; if (MyPen==RedPen) //color change MyPen=BluePen; else MyPen=RedPen; Projekt: KPC2E_Ex110

GDI - příklady (4/11) Příklad: Sestavte formulářovou aplikaci, která bude zobrazovat plný „koláč“ podle nastavené úhlové hodnoty ve stupních s výběrem barvy Volání obnovení: Refresh() + ColorDialog Při změně hodnoty v NUD se změní globální proměnná a udávající úhel koláče ve stup-ních a volá se refresh (překre-slení) PictureBoxu, ve kte-rém je koláč vykreslován. Při stisku tlačítka Btn_Color je vyvolán ColorDialog, nastave-ná barva se vloží do proměnné MyBrush, která definuje barvu koláče a následně se zavolá refresh (překreslení) koláče.

GDI - příklady (5/11) #pragma once int angle=20; // global variable – angle of pie namespace Ex110{ public ref class Form1 : public System::Windows::Forms::Form { ……… private: System::Windows::Forms::Button^ Btn_Color; private: SolidBrush^ MyBrush; // private variable of Form1 – MyBrush #pragma endregion private: System::Void Form1_Load(System::Object^ sender, System::EventArgs^ e) { //MyBrush inicialization during Form1 loading - blue MyBrush = gcnew SolidBrush(Color::Blue); }

mazání grafiky v objektu, plátno bílé GDI - příklady (6/11) private: System::Void PB_Paint(System::Object^ sender, System::Windows::Forms::PaintEventArgs^ e) { Graphics ^ g = e->Graphics; e->Graphics->Clear(System::Drawing::Color::White); e->Graphics->FillPie(MyBrush,100,100,200,200,0,-a); } private: System::Void NUD_ValueChanged(System::Object^ sender, System::EventArgs^ e) a = System::Convert::ToInt32(this->NUD->Value); this->PB->Refresh(); vykresleníkoláče mazání grafiky v objektu, plátno bílé poč. úhel úhlovádélka koláče překre-slení koláče obdélníkkoláče

GDI - příklady (7/11) přiřazení barvy štětci pro kreslení koláče private: System::Void Btn_Color_Click(System::Object^ sender, System::EventArgs^ e) { this->CDialog->ShowDialog(); MyBrush->Color = this->CDialog->Color; this->PB->Refresh(); } přiřazení barvy štětci pro kreslení koláče otevření dialogu barvy překreslení koláče Projekt: KPC2E_Ex111

GDI - příklady (8/11) Výběr kreslených objektů: Drawxxx() Příklad: DrawArc() e->Graphics->DrawArc(MyPen,180,10,100,100,-135,180);

GDI - příklady (9/11) Text jako grafický objekt: DrawString() System::Drawing::Font^ MyTextFont = gcnew System::Drawing::Font("Arial",16); SolidBrush^ MyTextBrush = gcnew SolidBrush(Color::Black); String^ DrawRect_string = "DrawRectangle"; e->Graphics->DrawString(DrawRect_string, MyTextFont, MyTextBrush, 10, 130); e->Graphics->DrawString("DrawArc", MyTextFont, MyTextBrush, 190, 130); string přímo jako parametr nový štětec pro text nový font string přes proměnnou počáteční poloha textu

GDI - příklady (10/11) Pole bodů pro DrawPolygon(), DrawCurve()atd. array<Point>^ PolyPoints = {Point(670,10), Point(690,50), Point(750,50), Point(670,100), Point(590,50), Point(640,50)}; e->Graphics->DrawPolygon(MyPen, PolyPoints);

GDI - příklady (11/11) Výběr kreslených objektů: Fillxxx() Příklad: FillPolygon() e->Graphics->FillPolygon(MyBrush, PolyPoints); Projekt: KPC2E_Ex112

Téma následujícího tutoriálu DĚKUJI ZA POZORNOST Téma následujícího tutoriálu Úvod do Matlabu