# timOhjeet

showImages

Mikäli halutaan näyttää useita vuorottelevia kuvia samassa paikassa, käytetään showImages-komponenttia. Komponentilla voidaan tehdä animaatiota, satunnaisen kuvan näyttämistä, päivittäin vaihtuvan kuvan näyttämisen jne.

Komponentin saa lisättyä editorin välilehdeltä Plugins kohdasta Image ja sieltä Images. Pyyhi lisäämisen jälkeen tarpeettomat attribuutit pois.

Kuvan alle tulostuu pallukoita, jotka näyttävät mikä kuva on menossa. Pallukoita klikkaamalla voi siirtyä suoraan haluttuun kuvaan. Kuvia voi vaihtaa myös nuolilla tai itse kuvaa klikkaamalla. Jos kuvaan on liitetty autoplay-arvo niin kuvia vaihdetaan automaattisesti annettuna aikavälinä. Jos automaattisen "soiton" aikana itse vaihdetaan kuvaa, niin automaattinen toisto loppuu. Se voidaan käynnistää uudestaan Runlinkistä.

1. Esimerkki

2. Attribuutit

``` {plugin="showImages"}
header: Komponentin otsikko
stem: Komponentin selitys
footer: Alaotsikko
width: 300
height: 100
autoplay: 1000
autostart: false
fade: false
repeat: true
random: true
texfile: https://www.w3schools.com/howto/img_nature_wide.jpg
files: 
  - name: https://www.w3schools.com/howto/img_nature_wide.jpg
    caption: Eka
  - https://www.w3schools.com/howto/img_snow_wide.jpg
  - name: https://www.w3schools.com/howto/img_mountains_wide.jpg
    caption: Kolmas
```

# maisema0

2.1 files

Attribuutilla files määritellään näytettävät kuvat. Muotona on YAML-taulukko tyyliin:

files: 
  - name: https://www.w3schools.com/howto/img_nature_wide.jpg
    caption: Eka
  - name: https://www.w3schools.com/howto/img_snow_wide.jpg
  - name: https://www.w3schools.com/howto/img_mountains_wide.jpg
    caption: Kolmas

Luettelon järjestys määrää kuvien näyttöjärjestyksen. Ala-attribuutti name määrää näytettävän kuvan nimen ja caption siihen liittyvän alaotsikon. caption voidaan jättää myös pois. Jos alaotsikoita ei tarvita lainkaan, voidaan käyttää myös muotoa, jossa on pelkkä kuvan osoite. Kun käytetään kaikkia oletuksia, on komponentin muoto lyhimmillään:

``` {plugin="showImages"}
files: 
  - https://www.w3schools.com/howto/img_nature_wide.jpg
  - https://www.w3schools.com/howto/img_snow_wide.jpg
  - https://www.w3schools.com/howto/img_mountains_wide.jpg
```

jolla saadaan seuraava "karuselli":

# nearFiles

2.2 noFlicker ja nearFiles

Jos komponenttiin kuuluu paljon kuvia, tulee suorituskykyongelmia, jos ne kaikki ladataan heti kerralla. Esimerkiksi jos olisi alempana olevan ohjeen mukaisesti isoja kuvia, joista valitaan mikä näytetään tässä kuussa, olisi turhaa ladata muita kuvia lainkaan. Toisaalta jos kuvia ei ladata valmiiksi, niin automaattisesti näytettävissä animaatioissa kuva välkkyisi, kun sitä vaihdetaan ja joudutaan lataamaan verkosta uusi kuva.

Attribuuteilla noflicker ja nearFiles säädetään tätä suorituskykyä. Jos laitetaan

noFlicker: true

niin kaikki kuvat ladataan etukäteen. Mikäli autorun > 0, on noFlicker automaattisesti päällä ja kaikki kuvat ladataan valmiiksi välkkymisen estämiseksi.

Jos autorun = 0 (oletus), niin silloin nearFiles=1, eli nykyisen kuvan ympäriltä ladataan valmiiksi yksi kuva, jotta eteen tai taaksepäin vaihtaminen menisi ilman väläystä. Usein tämä riittää. Toisaalta jos käyttäjälle ei edes anneta mahdollisuutta kuvan vaihtamiseen (change: false), niin silloin muiden kuvien lataaminen on turhaa ja nearFiles=0.

Usein nämä valmiit oletukset riittävät. Lähinnä niitä voi joutua muuttamaan, jos on paljon kuvia ja on todennäköistä että käyttäjä hyppää kuvien välillä pallukoita käyttäen mihin tahansa kuvaan seuraavaksi.

2.3 texfile

Koska tulostukseen ei voi tietenkään tulostaa animaatiota, niin tällä attribuutilla voidaan valita mikä kuva tulee TeX-tulostukseen.

Mikäli mitään kuvan osoitetta ei anneta, tulostetaan files-listan 1. kuva.

Mikäli tähän annetaan numero, tulostetaan files-listan niin mones kuva (0=viimeinen, 1= ensimmäinen jne).

Toinen tapa valita mitä tulostetaan TeXissä on käyttää texprint-attribuuttia.

3. Kuvien lataaminen

Kuvina voi käyttää valmiita kuvia, joihin on oikeus ja url-osoite.

Tai sitten kuvia voi ladata TIMiin useita kerralla. Kun kuvia ladataan kannattaa ensin kirjoittaa rivi

files:

ja sitten menee seuraavalle tyhjälle riville ja editorin Upload-välilehdellä valitsee Choose files. Käyttöjärjestelmästä riippuen useiden kuvien valinta vaihtelee. Joissakin voi klikkalla ladattavia kuvia yksi kerrallaan ja joissakin lisäksi esimerkiksi Shift-painiketta pohjassa pitämällä voi valita ensimmäisen ja viimeisen kuvan.

Kuvien järjestykseksi tulee yleensä niiden nimien aakkosjärjestys, mutta tarvittaessa järjestystä voi vaihtaa files-listassa lataamisen jälkeen.

Mikäli kuva on leikepöydällä, voidaan se pudottaa editorissa Paste-toiminnolla jos ollaan peruseditorissa ja ACE-editorissa paste image -laatikkoon.

# first

4. Kullekin viikonpäivälle oma kuva

Kun käytetään hyväksi makroja, voidaan saada oma kuva näkyville kullekin viikon päivälle.

Makro

%% "%w" | now %%

tuottaa viikonpäivän numeron (0=su, 6=la):

Tätä hyväksi käyttäen voidaan aloituskuvan numero laittaa

first: %% "%w" | now %%

Tässä käy niin, että koska su = 0, ja 0 tulkitaan first-attribuutissa viimeiseksi kuvaksi (kuvien numerointi alkaa 1), niin maanantaina näytetään ensimmäinen kuva, joten seitsemän kuvan listassa sunnuntain kuva pitäisi sijoittaa viimeiseksi.
Jos halutaan että sunnuntai on numerolla 1, voi laittaa makron eri tavalla:

first: %% "%w" | now | int + 1 %%

Eli muutetaan nykyisen viikon päivän arvo kokonaisluvuksi (int) ja sitten lisätään siihen yksi, jolloin su=1 ja la=7.

Mikäli kuvia ei ole tarpeeksi (ei ole 7 kpl tässä tapauksessa), niin silloin aloitetaan uusi kierros. Esimerkiksi muoto:

first: %% "%w" | now %%

tuottaisi kolmen kuvan listasta kuvia seuraavassa järjestyksessä:

ma   (1 -> kuva 1)
ti   (2 -> kuva 2)
ke   (3 -> kuva 3)
to   (4 -> kuva 1)
pe   (5 -> kuva 2)
la   (6 -> kuva 3)
su   (0 -> kuva 3)

Mikäli haluttaisiin kuukauden sisällä juoksevasti päivittäin vaihtuva kuva, voitaisiin käyttää muotoa:

first: %% "%-d" | now %%

tai vastaavasti vuoden sisällä:

first: %% "%-j" | now %%

Viikoittain vaihtuvan kuvan saisi:

first: %% "%W" | now %%

kuukausittain vaihtuvan

first: %% "%-m" | now %%

ja vuodenajoittain:

first: %% (("%-m" | now | int) %12  / 3) | int %%

jolloin olisi: 0=talvi, 1=kevät, 2=kesä, 3=syksy, eli talvikuva viimeiseksi.

Katso lisää päivämäärän muotoilujonoista: https://strftime.org/.

# rivinvaihto

Jos ei haluta, että käyttäjä tietää kuvanvaihtomahdollisuuksista tai ei edes voi vaihtaa kuvaa, kannattaa laittaa vielä ehkä attribuutit:

dots: false
change: false
counter: false

# dotsstyle

5. Pallukoiden ulkoasun muuttaminen

Mikäli kuvan alle ei haluta pallukoita, voidaan lisätä attribuutti:

dots: false

Jos kuvan alla olevien pallukoiden kokoa tai väriä halutaan muuttaa, voidaan se tehdä kaikille dokumentin pallukoille laittamalla dokumentin asetuksiin (ratas + Edit settings) esimerkiksi:

css: |!!
.showImages .imagesRunDiv .images-control span.dot  {
    height: 10px;
    width: 10px;
    background-color: #00d;
}
.showImages .imagesRunDiv .images-control span.active {
    background-color: #d00;
}
!!

Jos halutaan muuttaa vain yhden komponetin asetuksia, niin komponentiin voidaan antaa esittelyrivillä nimi tyyliin:

``` {plugin="showImages" #maisemat}

ja sitten asetusten tyyleissä viitataan tähän nimeen:

css: |!!
#maisemat  .dot {
    height: 10px;
    width: 10px;
    background-color: #00d;
}
#maisemat  .active {
    height: 10px;
    width: 10px;
    background-color: #d00;
}
!!

# maisemat

6. Nuolten ulkoasun muuttaminen

Jos selailunuolet ja esim kuvalaskuri halutaan kuvan ulkopuolelle, voi dokumentin asetuksiin lisätä esimerkiksi:

.showImages .imagesRunDiv .images-container a.prev {
    left: -2em;
    color: unset;
}
.showImages .imagesRunDiv .images-container a.next {
    right: -2em;
    color: unset;
}
.showImages .imagesRunDiv .images-container div.numbertext {
    top: -2em;
    color: unset;
}
.showImages .imagesRunDiv .images-container a.prev:hover, .showImages .imagesRunDiv .images-container a.next:hover {
  background-color: unset;
}

Valmiiksi tehdyt tyylit ja niiden nimet löytyvät tiedostoista:

7. Tulevia suunitelmia

komponenttien synkronointi niin, että jos yhdessä vaihtaa kuvaa, niin muissa yhteen liitetyissä vaihtuu myös kuva