diff --git a/docs/animationwindow/animation.md b/docs/animationwindow/animation.md
index bbbb101a595aa9a5cbe122da071e8757d59edac5..3dc96401632f6363aa2c43e83cf3bfb72eb54fba 100644
--- a/docs/animationwindow/animation.md
+++ b/docs/animationwindow/animation.md
@@ -9,15 +9,13 @@ En animasjon er en rekke bilder som er vist kort etter hverandre, hvor ved å be
Vi har fram til nå bare tegnet enkelte bilder som ikke beveger eller endrer seg, og fordi animasjonen krever at vi tegner flere bilder trenger vi å bruke et par andre funksjoner i stede for `wait_for_close()` funksjonen som vi har brukt så langt:
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
while(!window.should_close()) {
- window.draw_circle({100, 100}, 50, Color::dark_green);
+ window.draw_circle({100, 100}, 50, TDT4012::Color::dark_green);
window.next_frame();
}
@@ -38,17 +36,15 @@ Det er to nye funksjoner som brukes i dette eksempelet:
Siden det nå er mulig å tegne flere bilder på rad kan vi prøve å lage en enkel animasjon, for eksempel en firkant som beveger mot høyre siden av skjermen. Vi gjør dette ved å øke x-koordinatet hver gang vi tegner et nytt bilde:
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
int xPosition = 0;
while(!window.should_close()) {
xPosition = xPosition + 2;
- Point position {xPosition, 100};
+ TDT4102::Point position {xPosition, 100};
window.draw_rectangle(position, 100, 100);
window.next_frame();
@@ -60,15 +56,13 @@ int main()
Merk at hele bildet må tegnes på nytt etter hver gang `next_frame()` funksjonen blir kallet. Det er ikke mulig å beholde en del av bildet og tegne bare det som endrer seg.
-Når du kjører eksempelet forsvinner firkanten etterhvert. Vi kan løse dette ved å legge til et if setning:
+Når du kjører eksempelet forsvinner firkanten etterhvert. Vi kan løse dette ved å legge til en if setning:
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
int xPosition = 0;
while(!window.should_close()) {
@@ -76,7 +70,7 @@ int main()
if(xPosition > 200) {
xPosition = 0;
}
- Point position {xPosition, 100};
+ TDT4102::Point position {xPosition, 100};
window.draw_rectangle(position, 100, 100);
window.next_frame();
@@ -89,12 +83,10 @@ int main()
Og for moro skyld kan vi sørge for at den bare flytter seg når mellomrom på tastaturen holdes ned (du finner mer informasjon om dette på input siden):
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
int xPosition = 0;
while(!window.should_close()) {
@@ -104,7 +96,7 @@ int main()
if(xPosition > 200) {
xPosition = 0;
}
- Point position {xPosition, 100};
+ TDT4102::Point position {xPosition, 100};
window.draw_rectangle(position, 100, 100);
window.next_frame();
diff --git a/docs/animationwindow/color.md b/docs/animationwindow/color.md
new file mode 100644
index 0000000000000000000000000000000000000000..f7c3c4982d13c6f4847415ea31ad47b9425cb567
--- /dev/null
+++ b/docs/animationwindow/color.md
@@ -0,0 +1,215 @@
+## Egendefinerte farger
+
+Klikk her å velge farge:
+
+<script>
+ window.addEventListener("load", startup, false);
+
+ const hex2rgb = (hex) => {
+ const r = parseInt(hex.slice(1, 3), 16);
+ const g = parseInt(hex.slice(3, 5), 16);
+ const b = parseInt(hex.slice(5, 7), 16);
+
+ return { r, g, b };
+ }
+
+ function colourSelectionChanged(event) {
+ const rgbValues = hex2rgb(event.target.value);
+
+ // Update text values
+ document.getElementById('red0').innerHTML = rgbValues['r'];
+ document.getElementById('red1').innerHTML = rgbValues['r'];
+ document.getElementById('red2').innerHTML = rgbValues['r'];
+ document.getElementById('green0').innerHTML = rgbValues['g'];
+ document.getElementById('green1').innerHTML = rgbValues['g'];
+ document.getElementById('green2').innerHTML = rgbValues['g'];
+ document.getElementById('blue0').innerHTML = rgbValues['b'];
+ document.getElementById('blue1').innerHTML = rgbValues['b'];
+ document.getElementById('blue2').innerHTML = rgbValues['b'];
+
+ // Make answer region visible
+ document.getElementById('resultOutput').style.display = "block";
+ }
+
+ function startup() {
+ const colorPicker = document.getElementById("colorPicker");
+ colorPicker.addEventListener("change", colourSelectionChanged, false);
+ colorPicker.setValue("#399AD5");
+ }
+</script>
+
+<input type="color" id="colorPicker" value="#ff0000" style="width:10em;">
+
+<div id="resultOutput" style="display: none;">
+
+Du kan enten lagre fargen i en egen variabel:
+ <div class="highlight"><pre id="__code_1"><span></span><button class="md-clipboard md-icon" title="Copy to clipboard" data-clipboard-target="#__code_1 > code"></button><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="n">TDT4102</span><span class="o">::</span><span class="n">Color</span><span class="w"> </span><span class="nf">chosenColor</span><span class="p">(</span><span class="mi" id="red0">100</span><span class="p">,</span><span class="w"> </span><span class="mi" id="green0">100</span><span class="p">,</span><span class="w"> </span><span class="mi" id="blue0">100</span><span class="p">);</span><span class="w"></span></code></pre></div>
+
+Eller bruke verdien direkte, for eksempel som verdi av en funksjonsparameter:
+ <div class="highlight"><pre id="__code_1"><span></span><button class="md-clipboard md-icon" title="Copy to clipboard" data-clipboard-target="#__code_1 > code"></button><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="n">TDT4102</span><span class="o">::</span><span class="n">Color</span><span class="p">(</span><span class="mi" id="red1">100</span><span class="p">,</span><span class="w"> </span><span class="mi" id="green1">100</span><span class="p">,</span><span class="w"> </span><span class="mi" id="blue1">100</span><span class="p">)</span><span class="w"></span></code></pre></div>
+
+Farger kan representeres på forskjellige måter. Det mest vanlige formatet er RGB (Rødt, Grønt, Blått). De ulike kanalene blandes i forskjellige mengder for å lage farger. Disse pleier å være verdier mellom 0 og 255 og det er de som brukes i Color-klassen. Prøv å velge hvit og deretter svart, og se hva som skjer med RGB-verdiene!
+
+<div class="highlight"><pre id="__code_3"><span></span><button class="md-clipboard md-icon" title="Copy to clipboard" data-clipboard-target="#__code_3 > code"></button><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="kt">unsigned</span><span class="w"> </span><span class="kt">char</span><span class="w"> </span><span class="n">redChannel</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mi" id="red2">0</span><span class="p">;</span><span class="w"></span>
+<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="kt">unsigned</span><span class="w"> </span><span class="kt">char</span><span class="w"> </span><span class="n">greenChannel</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mi" id="green2">0</span><span class="p">;</span><span class="w"></span>
+<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="kt">unsigned</span><span class="w"> </span><span class="kt">char</span><span class="w"> </span><span class="n">blueChannel</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mi" id="blue2">0</span><span class="p">;</span><span class="w"></span>
+<a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="n">TDT4102</span><span class="o">::</span><span class="n">Color</span><span class="w"> </span><span class="nf">chosenColor</span><span class="p">(</span><span class="n">redChannel</span><span class="p">,</span><span class="w"> </span><span class="n">greenChannel</span><span class="p">,</span><span class="w"> </span><span class="n">blueChannel</span><span class="p">);</span><span class="w"></span>
+</code></pre></div>
+</div>
+
+## Forhåndsdefinerte farger
+
+Det er vanligvis lettere å bruke en forhåndsdefinert farge i stedet for å måtte lete etter RGB verdier. Derfor har vi forhåndsdefinert en rekke farger. Fargeverdiene du kan velge fra er vist i tabellen under.
+
+<table>
+<tr><td style="font-weight: bold;">Color verdi</td><td style="font-weight: bold;">Farge</td></tr>
+<tr><td>TDT4102::Color::transparent</td><td style="background-color: rgba(0, 0, 0, 1);">(transparant)</td></tr>
+<tr><td>TDT4102::Color::black</td><td style="background-color:#000000;"></td></tr>
+<tr><td>TDT4102::Color::silver</td><td style="background-color:#c0c0c0;"></td></tr>
+<tr><td>TDT4102::Color::gray</td><td style="background-color:#808080;"></td></tr>
+<tr><td>TDT4102::Color::white</td><td style="background-color:#ffffff;"></td></tr>
+<tr><td>TDT4102::Color::maroon</td><td style="background-color:#800000;"></td></tr>
+<tr><td>TDT4102::Color::red</td><td style="background-color:#ff0000;"></td></tr>
+<tr><td>TDT4102::Color::purple</td><td style="background-color:#800080;"></td></tr>
+<tr><td>TDT4102::Color::magenta</td><td style="background-color:#ff00ff;"></td></tr>
+<tr><td>TDT4102::Color::green</td><td style="background-color:#008000;"></td></tr>
+<tr><td>TDT4102::Color::lime</td><td style="background-color:#00ff00;"></td></tr>
+<tr><td>TDT4102::Color::olive</td><td style="background-color:#808000;"></td></tr>
+<tr><td>TDT4102::Color::yellow</td><td style="background-color:#ffff00;"></td></tr>
+<tr><td>TDT4102::Color::navy</td><td style="background-color:#000080;"></td></tr>
+<tr><td>TDT4102::Color::blue</td><td style="background-color:#0000ff;"></td></tr>
+<tr><td>TDT4102::Color::teal</td><td style="background-color:#008080;"></td></tr>
+<tr><td>TDT4102::Color::aqua</td><td style="background-color:#00ffff;"></td></tr>
+<tr><td>TDT4102::Color::orange</td><td style="background-color:#ffa500;"></td></tr>
+<tr><td>TDT4102::Color::alice_blue</td><td style="background-color:#f0f8ff;"></td></tr>
+<tr><td>TDT4102::Color::antique_white</td><td style="background-color:#faebd7;"></td></tr>
+<tr><td>TDT4102::Color::aquamarine</td><td style="background-color:#7fffd4;"></td></tr>
+<tr><td>TDT4102::Color::azure</td><td style="background-color:#f0ffff;"></td></tr>
+<tr><td>TDT4102::Color::beige</td><td style="background-color:#f5f5dc;"></td></tr>
+<tr><td>TDT4102::Color::bisque</td><td style="background-color:#ffe4c4;"></td></tr>
+<tr><td>TDT4102::Color::blanched_almond</td><td style="background-color:#ffebcd;"></td></tr>
+<tr><td>TDT4102::Color::blue_violet</td><td style="background-color:#8a2be2;"></td></tr>
+<tr><td>TDT4102::Color::brown</td><td style="background-color:#a52a2a;"></td></tr>
+<tr><td>TDT4102::Color::burly_wood</td><td style="background-color:#deb887;"></td></tr>
+<tr><td>TDT4102::Color::cadet_blue</td><td style="background-color:#5f9ea0;"></td></tr>
+<tr><td>TDT4102::Color::chart_reuse</td><td style="background-color:#7fff00;"></td></tr>
+<tr><td>TDT4102::Color::chocolate</td><td style="background-color:#d2691e;"></td></tr>
+<tr><td>TDT4102::Color::coral</td><td style="background-color:#ff7f50;"></td></tr>
+<tr><td>TDT4102::Color::cornflower_blue</td><td style="background-color:#6495ed;"></td></tr>
+<tr><td>TDT4102::Color::corn_silk</td><td style="background-color:#fff8dc;"></td></tr>
+<tr><td>TDT4102::Color::crimson</td><td style="background-color:#dc143c;"></td></tr>
+<tr><td>TDT4102::Color::cyan</td><td style="background-color:#00ffff;"></td></tr>
+<tr><td>TDT4102::Color::dark_blue</td><td style="background-color:#00008b;"></td></tr>
+<tr><td>TDT4102::Color::dark_cyan</td><td style="background-color:#008b8b;"></td></tr>
+<tr><td>TDT4102::Color::dark_goldenrod</td><td style="background-color:#b8860b;"></td></tr>
+<tr><td>TDT4102::Color::dark_gray</td><td style="background-color:#a9a9a9;"></td></tr>
+<tr><td>TDT4102::Color::dark_green</td><td style="background-color:#006400;"></td></tr>
+<tr><td>TDT4102::Color::dark_grey</td><td style="background-color:#a9a9a9;"></td></tr>
+<tr><td>TDT4102::Color::dark_khaki</td><td style="background-color:#bdb76b;"></td></tr>
+<tr><td>TDT4102::Color::dark_magenta</td><td style="background-color:#8b008b;"></td></tr>
+<tr><td>TDT4102::Color::dark_olivegreen</td><td style="background-color:#556b2f;"></td></tr>
+<tr><td>TDT4102::Color::dark_orange</td><td style="background-color:#ff8c00;"></td></tr>
+<tr><td>TDT4102::Color::dark_orchid</td><td style="background-color:#9932cc;"></td></tr>
+<tr><td>TDT4102::Color::dark_red</td><td style="background-color:#8b0000;"></td></tr>
+<tr><td>TDT4102::Color::dark_salmon</td><td style="background-color:#e9967a;"></td></tr>
+<tr><td>TDT4102::Color::dark_seagreen</td><td style="background-color:#8fbc8f;"></td></tr>
+<tr><td>TDT4102::Color::dark_slateblue</td><td style="background-color:#483d8b;"></td></tr>
+<tr><td>TDT4102::Color::dark_slategray</td><td style="background-color:#2f4f4f;"></td></tr>
+<tr><td>TDT4102::Color::dark_slategrey</td><td style="background-color:#2f4f4f;"></td></tr>
+<tr><td>TDT4102::Color::dark_turquoise</td><td style="background-color:#00ced1;"></td></tr>
+<tr><td>TDT4102::Color::dark_violet</td><td style="background-color:#9400d3;"></td></tr>
+<tr><td>TDT4102::Color::deep_pink</td><td style="background-color:#ff1493;"></td></tr>
+<tr><td>TDT4102::Color::deep_skyblue</td><td style="background-color:#00bfff;"></td></tr>
+<tr><td>TDT4102::Color::dim_gray</td><td style="background-color:#696969;"></td></tr>
+<tr><td>TDT4102::Color::dim_grey</td><td style="background-color:#696969;"></td></tr>
+<tr><td>TDT4102::Color::dodger_blue</td><td style="background-color:#1e90ff;"></td></tr>
+<tr><td>TDT4102::Color::firebrick</td><td style="background-color:#b22222;"></td></tr>
+<tr><td>TDT4102::Color::floral_white</td><td style="background-color:#fffaf0;"></td></tr>
+<tr><td>TDT4102::Color::forest_green</td><td style="background-color:#228b22;"></td></tr>
+<tr><td>TDT4102::Color::gainsboro</td><td style="background-color:#dcdcdc;"></td></tr>
+<tr><td>TDT4102::Color::ghost_white</td><td style="background-color:#f8f8ff;"></td></tr>
+<tr><td>TDT4102::Color::gold</td><td style="background-color:#ffd700;"></td></tr>
+<tr><td>TDT4102::Color::goldenrod</td><td style="background-color:#daa520;"></td></tr>
+<tr><td>TDT4102::Color::green_yellow</td><td style="background-color:#adff2f;"></td></tr>
+<tr><td>TDT4102::Color::grey</td><td style="background-color:#808080;"></td></tr>
+<tr><td>TDT4102::Color::honeydew</td><td style="background-color:#f0fff0;"></td></tr>
+<tr><td>TDT4102::Color::hot_pink</td><td style="background-color:#ff69b4;"></td></tr>
+<tr><td>TDT4102::Color::indian_red</td><td style="background-color:#cd5c5c;"></td></tr>
+<tr><td>TDT4102::Color::indigo</td><td style="background-color:#4b0082;"></td></tr>
+<tr><td>TDT4102::Color::ivory</td><td style="background-color:#fffff0;"></td></tr>
+<tr><td>TDT4102::Color::khaki</td><td style="background-color:#f0e68c;"></td></tr>
+<tr><td>TDT4102::Color::lavender</td><td style="background-color:#e6e6fa;"></td></tr>
+<tr><td>TDT4102::Color::lavender_blush</td><td style="background-color:#fff0f5;"></td></tr>
+<tr><td>TDT4102::Color::lawn_green</td><td style="background-color:#7cfc00;"></td></tr>
+<tr><td>TDT4102::Color::lemon_chiffon</td><td style="background-color:#fffacd;"></td></tr>
+<tr><td>TDT4102::Color::light_blue</td><td style="background-color:#add8e6;"></td></tr>
+<tr><td>TDT4102::Color::light_coral</td><td style="background-color:#f08080;"></td></tr>
+<tr><td>TDT4102::Color::light_cyan</td><td style="background-color:#e0ffff;"></td></tr>
+<tr><td>TDT4102::Color::light_goldenrodyellow</td><td style="background-color:#fafad2;"></td></tr>
+<tr><td>TDT4102::Color::light_gray</td><td style="background-color:#d3d3d3;"></td></tr>
+<tr><td>TDT4102::Color::light_green</td><td style="background-color:#90ee90;"></td></tr>
+<tr><td>TDT4102::Color::light_grey</td><td style="background-color:#d3d3d3;"></td></tr>
+<tr><td>TDT4102::Color::light_pink</td><td style="background-color:#ffb6c1;"></td></tr>
+<tr><td>TDT4102::Color::light_salmon</td><td style="background-color:#ffa07a;"></td></tr>
+<tr><td>TDT4102::Color::light_sea_green</td><td style="background-color:#20b2aa;"></td></tr>
+<tr><td>TDT4102::Color::light_sky_blue</td><td style="background-color:#87cefa;"></td></tr>
+<tr><td>TDT4102::Color::light_slate_gray</td><td style="background-color:#778899;"></td></tr>
+<tr><td>TDT4102::Color::light_slate_grey</td><td style="background-color:#778899;"></td></tr>
+<tr><td>TDT4102::Color::light_steel_blue</td><td style="background-color:#b0c4de;"></td></tr>
+<tr><td>TDT4102::Color::light_yellow</td><td style="background-color:#ffffe0;"></td></tr>
+<tr><td>TDT4102::Color::lime_green</td><td style="background-color:#32cd32;"></td></tr>
+<tr><td>TDT4102::Color::linen</td><td style="background-color:#faf0e6;"></td></tr>
+<tr><td>TDT4102::Color::medium_aquamarine</td><td style="background-color:#66cdaa;"></td></tr>
+<tr><td>TDT4102::Color::medium_blue</td><td style="background-color:#0000cd;"></td></tr>
+<tr><td>TDT4102::Color::medium_orchid</td><td style="background-color:#ba55d3;"></td></tr>
+<tr><td>TDT4102::Color::medium_purple</td><td style="background-color:#9370db;"></td></tr>
+<tr><td>TDT4102::Color::medium_sea_green</td><td style="background-color:#3cb371;"></td></tr>
+<tr><td>TDT4102::Color::medium_slate_blue</td><td style="background-color:#7b68ee;"></td></tr>
+<tr><td>TDT4102::Color::medium_spring_green</td><td style="background-color:#00fa9a;"></td></tr>
+<tr><td>TDT4102::Color::medium_turquoise</td><td style="background-color:#48d1cc;"></td></tr>
+<tr><td>TDT4102::Color::medium_violet_red</td><td style="background-color:#c71585;"></td></tr>
+<tr><td>TDT4102::Color::midnight_blue</td><td style="background-color:#191970;"></td></tr>
+<tr><td>TDT4102::Color::mint_cream</td><td style="background-color:#f5fffa;"></td></tr>
+<tr><td>TDT4102::Color::misty_rose</td><td style="background-color:#ffe4e1;"></td></tr>
+<tr><td>TDT4102::Color::moccasin</td><td style="background-color:#ffe4b5;"></td></tr>
+<tr><td>TDT4102::Color::navajo_white</td><td style="background-color:#ffdead;"></td></tr>
+<tr><td>TDT4102::Color::old_lace</td><td style="background-color:#fdf5e6;"></td></tr>
+<tr><td>TDT4102::Color::olivedrab</td><td style="background-color:#6b8e23;"></td></tr>
+<tr><td>TDT4102::Color::orange_red</td><td style="background-color:#ff4500;"></td></tr>
+<tr><td>TDT4102::Color::orchid</td><td style="background-color:#da70d6;"></td></tr>
+<tr><td>TDT4102::Color::pale_goldenrod</td><td style="background-color:#eee8aa;"></td></tr>
+<tr><td>TDT4102::Color::pale_green</td><td style="background-color:#98fb98;"></td></tr>
+<tr><td>TDT4102::Color::pale_turquoise</td><td style="background-color:#afeeee;"></td></tr>
+<tr><td>TDT4102::Color::pale_violet_red</td><td style="background-color:#db7093;"></td></tr>
+<tr><td>TDT4102::Color::papayawhip</td><td style="background-color:#ffefd5;"></td></tr>
+<tr><td>TDT4102::Color::peachpuff</td><td style="background-color:#ffdab9;"></td></tr>
+<tr><td>TDT4102::Color::peru</td><td style="background-color:#cd853f;"></td></tr>
+<tr><td>TDT4102::Color::pink</td><td style="background-color:#ffc0cb;"></td></tr>
+<tr><td>TDT4102::Color::plum</td><td style="background-color:#dda0dd;"></td></tr>
+<tr><td>TDT4102::Color::powder_blue</td><td style="background-color:#b0e0e6;"></td></tr>
+<tr><td>TDT4102::Color::rosy_brown</td><td style="background-color:#bc8f8f;"></td></tr>
+<tr><td>TDT4102::Color::royal_blue</td><td style="background-color:#4169e1;"></td></tr>
+<tr><td>TDT4102::Color::saddle_brown</td><td style="background-color:#8b4513;"></td></tr>
+<tr><td>TDT4102::Color::salmon</td><td style="background-color:#fa8072;"></td></tr>
+<tr><td>TDT4102::Color::sandy_brown</td><td style="background-color:#f4a460;"></td></tr>
+<tr><td>TDT4102::Color::sea_green</td><td style="background-color:#2e8b57;"></td></tr>
+<tr><td>TDT4102::Color::sea_shell</td><td style="background-color:#fff5ee;"></td></tr>
+<tr><td>TDT4102::Color::sienna</td><td style="background-color:#a0522d;"></td></tr>
+<tr><td>TDT4102::Color::sky_blue</td><td style="background-color:#87ceeb;"></td></tr>
+<tr><td>TDT4102::Color::slate_blue</td><td style="background-color:#6a5acd;"></td></tr>
+<tr><td>TDT4102::Color::slate_gray</td><td style="background-color:#708090;"></td></tr>
+<tr><td>TDT4102::Color::slate_grey</td><td style="background-color:#708090;"></td></tr>
+<tr><td>TDT4102::Color::snow</td><td style="background-color:#fffafa;"></td></tr>
+<tr><td>TDT4102::Color::spring_green</td><td style="background-color:#00ff7f;"></td></tr>
+<tr><td>TDT4102::Color::steel_blue</td><td style="background-color:#4682b4;"></td></tr>
+<tr><td>TDT4102::Color::tan</td><td style="background-color:#d2b48c;"></td></tr>
+<tr><td>TDT4102::Color::thistle</td><td style="background-color:#d8bfd8;"></td></tr>
+<tr><td>TDT4102::Color::fuchsia</td><td style="background-color:#ff00ff;"></td></tr>
+<tr><td>TDT4102::Color::tomato</td><td style="background-color:#ff6347;"></td></tr>
+<tr><td>TDT4102::Color::turquoise</td><td style="background-color:#40e0d0;"></td></tr>
+<tr><td>TDT4102::Color::violet</td><td style="background-color:#ee82ee;"></td></tr>
+<tr><td>TDT4102::Color::wheat</td><td style="background-color:#f5deb3;"></td></tr>
+<tr><td>TDT4102::Color::white_smoke</td><td style="background-color:#f5f5f5;"></td></tr>
+<tr><td>TDT4102::Color::yellow_green</td><td style="background-color:#9acd32;"></td></tr>
+<tr><td>TDT4102::Color::rebecca_purple</td><td style="background-color:#663399;"></td></tr>
+</table>
diff --git a/docs/animationwindow/drawing.md b/docs/animationwindow/drawing.md
index 8ca10a9cde77fe33bfe033064e2299bd7d1d8380..94b6a97048a13683225097a11b5422c13e876bac 100644
--- a/docs/animationwindow/drawing.md
+++ b/docs/animationwindow/drawing.md
@@ -4,24 +4,22 @@
### Vinduets koordinatsystem
-Alle former som kan tegnes i vinduet krever at du spesifiserer en posisjon. Koordinater er målet relativ til øverst venstre hjørnet i vinduet, hvor x-koordinater øker i høyre retningen og y-koordinater øker nedover.
+Alle former som kan tegnes i vinduet krever at du spesifiserer en posisjon. Koordinater er målet relativ til øverst venstre hjørnet i vinduet, hvor x-koordinater øker mot høyre og y-koordinater øker nedover.
<img src="../../images/window_coordinates.png" alt="Bilde som viser x og y-aksen i vinduet" style="max-width:600px; width:100%;"/>
-Du kan også bruke følgende programmet for å visualisere hvilket koordinat musen din peker til:
+Du kan også bruke følgende program for å visualisere hvilket koordinat musepekeren er på:
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
while(!window.should_close()) {
- Point mouseCoordinates = window.get_mouse_coordinates();
- string coordinateText = to_string(mouseCoordinates.x) + ", " + to_string(mouseCoordinates.y);
+ TDT4102::Point mouseCoordinates = window.get_mouse_coordinates();
+ string coordinateText = std::to_string(mouseCoordinates.x) + ", " + std::to_string(mouseCoordinates.y);
window.draw_text(mouseCoordinates, coordinateText);
window.next_frame();
@@ -37,23 +35,21 @@ Du kan tenke på vinduet som et slags maleri. Det betyr at når du tegner over n
For eksempel, dette er resultatet når rektangelen tegnes først og sirklen sist:
-<img src="../../images/draw_order_1.png" alt="Bilde som viser x og y-aksen i vinduet" style="max-width:600px; width:100%;"/>
+<img src="../../images/draw_order_1.png" alt="Grønn sirkel over et blått rektangel" style="max-width:600px; width:100%;"/>
Og dette er resultatet dersom rektangelen tegnes sist:
-<img src="../../images/draw_order_2.png" alt="Bilde som viser x og y-aksen i vinduet" style="max-width:600px; width:100%;"/>
+<img src="../../images/draw_order_2.png" alt="Blått rektangel over en grønn sirkel" style="max-width:600px; width:100%;"/>
## Basisformer
Om du ønsker å teste de kodeeksemplene som er vist, kan du bruke følgende eksempelet hvor du erstatter linjen som er markert:
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
// Erstatt denne linjen med eksemplet som du ønsker å prøve
@@ -66,7 +62,7 @@ int main()
For å tegne sirkler kan du bruke `draw_circle()` funksjonen. Denne krever et punkt hvor midtpunktet skal tegnes, og en radius som definerer hvor stor den skal være:
```c++
- Point circleOrigin {150, 150};
+ TDT4102::Point circleOrigin {150, 150};
int radius = 100;
window.draw_circle(circleOrigin, radius);
```
@@ -75,157 +71,157 @@ For å tegne sirkler kan du bruke `draw_circle()` funksjonen. Denne krever et pu
window.draw_circle({150, 150}, 100);
```
-<img src="../../images/circle_1.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/circle_1.png" alt="Bilde som viser en blå sirkel" style="max-width:450px; width:100%;"/>
Det er mulig å endre på sirklens farge:
```c++
- Point circleOrigin {150, 150};
+ TDT4102::Point circleOrigin {150, 150};
int radius = 100;
- Color fillColor = Color::dark_orange;
+ TDT4102::Color fillColor = TDT4102::Color::dark_orange;
window.draw_circle(circleOrigin, radius, fillColor);
```
-<img src="../../images/circle_2.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/circle_2.png" alt="Bilde som viser en mørke-oransje sirkel" style="max-width:450px; width:100%;"/>
Og en kantlinje med en gitt farge:
```c++
- Point circleOrigin {150, 150};
+ TDT4102::Point circleOrigin {150, 150};
int radius = 100;
- Color fillColor = Color::dark_orange;
- Color borderColor = Color::black;
+ TDT4102::Color fillColor = TDT4102::Color::dark_orange;
+ TDT4102::Color borderColor = TDT4102::Color::black;
window.draw_circle(circleOrigin, radius, fillColor, borderColor);
```
-<img src="../../images/circle_3.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/circle_3.png" alt="Bilde som viser en mørke-oransje sirkel med svart kantlinje" style="max-width:450px; width:100%;"/>
### Trekanter
Trekanter tegnes mellom tre punkt og `draw_triangle()` funksjonen:
```c++
- Point vertex0 {150, 50};
- Point vertex1 {50, 200};
- Point vertex2 {250, 200};
+ TDT4102::Point vertex0 {150, 50};
+ TDT4102::Point vertex1 {50, 200};
+ TDT4102::Point vertex2 {250, 200};
window.draw_triangle(vertex0, vertex1, vertex2);
```
-<img src="../../images/triangle_1.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/triangle_1.png" alt="Bilde som viser en gul trekant" style="max-width:450px; width:100%;"/>
Og som før kan fargen endres:
```c++
- Point vertex0 {150, 50};
- Point vertex1 {50, 200};
- Point vertex2 {250, 200};
- Color fillColor = Color::indigo;
+ TDT4102::Point vertex0 {150, 50};
+ TDT4102::Point vertex1 {50, 200};
+ TDT4102::Point vertex2 {250, 200};
+ TDT4102::Color fillColor = TDT4102::Color::indigo;
window.draw_triangle(vertex0, vertex1, vertex2, fillColor);
```
-<img src="../../images/triangle_2.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/triangle_2.png" alt="Bilde som viser en lilla trekant" style="max-width:450px; width:100%;"/>
### Rektangel
-Rektangel tegnes på et punkt som tilsvarer øverst venstre hjørnet samt et høyde og bredde. Den tegnes med `draw_rectangle()` funksjonen:
+Rektangel tegnes fra et punkt som tilsvarer øverst venstre hjørnet samt høyde og bredde. Den tegnes med `draw_rectangle()` funksjonen:
```c++
- Point topLeftCorner {50, 50};
+ TDT4102::Point topLeftCorner {50, 50};
int width = 150;
int height = 100;
window.draw_rectangle(topLeftCorner, width, height);
```
-<img src="../../images/rectangle_1.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/rectangle_1.png" alt="Bilde som viser et blågrønt rektangel" style="max-width:450px; width:100%;"/>
Som alle andre former kan fargen endres:
```c++
- Point topLeftCorner {50, 50};
+ TDT4102::Point topLeftCorner {50, 50};
int width = 150;
int height = 100;
- Color fillColor = Color::light_sea_green;
+ TDT4102::Color fillColor = TDT4102::Color::light_sea_green;
window.draw_rectangle(topLeftCorner, width, height, fillColor);
```
Og kantfargen kan også endres som i sirkler:
```c++
- Point topLeftCorner {50, 50};
+ TDT4102::Point topLeftCorner {50, 50};
int width = 150;
int height = 100;
- Color fillColor = Color::light_sea_green;
- Color edgeColor = Color::lime;
+ TDT4102::Color fillColor = TDT4102::Color::light_sea_green;
+ TDT4102::Color edgeColor = TDT4102::Color::lime;
window.draw_rectangle(topLeftCorner, width, height, fillColor, lime);
```
-<img src="../../images/rectangle_2.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/rectangle_2.png" alt="Bilde som viser et grønt rektangel" style="max-width:450px; width:100%;"/>
### Quad
En quad er et rektangel hvor hvert hjørne kan flyttes uavhengig av hverandre. Den tegnes med `draw_quad()` funksjonen:
```c++
- Point vertex0 {180, 80};
- Point vertex1 {50, 120};
- Point vertex2 {120, 250};
- Point vertex3 {250, 180};
+ TDT4102::Point vertex0 {180, 80};
+ TDT4102::Point vertex1 {50, 120};
+ TDT4102::Point vertex2 {120, 250};
+ TDT4102::Point vertex3 {250, 180};
window.draw_quad(vertex0, vertex1, vertex2, vertex3);
```
-<img src="../../images/quad_1.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/quad_1.png" alt="Bilde som viser en lyseblå quad" style="max-width:450px; width:100%;"/>
Fargen kan justeres:
```c++
- Point vertex0 {180, 80};
- Point vertex1 {50, 120};
- Point vertex2 {120, 250};
- Point vertex3 {250, 180};
- Color fillColor = Color::violet;
+ TDT4102::Point vertex0 {180, 80};
+ TDT4102::Point vertex1 {50, 120};
+ TDT4102::Point vertex2 {120, 250};
+ TDT4102::Point vertex3 {250, 180};
+ TDT4102::Color fillColor = TDT4102::Color::violet;
window.draw_quad(vertex0, vertex1, vertex2, vertex3, fillColor);
```
-<img src="../../images/quad_2.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/quad_2.png" alt="Bilde som viser en rosa quad" style="max-width:450px; width:100%;"/>
### Linjer
Du kan tegne linjer ved å bruke `draw_line()` funksjonen. Linjer tegnes mellom to punkt:
```c++
- Point lineStart {50, 50};
- Point lineEnd {280, 290};
+ TDT4102::Point lineStart {50, 50};
+ TDT4102::Point lineEnd {280, 290};
window.draw_line(lineStart, lineEnd);
```
-<img src="../../images/line_1.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/line_1.png" alt="Bilde som viser en linje" style="max-width:450px; width:100%;"/>
I tillegg kan linjens farge endres:
```c++
- Point lineStart {50, 50};
- Point lineEnd {280, 290};
- Color lineColor = Color::firebrick;
+ TDT4102::Point lineStart {50, 50};
+ TDT4102::Point lineEnd {280, 290};
+ TDT4102::Color lineColor = TDT4102::Color::firebrick;
window.draw_line(lineStart, lineEnd, lineColor);
```
-<img src="../../images/line_2.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/line_2.png" alt="Bilde som viser en linje" style="max-width:450px; width:100%;"/>
### Arc
En bue er en sirkel som tegnes delvis, mellom et start og sluttvinkel relativ til sirklens midtpunkt:
-<img src="../../images/arc_angles.png" alt="Bilde som viser x og y-aksen i vinduet" style="max-width:600px; width:100%;"/>
+<img src="../../images/arc_angles.png" alt="Bilde som viser vinkler" style="max-width:600px; width:100%;"/>
Merk at sluttvinkelen må være større enn startvinkelen, og alle vinklene må være mellom 0 og 360 grader.
Høyden og bredden spesifiserer sirklens størrelse, og gjør det mulig å strekke sirklen:
-<img src="../../images/arc_scale.png" alt="Bilde som viser x og y-aksen i vinduet" style="max-width:400px; width:100%;"/>
+<img src="../../images/arc_scale.png" alt="Bilde som viser ellipser" style="max-width:400px; width:100%;"/>
Med disse parameterene til sammen kan du tegne en bue ved å bruke `draw_arc()` funksjonen:
```c++
- Point centerPoint {100, 50};
+ TDT4102::Point centerPoint {100, 50};
int width = 200;
int height = 370;
int startDegree = 270;
@@ -238,12 +234,12 @@ Med disse parameterene til sammen kan du tegne en bue ved å bruke `draw_arc()`
Lik som linjer er det mulig å endre fargen:
```c++
- Point centerPoint {100, 50};
+ TDT4102::Point centerPoint {100, 50};
int width = 200;
int height = 370;
int startDegree = 270;
int endDegree = 360;
- Color lineColor = Color::lime;
+ TDT4102::Color lineColor = TDT4102::Color::lime;
window.draw_arc(centerPoint, width, height, startDegree, endDegree, lineColor);
```
@@ -256,48 +252,48 @@ Lik som linjer er det mulig å endre fargen:
For å tegne tekst i vinduet brukes `draw_text()` funksjonen. Denne tar inn et sted på skjermen, og en tekst streng som skal vises som parametere:
```c++
- Point location {100, 100};
+ TDT4102::Point location {100, 100};
string message = "Greetings from outer space!";
window.draw_text(location, message);
```
-<img src="../../images/text_1.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/text_1.png" alt="Bilde som viser tekst" style="max-width:450px; width:100%;"/>
Du kan endre fargen på teksten:
```c++
- Point location {100, 100};
+ TDT4102::Point location {100, 100};
string message = "Greetings from outer space!";
- Color textColor = Color::deep_skyblue;
+ TDT4102::Color textColor = TDT4102::Color::deep_skyblue;
window.draw_text(location, message, textColor);
```
-<img src="../../images/text_2.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/text_2.png" alt="Bilde som viser blå tekst" style="max-width:450px; width:100%;"/>
Og størrelsen:
```c++
- Point location {100, 100};
+ TDT4102::Point location {100, 100};
string message = "Greetings from outer space!";
- Color textColor = Color::deep_skyblue;
+ TDT4102::Color textColor = TDT4102::Color::deep_skyblue;
int fontSize = 120;
window.draw_text(location, message, textColor, fontSize);
```
-<img src="../../images/text_3.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/text_3.png" alt="Bilde som viser stor blå tekst" style="max-width:450px; width:100%;"/>
Om du ønsker skrifttypen kan du bruke en Font verdi som siste parameter:
```c++
- Point location {100, 100};
- string message = "Greetings from outer space!";
- Color textColor = Color::deep_skyblue;
+ TDT4102::Point location {100, 100};
+ TDT4102::string message = "Greetings from outer space!";
+ Color textColor = TDT4102::Color::deep_skyblue;
int fontSize = 120;
- Font fontFace = Font::times_bold;
+ TDT4102::Font fontFace = TDT4102::Font::times_bold;
window.draw_text(location, message, textColor, fontSize, fontFace);
```
-<img src="../../images/text_4.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:450px; width:100%;"/>
+<img src="../../images/text_4.png" alt="Bilde som viser stor blå tekst med endret font" style="max-width:450px; width:100%;"/>
Her er et oversikt over de forskjellige skrifttyper som er tilgjengelig og hvordan de ser ut:
@@ -324,37 +320,35 @@ For å kunne tegne et bilde må den lastes inn fra en fil. Finn gjerne et bilde
<a title="Dietmar Rabich / Wikimedia Commons / “Dichroitisches Prisma -- 2020 -- 5123” / CC BY-SA 4.0" href="https://commons.wikimedia.org/wiki/File:Dichroitisches_Prisma_--_2020_--_5123.jpg"><img width="256" alt="Dichroitisches Prisma -- 2020 -- 5123" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Dichroitisches_Prisma_--_2020_--_5123.jpg/512px-Dichroitisches_Prisma_--_2020_--_5123.jpg"></a>
-Kopier bildet inn på prosjektet i samme mappen som inneholder «.vscode» og «builddir» mappene:
+Kopier bildet inn på prosjektet:
<img src="../../images/image_file_view.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:300px; width:100%;"/>
Slik laster du inn ditt bilde, og tegner den i vinduet:
```c++
- Point topLeftCorner {50, 100};
- Image image("img.jpg");
+ TDT4102::Point topLeftCorner {50, 100};
+ TDT4102::Image image("img.jpg");
window.draw_image(topLeftCorner, image);
```
-Om ditt bilde har et annet navn enn «img.jpg» må du endre navnet som er definert i koden slik at den er akkurat det samme som navnet på filen:
+Om bilde har et annet navn enn «img.jpg» må du endre navnet som er definert i koden slik at den er akkurat det samme som navnet på filen:
-<img src="../../images/image_file_equivalent.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code" style="max-width:600px; width:100%;"/>
+<img src="../../images/image_file_equivalent.png" alt="Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code med røde bokser" style="max-width:600px; width:100%;"/>
**Merk:** når du skal tegne et bilde i en animasjon bør du ikke laste inn bildet innenfor while løkken. Om du hadde flyttet `image` variablen inn på `while`-løkken, så hadde bildet blitt lastet inn på nytt hver eneste gang et bilde blir tegnet.
```c++
#include "AnimationWindow.h"
-#include "std_lib_facilities.h"
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
// VIKTIG: Image variabler bør ikke defineres innenfor while-løkken
- Image image("img.jpg");
+ TDT4102::Image image("img.jpg");
while(!window.should_close()) {
- Point topLeftCorner {50, 100};
+ TDT4102::Point topLeftCorner {50, 100};
window.draw_image(topLeftCorner, image);
window.next_frame();
}
@@ -363,21 +357,19 @@ int main()
}
```
-Noen bilder er for stor eller for liten å vise i sin orginale størrelse. Det er derfor mulig å spesifesere et alternativ størrelse når du skal tegne bildet. For eksempel, her brukes muspekeren til dette:
+Noen bilder er for store eller for små i sin orginale størrelse. Det er derfor mulig å spesifisere en annen størrelse når du skal tegne bildet. For eksempel, her brukes muspekeren til dette:
```c++
#include "AnimationWindow.h"
-#include "std_lib_facilities.h"
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
- Image image("img.jpg");
+ TDT4102::Image image("img.jpg");
while(!window.should_close()) {
- Point topLeftCorner {0, 0};
- Point mouse = window.get_mouse_coordinates();
+ TDT4102::Point topLeftCorner {0, 0};
+ TDT4102::Point mouse = window.get_mouse_coordinates();
int imageWidth = mouse.x;
int imageHeight = mouse.y;
window.draw_image(topLeftCorner, image, imageWidth, imageHeight);
diff --git a/docs/animationwindow/gui.md b/docs/animationwindow/gui.md
index 2f98467e8682b0e2e4d3f7c74f65e0635a0f0856..ea72405a57bab997abf2f789ec766b1aee9d8dfe 100644
--- a/docs/animationwindow/gui.md
+++ b/docs/animationwindow/gui.md
@@ -1,33 +1,29 @@
# Grafiske Brukergrensesnitt (GUI)
-Grafiske brukergrensesnitt
-
## Konstruksjon av grafiske grensesnitt
-Grafiske grensesnitt består av en rekke GUI elementer som kalles `widgets`. Dette kan være knapper, tekstfelt eller dropdown lister.
+Grafiske grensesnitt består av en rekke GUI elementer som kalles `widgets`. Dette kan være knapper, tekstfelt eller dropdown-lister.
-<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%;"/>
+<img src="../../images/gui.png" alt="Bilde som viser ulike widgets; knapper, tekstfelt og dropdown-liste" 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.
+Et «callback» er en funksjon som kalles etter at 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};
+int main() {
+ const TDT4102::Point buttonPosition {100, 100};
const unsigned int buttonWidth = 100;
const unsigned int buttonHeight = 40;
const string buttonLabel = "Click me!";
- Button button {buttonPosition, buttonWidth, buttonHeight, buttonLabel};
+ TDT4102::Button button {buttonPosition, buttonWidth, buttonHeight, buttonLabel};
- AnimationWindow window;
+ TDT4102::AnimationWindow window;
window.add(button);
window.wait_for_close();
@@ -38,7 +34,6 @@ int main()
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"
@@ -46,15 +41,14 @@ void callbackFunction() {
std::cout << "This is printed when this function is executed." << std::endl;
}
-int main()
-{
- const Point buttonPosition {100, 100};
+int main() {
+ const TDT4102::Point buttonPosition {100, 100};
const unsigned int buttonWidth = 100;
const unsigned int buttonHeight = 40;
const string buttonLabel = "Click me!";
- Button button {buttonPosition, buttonWidth, buttonHeight, buttonLabel};
+ TDT4102::Button button {buttonPosition, buttonWidth, buttonHeight, buttonLabel};
- AnimationWindow window;
+ TDT4102::AnimationWindow window;
window.add(button);
window.wait_for_close();
@@ -65,7 +59,6 @@ int main()
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"
@@ -73,15 +66,14 @@ void callbackFunction() {
std::cout << "This is printed when this function is executed." << std::endl;
}
-int main()
-{
- const Point buttonPosition {100, 100};
+int main() {
+ const TDT4102::Point buttonPosition {100, 100};
const unsigned int buttonWidth = 100;
const unsigned int buttonHeight = 40;
const string buttonLabel = "Click me!";
- Button button {buttonPosition, buttonWidth, buttonHeight, buttonLabel};
+ TDT4102::Button button {buttonPosition, buttonWidth, buttonHeight, buttonLabel};
- AnimationWindow window;
+ TDT4102::AnimationWindow window;
button.setCallback(callbackFunction);
window.add(button);
window.wait_for_close();
@@ -92,20 +84,20 @@ int main()
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%;"/>
+<img src="../../images/callback.png" alt="Bilde som viser tekst i terminalen fra callback-funksjonen" style="max-width:800px; width:100%;"/>
### Objekt-orienterte callback funksjoner
Dersom man ønsker å sette callback-funksjonen til en klassemetode må man bruke `std::bind` for å gjøre funksjonen kompatibel.
```c++
-class SuperManWindow : public AnimationWindow {
+class SuperManWindow : public TDT4102::AnimationWindow {
public:
SuperManWindow();
void superCallbackFunction();
void fly();
private:
- Button flyButton;
+ TDT4102::Button flyButton;
};
void SuperManWindow::superCallbackFunction() {
@@ -127,29 +119,24 @@ SuperManWindow::SuperManWindow()
## GUI Elementer
-Hvert GUI element som kan brukes i en AnimationWindow er definert i sin egen klasse. Det vil si at når du for eksempel ønsker å vise en knapp i vinduet, lager du en instans av `TDT4102::Button` klassen. I tillegg er det nødvendig å legge til knappen i vinduet ved å bruke medlemsfunksjonen:
+Hvert GUI element som kan brukes i `TDT4102::AnimationWindow` er definert i sin egen klasse som arver fra `TDT4102::Widget`. GUI elementer som støttes er `TDT4102::Button` , `TDT4102::TextInput` og `TDT4102::DropdownList`. Hvis du for eksempel ønsker å vise en knapp i vinduet, lager du en instans av `TDT4102::Button` klassen og legger den til i vinduet ved å bruke medlemsfunksjonen:
```c++
-void AnimationWindow::add(TDT4102::Widget &widgetToAdd);
+void TDT4102::AnimationWindow::add(TDT4102::Widget &widgetToAdd);
```
-Alle GUI elementer arver fra typen `Widget`. `Widget` har en funksjon for å gjemme eller vise GUI elementene:
+Hvis du ikke ønsker å vise knappen med en gang, kan du kalle på funksjonen `setVisible(bool isVisible)` med `false` på knapp-variabelen for å skjule elementet. Bruk `true` for å vise elementet.
-```c++
-void Widget::setVisible(bool isVisible);
-```
-Denne funksjonen blir kalt med `true` for å vise elementet og med `false` for å skjule elementet.
### Knapp
En knapp er et 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%;"/>
+<img src="../../images/button.png" alt="Bilde som viser en knapp" style="max-width:400px; width:100%;"/>
Her er et eksempel som vises hvordan den brukes:
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
#include "widgets/Button.h"
@@ -157,18 +144,17 @@ void buttonClicked() {
std::cout << "Someone clicked on me!" << std::endl;
}
-int main()
-{
- const Point buttonPosition {100, 100};
+int main() {
+ const TDT4102::Point buttonPosition {100, 100};
const unsigned int buttonWidth = 100;
const unsigned int buttonHeight = 40;
const string buttonLabel = "Click me!";
- Button button {buttonPosition, buttonWidth, buttonHeight, buttonLabel};
+ TDT4102::Button button {buttonPosition, buttonWidth, buttonHeight, buttonLabel};
- AnimationWindow window;
+ TDT4102::AnimationWindow window;
window.add(button);
button.setCallback(buttonClicked);
- button.setButtonColor(Color::silver);
+ button.setButtonColor(TDT4102::Color::silver);
window.wait_for_close();
return 0;
}
@@ -176,43 +162,45 @@ 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:
+Deretter lager vi en knapp ved å instansiere `TDT4102::Button` klassen, som har følgende konstruktør:
```c++
-Button(TDT4102::Point location, unsigned int width, unsigned int height, std::string label);
+TDT4102::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.
+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 for å sørge at knappen blir synlig i vinduet, og at det skjer noe når vi klikker på den.
Callback funksjonen blir kalt hver gang brukeren klikker på knappen.
Buttonklassen har diverse funksjoner for å endre på utseende.
```c++
void setLabel(std::string newLabel);
-void setLabelColor(Color newColor);
-void setButtonColor(Color newColor);
-void setButtonColorHover(Color newColor);
-void setButtonColorActive(Color newColor);
+void setLabelColor(TDT4102::Color newColor);
+void setButtonColor(TDT4102::Color newColor);
+void setButtonColorHover(TDT4102::Color newColor);
+void setButtonColorActive(TDT4102::Color newColor);
```
-Du kan endre tekst og tekstfarge med `setLabel` og `setLabelColor`. Du kan endre fargen for knappen med `setButtonColor`, fargen når du har musen over med `setButtonColorHover` og fargen på knappen når den er trykket ned med `setButtonColorActive`.
+Du kan endre tekst og tekstfarge med `setLabel` og `setLabelColor`. Du kan endre fargen for knappen med `setButtonColor`, fargen når du har musepekeren over med `setButtonColorHover` og fargen på knappen når den er trykket ned med `setButtonColorActive`.
-### Tekst felt
+### Tekstfelt
+
+Et tekstfelt er et GUI element hvor man kan skrive inn tekst. Det er også mulig å hente ut teksten som er i tekstfelet med funksjonen `TDT4102::TextInput::getText()`. For å skrive til et tekstfelt bruker vi funksjonen `TDT4102::TextInput::setText(std::string text)`.
+
+<img src="../../images/textinput1.png" alt="bilde som viser textinput" style="max-width:400px; width:100%;" />
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
#include "widgets/TextInput.h"
-TextInput textField {{100, 100}, 300, 30, "This text field is small!"};
+TDT4102::TextInput textField {{100, 100}, 300, 30, "This text field is small!"};
void textFieldChanged() {
std::cout << "The text field now contains: " << textField.getText() << std::endl;
}
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
window.add(textField);
textField.setCallback(textFieldChanged);
window.wait_for_close();
@@ -220,20 +208,22 @@ int main()
}
```
+Tekstfeltene kan også være over flere linjer:
+
+<img src="../../images/textinput2.png" alt="bilde som viser textinput over flere linjer" style="max-width:400px; width:100%;" />
+
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
#include "widgets/TextInput.h"
-TextInput textField {{100, 100}, 300, 150, "This text field\ncontains more than\none line of text!"};
+TDT4102::TextInput textField {{100, 100}, 300, 150, "This text field\ncontains more than\none line of text!"};
void textFieldChanged() {
std::cout << "The text field now contains: " << textField.getText() << std::endl;
}
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
window.add(textField);
textField.setCallback(textFieldChanged);
window.wait_for_close();
@@ -241,23 +231,26 @@ int main()
}
```
-### Dropdown list
+### DropdownList
+
+Dropdown-liste har en liste med elementer som man kan velge mellom. Det valgte elementet henter vi ut med funksjonen `TDT4102::DropdownList::getSelectedValue()`. For å endre på elementene i lista, kall på funksjonen `TDT4102::DropdownList::setOptions(std::vector<std::string> &updatedOptionsList)` med en vector som inneholder de nye elementene.
+
+<img src="../../images/dropdownlist.png" alt="bilde som viser dropdownliste" style="max-width:400px; width:100%;" />
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
#include "widgets/DropdownList.h"
std::vector<std::string> options {"Hello", "There", "General", "You", "Are", "A", "Bold", "One"};
-DropdownList list({100, 100}, 300, 30, options);
+TDT4102::DropdownList list({100, 100}, 300, 30, options);
void handle() {
- std::cout << "Selected: " << list.getValue() << std::endl;
+ std::cout << "Selected: " << list.getSelectedValue() << std::endl;
}
int main()
{
- AnimationWindow window;
+ TDT4102::AnimationWindow window;
window.add(list);
list.setCallback(handle);
window.wait_for_close();
diff --git a/docs/animationwindow/helpers.md b/docs/animationwindow/helpers.md
deleted file mode 100644
index 35ad6e3155413cae6c9f8b30a380fb87d194a9fc..0000000000000000000000000000000000000000
--- a/docs/animationwindow/helpers.md
+++ /dev/null
@@ -1,215 +0,0 @@
-## Egendefinerte farger
-
-Klikk her å velge farge:
-
-<script>
- window.addEventListener("load", startup, false);
-
- const hex2rgb = (hex) => {
- const r = parseInt(hex.slice(1, 3), 16);
- const g = parseInt(hex.slice(3, 5), 16);
- const b = parseInt(hex.slice(5, 7), 16);
-
- return { r, g, b };
- }
-
- function colourSelectionChanged(event) {
- const rgbValues = hex2rgb(event.target.value);
-
- // Update text values
- document.getElementById('red0').innerHTML = rgbValues['r'];
- document.getElementById('red1').innerHTML = rgbValues['r'];
- document.getElementById('red2').innerHTML = rgbValues['r'];
- document.getElementById('green0').innerHTML = rgbValues['g'];
- document.getElementById('green1').innerHTML = rgbValues['g'];
- document.getElementById('green2').innerHTML = rgbValues['g'];
- document.getElementById('blue0').innerHTML = rgbValues['b'];
- document.getElementById('blue1').innerHTML = rgbValues['b'];
- document.getElementById('blue2').innerHTML = rgbValues['b'];
-
- // Make answer region visible
- document.getElementById('resultOutput').style.display = "block";
- }
-
- function startup() {
- colorPicker = document.getElementById("colorPicker");
- colorPicker.addEventListener("change", colourSelectionChanged, false);
- colorPicker.setValue("#399AD5");
- }
-</script>
-
-<input type="color" id="colorPicker" value="#ff0000" style="width:10em;">
-
-<div id="resultOutput" style="display: none;">
-
-Du kan enten lagre fargen i en egen variabel:
- <div class="highlight"><pre id="__code_1"><span></span><button class="md-clipboard md-icon" title="Copy to clipboard" data-clipboard-target="#__code_1 > code"></button><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="n">TDT4102</span><span class="o">::</span><span class="n">Color</span><span class="w"> </span><span class="nf">chosenColor</span><span class="p">(</span><span class="mi" id="red0">100</span><span class="p">,</span><span class="w"> </span><span class="mi" id="green0">100</span><span class="p">,</span><span class="w"> </span><span class="mi" id="blue0">100</span><span class="p">);</span><span class="w"></span></code></pre></div>
-
-Eller bruke verdien direkte, for eksempel som verdi av en funksjonsparameter:
- <div class="highlight"><pre id="__code_1"><span></span><button class="md-clipboard md-icon" title="Copy to clipboard" data-clipboard-target="#__code_1 > code"></button><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="n">TDT4102</span><span class="o">::</span><span class="n">Color</span><span class="p">(</span><span class="mi" id="red1">100</span><span class="p">,</span><span class="w"> </span><span class="mi" id="green1">100</span><span class="p">,</span><span class="w"> </span><span class="mi" id="blue1">100</span><span class="p">)</span><span class="w"></span></code></pre></div>
-
-Farger kan representeres på forskjellige måter. Den mest vanlige formen er RGB verdier (Rødt, Grønt, og Blått), og blandes i forskjellige mengder for å forme ønskede fargen. Disse pleier å være verdier mellom 0 og 255 for hver farge-kanal, og det er de som brukes i de Color verdiene overfor. Prøv å velge hvit og deretter svart, og se hva som skjer med de RGB-verdiene!
-
-<div class="highlight"><pre id="__code_3"><span></span><button class="md-clipboard md-icon" title="Copy to clipboard" data-clipboard-target="#__code_3 > code"></button><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="kt">unsigned</span><span class="w"> </span><span class="kt">char</span><span class="w"> </span><span class="n">redChannel</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mi" id="red2">0</span><span class="p">;</span><span class="w"></span>
-<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="kt">unsigned</span><span class="w"> </span><span class="kt">char</span><span class="w"> </span><span class="n">greenChannel</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mi" id="green2">0</span><span class="p">;</span><span class="w"></span>
-<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="kt">unsigned</span><span class="w"> </span><span class="kt">char</span><span class="w"> </span><span class="n">blueChannel</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mi" id="blue2">0</span><span class="p">;</span><span class="w"></span>
-<a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="n">TDT4102</span><span class="o">::</span><span class="n">Color</span><span class="w"> </span><span class="nf">chosenColor</span><span class="p">(</span><span class="n">redChannel</span><span class="p">,</span><span class="w"> </span><span class="n">greenChannel</span><span class="p">,</span><span class="w"> </span><span class="n">blueChannel</span><span class="p">);</span><span class="w"></span>
-</code></pre></div>
-</div>
-
-## Forhåndsdefinerte farger
-
-Det er vanligvis langt lettere å bruke en forhåndsdefinert farge i stedet for å måtte lete etter RGB verdier (bleh) eller lignende. Derfor har vi forhåndsdefinert en rekke farger for dere. De fargeverdiene du kan velge fra er vist i tabellen under.
-
-<table>
-<tr><td style="font-weight: bold;">Color verdi</td><td style="font-weight: bold;">Farge</td></tr>
-<tr><td>Color::transparent</td><td style="background-color: rgba(0, 0, 0, 1);">(transparant)</td></tr>
-<tr><td>Color::black</td><td style="background-color:#000000;"></td></tr>
-<tr><td>Color::silver</td><td style="background-color:#c0c0c0;"></td></tr>
-<tr><td>Color::gray</td><td style="background-color:#808080;"></td></tr>
-<tr><td>Color::white</td><td style="background-color:#ffffff;"></td></tr>
-<tr><td>Color::maroon</td><td style="background-color:#800000;"></td></tr>
-<tr><td>Color::red</td><td style="background-color:#ff0000;"></td></tr>
-<tr><td>Color::purple</td><td style="background-color:#800080;"></td></tr>
-<tr><td>Color::magenta</td><td style="background-color:#ff00ff;"></td></tr>
-<tr><td>Color::green</td><td style="background-color:#008000;"></td></tr>
-<tr><td>Color::lime</td><td style="background-color:#00ff00;"></td></tr>
-<tr><td>Color::olive</td><td style="background-color:#808000;"></td></tr>
-<tr><td>Color::yellow</td><td style="background-color:#ffff00;"></td></tr>
-<tr><td>Color::navy</td><td style="background-color:#000080;"></td></tr>
-<tr><td>Color::blue</td><td style="background-color:#0000ff;"></td></tr>
-<tr><td>Color::teal</td><td style="background-color:#008080;"></td></tr>
-<tr><td>Color::aqua</td><td style="background-color:#00ffff;"></td></tr>
-<tr><td>Color::orange</td><td style="background-color:#ffa500;"></td></tr>
-<tr><td>Color::alice_blue</td><td style="background-color:#f0f8ff;"></td></tr>
-<tr><td>Color::antique_white</td><td style="background-color:#faebd7;"></td></tr>
-<tr><td>Color::aquamarine</td><td style="background-color:#7fffd4;"></td></tr>
-<tr><td>Color::azure</td><td style="background-color:#f0ffff;"></td></tr>
-<tr><td>Color::beige</td><td style="background-color:#f5f5dc;"></td></tr>
-<tr><td>Color::bisque</td><td style="background-color:#ffe4c4;"></td></tr>
-<tr><td>Color::blanched_almond</td><td style="background-color:#ffebcd;"></td></tr>
-<tr><td>Color::blue_violet</td><td style="background-color:#8a2be2;"></td></tr>
-<tr><td>Color::brown</td><td style="background-color:#a52a2a;"></td></tr>
-<tr><td>Color::burly_wood</td><td style="background-color:#deb887;"></td></tr>
-<tr><td>Color::cadet_blue</td><td style="background-color:#5f9ea0;"></td></tr>
-<tr><td>Color::chart_reuse</td><td style="background-color:#7fff00;"></td></tr>
-<tr><td>Color::chocolate</td><td style="background-color:#d2691e;"></td></tr>
-<tr><td>Color::coral</td><td style="background-color:#ff7f50;"></td></tr>
-<tr><td>Color::cornflower_blue</td><td style="background-color:#6495ed;"></td></tr>
-<tr><td>Color::corn_silk</td><td style="background-color:#fff8dc;"></td></tr>
-<tr><td>Color::crimson</td><td style="background-color:#dc143c;"></td></tr>
-<tr><td>Color::cyan</td><td style="background-color:#00ffff;"></td></tr>
-<tr><td>Color::dark_blue</td><td style="background-color:#00008b;"></td></tr>
-<tr><td>Color::dark_cyan</td><td style="background-color:#008b8b;"></td></tr>
-<tr><td>Color::dark_goldenrod</td><td style="background-color:#b8860b;"></td></tr>
-<tr><td>Color::dark_gray</td><td style="background-color:#a9a9a9;"></td></tr>
-<tr><td>Color::dark_green</td><td style="background-color:#006400;"></td></tr>
-<tr><td>Color::dark_grey</td><td style="background-color:#a9a9a9;"></td></tr>
-<tr><td>Color::dark_khaki</td><td style="background-color:#bdb76b;"></td></tr>
-<tr><td>Color::dark_magenta</td><td style="background-color:#8b008b;"></td></tr>
-<tr><td>Color::dark_olivegreen</td><td style="background-color:#556b2f;"></td></tr>
-<tr><td>Color::dark_orange</td><td style="background-color:#ff8c00;"></td></tr>
-<tr><td>Color::dark_orchid</td><td style="background-color:#9932cc;"></td></tr>
-<tr><td>Color::dark_red</td><td style="background-color:#8b0000;"></td></tr>
-<tr><td>Color::dark_salmon</td><td style="background-color:#e9967a;"></td></tr>
-<tr><td>Color::dark_seagreen</td><td style="background-color:#8fbc8f;"></td></tr>
-<tr><td>Color::dark_slateblue</td><td style="background-color:#483d8b;"></td></tr>
-<tr><td>Color::dark_slategray</td><td style="background-color:#2f4f4f;"></td></tr>
-<tr><td>Color::dark_slategrey</td><td style="background-color:#2f4f4f;"></td></tr>
-<tr><td>Color::dark_turquoise</td><td style="background-color:#00ced1;"></td></tr>
-<tr><td>Color::dark_violet</td><td style="background-color:#9400d3;"></td></tr>
-<tr><td>Color::deep_pink</td><td style="background-color:#ff1493;"></td></tr>
-<tr><td>Color::deep_skyblue</td><td style="background-color:#00bfff;"></td></tr>
-<tr><td>Color::dim_gray</td><td style="background-color:#696969;"></td></tr>
-<tr><td>Color::dim_grey</td><td style="background-color:#696969;"></td></tr>
-<tr><td>Color::dodger_blue</td><td style="background-color:#1e90ff;"></td></tr>
-<tr><td>Color::firebrick</td><td style="background-color:#b22222;"></td></tr>
-<tr><td>Color::floral_white</td><td style="background-color:#fffaf0;"></td></tr>
-<tr><td>Color::forest_green</td><td style="background-color:#228b22;"></td></tr>
-<tr><td>Color::gainsboro</td><td style="background-color:#dcdcdc;"></td></tr>
-<tr><td>Color::ghost_white</td><td style="background-color:#f8f8ff;"></td></tr>
-<tr><td>Color::gold</td><td style="background-color:#ffd700;"></td></tr>
-<tr><td>Color::goldenrod</td><td style="background-color:#daa520;"></td></tr>
-<tr><td>Color::green_yellow</td><td style="background-color:#adff2f;"></td></tr>
-<tr><td>Color::grey</td><td style="background-color:#808080;"></td></tr>
-<tr><td>Color::honeydew</td><td style="background-color:#f0fff0;"></td></tr>
-<tr><td>Color::hot_pink</td><td style="background-color:#ff69b4;"></td></tr>
-<tr><td>Color::indian_red</td><td style="background-color:#cd5c5c;"></td></tr>
-<tr><td>Color::indigo</td><td style="background-color:#4b0082;"></td></tr>
-<tr><td>Color::ivory</td><td style="background-color:#fffff0;"></td></tr>
-<tr><td>Color::khaki</td><td style="background-color:#f0e68c;"></td></tr>
-<tr><td>Color::lavender</td><td style="background-color:#e6e6fa;"></td></tr>
-<tr><td>Color::lavender_blush</td><td style="background-color:#fff0f5;"></td></tr>
-<tr><td>Color::lawn_green</td><td style="background-color:#7cfc00;"></td></tr>
-<tr><td>Color::lemon_chiffon</td><td style="background-color:#fffacd;"></td></tr>
-<tr><td>Color::light_blue</td><td style="background-color:#add8e6;"></td></tr>
-<tr><td>Color::light_coral</td><td style="background-color:#f08080;"></td></tr>
-<tr><td>Color::light_cyan</td><td style="background-color:#e0ffff;"></td></tr>
-<tr><td>Color::light_goldenrodyellow</td><td style="background-color:#fafad2;"></td></tr>
-<tr><td>Color::light_gray</td><td style="background-color:#d3d3d3;"></td></tr>
-<tr><td>Color::light_green</td><td style="background-color:#90ee90;"></td></tr>
-<tr><td>Color::light_grey</td><td style="background-color:#d3d3d3;"></td></tr>
-<tr><td>Color::light_pink</td><td style="background-color:#ffb6c1;"></td></tr>
-<tr><td>Color::light_salmon</td><td style="background-color:#ffa07a;"></td></tr>
-<tr><td>Color::light_sea_green</td><td style="background-color:#20b2aa;"></td></tr>
-<tr><td>Color::light_sky_blue</td><td style="background-color:#87cefa;"></td></tr>
-<tr><td>Color::light_slate_gray</td><td style="background-color:#778899;"></td></tr>
-<tr><td>Color::light_slate_grey</td><td style="background-color:#778899;"></td></tr>
-<tr><td>Color::light_steel_blue</td><td style="background-color:#b0c4de;"></td></tr>
-<tr><td>Color::light_yellow</td><td style="background-color:#ffffe0;"></td></tr>
-<tr><td>Color::lime_green</td><td style="background-color:#32cd32;"></td></tr>
-<tr><td>Color::linen</td><td style="background-color:#faf0e6;"></td></tr>
-<tr><td>Color::medium_aquamarine</td><td style="background-color:#66cdaa;"></td></tr>
-<tr><td>Color::medium_blue</td><td style="background-color:#0000cd;"></td></tr>
-<tr><td>Color::medium_orchid</td><td style="background-color:#ba55d3;"></td></tr>
-<tr><td>Color::medium_purple</td><td style="background-color:#9370db;"></td></tr>
-<tr><td>Color::medium_sea_green</td><td style="background-color:#3cb371;"></td></tr>
-<tr><td>Color::medium_slate_blue</td><td style="background-color:#7b68ee;"></td></tr>
-<tr><td>Color::medium_spring_green</td><td style="background-color:#00fa9a;"></td></tr>
-<tr><td>Color::medium_turquoise</td><td style="background-color:#48d1cc;"></td></tr>
-<tr><td>Color::medium_violet_red</td><td style="background-color:#c71585;"></td></tr>
-<tr><td>Color::midnight_blue</td><td style="background-color:#191970;"></td></tr>
-<tr><td>Color::mint_cream</td><td style="background-color:#f5fffa;"></td></tr>
-<tr><td>Color::misty_rose</td><td style="background-color:#ffe4e1;"></td></tr>
-<tr><td>Color::moccasin</td><td style="background-color:#ffe4b5;"></td></tr>
-<tr><td>Color::navajo_white</td><td style="background-color:#ffdead;"></td></tr>
-<tr><td>Color::old_lace</td><td style="background-color:#fdf5e6;"></td></tr>
-<tr><td>Color::olivedrab</td><td style="background-color:#6b8e23;"></td></tr>
-<tr><td>Color::orange_red</td><td style="background-color:#ff4500;"></td></tr>
-<tr><td>Color::orchid</td><td style="background-color:#da70d6;"></td></tr>
-<tr><td>Color::pale_goldenrod</td><td style="background-color:#eee8aa;"></td></tr>
-<tr><td>Color::pale_green</td><td style="background-color:#98fb98;"></td></tr>
-<tr><td>Color::pale_turquoise</td><td style="background-color:#afeeee;"></td></tr>
-<tr><td>Color::pale_violet_red</td><td style="background-color:#db7093;"></td></tr>
-<tr><td>Color::papayawhip</td><td style="background-color:#ffefd5;"></td></tr>
-<tr><td>Color::peachpuff</td><td style="background-color:#ffdab9;"></td></tr>
-<tr><td>Color::peru</td><td style="background-color:#cd853f;"></td></tr>
-<tr><td>Color::pink</td><td style="background-color:#ffc0cb;"></td></tr>
-<tr><td>Color::plum</td><td style="background-color:#dda0dd;"></td></tr>
-<tr><td>Color::powder_blue</td><td style="background-color:#b0e0e6;"></td></tr>
-<tr><td>Color::rosy_brown</td><td style="background-color:#bc8f8f;"></td></tr>
-<tr><td>Color::royal_blue</td><td style="background-color:#4169e1;"></td></tr>
-<tr><td>Color::saddle_brown</td><td style="background-color:#8b4513;"></td></tr>
-<tr><td>Color::salmon</td><td style="background-color:#fa8072;"></td></tr>
-<tr><td>Color::sandy_brown</td><td style="background-color:#f4a460;"></td></tr>
-<tr><td>Color::sea_green</td><td style="background-color:#2e8b57;"></td></tr>
-<tr><td>Color::sea_shell</td><td style="background-color:#fff5ee;"></td></tr>
-<tr><td>Color::sienna</td><td style="background-color:#a0522d;"></td></tr>
-<tr><td>Color::sky_blue</td><td style="background-color:#87ceeb;"></td></tr>
-<tr><td>Color::slate_blue</td><td style="background-color:#6a5acd;"></td></tr>
-<tr><td>Color::slate_gray</td><td style="background-color:#708090;"></td></tr>
-<tr><td>Color::slate_grey</td><td style="background-color:#708090;"></td></tr>
-<tr><td>Color::snow</td><td style="background-color:#fffafa;"></td></tr>
-<tr><td>Color::spring_green</td><td style="background-color:#00ff7f;"></td></tr>
-<tr><td>Color::steel_blue</td><td style="background-color:#4682b4;"></td></tr>
-<tr><td>Color::tan</td><td style="background-color:#d2b48c;"></td></tr>
-<tr><td>Color::thistle</td><td style="background-color:#d8bfd8;"></td></tr>
-<tr><td>Color::fuchsia</td><td style="background-color:#ff00ff;"></td></tr>
-<tr><td>Color::tomato</td><td style="background-color:#ff6347;"></td></tr>
-<tr><td>Color::turquoise</td><td style="background-color:#40e0d0;"></td></tr>
-<tr><td>Color::violet</td><td style="background-color:#ee82ee;"></td></tr>
-<tr><td>Color::wheat</td><td style="background-color:#f5deb3;"></td></tr>
-<tr><td>Color::white_smoke</td><td style="background-color:#f5f5f5;"></td></tr>
-<tr><td>Color::yellow_green</td><td style="background-color:#9acd32;"></td></tr>
-<tr><td>Color::rebecca_purple</td><td style="background-color:#663399;"></td></tr>
-</table>
diff --git a/docs/animationwindow/input.md b/docs/animationwindow/input.md
index de95f477eb7e933d98d1847bfbc4f277ad738732..99831a4de63f333fe5db64bdd833996446064f0e 100644
--- a/docs/animationwindow/input.md
+++ b/docs/animationwindow/input.md
@@ -7,23 +7,21 @@
For å finne ut hvor i vinduet musen befinner seg brukes det `get_mouse_coordinates()` funksjonen:
```c++
-TDT4102::Point AnimationWindow::get_mouse_coordinates();
+TDT4102::Point TDT4102::AnimationWindow::get_mouse_coordinates();
```
-Merk at `AnimationWindow::` betyr at funksjonen er et medlemsfunksjon av `AnimationWindow` klassen. Funksjonen returnerer en instans av `Point` som representerer koordinatene hvor musen peker til relativ til øverst venstre hjørnet av vinduet (akkurat det samme koordinatsystem som brukes til tegning). Her er et eksempel som visualiserer koordinatene musene peker på:
+Merk at `AnimationWindow::` betyr at funksjonen er et medlemsfunksjon av `TDT4102::AnimationWindow` klassen. Funksjonen returnerer en instans av `TDT4102::Point` som representerer koordinatene hvor musen peker til relativ til øverst venstre hjørnet av vinduet (akkurat det samme koordinatsystem som brukes til tegning). Her er et eksempel som visualiserer koordinatene musene peker på:
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
while(!window.should_close()) {
- Point mouseCoordinates = window.get_mouse_coordinates();
+ TDT4102::Point mouseCoordinates = window.get_mouse_coordinates();
- string coordinateText = to_string(mouseCoordinates.x) + ", " + to_string(mouseCoordinates.y);
+ std::string coordinateText = std::to_string(mouseCoordinates.x) + ", " + std::to_string(mouseCoordinates.y);
window.draw_text(mouseCoordinates, coordinateText);
window.next_frame();
@@ -36,8 +34,8 @@ int main()
Du kan sjekke om høyre eller venstre musetast er trykket ned med:
```c++
-bool AnimationWindow::is_left_mouse_button_down() const;
-bool AnimationWindow::is_right_mouse_button_down() const;
+bool TDT4102::AnimationWindow::is_left_mouse_button_down() const;
+bool TDT4102::AnimationWindow::is_right_mouse_button_down() const;
```
@@ -48,18 +46,16 @@ Funksjonen returnerer `true` dersom musetasten er nede.
For å benytte deg av tastaturet kan du bruke `is_key_down()` funksjonen:
```c++
-bool AnimationWindow::is_key_down(KeyboardKey key);
+bool TDT4102::AnimationWindow::is_key_down(KeyboardKey key) const;
```
`is_key_down()` funksjonen tar inn en tast på tastaturet som parameter, og returnerer `true` når tasten holdes ned, og ellers `false`. Tasten defineres som et verdi av `KeyboardKey`. For eksempel, her brukes R tasten å endre fargen på et rektangel:
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
while(!window.should_close()) {
bool rKeyIsPressed = window.is_key_down(KeyboardKey::R);
@@ -84,6 +80,8 @@ Det finnes mange forskjellige taster som kan brukes i programmet. Her er et over
<table>
<tr><td style="font-weight: bold;">Tast</td><td style="font-weight: bold;">KeyboardKey verdi</td></tr>
<tr><td>Bokstavtaster</td><td><code>KeyboardKey::A</code> til <code>KeyboardKey::Z</code></td></tr>
+<tr><td>Norske bokstavtaster</td><td><code>KeyboardKey::AA</code><br>
+<code>KeyBoardKey::AE</code><br><code>KeyboardKey::OO</code></td></tr>
<tr><td>Talltaster</td><td><code>KeyboardKey::KEY_0</code> til <code>KeyboardKey::KEY_9</code></td></tr>
<tr><td>Numpad: talltaster</td><td><code>KeyboardKey::NUMPAD_0</code> til <code>KeyboardKey::NUMPAD_9</code></td></tr>
<tr><td>Numpad: spesialtaster</td><td><code>KeyboardKey::NUMPAD_COMMA</code><br>
diff --git a/docs/animationwindow/index.md b/docs/animationwindow/window.md
similarity index 65%
rename from docs/animationwindow/index.md
rename to docs/animationwindow/window.md
index e676e80b5c9e9a4c3e7cbbba61e0f6ff032d3e74..f0a54e00911735b846dfefeeff8791c3fc0a7925 100644
--- a/docs/animationwindow/index.md
+++ b/docs/animationwindow/window.md
@@ -1,27 +1,24 @@
# AnimationWindow
-AnimationWindow er grafikkbiblioteket vi bruker i faget, både i øvingene og på eksamen. Den brukes å tegne enkle former som sirkler og linjer, og å lage enkle grafiske brukergrensesnitt (GUI).
+AnimationWindow er grafikkbiblioteket vi bruker i faget, både i øvingene og på eksamen. Det brukes til å tegne enkle former som sirkler og linjer, og å lage enkle grafiske brukergrensesnitt (GUI).
## Opprett et nytt vindu
-For å kunne åpne et AnimationWindow vindu er det nødvendig å inkludere et par filer. Det gjør du ved å lime inn disse linjene helt øverst i .cpp filen der du ønsker å bruke AnimationWindow:
+For å kunne åpne et AnimationWindow vindu er det nødvendig å inkludere header-filen `AnimationWindow.h` øverst i .cpp filen der du ønsker å bruke AnimationWindow:
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
```
-Ved å inkludere disse såkalte «header» filene forteller du C++ hva et AnimationWindow er, og lar deg bruke det i programmet ditt. Vi kommer til å forklare nærmere hvordan header filer fungerer i forelesningene.
+Ved å inkludere denne såkalte «header» filen forteller du C++ hva et AnimationWindow er, og lar deg bruke det i programmet ditt. Vi kommer til å forklare nærmere hvordan header filer fungerer i forelesningene.
Her er et eksempelprogram som åpner et vindu:
```c++
-#include "std_lib_facilities.h"
#include "AnimationWindow.h"
-int main()
-{
- AnimationWindow window;
+int main() {
+ TDT4102::AnimationWindow window;
window.wait_for_close();
return 0;
}
@@ -32,15 +29,15 @@ int main()
I dette programmet er det to linjer som er relevant:
```c++
- AnimationWindow window;
+ TDT4102::AnimationWindow window;
window.wait_for_close();
```
-Den første linjen oppretter vinduet ved å deklarere en variabel med datatype «AnimationWindow». For å forstå meningen med den andre linjen, prøv å fjerne den og kjøre programmet. Noen gang så skjer det ingenting, mens andre ganger vises et vindu i en kort periode. Dette skjer fordi programmet fortsetter å kjøre etter vi oppretter `window` variabelen, og siden den har nå kommet til slutten av `main()` funksjonen, avsluttes programmet som lukker vinduet automatisk. Vi må derfor sørge for at programmet venter fram til brukeren lukker vinduet, som vi kan gjøre ved å bruke `wait_for_close()` funksjonen.
+Den første linjen oppretter vinduet ved å deklarere en variabel med datatype «TDT4102::AnimationWindow». For å forstå meningen med den andre linjen, prøv å fjerne den og kjøre programmet. Noen gang så skjer det ingenting, mens andre ganger vises et vindu i en kort periode. Dette skjer fordi programmet fortsetter å kjøre etter vi oppretter `window` variabelen, og siden den har nå kommet til slutten av `main()` funksjonen, avsluttes programmet som lukker vinduet automatisk. Vi må derfor sørge for at programmet venter fram til brukeren lukker vinduet, som vi kan gjøre ved å bruke `wait_for_close()` funksjonen.
## Lukke et vindu
-Du kan lukke vinduet ved å kalle medlemsfunksjonen `close()`. Dette kan for eksempel brukes i en callback funksjon til en quit knapp.
+Du kan lukke vinduet ved å kalle medlemsfunksjonen `close()`. Dette kan for eksempel brukes i en callback funksjon til en quit-knapp.
## Endre vinduets standardverdier
@@ -52,10 +49,8 @@ Plassering på skjermen oppgis som x og y koordinat i piksler, målt fra vinduet
```c++
#include "AnimationWindow.h"
-#include "std_lib_facilities.h"
-int main()
-{
+int main() {
int windowPositionX = 300;
int windowPositionY = 100;
AnimationWindow window(windowPositionX, windowPositionY);
@@ -75,10 +70,8 @@ Vinduets størrelse defineres som bredde og høyde:
```c++
#include "AnimationWindow.h"
-#include "std_lib_facilities.h"
-int main()
-{
+int main() {
int windowPositionX = 300;
int windowPositionY = 100;
int windowWidth = 500;
@@ -102,15 +95,13 @@ Hvis du har både definert vinduets posisjon og størrelsen har du mulighet å e
```c++
#include "AnimationWindow.h"
-#include "std_lib_facilities.h"
-int main()
-{
+int main() {
int windowPositionX = 300;
int windowPositionY = 100;
int windowWidth = 500;
int windowHeight = 100;
- string windowTitle = "Alternate window title";
+ std::string windowTitle = "Alternate window title";
AnimationWindow window(windowPositionX, windowPositionY, windowWidth, windowHeight, windowTitle);
window.wait_for_close();
diff --git a/docs/images/dropdownlist.png b/docs/images/dropdownlist.png
new file mode 100644
index 0000000000000000000000000000000000000000..bfd84382cdbe0332c9a463ffab36761ea9b17ac8
Binary files /dev/null and b/docs/images/dropdownlist.png differ
diff --git a/docs/images/textinput1.png b/docs/images/textinput1.png
new file mode 100644
index 0000000000000000000000000000000000000000..303c98c3884d75177f2faa785b6a7e22c00c091a
Binary files /dev/null and b/docs/images/textinput1.png differ
diff --git a/docs/images/textinput2.png b/docs/images/textinput2.png
new file mode 100644
index 0000000000000000000000000000000000000000..e62be7076183fc4b6e658d70db6fdea309eecc8b
Binary files /dev/null and b/docs/images/textinput2.png differ
diff --git a/docs/installing/linux.md b/docs/installing/linux.md
index 5f536be305875e0a062700cff9484395fb769cb6..27d9edc6fca42071d900ca19c872fca87187c013 100644
--- a/docs/installing/linux.md
+++ b/docs/installing/linux.md
@@ -16,8 +16,6 @@ Hvis man har snap installert kan man istedenfor laste ned Visual Studio Code med
## Hurtiginstallasjon
-NB! Kun Debian, Ubuntu og derivater er støttet av hurtiginstallasjonsverktøyet
-
1. Trykk på ++ctrl+shift+p++ for å åpne kommandopalletten.
2. Skriv inn til du får opp kommandoen: `TDT4102: Install required tools`
3. ++enter++ for å kjøre kommandoen
diff --git a/docs/troubleshooting/macos.md b/docs/troubleshooting/macos.md
index 4dd30c69de93409f87a87a53e04825ee229e3aac..3b9247532e5e2835f22e0f59dd3e6e27e888673e 100644
--- a/docs/troubleshooting/macos.md
+++ b/docs/troubleshooting/macos.md
@@ -3,17 +3,13 @@
Det kan skje noe galt under installering eller under kjøring av et prosjekt. Under er det listet et par ting det kan være lurt å sjekke hvis det dukker opp feilmeldinger på MacOS. Et generelt tips er å kjøre `TDT4102: Force refresh of the course content` og `TDT4102: Perform health check of the setup` fra kommandopaletten for en kjapp sjekk av oppsettet. Hvis dette ikke løser problemet, og noe fortsatt er galt, gå gjennom punktene under.
-### Tillatelser
-
-Åpne Innstillinger og gå inn i Generelt > Personvern og sikkerhet > Utviklerverktøy. Både VS Code og Terminal trenger tillatelse til å kjøre programvare, hvis en eller begge mangler så legg de til med `+` nede i venstre hjørne.
-
### Filsti og mappe
Pass på at mappen/prosjektet du jobber i ikke er syncet med en skytjeneste som ICloud, OneDrive, DropBox, Google Drive etc. Sjekk også at filstien ikke inneholder æøå og spesielle symboler som mellomrom, $, % o.l. Bindestrek og understrek går fint.
### Homebrew og XCode
-Åpne Terminal og kjør `brew doctor`. Dersom noe feil, start fra toppen og kjør kommandoene som Homebrew foreslår. Hvis Homebrew klager på versjonen av Mac'en, oppdater den. Hvis Homebrew klager på versjonen av `XCode` eller `Command Line Tools`, kjør `xcode-select -p` og lim inn filstien etter `sudo rm -rf `. Dette avinstallerer XCode og dette må installeres på nytt. Dette kan gjøres med `TDT4102: Install required tools` fra kommandopaletten i VS Code.
+Åpne Terminal og kjør `brew doctor`. Dersom noe er feil, start fra toppen og kjør kommandoene som Homebrew foreslår. Hvis Homebrew klager på versjonen av Mac'en, oppdater den. Hvis Homebrew klager på versjonen av `XCode` eller `Command Line Tools`, kjør `xcode-select -p` og lim inn filstien etter `sudo rm -rf `. Dette avinstallerer XCode og dette må installeres på nytt. Dette kan gjøres med `TDT4102: Install required tools` fra kommandopaletten i VS Code.
### Kjøring av program
diff --git a/docs/troubleshooting/windows.md b/docs/troubleshooting/windows.md
index 81802164e74976482eb153113424f551331bd9ed..e5626ec21a585055af097ef5132dc7d807d67d4a 100644
--- a/docs/troubleshooting/windows.md
+++ b/docs/troubleshooting/windows.md
@@ -4,7 +4,7 @@ Det kan skje noe galt under installering eller under kjøring av et prosjekt. Un
### Meson og MinGW
-Meson skal ligge under `C:\Program Files` og MinGW skal ligge under `C:\`. Hvis noen av mappene mangler, kjør `TDT4102: Install required tools`.
+Meson skal ligge under `C:\Program Files` og TDT4102-mingw64 skal ligge under `C:\`. Hvis noen av mappene mangler, kjør `TDT4102: Install required tools`.
### Systemmiljøvariabler og PATH
@@ -15,9 +15,6 @@ Både Meson og MinGW må ligge på PATH og systemmiljøvariablene må være rikt
Pass på at mappen/prosjektet du jobber i ikke er syncet med en skytjeneste som OneDrive, DropBox, Google Drive etc. Sjekk også at filstien ikke inneholder æøå og spesielle symboler som mellomrom, $, % o.l. Bindestrek og understrek går fint.
-### Mappen `resources` er korrekt pakket ut
-Åpne Kjør-menyen med Windows+r og skriv inn "%appdata%\Code\User\globalStorage\tdt4102ntnu.tdt4102-tools". Der skal det ligge en mappe som heter `resources`, hvis den heter noe mer enn bare `resources` så slett mappen og kjør `TDT1402: Force refresh of course content`.
-
### Piazza
Hvis ingen av punktene hjalp, sjekk om noen har spurt om noe lignende på Piazza eller lag et eget innlegg.
\ No newline at end of file
diff --git a/docs/uninstalling/windows.md b/docs/uninstalling/windows.md
index 1043c530a2bfc64a7c3a21114ec58d5dde880a8c..8f54761a27ef88f521ae88488cbdc2d9044fa218 100644
--- a/docs/uninstalling/windows.md
+++ b/docs/uninstalling/windows.md
@@ -1,17 +1,11 @@
# Avinstallering
-Noen ganger kan det være gunstig å ha en fresh install. Dessverre stiller ikke alle programmer med kompetente uninstallerere. Dette gjør dette dokumentet et forsøk på å fikse.
-
Data fra extensions ligger under mappen `AppData`, denne er skjult by default.
1. `%appdata%/Code/User/globalStorage/tdt4102ntnu.tdt4102-tools`. Denne mappen MÅ slettes.
2. `%appdata%/tdt4102`. Hele denne mappen kan trygt slettes.
3. Mer data finnes på `%userprofile%/.vscode/extensions/`. Der skal det ligge en mappe som heter noe med tdt4102 i. Den kan dere slette.
-De to siste er ikke så farlig da de ikke brukes av den nye extension.
-
-**Visual Studio Build Tools** er ikke lengre i bruk så det kan avinstalleres om du ikke bruker det til noe annet.
-
### Visual Studio Code
VS Code er nesten aldri kilden til problemet da det bare er en teksteditor. Allikevel viser vi hvordan det avinstalleres:
diff --git a/mkdocs.yml b/mkdocs.yml
index ff47a965cf12d9f5be3b35501c919ad34dbfa4fd..c3c92b83a97f369aba53d34be7e9517d03f0ff1d 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -44,12 +44,12 @@ markdown_extensions:
nav:
- Home: index.md
- AnimationWindow:
- - Åpne et nytt vindu: animationwindow/index.md
+ - Åpne et nytt vindu: animationwindow/window.md
- Tegning: animationwindow/drawing.md
- Animasjon: animationwindow/animation.md
- Input med mus og tastatur: animationwindow/input.md
- Grafiske brukergrensesnitt (GUI): animationwindow/gui.md
- - Color-klassen: animationwindow/helpers.md
+ - Color-klassen: animationwindow/color.md
- Installering:
- Windows: installing/windows.md
- MacOS: installing/macos.md