Muuttujien suhteiden kuvaaminen

Tavoitteena on työkalu, jolla on helppoa piirtää erityisesti muuttujien ja viitemuuttujien (C/C++ sukuisissa kielissä osoittimien) välisiä suhteita. "Piirtäminen" tehdään yksinkertaisella muuttujia kuvaavalla kielellä. Kielen tavoitteena on myös olla saavutettava, jolloin kuvia voisi lukea ruudunlukulaitteilla ilman kuvanpiirtäjän lisätyötä.

Esimerkiksi miltä näyttää muuttujien suhteet seuraavan koodin jälkeen:

List<StringBuilder> lista = new List<StringBuilder>();
StringBuilder aku = new StringBuilder("Aku");
StringBuilder ankka = new StringBuilder("Ankka");
lista.Add(aku);
lista.Add(ankka);                                 // 1.

Mikäli viivan kulkeminen toisen olion yli häiritsee, voidaan visuaalista sijoittelua auttaa Graph-komennoilla, tässä esimerkissä vaikkapa siirtämällä $3 olion x:ää suhteellisesti 30 pykälää oikealle (tsx = temporary shift x).

Graph tsx: 30

Prototyyppi 2 puutteet:

• ei osaa vielä nuolia taulukosta "hyvään paikkaan", piirtää kuitenkin johonkin
• pitäisi olla erikseen muokkaustila (tosin on Piilota/Muokkaa joista Piilota voidaan laittaa oletukseksi)
• tarkemmin muuttujien/olioiden tyypit (immutable vs mutable)
• automaattinen kääntäminen C#- ja Java-kielistä.
• puuttuu vertaaminen opettajan mallikuvaan
• gui tapa piirtää viitteitä

Bugit:

• struct value error tulee liian ylös
• vaakaladonnassa muuttujien nimet päälle
• svg tietoturva tarkistettava
• virheilmoituksiin nimen kaveriksi $
• globaali nimetty sijoittaminen, joka menee yli vaiheiden

Prototyypin lähdekoodi löytyy Gitlabista

Sivun lopusta löytyy keskustelualue, jossa voi kertoa mielipiteitä ja ehdotuksia.

1. Motivaatio

Ongelmia:

• opiskelijat eivät luennoilla piirrä kuvia
• kuvien piirtämistä pitäisi lisätä kursseilla paljon
• jollei ymmärrä esimerkiksi miten viitemuuttujat toimivat, on vaikea kirjoittaa koodia
• piirtotyökaluja on raskasta käyttää
• ei ole automaattitarkastusta (VELPit auttavat pikkuisen)

Dokumentin lopussa on esimerkki Ohjelmointi 1-kurssin piirtotehtävästä. Osalla tehtävä meni OK, mutta osalla siinä ei ollut mitään järkeä.

1.1 DrawIO

Aikaisemmin käytetty ratkaisu on käyttää DrawIO:ta piirtoalustana.

Hyödyt:

• integroitu TIMiin, jolloin piirtämiseksi ei tarvitse asentaa mitään ja tehtävän palautus on helppoa
• tehtäviä voi arvostella VELPillä (Virtuaaliset Esipainetut Liukkaat PostIt -laput) suoraan tehtävien palautukseen. Esim annoin palautetta 200 opiskelijalle n. 20 min käyttäen iPadiä ja kynää.

Haasteet:

• DrawIO:n tallennusmuoto vie hirveästi tilaa
• vaikka tarkistusta voi tehdä VELPeillä, se vaatii ihmistyötä ja palaute ei ole reaaliaikaista
• jälkeenpäin annettua palautetta ei välttämättä lueta

2. Kuvauskielen syntaksi

Yksinkertaisimmillaan komponentin saa lisättyä seuraavalla koodilla

``` {plugin="csPlugin" #simple0}
type: vars
```

mutta mikäli haluaa kirjoittaa jotakin pohjakoodia, kannattaa käyttää fullprogram -attribuuttia (katso View source seuraavissa esimereissä).

Kuvauskieli koostuu komennoista, joilla on sekä lyhenne, että pitkä nimi. Yleensä komennon jälkeen seuraavana tulee muuttujan nimi. Poikkeuksena sijoitus ja grafiikkakomennot.

2.1 Muuttujat

Kuvaskielessä kahdenlaisia muuttujia:

• viitemuuttujia (reference)
• arvomuuttujia (value)

Muuttujan syntaksi:

Ref nimi
Value nimi

molemmat voi alustaa tarvittaessa esittelyn yhteydessä.

Oletuksena muuttujat piirretään niin, että lokaalit (usein pinossa olevat) piirretään vasemmalle ja kekomuistissa (heap) olevat oikealle.

2.2 Oliotyypit

Oliotyyppejä on neljä erilaista

• taulukko (array)
• lista (list) johon kuuluun ominaisuus count. Lista vastaa C# List tai Javan ArrayList -tyyppiä. Sitä ei nimestä huolimatta pidä sekoittaa linkitettyyn listaan, joka pitää rakentaa itse kunhan tuetaan tietueita.
• arvo-olio joka luodaan New avainsanalla ja annetaan samalla sen sisältö
• tietue (struct), joka voi pohjautua luokkaan

Lista ja taulukko voidaan luoda tietyn kokoiseksi tai ne voidaan alustaa luotaessa. Kummallekin täytyy luonnin yhteydessä sanoa ovatko tallennettavat alkiot arvoja (V) vai referenssejä (R). Luotava taulukko alustetaan 0 arvoilla tai null-viitteillä. Lista alustetaan tyhjäksi (count=0).

