Piirtotyökaluja

Mm. harjoitustyön vaihetta 4 varten pitää piirtää kuva ohjelman olioiden suhteesta. Tässä dokumentissa on lueteltu mm. tähän sopivia työkaluja. Usein kuvat on järkevintä piirtää vektoripiirtotyökalulla, jolloin jos jotakin joutuu siirtämään, seuraavat yhdistetyt viivat mukana.

Tyypilliset bittikarttatyökalut, kuten Paint tai Paint.Net, eivät ole tähän yhtä hyviä.

Tätä dokumenttia saa muokata ja lisätä kappaleita jos löytää hyviä tarkoitukseen sopivia piirtotyökaluja. Esimerkiksi Mac ja Linux-työkaluja saa tänne lisätä.

1. vars.js

Käytetään kurssille kehitettyä piirtotyökalua, jonka saa käyttöön lisäämällä omaan dokumenttiin. Voit tässä toki kokeilla, mutta piirrä varsinainen kuva suunnitelmat sivullesi.

Tästä tarkemmin ohjedokumentissa vars.js muuttujasuhteet.

Kurssin tietorakennekuvan saa omaan harjoitustyöhön ehkä helpoimmalla kun matkii malliohjelman koodia.

Helpoimmalla saat pohjan kun omalla suunnitelmat sivullasi lisäät uuden lohkon ja editorissa valitset Ohj2/HT/vars.js Kerhon mallikoodilla.

Tai sitten luot pohjan manuaalisesti:

1. Luo uusi lohko, jossa on sisältönä:

   ``` {#GLO_tietorakenne plugin="csPlugin"}
   type: vars
   jsparams:
     mode: step
     allowLazy: false
   maxrows: 30  
   toggleEditor: true
   noeditor: true
   fullprogram: |!! 
   !!
   ```

2. Paina alla Muokkaa ja omassa dokumentissa Muokkaa ja kopioi alla oleva koodi pohjaksi ja rupea siitä muokkaamaan omaa. Tallenna välillä.

3. Tarkka selitys mallin kustakin rivistä on vars.js-ohjeissa kohdassa Kerho-esimerkin koodin tarkka selitys.

2. Draw IO

• https://www.draw.io - online piirtotyökalu

• Käyttö suoraan suunnitelman sivulta:
  1. mene lisäämään suunnitelmaasi uusi lohko
  2. ota editorissa menusta Plugins/Ohj2/Draw.io-pohja
  3. Tallenna (paitsi jos lisäät useita kuvia, vaihda # perässä oleva pluginin numero)
  4. Valiste Muokkaa
  5. File/Import from/URL...
  6. anna osoite: https://tim.jyu.fi/files/179986/kerhohar.svg
  7. muokkaile tekstejä, ota kopioita laatikoista ja pasteta niitä tarpeen mukaan
  8. jos tarvitset lisää nuolia, ota kopio olemassa olevasta, pasteta se ja vedä nuolen päät haluamaasi kohtaan
  9. kun piirros on valmis, paina piirto-ohjelman Save/Tallenna (kielen mukaan)
  10. Paina vielä TIM-komponentissa Tallenna
  11. Voit vielä avata muokkauksen uudestaan ja tallentaa kuvan varulta myös GITiin:
      • File/Export as/SVG...
      • anna nimi omaan kuvat hakemistoosi

• Käyttö erilisen ohjelmana:
  1. avaa Draw.io
  2. kirjaannu aluksi halumaasi palveluun tallennusta varten (Google Drive, OneDrive)
  3. File/Import from/URL...
  4. anna osoite: https://tim.jyu.fi/files/179986/kerhohar.svg
  5. muokkaile tekstejä, ota kopioita laatikoista ja pasteta niitä tarpeen mukaan
  6. jos tarvitset lisää nuolia, ota kopio olemassa olevasta, pasteta se ja vedä nuolen päät haluamaasi kohtaan
  7. kun piirros on valmis, tallenna se levyllesi versionhallintaan menevään kuvahakemistoon:
     • File/Export as/SVG...
     • anna nimi
  8. laita suunnitelmaasi tähän normaalisti linkki Gitiin (siihen .svg-tiedostoon)

• Esimerkki miltä piirretty kuva näyttää:
  
  

2.1 Vinkkejä piirtämiseen

2.1.1 Nuolen muokkaaminen

Nuolta pystyy muokkaamaan kun on ensin klikannut sen aktiiviseksi. Sen jälkeen oikealla olevan "style" välilehden dropdown menuista pystyy esim. vaihtamaan nuolen päiden kuvakkeita ja kokoja. Mikäli jostakin syystä nuoli jää esim. laatikon alle piiloon, saa sen päällimmäiseksi klikkaamalla oikealta ylhäältä arrange ja aukeavasta valikosta to front.

Aktiiviseksi valitun nuolen pään voi irroittaa objekstista, kun sitä rahaa pienestä sinisestä pallosta, jossa valkoinen rasti (tai jokin muu muoto) sisällä.

Nuolen voi kiinittää viemällä tämän sinisen pallon objektin reunalla olevan pienen sinisen rastin päälle. Rasti korostuu vihreällä merkiksi onnistuvasta liitoksesta. Objektin keskelle nuolen voi kiinnittää vastaavasti viemällä sinisen pallon objektin päälle. Objekti saa vihreän reunuksen kun liitos on onnistumassa. Reunuksen lisäksi hiiren vierelle ilmestyy valkoinen laatikko, jossa on kaksi prosenttilukua. Nämä kuvaavat nuolen pään kohtaa suhteessa objektin reunoihin, ja helpottavat tasan keskelle osumista (arvoilla 50%, 50%). 3-ulotteisilla objekteilla nämä prosentit eivät perustu etureunaan, vaan koko pinta-alaan.

3. Visio

• on asennettuna valmiiksi mikroluokkiin

• Visio Professional 2019 (Microsoft Azure Dev Tools for Teaching)

  • Kirjaudu sisään yliopiston tunnuksilla.

  • Hae sovelluksista tuoteavain ja latauslinkki.

  • Kannattaa tallentaa kirjanmerkkeihin, sillä sieltä löytyy myös kurssin jatko-osaa (C/C++) varten Visual Studio Enterprise 2017.

• kerhohar.vsd - Visio-pohja kuvalle jossa on jäseniä ja harrastuksia
• kerhohar.vsd - Visio-pohja kuvalle jossa jäsenet ja harrastukset on yhdistetty ylimääräisellä liitostaululla

4. GraphViz

• GraphViz on avoimen lähdekoodin kuvauskieleen perustuva työkalu erilaisten graafien piirtämiseksi
• GraphViz-piirtäminen TIMissä harjoitustyötä varten

5. Lucidchart

• Ilmaisversionakin varsin monipuolinen sovellus: LucidChart
• Esim. luokkakaavio löytyy file -> new -> from template -> hae: "UML class"

6. Muita online-piirtotyökaluja

• Online SVG-piirtotyökaluja
• Työkaluja kokeiltuna TIMissä

6.1 Draw SVG

• tuota voisi yrittää
• kun kuvan tallentaa SVG:nä sen voi ladata sellaisenaan TIMiin
• drawsvg