Vi skal nu lave en app, hvor man kan lave tegninger på skærmen med fingeren. Det vi skal bruge til denne app, er et canvas komponent for at det er muligt at lave tegninger. Vi skal lærer at håndtere touch og når man trækker fingeren over skærmen. Vi lærer at håndtere layout af komponenterne. Og vi skal lærer at benytte variabler til at huske værdier.
Du starter med at lave et nyt projekt (se “Introduktion til App Inventor) og kald det ”MiniPaint”. Når skærmen vises kan du se at øverst står der ”screen1”, dette vil vi gerne ændre til også at hedde “Mini Paint”. Derefter hvis du trykker på komponenten Screen1, kan du i properties, helt ude til højre, ændre på title, så denne hedder “Mini Paint” i stedet for screen1.
Opgave
- Opret nyt projekt – “MiniPaint”.
- Ændre “screen1” til “Mini Paint” – Dette gøres i properties for Screen1.
Det første du skal bruge for at kunne tegne på app’en, er et canvas. Dette finder du i Palette under Drawing and Animation. Flyt et canvas ud på skærmen.
På Viewer kan man se en lille kasse (billede ovenfor) som er den størrelse som canvas har. Da vi gerne vil have at man skal kunne tegne på hele appen, skal du lave ændringer i properties. Vælg derfor canvas under Components, og ændre width og height til begge at være ”fill parent”. Du kan ændre baggrunden for canvas til enten at være en anden farve eller sætte et billede på, for bedre at kunne se det område du kan tegne på.
For at bedre kunne huske hvilke komponenter der er hvad, kan vi ændre i deres navne, fx hvis man har flere knapper kan det være svært at huske hvilken knap gjorde hvad når de bare hedder button1, button2 osv. Når du vælger en komponent kan du ændre dets navn ved at trykke på rename nederst i Components feltet.
Ændre navnet på canvas1 til Tegning.
Opgave
- Tilføj et Canvas til din app – Find den under Palette og træk det ind i Viewer.
- Ændre størrelse på dit canvas – Height og Width skal begge være “fill parent”.
- Ændre navnet “canvas1” til “Tegnefelt” – Vælg canvas1 under Components og tryk rename i bunden.
Tegn på skærmen
Nu skal vi sætte lidt funktionalitet til vores app, så det er muligt kan tegne. Derfor skal du skifte til Blocks.
Her vælger du ”Tegnefelt” komponenten i venstre side og vi får de forskellige blokke frem for denne komponent. Du skal nu vælge den blok som starter med ”when Tegnefelt.Touched” og trække den ind i viewer. Denne blok vil gøre noget når man rører ved canvas/Tegnefelt.
Nu skal du bestemme hvad den skal gøre når man rører ved skærmen. Vælg igen Tegnefelt fra Blocks området. Vælg den blok som hedder ”call Tegnefelt.DrawPoint” og træk den ind i den første blok.
Du kan se at denne blok mangler 2 andre blokke, en for x og en for y. Her skal vi fortælle blokken at det er den samme x og y, som hvor man rører skærmen. For at få disse værdier, kan du trykke på x på blokken “when Tegnefelt.Touched” og vælge “get x”. Denne blok trækkes hen og sættes ud for x på den lilla “call Tegnefelt.DrawPoint”. Det samme gøres for y.
Hvis man f.eks. er kommet til at sætte “get x” ud for begge kan man let ændre på den ved at trykke på den lille pil ud for x.
Opgave
- Gå ind i Blocks – hvor koden skal laves.
- Find kode-blok “when Tegnefelt.Touched” for dit Tegnefelt og træk den ind i Viewer.
- Find kode-blok “call Tegnefelt.DrawPoint” for dit Tegnefelt og træk den ind kode-blokken “when Tegnefelt.Touched”.
- Tilføj X og Y kode-blokke – Tryk på x i “when Tegnefelt.Touched” og vælg “get x”, sæt denne ud for x i den lilla “call Tegnefelt.DrawPoint” blok. Gør det samme med Y.
TEST: Hvis du henter app’en over på tabletten, kan du nu se at der tegnes en prik når du trykker på skærmen.
Det kan godt tage lang tid at lave en tegning, hvor man kun kan lave prikker. Derfor vil vi gerne gøre det muligt at kunne tegne streger.
Under Blocks skal du vælge den blok som hedder ”when Tegnefelt.Dragged” for Tegnefelt og trækker den ind på Viewer. Herefter vælger du den blok som hedder ”call Tegnefelt.DrawLine”. Denne blok har 4 tomme pladser; x1, y1, x2 og y2. Her skal du vælge prevX og prevY for x1 og x2, og currentX og currentY for x2 og y2.
Det er nu muligt både at lave prikker og linjer i app’en.
Opgave
- Find kode-blok “when Tegnefelt.Dragged” for dit Tegnefelt og træk den ind i Viewer.
- Find kode-blok “call Tegnefelt.DrawLine” for dit Tegnefelt og træk den ind kode-blokken “when Tegnefelt.Dragged”.
- Tilføj X og Y kode-blokke således: x1= prevX, y1=prevY, x2=currentX og y2=currentY.
TEST: Hvis du henter app’en over på tabletten, kan du nu se at der tegnes en prik når du trykker på skærmen og der tegnes en linje hvis man flytter fingeren over tegnefeltet.
Din kode skulle gerne ligne dette
Ryd skærmen
Nu har du måske prøvet at tegne en masse på app’en, så nu vil vi gerne gøre det muligt at kunne slette tegningen igen og starte forfra. Derfor skal vi først tilbage til Designer så vi kan tilføje en slet knap.
Træk en knap (button) ind på app’en i viewer området og placer den over dit canvas/Tegnefelt.
Ændre navnet på komponenten til at være ”SletKnap” i stedet for ”button1”.
Herefter kan du enten sætte et billede ind på knappen 
eller ændre teksten på selve knappen til at hedde Slet.
I Blocks skal du vælge SletKnap og trække den blok som hedder ”when SletKnap.Click” ind på Viewer. Herefter vælger du Tegnefelt og den blok som hedder ”call Tegnefelt.Clear” ind i den første blok. Nu bliver tegningen slettet hvis man trykker på den tilføjede slet knap.
Opgave
- Gå ind i Designer – hvor der til tilføjes ting til app’en.
- Tilføj en knap (button).
- Ændre navnet på knappen fra “button1” til “SletKnap”
- Tilføj et billede for knappen – under Properties kan man tilføje billede under image.
- Slet teksten på knappen eller ændre teksten fra “Text for Button1” til “Slet”
- Gå ind i Blocks – med al koden
- Find kode-blokken “when SletKnap.Click” for din SletKnap – Træk blokken ind i Viewer.
- Find kode-blokken “call Tegnefelt.Clear” for dit Tegnefelt – Træk blokken ind i “when SletKnap.Click”
TEST: Hvis du henter app’en over på tabletten, kan du nu se at dine tegnefeltet bliver ryddet når du trykker på slet knappen.
Farver
Indtil videre er det kun muligt at tegne med sort farve, derfor vil vi gerne tilføje nogle knapper hvor man kan ændre på farven. Derfor skal du gå tilbage til designeren.
Du starter med at trække en knap (button) over på app’en. App Inventor ligger automatisk alle komponenterne lodret på app’en og ikke ved siden af hinanden, som vi gerne vil have det i denne app.
Derfor skal du vælge Layout under Palette og derefter vælge ”HorizontalArrangement” og trække denne over på vieweren. Herefter kan du flytte din slet knap og den nye knap ind, så det ser ud som på billedet nedenfor.
Ændre navnet på knappen til at hedde ”BlaaKnap” og ændre derefter baggrundsfarven for knappen til at være blå og slet teksten for knappen. Tilføj en knap mere og omdøb den til “SortKnap”. Sæt baggrundsfarven til at være sort (black) og slet teksten for knappen.
Opgave
- Gå ind i Designer – hvor der til tilføjes ting til app’en.
- Tilføj en knap (button).
- Ændre navnet på knappen til “BlaaKnap” – på samme måde som med slet knappen fra tidligere.
- Ændre baggrundsfarve for BlaaKnap til at være blå (blue) under Properties i højre side.
- Fjern teksten for BlaaKnap
- Tilføj et HorizontalArragement – du finder den under Layout i Palette i venstre side.
- Flyt dine knapper over i dit HorizontalArrangement.
- Tilføj en knap (button)
- Ændre navnet på knappen til “SortKnap”.
- Ændre baggrundsfarven til sort (black) og slet teksten for knappen.
Der sker ikke noget når man trykker på knapperne, før vi har været over i Blocks og give knapperne noget funktionalitet, derfor skal du nu skifte til Blocks.
Når du vælger BlaaKnap under blocks, skal du derefter vælge blokken ”when BlaaKnap.Click” og trække den ind i Viewer. Herefter skal du vælge Tegnefelt og den blok som hedder ”set Tegnefelt.PaintColor to”, som du trækker ind i blokken. Nu mangler vi kun at sætte en farve på. Under Colors under built-in i blocks kan man vælge mellem de forskellige farver.
Vælg den blå blok og træk den ind så den passer i hullet efter ”to”.
Det samme skal nu gøres for SortKnap, hvor farven sort sættes på “set Tegnefelt.PaintColor to”
Opgave
- Gå ind i Blocks – med al koden.
- Find kode-blokken “when BlaaKnap.Click” for din BlaaKnap – Træk blokken ind i Viewer.
- Find kode-blokken “set Tegnefelt.PaintColor to” for dit Tegnefelt – Træk blokken ind i “when BlaaKnap.Click”
- Vælg Colors i venstre side og find den blå farveblok – Træk blokken ud for “set Tegnefelt.PaintColor to”
- Find kode-blokken “when SortKnap.Click” for din SortKnap – Træk blokken ind i Viewer.
- Find kode-blokken “set Tegnefelt.PaintColor to” for dit Tegnefelt – Træk blokken ind i “when SortKnap.Click”
- Vælg Colors i venstre side og find den sorte farveblok – Træk blokken ud for “set Tegnefelt.PaintColor to”
TEST: Hvis du henter app’en over på tabletten, kan du nu se at du kan tegne blå streger og prikker når du har trykket på den blå knap, og du tegner med sort når du har trykket på den sorte knap.
Din kode skulle gerne se ud som på billedet herunder:
Hvis du gerne vil have flere farve at vælge mellem, kan du tilføje flere knapper og ændre dem på samme måde som med den blå og sorte knap. Husk at lave koden i Blocks også.