Olioiden nimet alkavat esimerkeissä $-merkillä, koska C#:in debuggeri näyttää olioden id:t tyyliin $1, $2 jne. Eclipse näyttää viitteitä tyyliin id=29, jolloin niitä voisi vastaavasti nimetä id29. $-alkuisia nimiä ei oletuksen näytetä (myöhemmin esitellään optio, jolla ne voi pyytää näkyviin).

Taulukon luomisen syntaksi on (sama listalle)

Array $nimi tyyppi koko
Array $nimi tyyppi alustusarvot

Tyyppi voi olla

• V = Value, voi tallentaa arvoja
• R = Reference, voi tallentaa viitteitä
• S = merkkijono
• C = char, voi tallentaa kirjainarvoja. Lähinnä jotta voi tehdä nopeasti sellaisia merkkijonoja kuvaavia taulukoita, joita tarvitaan merkkijonoalgorimeissa

Alustusarvot voi antaa sulkeissa, mutta sulkeet saa jättää poiskin. Alkiot erotetaan toisistaan pilkulla, puolipisteellä tai välilyönnillä. Jos erotinta tarvitaan itse alkiossa pitää alkio sulkea lainausmerkkeihin.

Jos taulukon tapauksessa kirjoittaa tyypin nimen perään V piirretään taulukko pystysuoraan (vertical), kokeile. Jos taulukkoon halutaan enemmän alkioita kun on alustusarvoja, pitää koko laittaa kiinni tyyppiin ja sitten luetella alustusarvot.

2.3 Sijoittaminen

Riippuen käyttössä olevasta moodista voi muuttujiin sijoittaa joko yhden kerran (mode: static) tai useasti (mode: step). Arvomuuttujaan sijoitetaan valinnaisesti jollakin operaattoreista =, := tai <-. Viitemuuttuja laitetaan viittaamaan johonkin olioon operaattorilla ->. Vaikka ohjelmoinnin kannalta olisikin loogista, että viitearvo sijoitettaisiin sijoitusoperaattorilla, on tässä haluttu, että "piirrettäessä" pitää miettiä mitä viite tarkoittaa.

2.4 Käytettävissä olevat komennot ja lyhentäminen

Alla käytettävissä olevien komentojen lyhenteet ja pitkät nimet

• v = Value = Val
• r = Reference = Ref
• n = New
• a = Array, myös [] [,]
• ja = JaggedArray, jarray, myös [][]
• l = List
• m = Move, siirrä muuttuja visuaalisesti toisen paikalle
• p = Phase
• c: = CODE:
• s = Struct
• t = Text
• class = uusien luokkien tekeminen
• g = Graph
• gn = Graph Named
• ggn = Graph Global Named
• $1.c = $1.Count
• SVG = tämän perään saa kirjoittaa haluamansa SVG-lauseen.
• null = luo muuttujan joka vie fyysisesti paikan, mutta ei ole näkyvissä eikä muuta käyttöä
• pass = lähinnä animaation loppuun jotta saadaan vielä yksi askel jolloin flash-poistuu
• style = astettaa tyylejä muuttujille
• styleall= asettaa flash tyylin kaikille sijoituksille

Viitteen luonti (Ref), olion luonti (New, Array, List ja Struct) ja viittaaminen

r susi
n $1 Sepe
susi -> $1

voidaan yhdistää yhdeksi komennoksi tyyliin:

r susi -> n $1 Sepe

2.5 Tilat (mode)

Itse komponentti voidaan asettaa käyttötarkoituksesta riippuen eri tiloihin. Staattinen tila on tarkoitettu "lopputuloksen" piirtämiseksi ja siinä ei jo alustettuja arvoja saa vaihtaa. Arvon vaihtaminen johtaa virheilmoitukseen ja ylimääräisiin viitteisiin.

Tilat:

• static = arvoja ei saa ensimmäisen sijoituksen jälkeen vaihtaa, esimerkiksi viitteen sijoittaminen tuottaa ylimääräisen viitteen. Tarkoitus on opettaa ettei yksi viite voi viitata kahteen paikkaan. step-moodin asetuksella tätä virhettä ei voisi tehdä.
• step = arvoja voi vaihtaa kuten ohjelmassakin voi (vielä ei eroteta oliotyypeissä muuttumattomia immutable ja muuttuvia mutable toisistaan). Viiteen kääntäminen nimenomaan kääntää viitteen, ei luo toista "nuolta" samasta paikasta.
• code = sijoituksia voi tehdä myös viitemuuttujan kautta kuten ohjelmakoodissa. Tarvittaessa tilan voi antaa myös code, static jolloin ei saa kahta kertaa sijoittaa samaan muuttujaan.

Virhetasot:

• 0 - virheilmoituksia ei näytetä käyttäjälle eikä virheellisiä olioita merkitä
• 1 - virheilmoituksia ei ei näytetä, mutta virheelliset oliot ja viitteet merkitään punaisella
• 2 - virheilmoitukset näytetään,virheellisiä olioita ei merkitä
• 3 - virheilmoitukset näytetään ja virheelliset oliot ja viitteet merkitään punaisella

Tila ja virheiden taso asetetaan komponentin YAML-koodissa attribuutilla jsparams:

jsparams:
  errorlevel: 1   # oletus 3
  mode: step      # oletus static

Harjoittelua ja opettelua varten oletuksena oleva static ja virhetaso 3 on suositeltava. Tenttien tyyliseen tilanteeseen joko virhetaso 1 tai 0, ettei liikaa pääse tekemään "kokeilemalla". step-mode on silloin kun havainnollistetaan ohjelmakoodin askelettaista toimintaa.

3. Askeltaminen

3.1 Askeltaminen

Mikäli kuvauksen sekaan kirjoitetaan ohjelmointikielen lauseita, niin kuvan päälle tulee kaikki CODE: merkityt rivit allekkain rivinumeroilla. Ohjelmointikielellä ei ole väliä, sillä nuo CODE: rivit ovat vain puhdasta tekstiä.

Eli jos kirjoitetaan:

CODE: List<StringBuilder> lista = new List<StringBuilder>();
Ref lista ->  A $1 O 3         
CODE: StringBuilder aku = new StringBuilder("Aku");
Ref aku -> N $2 "Aku"           
CODE: StringBuilder ankka = new StringBuilder("Ankka");
Ref ankka -> N $3 "Ankka" 
CODE: lista.Add(aku);
$1[0] -> $2  
CODE: lista.Add(ankka); 
$1[1] -> $3

niin saadaan animaatio muuttujien luomiselle:

Animaatio saadaan käyttöön asettamalla parametrit:

jsparams:
  animate: code

Kun animaatio laitetaan päälle, on mode automaattisesti step. Mikäli animaation muodoksi laitetaan commands, eli:

jsparams:
  animate: commands

niin silloin askelletaan koko kirjoitettua koodia:

Vinkki: Merkintää CODE: voidaan käyttää myös pelkkänä kommenttina ja animate-tilassa suoritetaan CODE: välinen osa << ja >> painikkeilla. Animointi pysähtyy /// alkaviin riveihin mutta ei # tai // alkaviin riviehin.

4. Vaiheet (phase)

Kuva voidaan jakaa useampiin vaiheisiin jos halutaan. Vaiheen alkuun tulostuu vaiheen numero ja loppuun viiva. Jokainen vaihe aloittaa uuden kuvan, eli samoja muuttujia saa käyttää, eivätkä ne viittaa vaiheen yli toiseen vaiheeseen.

4.1 Esimerkki vaiheiden käytöstä

Vaiheet on tarkoitettu sellaisten kuvien tuottamiseen, missä staattisesti kuvataan tilannetta eri ohjelmalauseiden jälkeen. Esimerkiksi:

4.2 Vaiheet ja animointi

Mikäli animointia käytetään vaiheiden kanssa, pitää muistaa että vanhat komennot pitää toistaa uudessa vaiheessa.

4.3 Tekstit

Vaiheisiin liittyen voi lisätä tekstejä vaiheen alkuun tai loppuun

Tekstiä voidaan antaa jo heti vaiheen numeron yhteydessä tai erikseen.

Syntaksi:

t[ext] [h|f] [options] teksti

Tekstin jälkeinen mahdollinen parametri h tai f tarkoittaa että teksti tulee vaiheen ylälaitaan (header) tai alalaitaan (footer).

Optiot annetaan JSON-muodossa. Oletukset ovat:

Tekstit tulevat "nykypaikasta" alaspäin ja siirtävät nykypaikkaa ellei optioissa ole itse annettu y-koordinaattia. Jos käyttää vaiheen (phase) alussa isoa fonttikokoa, voi joutua käyttämään sijoittelussa:

"base": "hanging"

jotta saa tekstin alkamaan tarpeeksi alhaalta.

Lisätietoa tekstin attribuuteista:

• x = tekstin x-koordinaatti
• y = tekstin y-koordinaatti
• sx = tekstin siirtymä nykykohdasta x-suunnassa (parempi usein kuin x)
• sy = tekstin siirtymä nykykohdasta y-suunnassa (parempi usein kuin y)
• color = tekstin väri, ks. dokumentaatio
• align = tekstin vaakasuuntainen sijoittelu, ks. dokumentaatio
  • start | middle | end
• base = tekstin korkeussuuntainen sijoittelu, ks. dokumentaatio
• size = tekstin koko pikseleinä, ks. dokumentaatio
• font = tekstin fontti, ks. dokumentaatio
• weight = tekstin "paino", ks dokumentaatio

4.4 Tekstin käyttäminen matkimaan tulostusta

Komentoa text voidaan käyttää matkimaan tulostusta:

4.5 Nimen sijoittelua ja label

Edellä on haluttu tehdä oikealla kolme viitettä rankkiin 2, jossa niminä näkyy kuitenkin pelkkä teksti this. Tämä sotkee automaattista koon laskemista ja siksi kuva on aloitetta globaalilla asetuksella:

rank global svgw: 460

Eli svg-kuvan koko pakotetaan (svgw) tietyn levyiseksi. Vastaavasti olisi myös svgh.

Oikealla olevien viitteiden nimeksi on annettu thisX tyyliin:

ref this1:this

Kaksoispiste nimen jälkeen määrittää että nimen sijaan tulostuu "label" joka on kaksoispisteen jälkeen.

Nimet saadaan muuttujan oikealle puolelle sillä että rankkiin 2 on määritelty np: 2 (name position). Toistaiseksi muut paikkaindeksit kuin 1 (vasen) ja 2 (oikea) eivät toimi. Komennolla gn (graph named) on nämä muuttujat pakotettu menemään rankkiin 2.

