Work on the GUI page

docs/animationwindow/gui.md

@@ -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++