Tutoriál 3 8.3.2014 Jiří Šebesta

OSNOVA:a) Úvod do MS Visual Studiab) Formulářová aplikacec) Příklady formulářových aplikacíd) Úvod - GDI, OpenGL, DirectXe) Událost Paint() f) GDI - příklady

Jiří ŠebestaJiří ŠebestaÚstav radioelektroniky, FEKT VUT v BrněÚstav radioelektroniky, FEKT VUT v Brně

Počítače a programování 2 pro obor ESTKPC2E

TUTORIÁL 3

Úvod do MS Visual Studia (1/4)Ú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)


• 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


• 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)


• 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/Formulářová aplikace (1/1010))

• Založení projektu (MSVS 2008/2010): new project


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


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";

• Automaticky vygenerovaný kód pro nastavení ovládacího prvku ve Form1.h :

• this reprezentuje ukazatel na tento formulář


• Generování funkce pro ošetření události

…private: System::Void RB_blue_Click(System::Object^ sender, System::EventArgs^ e)

{this->My_text->ForeColor =

System::Drawing::Color::Blue;}

…

• ve Form1.h je vygenerována hlavička funkce události, do které lze vepsat tělo s poža-dovaným kódem


• 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 itApplication::Run(gcnew Form1());return 0;

}

Projekt: KPC2E_Ex106

Formulářová aplikace (Formulářová aplikace (66//1010))

• 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


• 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


• 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.


• Nastavit v Project – Properties: Linker - System


• Nastavit Linker – Advanced – Entry Point na jméno startovací funkce v MyForm.cpp, např. Main

PříkladPříkladyy formulářových aplikací formulářových aplikací (1/(1/77))

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]

double get_A(void){ return System::Convert::ToDouble(this->text_A->Text);}

double get_B(void){ return System::Convert::ToDouble(this->text_B->Text);}


Funkce pro načtení textu z TextBoxu s konverzí na double

volání konverzní

metodyukazatel na tento formulář

ovládací prvek formuláře TextBox

pojmenovaný text_B

proměnná

(člen)

TextBoxu

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());

}


Ošetření událostí – kliknutí na jednotlivá tlačítka

metoda třídy

System

ukazatel na tento formulář

volání konverzní metody

volání funkcí pro čtení vstupů

Projekt:KPC2E_Ex107

třída System

PříkladPříkladyy formulářových aplikací formulářových aplikací ((44//77))

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

#include <stdlib.h>#include <string.h>#include "stdafx.h"typedef struct t_pc{

char prod[ 20]; // name of the producerint price; // price of the computerfloat mem; // RAM capacity in GB

} a_pc;void add(char* _prod, int _price, float _mem); // adding new computervoid sort(void); // sorting according to the pricet_pc* get_fwd(void); // point out to the next computert_pc* get_bwd(void); // point out to the prev. computerint show_price(void);// get price of an added pcint show_cheap(void);// get price of the cheapest pc


Sestavení vlastní knihovny funkci pocitac.h

#include <stdafx.h>#include "pocitac.h" // definition of the struct t_pc

t_pc *katalog[20]; // array of pointers to computersint index=0; // first free position in the katalogint ptr=index-1; // pointer to a pc displayed in editsvoid 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;

}


Deklarace pole ukazatelů na záznamy + příklad funkce add() v pocitac.cpp

#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());}


Přilinkování knihovny a ošetření události stisku tlačítka Add ve Form1.h

volání konverzní metody

VisualString => *char Projekt: KPC2E_Ex108

Téma následující přednášky

– Grafika pro Windows ve MS Visual Studiu

DĚKUJI ZA POZORNOST

Úvod – GDI, DirectX, OpenGL Úvod – GDI, DirectX, OpenGL (1/2)(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 Úvod – GDI, DirectX, OpenGL (2/2)(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 - uGDI - uddálostálost Paint()Paint() (1/3) (1/3)

private: System::Void Form1_Paint(System::Object^ sender, System::Windows::Forms::PaintEventArgs^ e) {

Graphics ^ g = e->Graphics;}

vložení události Paint() do

formuláře aplikace

aktivace grafického objektu se jménem

e

hlavička události Paint()

• 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.

GDI - uGDI - uddálost álost Paint()Paint() (2/3) (2/3)

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);

}

nový objekt pera se jménem

MyPen

• Modrá a červená čára ve formulářovém okně

barva

tloušťkabod se jménem

point_A

souřadnice x

souřadnice y

vykreslení čáry z point_A do point_B

perem MyPenalternativní

vykreslení čáry s přímou definicí

pero XA YA XB YB

GDI - uGDI - uddálost álost Paint()Paint() (3/3) (3/3)

• Událost Paint() se volá při vykreslování okna

A=[100, 100] B=[300, 300]


GDI - příklady (1/11)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


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


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;}}



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.


#pragma onceint angle=20; // global variable – angle of pienamespace 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 endregionprivate: System::Void Form1_Load(System::Object^ sender, System::EventArgs^ e) { //MyBrush inicialization during Form1 loading - blue

MyBrush = gcnew SolidBrush(Color::Blue);}


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();}

mazání grafiky v objektu, plátno

bílé

vykresleníkoláčepřekre-

slení koláče

obdélníkkoláče

poč. úhel

úhlovádélka 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();}

otevření dialogu barvy

přiřazení barvy štětci pro

kreslení koláče

překreslení

koláče



e->Graphics->DrawArc(MyPen,180,10,100,100,-135,180);

• Výběr kreslených objektů: Drawxxx()

• Příklad: DrawArc()


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);

• Text jako grafický objekt: DrawString()

nový font nový štětec pro

text

string přes proměnnoupočáteční

poloha textu

string přímo jako

parametr


array<Point>^ PolyPoints = {Point(670,10), Point(690,50), Point(750,50), Point(670,100), Point(590,50), Point(640,50)};

• Pole bodů pro DrawPolygon(), DrawCurve()atd.

e->Graphics->DrawPolygon(MyPen, PolyPoints);


e->Graphics->FillPolygon(MyBrush, PolyPoints);

• Výběr kreslených objektů: Fillxxx()

• Příklad: FillPolygon()


Téma následujícího tutoriálu

– Úvod do Matlabu

DĚKUJI ZA POZORNOST

Documents

Tutoriál 3 8.3.2014 Jiří Šebesta