Tietuemuuttujan 900 nimen edessä oleva * pakottaa nimen tulostumaan ja + pakottaa tietueen attribuuttien nimet tulostumaan.

Rankkien 0 ja 2 asetusrivillä oleva sref: 1 pakottaa viitearvon tulostumaan viitteen kohdalle.

4.6 Muuttujen nimen edessä olevien merkkien merkitys

Muuttujien tai olioiden nimien eteen voidaan lisätä erilaisia merkkejä, jotka vaikuttavat niiden ulkonäköön:

• ! = muuttujan tai olion "laatikoita" ei piirretä
• - = muuttujan nimeä ei näytetä
• + = taulukoiden tapauksessa näyttää indeksien sijaan taulukon nimen ja indeksin hakasulkeissa alkioiden päällä tai vieressä, tietueille vastaavasti näyttää attribuutin nimen
• * = olioiden ja taulukoiden nimi näkyville

5. Uusia luokkia

Jos tarvitaan kuvata monimutkaisempia rakenteita, voidaan niitä tehdä tietueilla.

5.1 Tietue suoraan arvoista

Edellä nimen edessä oleva * pakottaa olion nimen tulostumaan. Vastaavasti + pakottaa luokan avulla esitellyssä (tai taulukossa) oliossa kenttien nimet tulostumaan.

5.2 Oma luokka

Jos samanlaisia tietueita tarvitaan useampi, kannattaa ensin tehdä luokka, jossa kuvataan tietueen ominaisuudet. Syntaksi:

class LuokanNimi: kentän1nimi: tyyppi, kentän2Nimi: tyyppi,....

Halutessaan kaksoispisteen saa jättää pois kentän nimen jälkeen, jolloin välilyönti toimii erottimena.

Vastaava tietue luodaan:

s.LuokanNimi olionNimi A alustusarvot...

Kolmas parametri A tarkoittaa luokan tyyppiä ja sen voi useimmiten pitää arvossa A (automaattinen, eli jokainen kenttä saa tyypin sen mukaan mitä luokassa sanotaan). Esimerkissä on käytetty tyyppiä S (string), joka tässä tapauksessa toimii, koska arvoina ei ole yhtään viitemuuttujaa.

5.3 Kenttien tyypit

Luokkaa ilmoitettaessa kenttien tyypit voivat olla

• V = arvo, voi sijoittaa vain lukuja tai kirjaimia
• C = kirjain, voi sijoittaa vain yhden kirjaimen
• S = string, voi sijoittaa minkä vaan merkkijonon
• R = viitearvo, piirtyy laatikkona
• SR = (simple reference) viitearvo, piirtyy vain pallukkana

6. Asettelun apuja

Graafista asettelua voi auttaa Graph -komennolla (lyhennetään jatkossa g):

• g rank: 2 - seuraavat elementit menevät rank 2:een (voi kuvitella uudeksi pystysarakkeeksi) (voi lyhentää g r 2)
• g rankdir: 1 - elementit ladotaan vaakasuoraan rankin sisälle (g rd 1)
• g {"snap": [0, 2]} - nuolet "snäpätään" vain länteen ja itään (g snap 0 2).
• g x:100, y:60 - pakotetaan seuraava elementti näihin koordinaatteihin, muut jatkavat tästä
• g sx:30, sy:-20 - pakotetaan seuraavalle suhteellinen siirto, muut jatkavat tästä
• g w:3, h:2 - pakotetaan leveys 3 normaalia yksikköä ja korkeus 2 yksikköä.
• g dir: 1 - pakottaa seuraavan elementin tai luokan sijoittumaan vaakaan.
• g rank: 2, ax:10, ay:20 - rank 2 laitetaan alkamaan paikasta (10,20)
• g ax:30,ay:40 - pakottaa rankin alkamaan koordinaatista (30,40)
• g rx:0,ry:20 - seuraava elementti sijoittuu rankin nurkasta paikkaan (0,20)
• g dy: 0 - elementin jälkeen siirretään y-koordinaattia näin paljon riippumatta elementin koosta. Jos esim 0, niin silloin seuraavalla elementillä kannattaa olla sx tai sitten tässä myös dx.
• g push - laittaa rankin tilan pinoon josta sen voi palauttaa ja palata samoihin asetuksiin
• g pop - rankin asetukset edelliseen tilaan
• g gotoStep - tällä merkitään paikka mihin asti animaatiota ajetaan valmiiksi
• g firstStep - tällä merkitään paikka mistä alkaa ensimmäinen näytettävä
  animaatiokomento

Koordinaatit x, y, sx, sy, rx, ry vaikuttavat myös seuraavien elementtien sijoitteluun. Näille on olemassa temp-vastineet, jolloin vaikutus koskee vain seuraavaa elementtiä, eli: tx, ty, tsx, tsy, trx, try. g-komentoon ei ole pakko antaa molempia koordinaatteja ja niiden ei tarvitse kulkea parina, vaan tarvittaessa toinen voi olla "eri sarjasta".

Joskus voidaan tarvita ylimääräinen null-elementti jolle ei tule mitään dimensiota:

null 0

Tämä sitä varten että muuten g-komentoja yhdistellään, kunnes vastaan tulee seuraava elementti jolle ne "kuuluvat". Erityisesti tarve voi tulle ennen pull komentoa ja pop komennon jälkeen.

6.1 Vaakasuuntainen sijoittelu

Tehdään esimerkiksi linkitetty lista:

Mikäli esimerkiksi root muuttujan nimi halutaan piilottaa kuvasta, samoin kuin muuttujan kehys, voidaan nimen eteen laittaa huutomerkki (!) estämään laatikko ja miinus (-) estämään nimen tulostuminen

ref !-root

6.2 Nimetyt rankit

Oletuksena on valmiina numeroituja rankkeja joiden nurkkakoordinaatit ovat

• 0: ax: 110, ay: 30
• 1: ax: 253, ay: 30
• 2: ax: 396, ay: 30
• 3: ax: 539, ay: 30
• 4: ax: 682, ay: 30

Oletuksen muuttujat sijoitetaan rankkiin 0 ja oliot rankkiin 1.

Näiden lisäksi voidaan itse tehdä nimettyjä rankkeja (yleensä nimi kirjoitetaan isolla). Nimettyjen rankkien hyöty on siinä, että voidaan tehdä omia kokonaisuuksia, joita voi sitten siirtää tarvittaessa toiseen paikkaan vain muuttamalla rankin absoluuttista sijaintia.

Seuraavassa esimerkissä luodaan kolme itse nimettyä rankkia R1, R2 ja R3 joilla on hieman erilaiset absoluuttiset alkupisteet. Aluksi muuttujat a ja b sijoitetaan rankiin R1. Sitten sijoitetaan muuttujia muihin rankkeihin ja lopulta vielä palataan sijoittamaan kuhunkin rankkiin yksi lisämuuttuja.

Jos rankin luodaan graph-komennon yhteydessä ja halutaan sen absoluuttiset a-koordinaatit toimivan, pitää olla ainakin yksi muuttuja tai olio luotu käyttäen r-koordinaatteja.

Jos rankkeja halutaan esitellä etukäteen ilman, että samalla luodaan muuttujia, niin silloin pitää käyttää rank-komentoa.

Tosin valmiiksi numeroitujen rankkienkin sijaintia voidaan muuttaa samalla tavalla.

6.3 Laiska viittaus

Opettamisen kannalta voi olla perusteltua, että olioon ei voi viitata ennen kuin se on olemassa. Kirjoittamisen kannalta tämä aina pidentää koodia ja aiheuttaa toistoa. Toki opetustehtävissä voidaan TIMimäiseen tapaan piilottaa "turhaa" koodia ja jättää opiskelijan tehtäväksi "vain" piirtää muuttujienväliset suhteen:

Jos halutaan kuitenkin keskittyä vain piirtämiseen, voidaan sallia laiskat viitteet (lazy references) laittamalla tehtävän jsparams attribuuttiin allowLazy: true. Pelkkää piirtämistä varten myös mode kannattanee olla step asennossa, jotta mahdollisista tuplasijoituksista ei valiteta.

jsparams:
  allowLazy: true
  mode: step
  

Laiskojen viittausten ollessa päällä, voidaan olioon viitata, vaikka sitä ei ole vielä luotu. Kaikki viittaukset käydään laskemassa vasta kun kuvan muut elementit ovat paikallaan. Animaatiomoodin kanssa tätä ei kannata käyttää, koska se voi aiheuttaa sekaannuksia (?).

6.4 mode: code

Jos on asetus mode: code niin voidaan käyttää viittauksia samaan tyyliin kuin ohjelmakoodissakin.

6.5 Tasavälisen ruudukon käyttö sijoittelun apua

Otetaan esimerkki kirjasta: Structure and Interpretation of Computer Programs. Muutetaan sen verran kirjan kuvan sijoittelua, että arvot halutaan "ulkokehälle".

• Laitetaan aluksi seuraavan luokan suunnaksi 1 (vaakasuunta).
• Olioiden perusleveydeksi 0.6 yksikköä.
• Samalla jaetaan rankit 80 x 60 väleille.
• Sitten luodaan luokka joka esittää yhtä alkiota jossa on kaksi yksinkertaista viitettä (Simple Reference, SR)
• Ensimmäiselle sarakkeelle (rank 1) laitetaan pari alkiota ja 1.
• Viimeisessä sarakkeessa loikataan yksi alkio yli täyttämällä null-alkiolla.

6.6 2-ulotteinen taulukko

Aitoa kaksiulotteista taulukkoa ei ole sisäänrakennettuna. Mutta sellaisen voi kikkailla kuten se tehdään Javassa ja C#:issa, eli taulukkona taulukoista (jagged array).

Laitetaan ensin niin, että ensimmäisen elementin jälkeen siirrytään y-suunnassa 0-pikseliä ja x-suunnassa 75. Jatkossa seuraavien elementtien väli on 35 y-suunnassa

g dy:0, dx: 75, rdy: 35

Sitten piirretään taulukko (array) jonka nimi on t joka tallentaa viitteitä (reference) pystyyn (vertical). Laitetaan taulukon kooksi esimerkiksi 4 alkiota:

Array t rv4

Seuraavat elementit (siis ne jotka ovat korkeussuunnassa 35 välein) ovat vaakassa (oletus taulukolle) olevia esimerkiksi kolmealkioisia taulukkoja jotka tallentavat arvoja (v):

a t0 v3

Jos taulukko nimettäisiin näin, niin sen yhteen alkioon viitattaisiin

t0[0]

Periaatteessa tämä on ok, mutta viittaus ei näytä Javan ja C#:in Jagged arrayn viittaukselta. Siksi olisi hyvä voida antaa alkion nimeksi t[0]. Tämä nimi on kuitenkin jo varattu t -taulukon osa-alkioille. Siksi nimetäänkin ensimmäinen rivi

t[0].

joka on siis eri nimi kuin t taulukon t[0] alkiolla. Näin viite sitten yhteen alkioon on esimerkiksi:

t[0].[1]

Kuitenkin tuo piste kadotetaan sisäisessä nimeämisessä niin, että alkion sisäiseksi nimeksi tulee t[0][1], joka näyttää jo "oikealta". Samalla kun alkio luodaan, laitetaan t[0] viittaamaan siihen:

t[0] -> a +*t[0]. v 3 4 5

Nimen alussa oleva * pakottaa taulukon nimen tulostumaan (ilman pistettä) ja + pakottaa sen yksittäisten elementtien nimet tulostumaan. Lisäksi taulukon alkiot alustetaan luonnin yhteydessä.

Seuraavia rivejä ei alusteta eikä niiden päälle haluta tulostaa edes indeksejä (-), joten ne ovat muotoa:

t[1] -> a -t[1]. v3

Näin saadaan niin, että yksittäiseen alkioon voidaan viitata:

t[2][1] = 77

Lopuksi halutaan vielä "osoitin", joka viittaa pystyvektoriin t. Viitteen nimeksi ei voida enää antaa t, koska se oli varattu taulukolle. Annetaan siis viitteen nimeksi vaikkapa tp (t-pointter). Mutta jotta kuvassa näkyisi t, kuten Javassa ja C#:issa loogisesti olisi, laitetaan nimen yhteyteen näytettävä teksti (:) samalla kun viite alustetaan viittaamaan taulukkon t:

ref tp:t -> t

Koska käytännössä 2-ulotteisia taulukkoja joutuu piirtämään aika usein, on edellisellä komentojoukolle oma komento, joka luo em. yhdistelmän. Yhdistelmään lisäksi laitetaan push alkuun ja pop loppuun, jotta yhdistelmä näyttäisi "valmiilta komennolta". Taulukko taulukoista voidaan siis piirtää komennolla (jagged array):

jArray t v4x3 3 4 5

Jos muitakin rivejä haluttaisiin alustaa, pitäisi rivit erottaa | merkillä, eli

jArray t v4x3 3 4 5 | 6 7 8 | 9 10 11

Taulukoiden yhdistelmäkomennossa rivit piirretään hieman alkuperäistä esimerkkiä lähemmäksi toisiaan, jotta rivejä saataisiin tarvittaessa mahtumaan enemmän.

Vastaavasti jos halutaan aidon näköinen 2-ulotteinen taulukko, ei ensimmäisen askeleen jälkeen siirrytä lainkaan x-suunnassa ja laitetaan y-siirtymä seuraavia elementtejä varten juuri rivin kokoiseksi (22). Kun rivit tulostetaan käänteisessä järjestyksessä (g rev:1) niin "varjot" menevät oikein. Nimille annettu pilkku (,) eroaa pisteestä siten, että sisäisiksi nimiksi ei tulekaan t[0][1] vaan t[0,1] C#:in 2-ulotteisen taulukon tyyliin.

Vastaavasti tälle on oma yhdistelmän tuottava komento

Array t v4x3

ja alkioon viitataan

t[2,1] = 77

Oikeasti ei siis ole taulukoita tms, alkioiden nimet vaan tehdään näyttämään taulukoilta.

Näille yhdistelmäkomennoille on myös synonyymit

[][] = JArray
[,]  = Array

Tästä näkee esimerkiksi komentojen animaatiomoodissa miten yhdistelmäkomennot aukeavat. Jos haluaa säätää elementtien välejä, on tehtävä taulukot "manuaalisesti", tai käytettävä nimettyjä grafiikkakomentoja.

6.7 Monimutkaisempi sijoittelu

Tehdään esimerkiksi Ohjelmointi 2 kurssin malliharjoitustyön vaatima kuva. Tässä käytetään hyväksi laiskoja viitteitä, jotta kuva voidaan "piirtää" ylhäältä alas. Kukin kokonaisuus sijoitetaan omaan nimettyyn rankiin, jolloin kokonaisuuksia voi helposti siirrellä vaihtamalla rankin absoluuttista sijoitusta.

• Aluksi luodaan tarvittavat 6 luokkaa ja kerrotaan kunkin edellä miten päin tietueet piirretään ja montako perusyksikköä kukin vie leveydestä ja korkeudesta.
• aloitetaan rank KERHO, jolle laitetaan absoluuttinen sijainti (ax,ay) ja laitetaan seuraava olio alkamaan rankin sisällä absoluuttisesta paikasta (rx, ry). r-koordinaattien nollakohta on rankin vasemman yläkulman koordinaatti.
• sijoitetaan rankiin Kerho-luokan olio ja Naytto-luokan olio.
• piirretään Bézier-käyrä (ks SVG Paths) kuvaamaan rajaa jonka toisella puolella on vaan käyttöliittymää ja toisella pelkkää datan käsittelyä ("business-logiikka")
• seuraavaksi luodaan rank JASENET taas sopivaan absoluuttiseen paikkaan
• itse jasenet-olio piirretään rankin sisään paikkaan (30,0)
• alkiot taulukko vastaavasti rankin sisällä paikkaan (0, 160) leveydellä 2 yksikköä ja pystyyn dir: 0
• +alkiot antaa taulukon nimeksi alkiot ja + aiheuttaa sen, että alkioiden viereen tulostuu niiden nimi
• sitten sijoitetaan kolme jäsentä kuvaan ja niiden alle viimeisen olion luokan nimi.
• vielä toistetaan sama harrastuksille rankissa HARRASTUKSET

Avaa alta edellisen kuvan tarkka selitys mitä mikäkin rivi merkitsee. Kannattaa ehkä avata kuva toiseen selaimen ikkunaan vierelle. Sitten muuttelee selitystä lukiessa samalla arvoja, jotta näkee mitä mikäkin vaikuttaa.

6.8 Kerho-esimerkin koodin tarkka selitys

Huomaa että alta saat koodin auki tarkkoine selityksineen:

6.9 Animointi etsimisestä

Vastaavasti laittamalla animointi-moodi päälle, voidaan tehdä animaatio siitä, kuinka jäseniä lisääntyy rakenteeseen. Tästä oli aiemmin esimerkki.

6.10 Graph komento nimetylle oliolla

Jos itse "piirrosta" ei haluta "pilata" Graph komennoilla, voidaan vastaavia komentoja kerätä vaikkapa "piirroksen loppuun" kertomaan nimellä minkä komponentin sijoittumiseen halutaan vaikuttaa. Tällöin suositellaan käytettäväksi t-alkuisia (temp) koordinaatteja, jolloin muutokset vaikuttavat vain kyseiseen komponenttiin. Karkeasti voidaan ajatella että gn (graph named) komento etsisi elementin luomisrivin ja laittaisi sen päälle g-komennon. Vastaavasti ggn etsii nimeä yli kaikkien vaiheiden. Mikäli vaiheita (phase) ei ole käytetty, niin gn ja ggn toimivat vastaavasti.

Itse asiassa yhdistelmäkomentojen elementtien sijoitukseen on muuten vaikea vaikuttaakin. Tällä voidaan jopa kikkailla:

6.11 Sijoitusten tutkiminen (debug)

Joskus voi joutua tutkimaan mihin jokin elementti on sijoittunut. Tätä voi havainnollista tilapäisesti piirtämällä sen keskikohtaan ja/tai oikeaan alanurkkaan apuviivat. Tämä tapahtuu komennolla

g debug optins

missä options voi sisältää

• c = center, piirtää hiusristikon elementin "origon" läpi, vihreä
• r = rank right margin, piirtää hiusristikon rankin sen hetkisen oikean alanurkan läpi, punainen
• m = margins, toimii vain viimeisessä elementissä (joskus voi apuna käyttää null-elementtiä), piirtää marginaalit, sininen

Jos elementit ovat hyvin ylhäällä, voi niitä joutua laskemaan jotta näkee koordinaattien arvot

Edellähän viite a on mennyt rankkiin 0 ja oliot $1 ja $2 rankkiin 1. Siksi punainen ristikko kuvaa rankin 1 oikeata alanurkkaa kanan piirtämisen jälkeen. Eli kissa määrää rankin oikean reunan ja kana alareunan.

6.12 Koordinaattien selvittäminen klikkaamalla

Jos on paljon visuaalisesti eri paikkaan sijoitettavia elementtejä, voidaan niiden gn komentojen kirjoittamista helpottaa sillä tavalla, että kirjoitetaan editoriin valmiiksi

gn elemnimi

ja sitten klikataan piirtoaluetta, jolloin sen vasempaan alakulmaan tulee t-koordinaateilla klikkauksen paikka. Kun koordinaattia klikkaa, se kopioituu leikepöydälle, josta se voidaan pasteta gn-komennon perään.

6.13 Pelkkä kuva

Koodilla

``` {#erotkuva plugin="csPlugin"}
type: vars
lazy: false
toggleEditor: false
noeditor: true
norun: true
copyLink: ""
borders: false
fullprogram: |!!
ref erot -> [,] $1 v4x2 -1 0|0 -1|0 1|1 0
!!
```

saadaan hävitettyä kuvasta kaikki ylimääräinen

6.14 Olioiden piilottaminen

Suoranaisesti oliota ei voi toistaiseksi poistaa, mutta voi tehdä vaikkapa yhden roskakori rankin trash (tai mikä nimi vaan) ja sijoittaa sen kokonaan kuva ulkopuolelle ja sitten siirtämällä sinne rankkiin piilotettavia olioita.

Edellä oleellisia rivejä (katso kokonaisuus View source:

# luodaan roskis kauas vasemmalle ja laitetaan alkiot tulemaan päällekkäin
rank trash: x: -500, h: 0, dy: 0  
...
gn i: r trash  # siirretään funktion lokaali i roskiin
...
gn muutayli_lkm: r trash  # siirretään muut lokaalit muuttujat roskiin
gn raja: r trash 
gn muutayli_t: r trash 

7. Jinja2 makrojen käyttö toistuvien osien kirjoittamisen helpottamiseksi.

Halutaan kirjoittaa animaatio, jossa esitetään miten StringBuilderiin lisätään jono keskelle (katso toteutus Muokkaa-linkistä):

Tässä jouduttaisiin kirjoittamaan koodia tyyliin:

style $1[12] fill=yellow
style $1[15] fill=yellow
$1[15] = $1[12]
style $1[12] 
style $1[15]
style $1[11] fill=yellow
style $1[14] fill=yellow
$1[14] = $1[11]
style $1[11] 
style $1[14]
style $1[10] fill=yellow
style $1[13] fill=yellow
$1[13] = $1[10]
style $1[10] 
style $1[13]
...

mikä olisi aika työlästä.

Tämä toistuva osa saadaan kirjoitettua käyttäen Jinja2 makroja tyyliin:

{% for i in range(15,10-1,-1) %}
style $1[%%i-3%%] fill=yellow
style $1[%%i%%] fill=yellow
$1[%%i%%] = $1[%%i-3%%]
style $1[%%i-3%%] 
style $1[%%i%%]
{% endfor %}

Vastaavasti jälkimmäinen kopiointi

{% for i in [0,1,2] %}
style $2[%%i%%] fill=yellow
style $1[%%i+7%%] fill=yellow
$1[%%i+7%%] = $2[%%i%%]
style $2[%%i%%] 
style $1[%%i+7%%]
{% endfor %}

Jinja2 makroja voi olla helpointa kokeilla kirjoittamalla pieniä koodilohkoja ja katsomalla miten makrot täydentyvät

```
{% for i in [1,2,3] %}
i = %%i%%, i+5 = %%i+5%%
{% endfor %}
```

```
i = 1, i+5 = 6
i = 2, i+5 = 7
i = 3, i+5 = 8
```

Vastaavasti jonon käyttämättömät alkiot on merkitty harmaaksi hyödyntäen srange-filtteriä:

 style %%",$1[{0}]"|srange(13,16-1)%% fill=lightgray

mikä tuottaa nyt jonon

style ,$1[13],$1[14],$1[15] fill=lightgray

Toki tässä tapauksessa tulosjono olisi ollut helpompi kirjoittaa suoraan, mutta ei silloin jos suurempi määrä alkioita haluttaisiin harmaaksi.

8. style-komento

Edellä on hyödynnetty style-komentoa:

  style muuttujalista svg-tyyli
  

Muuttujalistassa muuttujat luetellaan pilkulla toisistaan eroteltuina ja makrojen takia sallitaan myös tyhjät nimet, jotka jätetään noteeraamatta.

Komennolla styleall saadaan "välähdys" kaikkiin muuttujiin, joihin sijoitetaan tai viitataan.

 styleall svg-tyyli
 

Esimerkiksi

 styleall fill=yellow

Tällöin ennen jokaista sijoitusta sovelletaan mainittua tyyliä sijoituksen osapuoliin ja sijoituksen jälkeen palautetaan alkuperäinen tyyli.

Esimerkiksi edellinen Kustaa-esimerkki hieman helpommin, tosin silloin ei saada "syttymisen" järjestystä säädettyä yhtä tarkkaan.

9. Virheitä ja niiden virheilmoituksia

Alle on kasattu 3.12.2020 pidetystä Ohjelmointi 1-kurssin tentistä tyypillisiä opiskelijoiden piirtämiä virheellisiä kuvia. Tentissä kuvat piirrettiin "vapaasti" DrawIO-komponentilla ja virheistä ei tullut automaattista palautetta. Kuvien alle on lisätty Muuttuja-komponentti näyttämään minkälaisen virheilmoituksen piirtäjä saisi nyt vastaavasta kuvasta, jos piirretään harjoittelu-moodissa.

9.1 Tyypillisiä virheitä

• viite viittaa toiseen viitteeseen

  

• Muuttujassa kaksi viitettä. Näin yritetään yhdistää kaksi merkkijonoa toisiinsa.

• Yritetään liittää olioita yhteen

• Tässä ei ole varsinaista syntaktista virhettä, mutta kun automaattisijoittelu vie elementit kauas toisistaan (ja g-komennon käyttö kielletään), niin visuaalisesti virhekäsitystä ei voi enää tehdä.

• Olion sisältö yritetään laittaa viitemuuttujaan

• Merkkijono-oliossa sekä sisältö että viite

• Ylimääräisiä leijuvia merkintöjä

• Poistetaan aiempi viite aiheetta, ja viitemuuttuja jää tyhjäksi.

• Olioviite osoittaa väärään suuntaan

• Listan count kirjoitetaan vaikka ei ole kyse listasta

• Luodaan ylimääräisiä muuttujia (jopa samalla nimellä kuin olemassaolevat)

• Listan alkioissa viitteitä muuttujiin, listan count väärin.

Tentti 3.12.2020 kuvan piirto

Tässä luvussa on 3.12.2020 pidetyn tentin piirtotehtävän 6 tehtävät sellaisenaan ja niiden alle lisätty sama versio uudella piirtotyökalulla.

Tässä voi kokeilla tehtävän tekemistä DrawIO:lla piirtämällä sekä uudella piirtotyökalulla.

Seuraavissa tehtävissä on ensin ohjelmanpätkä ja sen kunkin rivin perässä "rivinumero" (vaihe). Ohjelmanpätkät eivät ole ajettavissa ellei niihin lisää koodia. Ajettavaksi muuttamisesta ei saa lisäpisteitä. Koodin alla olevaan kuvaan on piirretty ohjelman tilanne ensimmäisen vaiheen jälkeen. Korjaa loput vaiheet kuvissa vastaamaan mikä on tilanne kunkin rivin suorittamisen jälkeen.

Tehtävässä on manuaalinen arvostelu, mutta voit antaa itsellesi arviopisteet, niin saat arvion pisteiden summastasi.

Huomaa että tässä tehtävässä jo pohjakuva on "väärin", eli ala korjaamaan vaiheesta 1 alkaen ja muista lisätä myös vaihe 4.

Keskustelu

Tässä voi keskustella sisällöstä, esittää kysymyksiä jne.