Commit 3e8f8ac1 authored by bartvbl's avatar bartvbl
Browse files

Work on the GUI page

parent d180b4ae
Pipeline #185890 passed with stage
in 20 seconds
......@@ -4,11 +4,95 @@ Grafiske brukergrensesnitt
## Konstruksjon av grafiske grensesnitt
Grafiske grensesnitt består av en rekke GUI elementer som kalles `widgets`. Dette kan være knapper,
<img src="../../images/gui.png" alt="Bilde som viser en kurve tegnet med draw_arc funksjonen og endret farge" style="max-width:400px; width:100%;"/>
## Callback
Et «callback» er en funksjon som kalles etter en spesifikk hendelse har inntruffet. Disse brukes ofte med brukergrensesnitt, for eksempel for å spesifisere hva som skal skje etter brukeren har trykket på en knapp. Hvert GUI-element lar deg definere _én_ slik funksjon som blir kjørt etter hver interaksjon. Nøyaktig hvilken interaksjon er avhengig av GUI-elementet.
For å vise hvordan man definerer og bruker en callback funksjon, fortsetter vi med samme eksempelet som før:
```c++
#include "std_lib_facilities.h"
#include "AnimationWindow.h"
#include "widgets/Button.h"
int main()
{
const Point buttonPosition {100, 100};
const int buttonWidth = 100;
const int buttonHeight = 40;
const string buttonLabel = "Click me!";
Button button {buttonPosition, buttonWidth, buttonHeight, buttonLabel};
AnimationWindow window;
window.add(button);
window.wait_for_close();
return 0;
}
```
Vi kan nå definere callback funksjonen. Den skal ha ingen parametere, og returnere `void`. Det er mulig å definere flere callback funksjoner i en enkelt fil, og navnet på funksjonene er ikke viktig. Flere GUI elementer kan ha samme callback funksjonen.
```c++
#include "std_lib_facilities.h"
#include "AnimationWindow.h"
#include "widgets/Button.h"
void callbackFunction() {
std::cout << "This is printed when this function is executed." << std::endl;
}
int main()
{
const Point buttonPosition {100, 100};
const int buttonWidth = 100;
const int buttonHeight = 40;
const string buttonLabel = "Click me!";
Button button {buttonPosition, buttonWidth, buttonHeight, buttonLabel};
AnimationWindow window;
window.add(button);
window.wait_for_close();
return 0;
}
```
Den siste steget er å bruke `callbackFunction()` funksjonen som callback av knappen vi laget tidligere. Vi gjør dette ved å bruke `setCallback()` funksjonen, med navn på funksjonen som vi ønsker å bruke som parameter:
```c++
#include "std_lib_facilities.h"
#include "AnimationWindow.h"
#include "widgets/Button.h"
void callbackFunction() {
std::cout << "This is printed when this function is executed." << std::endl;
}
int main()
{
const Point buttonPosition {100, 100};
const int buttonWidth = 100;
const int buttonHeight = 40;
const string buttonLabel = "Click me!";
Button button {buttonPosition, buttonWidth, buttonHeight, buttonLabel};
AnimationWindow window;
button.setCallback(callbackFunction);
window.add(button);
window.wait_for_close();
return 0;
}
```
Når vi kjører dette programmet og klikker på knappen ser vi at callback funksjonen skriver ut tekst på skjermen:
<img src="../../images/callback.png" alt="Bilde som viser en kurve tegnet med draw_arc funksjonen og endret farge" style="max-width:800px; width:100%;"/>
## GUI Elementer
......@@ -16,6 +100,12 @@ Hver GUI element som kan brukes i en AnimationWindow er definert i sin egen klas
### Knapp
en knapp er en GUI element som gjør noe når du klikker på den:
<img src="../../images/button.png" alt="Bilde som viser en kurve tegnet med draw_arc funksjonen og endret farge" style="max-width:400px; width:100%;"/>
Her er et eksempel som vises hvordan den brukes:
```c++
#include "std_lib_facilities.h"
#include "AnimationWindow.h"
......@@ -41,6 +131,18 @@ int main()
}
```
Merk at vi må først inkludere headeren til `TDT4102::Button` klassen ved å skrive `#include "widgets/Button.h"` øverst i filen.
Deretter lager vi en knapp ved å instansiere `TDT4102::Button` klassen, som har følgende konstruktøren:
```c++
Button(TDT4102::Point location, unsigned int width, unsigned int height, std::string label);
```
Her definerer `TDT4102::Point location` hvor knappen skal plasseres på skjermen, `width` og `height` størrelsen, og `label` teksten som skal vises på knappen. Vi bruker `add()` og `setCallback()` funksjonene å sørge for at knappen blir synlig i vinduet, og at det skjer noe når vi klikker på den.
Callback funksjonen blir kallet hver gang brukeren klikker på knappen.
### Tekst felt
```c++
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment