OPPITUNTI 14 Dynaamisten kuvien käsittely
|
|
- Kalle Lehtinen
- 6 vuotta sitten
- Katselukertoja:
Transkriptio
1 14. Dynaamisten kuvien käsittely 249 OPPITUNTI 14 Dynaamisten kuvien käsittely Tässä luvussa käsiteltävät funktiot liittyvät avoimeen lähdekirjastoon nimeltä GD. GD-kirjasto on joukko työkaluja, joiden avulla ohjelmoijat voivat luoda ja käsitellä kuvia lennosta. Saat lisätietoa GD-kohteesta osoitteesta Jos järjestelmääsi on asennettu GD-kirjasto ja PHP on käännetty käyttämään sitä, voit käyttää PHP:n kuvafunktioita luodaksesi dynaamisia kuvia. Monissa järjestelmissä on edelleen käytössä vanhempi kirjastoversio, jonka avulla voidaan luodaan GIF-kuvia. Myöhemmät versiot eivät tue GIF-muotoa lisenssisyistä. Jos järjestelmäsi käyttää myöhempää kirjastoa, on mahdollista kääntää PHP niin, että kuvafunktiot tuottavat PNG-kuvia, joita useimmat selaimet tukevat. Jos käytössäsi on GD-kirjasto, voit käyttää PHP:n kuvafunktioita luodaksesi kehittynyttä grafiikkaa ajon aikana. Tämän tunnin aiheita ovat seuraavat: Kuinka luot ja tulostat kuvan Kuinka käsittelet värejä Kuinka piirrät kuvioita (esimerkiksi kaaria, suorakaiteita ja monikulmioita) Kuinka täytät alueita väreillä Kuinka käsittelet True Type fontteja
2 Dynaamisten kuvien käsittely Kuvien luominen ja tulostaminen Ennen kuin aloitat kuvien käsittelyn, sinun on saatava kuvan tunniste. Voit saada sen käyttämällä imagecreate()-funktiota. Se ottaa kaksi argumenttia, kuvan korkeuden ja leveyden. Se palauttaa kuvan tunnisteen, jota voit käyttää useimmissa tämän luvun funktioissa. Kun olet saanut kuvan tunnisteen, olet melkein valmis tulostamaan ensimmäisen kuvasi selaimelle. Se tehdään imagegif()-funktiolla, joka ottaa argumentikseen kuvan tunnisteen. Listaus 14.1 käyttää näitä funktioita luodakseen ja tulostaakseen kuvan. Listaus 14.1 Dynaamisesti luotu kuva 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: imagegif($image); 5:?> Huomaa, että lähetimme Content-type-otsikon selaimelle ennen muita toimintoja. Meidän on kerrottava selaimelle, millaista tietoa sen tulee odottaa; muutoin se käsittelee skriptin tulostamaa tietoa HTML-koodina. Tätä skriptiä voidaan nyt kutsua suoraan selaimen toimesta tai se voi olla osana IMG-elementtiä. <img src="eg14.1.php" alt="a PHP generated image"> Kuva 14.1 esittää listauksen 14.1 tulostuksen. KUVA 14.1 Dynaamisesti luotu kuva. Olemme luoneet neliön, mutta emme ole vielä puuttuneet sen väriin.
3 14. Dynaamisten kuvien käsittely 251 Värin toteuttaminen Värin käsittelyssä tarvitaan ensimmäiseksi värin tunniste. Se saadaan imagecolorallocate()-funktiolla, joka ottaa argumenteikseen kuvan tunnisteen sekä kolme kokonaislukua, jotka ovat väliltä ja jotka kuvaavat punaisen, vihreän ja sinisen värikomponentin osuutta. Funktio palauttaa väritunnisteen, jolla voidaan määrittää kuvioiden, tekstin tai täytön väri. $red = imagecolorallocate($image, 255,0,0); Sattumalta imagecolorallocate()-funktio asettaa ensimmäisen kutsun yhteydessä generoidun värin kuvan oletusväriksi, joten jos lisäämme yllä olevan koodin listaukseen 14.1, saamme aikaan punaisen neliön. Viivojen piirtäminen Ennen kuin piirrät viivan kuvaan, sinun on määritettävä viivan alku- ja loppupisteet. Voit pitää kuvaa pikselilohkona, jossa pikselit alkavat indeksistä 0. Origo on kuvan vasemmassa yläkulmassa. Toisin sanoen esimerkiksi koordinaatit 5, 8 kuvaavat kuudennetta pikselia oikealle ja yhdeksännettä pikseliä alaspäin. Funktio imageline() piirtää viivan kahden pikselipaikan väliin. Se ottaa argumenteikseen kuvatunnisteen ja neljä kokonaislukua, jotka kuvaavat alku- ja loppupisteen koordinaatteja, sekä väritunnisteen. Listaus 14.2 lisää listauksen 14.1 kuvaan viivan, joka kulkee kulmasta kulmaan. Listaus 14.2 Viivan piirtäminen imageline()-funktiolla 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: $red = imagecolorallocate($image, 255,0,0); 5: $blue = imagecolorallocate($image, 0,0,255 ); 6: imageline( $image, 0, 0, 199, 199, $blue ); 7: imagegif($image); 8:?> Toteutamme nyt kaksi väritunnistetta, yhden punaiselle ja yhden siniselle värille. Sitten käytämme muuttujaan $blue tallennettua viivan väriä. Huomaa, että viiva päättyy koordinaatteihin 199, 199 eikä 200, 200. Muista, että indeksointi alkaa nollasta. Kuva 14.2 esittää listauksen 14.2 tulostuksen.
4 Dynaamisten kuvien käsittely KUVA 14.2 Viivan piirtäminen imageline()- funktiolla. Värillä täyttäminen Voit täyttää alueen värillä PHP:n avulla aivan samalla lailla kuin grafiikkasovelluksellasi. Funktio imagefill() ottaa argumentikseen kuvatunnisteen, täytön alkukoordinaatit ja väritunnisteen. Sitten funktio muuttaa kaikki pikselit annetun värin mukaisiksi. Listaus 14.3 lisää edelliseen listaukseen imagefill()- kutsun; nyt kuvasta tulee jännittävämpi. Listaus 14.3 Värillä täyttäminen imagefill()-funktiolla 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: $red = imagecolorallocate($image, 255,0,0); 5: $blue = imagecolorallocate($image, 0,0,255 ); 6: imageline( $image, 0, 0, 199, 199, $blue ); 7: imagefill( $image, 0, 199, $blue ); 8: imagegif($image); 9:?> Kuva 14.3 esittää listauksen 14.3 tulostuksen.
5 14. Dynaamisten kuvien käsittely 253 KUVA 14.3 Funktion imagefill() käyttö. Kaaren piirtäminen Voit lisätä osittaisen tai kokonaisen kaaren kuviisi imagearc()-funktiolla. Se ottaa argumenteikseen kuvatunnisteen, keskipisteen koordinaatit, leveyden ja korkeuden (kokonaislukuina), alku- ja loppupisteet (asteina) ja väritunnisteen. Kaaret piirretään myötäpäivään alkaen kello kolmesta. Seuraava koodi piirtää neljännesympyrän: imagearc( $image, 99, 99, 200, 200, 0, 90, $blue ); Kyseessä on osittainen kaari, jonka keskipiste on 99, 99. Korkeus ja leveys ovat 200 pikseliä. Piirtäminen alkaa kohdasta kello 3 ja jatkuu siitä myötäpäivään 90 astetta (kello 6:een). Listaus 14.4 piirtää kokonaisen ympyrän ja täyttää sen sinisellä värillä. Listaus 14.4 Ympyrän piirtäminen imagearc()-funktiolla 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: $red = imagecolorallocate($image, 255,0,0); 5: $blue = imagecolorallocate($image, 0,0,255 ); 6: imagearc( $image, 99, 99, 180, 180, 0, 360, $blue ); 7: imagefill( $image, 99, 99, $blue ); 8: imagegif($image); 9:?> Kuva 14.4 esittää listauksen 14.4 tulostuksen.
6 Dynaamisten kuvien käsittely KUVA 14.4 Ympyrän piirtäminen imagearc()-funktiolla. Suorakaiteen piirtäminen Voit piirtää suorakaiteen PHP:llä käyttäen imagerectangle()-funktiota. Se ottaa argumenteikseen kuvatunnisteen, suorakaiteen vasemman ylänurkan koordinaatit, oikean alanurkan koordinaatit sekä väritunnisteen. Seuraava koodi piirtää suorakaiteen, jonka vasemman ylänurkan koordinaatit ovat 19, 19 ja oikean alanurkan koordinaatit 179, 179: imagerectangle( $image, 19, 19, 179, 179, $blue ); Sitten alue voidaan täyttää imagefill()-funktion avulla. Koska kyseessä on yleinen toimenpide, PHP tarjoaa käyttöön funktion imagefilledrectangle(), joka ottaa täsmälleen samat argumentit kuin imagerectangle()-funktio, mutta tuottaa suorakaiteen, joka on täytetty halutulla värillä. Listaus 14.5 luo täytetyn suorakaiteen ja tulostaa kuvan selaimelle. Listaus 14.5 Täytetyn suorakaiteen piirtäminen imagefilledrectangle()-funktiolla 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: $red = imagecolorallocate($image, 255,0,0); 5: $blue = imagecolorallocate($image, 0,0,255 ); 6: imagefilledrectangle( $image, 19, 19, 179, 179, $blue ); 7: imagegif( $image ); 8:?> Kuva 14.5 esittää listauksen 14.5 tulostuksen.
7 14. Dynaamisten kuvien käsittely 255 KUVA 14.5 Täytetyn suorakaiteen piirtäminen imagefilledrectangle()- funktiolla. Monikulmion piirtäminen Voit piirtää kehittyneempiä kuvioita imagepolygon()-funktiolla. Se ottaa argumenteikseen kuvatunnisteen, taulukon, joka sisältää pisteiden koordinaatit, pisteiden lukumäärän sekä väritunnisteen. Taulukon tulee olla numeerisesti indeksoitu. Ensimmäiset kaksi elementtiä antavat ensimmäisen pisteen koordinaatit, seuraavat kaksi toisen pisteen koordinaatit jne. Funktio piirtää viivan pisteiden väliin ja yhdistää lopuksi viimeisen ja ensimmäisen pisteen. Voit luoda täytetyn monikulmion imagefilledrectangle()-funktiolla. Listaus 14.6 piirtää täytetyn monikulmion ja esittää sen selainikkunassa. Listaus 14.6 Monikulmion piirtäminen imagefilledpolygon()-funktiolla 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: $red = imagecolorallocate($image, 255,0,0); 5: $blue = imagecolorallocate($image, 0,0,255 ); 6: $points = array ( 10, 10, 7: 190, 190, 8: 190, 10, 9: 10, : ); 11: imagefilledpolygon( $image, $points, count( $points )/2, $blue ); 12: imagegif($image); 13:?>
8 Dynaamisten kuvien käsittely Huomaa, että voidaksemme kertoa imagefilledpolygon()-funktiolle, kuinka monta pistettä haluamme yhdistää, laskimme alkioiden määrän $points-taulukosta ja jaoimme tuloksen kahdella. Kuva 14.6 esittää listauksen 14.6 tuloksen. KUVA 14.6 Monikulmion piirtäminen imagefilledpolygon()- funktiolla. Värin tekeminen läpinäkyväksi PHP mahdollistaa valittujen värien tekemisen läpinäkyviksi funktiolla imagecolortransparent(). Funktio ottaa argumenteikseen kuvatunnisteen ja väritunnisteen. Kun tulostat kuvan selaimelle, funktiolle viety väri näkyy läpi. Listaus 14.7 muuttaa monikulmiokoodiamme niin, että kuvio "kelluu" selaimelle sen sijaan, että se "makaisi" taustavärin päällä. Listaus 14.7 Värien tekeminen läpinäkyviksi imagecolortransparent()-funktiolla 2: header("content-type: image/gif"); 3: 4: $image = imagecreate( 200, 200 ); 5: $red = imagecolorallocate($image, 255,0,0); 6: $blue = imagecolorallocate($image, 0,0,255 ); 7: 8: $points = array ( 10, 10, 9: 190, 190, 10: 190, 10, 11: 10, : ); 13: 14: imagefilledpolygon( $image, $points, count( $points )/2, $blue );
9 14. Dynaamisten kuvien käsittely : imagecolortransparent( $image, $red ); 16: imagegif($image); 17:?> Kuva 14.7 esittää listauksen 14.7 tulostuksen. KUVA 14.7 Värien tekeminen läpinäkyviksi imagecolortransparent( ) -funktiolla. Tekstin käsittely Jos järjestelmässäsi on käytettävissä TrueType-fontteja, voit käyttää niitä kirjoittaessasi tekstiä kuviisi. GDkirjaston lisäksi sinulla tulee olla käytössäsi FreeType-kirjasto. Jos molemmat resurssit ovat käytössäsi, voit luoda kuvapohjaisia kaavioita tai navigointielementtejä. PHP tarjoaa lisäksi käyttöösi työkalun, jolla voit tarkistaa, että kohdeteksti mahtuu annettuun tilaan. Merkkijonon kirjoittaminen imagettftext()-funktiolla Voit kirjoittaa tekstiä kuviisi imagettftext()-funktiolla. Se ottaa kahdeksan argumenttia: kuvatunnisteen, kirjoitettavien merkkien korkeuden, kulman, alkukoordinaatit (x ja y), väritunnisteen, polun TrueTypefonttitiedostoon ja kirjoitettavan tekstin. Alkupiste määrää, mikä on merkkijonon ensimmäisen merkin perustaso. Listaus 14.8 kirjoittaa merkkijonon kuvaan ja tulostaa tuloksen selaimelle. Listaus 14.8 Merkkijonon kirjoittaminen imagettftext()-funktiolla 2: header("content-type: image/gif"); 3: 4: $image = imagecreate( 400, 200 ); 5: $red = imagecolorallocate($image, 255,0,0);
10 Dynaamisten kuvien käsittely 6: $blue = imagecolorallocate($image, 0,0,255 ); 7: $font = "/usr/local/jdk121_pre-v1/jre/lib/fonts/lucidasansregular.ttf"; 8: 9: imagettftext( $image, 50, 0, 20, 100, $blue, $font, "Welcome!" ); 10: 11: imagegif($image); 12:?> Luomme kanvaasin, jonka leveys on 400 pikseliä ja korkeus 200 pikseliä. Määrittelemme kaksi väriä ja tallennamme polun TrueType-fonttiin muuttujaan nimeltä $font. Huomaa, että fonttitiedostot tallennetaan todennäköisesti palvelimesi eri kansioon. Jos et ole varma, missä.ttf-tiedostot ovat, koeta hakutoimintoa. Ohjelma kirjoittaa sitten tekstin Welcome! kuvaan. Funktion imagettftext() kutsussa määrittelemme argumenteiksi koon 50, kulman 0, alkupisteen 20, 100 sekä väritunnisteen, joka on muuttujassa $blue, fonttipolun, joka on muuttujassa $font sekä tietenkin kirjoitettavan tekstin. Tulos näkyy kuvassa KUVA 14.8 Tekstin kirjoittaminen imagettftext()- funktiolla. Meidän on tietenkin arvattava, mihin teksti laitetaan kyseisellä hetkellä. Funktion kokoargumentti ei anna tarkkaa kuvaa tekstin korkeudesta ja leveydestä. Itse asiassa funktio palauttaa kokotiedot, mutta vasta tulostuksen jälkeen. Onneksi PHP:ssä on funktio, joka mahdollistaa koon määrittämisen. Tekstikoon testaaminen imagettfbox()-funktiolla Tekstin koko saadaan selville imagettfbox()-funktiolla. Sen nimi kuvaa sitä, että funktio palauttaa tekstiä rajaavan suorakaiteen. Funktio ottaa argumenteikseen fonttikoon, kulman, polun fonttitiedostoon ja kirjoitettavan tekstin. Kyseessä on yksi niistä harvoista kuvafunktioista, jotka eivät ota argumentikseen kuvatunnistetta. Funktio palauttaa 8-alkioisen taulukon, jonka arvot on selitetty taulukossa 14.1.
11 14. Dynaamisten kuvien käsittely 259 Taulukko 14.1 Funktion imagettfbox() palauttama taulukko Indeksi Alkion tarkoitus 0 Vasen alanurkka, x-koordinaatti 1 Vasen alanurkka, y-koordinaatti 2 Oikea alanurkka, x-koordinaatti 3 Oikea alanurkka, y-koordinaatti 4 Oikea ylänurkka, x-koordinaatti 5 Oikea ylänurkka, y-koordinaatti 6 Vasen ylänurkka, x-koordinaatti 7 Vasen ylänurkka, y-koordinaatti Kaikki kuviot pystysuoralla akselilla ovat suhteessa tekstin peruslinjaan, joka on 0. Peruslinjan yläpuolella olevien kuvioiden y-koordinaattiarvot ovat siten negatiivisia, ja alapuolella olevien kuvioiden koordinaattiarvot kertovat etäisyyden pikseleissä suhteessa peruslinjaan positiivisina arvoina. Jos testaat imagettfbbox()-funktiolla merkkijonoa, joka sisältää esimerkiksi merkin y, palautettava taulukossa saattaa olla arvo 3 elementissä 1, koska merkin y häntä valuu 3 pikseliä peruslinjan alapuolelle. Taulukossa saattaa olla arvo 10 elementissä 7, koska teksti nousee 10 pikseliä peruslinjan yläpuolelle. Tehdäksemme asiat vielä vaikeammiksi, näyttää siltä, että funktion palauttaman peruslinjan ja näkyvän peruslinjan (kun teksti kirjoitetaan) välissä on kahden pikselin rako. Sinun on nyt tehtävä mielessäsi sovittelua ajattelemalla, että peruslinjan korkeus on kaksi pikseliä suurempi kuin funktion palauttaman peruslinjan korkeus. Vaakasuoralla akselilla funktio ottaa huomioon ennen alkupistettä alkavan tekstin niin, että elementeissä 6 ja 0 on siirtymä negatiivisena arvona. Kyseessä on yleensä pieni arvo, jonka huomioon ottaminen riippuu työsi tarkkuudesta. Voit käyttää funktion palauttamaan informaatiota tekstin asetteluun kuvassa. Listaus 14.9 luo skriptin, joka tulostaa dynaamisesti tekstin ja keskittää sen kuvaan sekä vaakasuunnassa että pystysuunnassa. Listaus 14.9 Tekstin asetteleminen kiinteään tilaan imagettfbbox()-funktiolla 2: header("content-type: image/gif"); 3: $height = 100; 4: $width = 200; 5: $fontsize = 50; 6: if (! isset ( $text ) ) 7: $text = "Change me!"; 8: $image = imagecreate( $width, $height ); 9: $red = imagecolorallocate($image, 255,0,0); 10: $blue = imagecolorallocate($image, 0,0,255 ); 11: $font = "/usr/local/jdk121_pre-v1/jre/lib/fonts/lucidasansregular.ttf"; 12: $textwidth = $width; 13: $textheight;
12 Dynaamisten kuvien käsittely 14: while ( 1 ) 15: { 16: $box = imagettfbbox( $fontsize, 0, $font, $text ); 17: $textwidth = abs( $box[2] ); 18: $textbodyheight = ( abs($box[7]) )-2; 19: if ( $textwidth < $width - 20 ) 20: break; 21: $fontsize--; 22: } 23: $gifxcenter = (int) ( $width/2 ); 24: $gifycenter = (int) ( $height/2 ); 25: imagettftext( $image, $fontsize, 0, 26: (int) ($gifxcenter-($textwidth/2)), 27: (int) ($gifycenter+(($textbodyheight)/2) ), 28: $blue, $font, $text ); 29: imagegif($image); 30:?> Tallennamme kuvan korkeuden ja leveyden muuttujiin $height ja $width ja asetamme fontin oletuskooksi 50. Testaamme muuttujien $text olemassaolon asettaen oletusarvon, jos muuttuja ei ole läsnä. Tällä tavoin kuva voi ottaa vastaan tietoa Web-sivulta joko kuvan URL:n tai lomakkeen lähettämiseen liittyvästä kyselymerkkijonosta. Käytämme imagecreate()-funktiota kuvatunnisteen hankkimiseen. Väritunnisteet saamme tavallisella tavalla ja tallennamme polun TrueType-tiedostoon muuttujaan $font. Haluamme sovittaa $text-muuttujaan tallennetun merkkijonon käytettävissä olevaan tilaan, mutta emme vielä tiedä, onnistuuko se. Koodin while-silmukassa viemme fonttipolun ja merkkijonon imagettfbbox()- funktiolle ja tallennamme palautetun taulukon $box-muuttujaan. Elementti $box[2] sisältää oikean alakulman x-koordinaatin. Käytämme arvoa merkkijonon leveytenä ja tallennamme sen muuttujaan $textwidth. Haluamme keskittää tekstin pystysuunnassa, mutta ottaen huomioon vain tekstin peruslinjan yläpuolella olevan alueen. Voimme käyttää elementin $box[7] absoluuttista arvoa hakemaan peruslinjan yläpuolella olevan tekstin korkeuden, vaikkakin meidän on säädettävä sitä kahdella pikselillä. Tallennamme arvon muuttujaan $textbodyheight. Kun olemme nyt saaneet selville tekstin leveyden, voimme verrata sitä kuvan leveyteen (josta vähennetään kehyksen osuus, 10 pikseliä). Jos teksti on pienempi kuin käyttämämme kanvaasin leveys, lopetamme silmukan. Muutoin pienennämme fontin kokoa ja yritämme uudelleen. Jakamalla muuttujien $height ja $width arvot kahdella, voimme löytää kuvan keskipisteen. Kirjoitamme tekstin kuvaan käyttämällä aiemmin laskemaamme kuvan keskipistettä tekstin korkeuden yhteydessä ja kuvan leveyttä siirtymän yhteydessä. Lopuksi piirrämme kuvan selaimelle. Kuva 14.9 esittää listauksen 14.9 tulostuksen. Tätä koodia voidaan nyt kutsua toiselta sivulta IMG-elementin yhteydessä. Seuraava koodi laittaisi käyttäjän oman merkkijonon kuvan keskelle:
13 14. Dynaamisten kuvien käsittely 261 2: if (! isset( $text ) ) 3: $text = "Dynamic text!"; 4:?> 5: <form action="<? print $PHP_SELF?>" method="post"> 6: <input type="text" name="text"> 7: </form> 8: <p> 9: <img src="eg14.9.php?<? print "text=".urlencode($text)?>"> Kun kutsumme listauksen 14.9 skriptiä, lisäämme kyselymerkkijonon, joka sisältää kuvaan lisättävän tekstin. Saat lisätietoa tästä tekniikasta, jolla tietoa viedään skriptiltä toiselle, luvusta 19, Tilan tallentaminen evästeillä ja kyselymerkkijonoilla. KUVA 14.9 Tekstin asetteleminen kiinteään tilaan imagettfbbox()- funktiolla. Kaikki yhdessä Muodostakaamme nyt esimerkki, joka käyttää joitakin funktioita, joita olemme tutkineet tällä tunnilla. Olettakaamme, että meitä on pyydetty tekemään dynaaminen palkkikaavio, joka esittää otsikoituja numeroarvoja. Palkkikaavion tulee sisältää sopivat otsikot, jotka tulevat jokaisen palkin alapuolelle. Asiakkaamme tulee kyetä muuttamaan pylväiden arvoja, kuvan korkeutta ja leveyttä sekä kaavion kehysviivan paksuutta. Pylväskaaviolla kuvataan kuluttajien äänien jakautumista ja riittää, kun se anraa nopeasti yleiskuvan tilanteesta. Tarkempi tiedon esittäminen voidaan hoitaa sivun HTML-osassa. Helpoin keino tallentaa otsikoita ja arvoja on käyttää assosiatiivista taulukkoa. Kun taulukko on valmis, voimme laskea pylväiden määrän sekä suurimman arvon:
14 Dynaamisten kuvien käsittely $cells = array ( liked=>200, hated=>400, indifferent=>900 ); $max = max( $cells ); $total = count ( $cells ); Meidän tulee asettaa joitakin muuttujia, joiden avulla asiakkaat voivat tehdä muutoksia kuvaan: $totalwidth = 400; $totalheight = 200; $xgutter = 20; // vasen/oikea-reunus $ygutter = 20; // ylä/ala-reunus $internalgap = 5; // solujen välinen tila $bottomspace = 40; // tyhjä tila alhaalla $font = "/usr/local/jdk121_pre-v1/jre/lib/fonts/lucidasansregular.ttf"; Asiakas voi muuttaa muuttujia, jotka määrittelevät kuvan korkeuden ja leveyden. Muuttujat $xgutter ja $ygutter määrittävät kaavion vaakasuuntaisen ja pystysuuntaisen marginaalin. Muuttuja $internalgap määrittää pylväiden välisen tilan. Muuttuja $bottomspace määrittää pylvään otsikon ja näytön alareunan välisen tyhjän tilan. Kun arvot on nyt saatu, voimme tehdä joitakin hyödyllisiä laskentoja ja laittaa tulokset muuttujiin: $graphcanx = ( $totalwidth - $xgutter*2 ); $graphcany = ( $totalheight - $ygutter*2 - $bottomspace ); $posx = $xgutter; // aloitetaan piirto paikasta x $posy = $totalheight - $ygutter - $bottomspace; // aloitetaan piirto paikasta y $cellwidth = (int) (( $graphcanx - ( $internalgap * ( $total-1 ) )) / $total) ; $textsize = (int)($bottomspace); Laskemme graafin kanvaasin (tilan, johon pylväät piirretään). Vaaka-akselilla leveys on kokonaisleveys - kaksi kertaa marginaalien koko. Pystyakselilla meidän on otettava huomioon $bottomspace-muuttuja, jotta otsikoille jäisi tilaa. Muuttuja $posx tallentaa x-koordinaatin pisteelle, josta pylväiden piirtäminen aloitetaan, joten asetamme sen arvoksi $xgutter-muuttujan arvon. Muuttujassa on nimenomaan marginaalin arvo. Muuttuja $posy tallentaa pylväiden alapisteen; se on sama kuin kuvan kokonaiskorkeus, josta vähennetään marginaali ja otsikoille muuttujassa $bottomheight varattu tila. Muuttuja $cellwidth sisältää pylvään leveyden. Arvo saadaan laskemalla pylväiden välisen tilan kokonaismäärä, joka vähennetään sitten kaavion leveydestä ja tulos jaetaan pylväiden lukumäärällä.
15 14. Dynaamisten kuvien käsittely 263 Alustavasti asetamme tekstin kooksi saman kuin otsikkoteksteille tuleva korkeus (joka on tallennettuna $bottomspace-muuttujassa). Ennen kuin luomme kuvan ja aloitamme sen käsittelyn, meidän tulee määritää tekstin koko. Ongelmamme on se, että emme tiedä, kuinka pitkiä otsikot ovat ja haluamme varmistaa, että kukin otsikko sopii siihen tilaan, jonka pylvään leveys määrittää. Käymme silmukassa läpi $cells-taulukon laskeaksemme käyttämämme tekstin maksimileveyden: while ( list( $key, $val ) = each ( $cells ) ) { while ( 1 ) { $box = ImageTTFbBox( $textsize, 0, $font, $key ); $textwidth = $box[2]; if ( $textwidth < $cellwidth ) break; $textsize--; } } Kunkin elementin kohdalla aloitamme silmukan ja sieppaamme otsikon mittatiedot käyttämällä imagettfbbox()-funktiota. Sijoitamme tekstin leveyden $box[2]-elementtiin ja vertaamme sitä $cellwidthmuuttujaan, joka sisältää yksittäisen pylvään leveyden. Katkaisemme sitten silmukan, jos teksti on pienempi kuin pylvään leveys; muutoin pienennämme $textsize-muuttujan arvoa ja yritämme uudelleen. Muuttuja $textsize kutistuu, kunnes jokainen otsikko mahtuu pylvään leveyden määrittämälle alueelle. Lopulta voimme luoda kuvatunnisteen ja aloittaa kuvan käsittelyn: $image = imagecreate( $totalwidth, $totalheight ); $red = ImageColorAllocate($image, 255, 0, 0); $blue = ImageColorAllocate($image, 0, 0, 255 ); $black = ImageColorAllocate($image, 0, 0, 0 ); reset ($cells); while ( list( $key, $val ) = each ( $cells ) ) { $cellheight = (int) (($val/$max) * $graphcany); $center = (int)($posx+($cellwidth/2)); imagefilledrectangle( $image, $posx, ($posy-$cellheight), $posx+$cellwidth), $posy, $blue );
16 Dynaamisten kuvien käsittely $box = ImageTTFbBox( $textsize, 0, $font, $key ); $tw = $box[2]; ImageTTFText( $image, $textsize, 0, ($center-($tw/2)), ($totalheight-$ygutter), $black, $font, $key ); $posx += ( $cellwidth + $internalgap); } imagegif( $image ); Aloitamme luomalla kuvatunnisteen imagecreate()-funktiolla ja allokoimme joitakin värejä. Jälleen kerran käymme silmukassa läpi $cells-taulukkomme. Laskemme pylvään korkeuden ja tallennamme tuloksen $cellheight-muuttujaan. Laskemme pylvään keskipisteen (x-akselilla), joka on $posx + puolet pylvään leveydestä. Piirrämme pylvään käyttäen imagefilledrectangle()-funktiota ja muuttujia $posx, $posy, $cellheight ja $cellwidth. Tekstin asetteluun tarvitsemme uudelleen imagettfbbox()-funktiota ja tallennamme sen palauttaman taulukon $box-muuttujaan. Käytämme $box[2]-elementtiä työleveytenä ja sijoitamme sen tilapäismuuttujaan $tw. Nyt meillä on tarpeeksi tietoa otsikon kirjoittamiseen. Johdamme x-sijaintimme vähentämällä muuttujasta $center puolet tekstin leveydestä ja y-sijaintimme vähentämällä kuvan korkeudesta marginaalin. Kasvatamme $posx-arvoa työskennelläksemme seuraavalla pylväällä. Lopuksi tulostamme kuvan. Koko koodi on listauksessa ja näytetulostus kuvassa Listaus Dynaaminen pylväskaavio 2: header("content-type: image/gif"); 3: $cells = array ( liked=>200, hated=>400, indifferent=>900 ); 4: $max = max( $cells ); 5: $total = count ( $cells ); 6: $totalwidth = 300; 7: $totalheight = 200; 8: $xgutter = 20; // vasen/oikea-reunus 9: $ygutter = 20; // ylä/ala-reunus 10: $internalgap = 10; // solujen välinen tila 11: $bottomspace = 30; // alareunan tyhjä lisätila 12: $font = "/usr/local/jdk121_pre-v1/jre/lib/fonts/lucidasansregular.ttf"; 13: $graphcanx = ( $totalwidth - $xgutter*2 );
17 14. Dynaamisten kuvien käsittely : $graphcany = ( $totalheight - $ygutter*2 - $bottomspace );// aloitetaan piirto paikasta x 15: $posx = $xgutter; // aloitetaan piirto paikasta y 16: $posy = $totalheight - $ygutter - $bottomspace; 17: $cellwidth = (int) (( $graphcanx - ( $internalgap * ( $total-1 ) )) / $total) ; 18: $textsize = (int)($bottomspace); 19: // säädä fonttikoko 20: while ( list( $key, $val ) = each ( $cells ) ) 21: { 22: while ( 1 ) 23: { 24: $box = ImageTTFbBox( $textsize, 0, $font, $key ); 25: $textwidth = abs( $box[2] ); 26: if ( $textwidth < $cellwidth ) 27: break; 28: $textsize--; 29: } 30: } 31: $image = imagecreate( $totalwidth, $totalheight ); 32: $red = ImageColorAllocate($image, 255, 0, 0); 33: $blue = ImageColorAllocate($image, 0, 0, 255 ); 34: $black = ImageColorAllocate($image, 0, 0, 0 ); 35: $grey = ImageColorAllocate($image, 100, 100, 100 ); 36: reset ($cells); 37: while ( list( $key, $val ) = each ( $cells ) ) 38: { 39: $cellheight = (int) (($val/$max) * $graphcany); 40: $center = (int)($posx+($cellwidth/2)); 41: imagefilledrectangle( $image, $posx, ($posy-$cellheight), ($posx+$cell width), $posy, $blue ); 42: $box = ImageTTFbBox( $textsize, 0, $font, $key ); 43: $tw = $box[2];
18 Dynaamisten kuvien käsittely 44: ImageTTFText( $image, $textsize, 0, ($center-($tw/2)), 45: ($totalheight-$ygutter), $black, $font, $key ); 46: $posx += ( $cellwidth + $internalgap); 47: } 48: imagegif( $image ); 49:?> Kuva Dynaaminen pylväskaavio. Yhteenveto PHP:n tuki GD-kirjastolle mahdollistaa dynaamisten kaavioiden ja navigointielementtien luomisen suhteellisen helposti. Tällä tunnilla opit käyttämään imagecreate()- ja imagegif()-funktioita luodaksesi ja tulostaaksesi kuvia. Opit myös värikoodien luomisen imagecolorallocate()-funktiolla ja värillä täyttämisen imagefill()- funktiolla. Opit käyttämään viiva- ja kuviofunktioita kehysten ja täytettyjen kuvioiden luomiseen. Sait myös tietoa siitä, kuinka PHP:n avulla voidaan ottaa käyttöön FreeType-kirjasto, jolla voidaan käsitellä TrueTypefontteja. Teimme aiheesta esimerkin, jossa teksti kirjoitettiin kuvaan. Luvun lopussa sait työskennellä pylväskaavioesimerkin kanssa; siinä käytettiin useita aiemmin esille tuotuja tekniikoita. K&V K Miten dynaamisten kuvien käyttäminen vaikuttaa suorituskykyyn? V Dynaamisesti luotu kuva latautuu selaimelle hitaammin kuin jo olemassa oleva kuva. Riippuen skriptisi tehokkuudesta ei vaikutusta yleensä juuri huomaa; dynaamisia kuvia kannattaa kuitenkin käyttää säästeliäästi.
19 14. Dynaamisten kuvien käsittely 267 Työpaja Työpaja tarjoaa pikakysymyksiä, joiden avulla voit kerrata läpikäytyä materiaalia. Yritä ymmärtää vastaukset ennen kuin jatkat seuraavaan lukuun. Vastaukset annetaan liitteessä A. Kysymyksiä 1. Mikä otsikko pitäisi lähettää selaimelle ennen GIF-kuvan kehittämistä ja tulostamista? 2. Mitä funktiota pitäisi käyttää kuvatunnisteen saamiseksi muita kuvafunktioita varten? 3. Mitä funktiota pitäisi käyttää GIF-kuvan tulostamiseen sen muodostamisen jälkeen? 4. Mitä funktiota pitäisi käyttää väritunnisteen saamiseen? 5. Mitä funktiota voidaan käyttää viivan piirtämiseen dynaamiseen kuvaan? 6. Mitä funktiota pitäisi käyttää dynaamisessa kuvassa olevan alueen täyttämiseen? 7. Mitä funktiota voidaan käyttää kaaren piirtämiseen? 8. Kuinka piirtäisit suorakaiteen? 9. Kuinka piirtäisit monikulmion? 10. Mitä funktiota käyttäisit kirjoittamaan merkkijonon dynaamiseen kuvaan (hyödyntämällä FreeTypekirjastoa)? Toiminta 1. Kirjoita skripti, joka luo edistymispalkkina (esimerkiksi kertoo rahaston sijoitusten tilanteen). 2. Kirjoita skripti, joka kirjoittaa otsikkokuvan, joka perustuu käyttäjän lomakkeella antamaan tietoon tai kyselymerkkijonoon. Salli käyttäjän antaa myös kanvaasin koko, tausta- ja edustavärit sekä varjostus.
20 Dynaamisten kuvien käsittely
Kuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
LisätiedotDatatähti 2019 loppu
Datatähti 2019 loppu task type time limit memory limit A Summa standard 1.00 s 512 MB B Bittijono standard 1.00 s 512 MB C Auringonlasku standard 1.00 s 512 MB D Binääripuu standard 1.00 s 512 MB E Funktio
LisätiedotTAULUKOINTI. Word Taulukot
Word 2013 Taulukot TAULUKOINTI TAULUKOINTI... 1 Taulukon tekeminen... 1 Solusta toiseen siirtyminen... 1 Solun tyhjentäminen... 2 Taulukon Layout (Asettelu) välilehti... 2 Alueiden valitseminen taulukossa...
LisätiedotPeilaus pisteen ja suoran suhteen Pythonin Turtle moduulilla
Peilaus pisteen ja suoran suhteen Pythonin Turtle moduulilla ALKUHARJOITUS Kynän ja paperin avulla peilaaminen koordinaatistossa a) Peilaa pisteen (0,0) suhteen koordinaatistossa sijaitseva - neliö, jonka
LisätiedotJAVA on ohjelmointikieli, mikä on kieliopiltaan hyvin samankaltainen, jopa identtinen mm. C++
JAVA alkeet JAVA on ohjelmointikieli, mikä on kieliopiltaan hyvin samankaltainen, jopa identtinen mm. C++ ja Javascriptin kanssa. Huom! JAVA ja JavaScript eivät silti ole sama asia, eivätkä edes sukulaiskieliä.
LisätiedotKuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla
Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla Avaa Paint.NET tuplaklikkaamalla sen pikakuvaketta. Paint.NET avautuu tämän näköisenä. Edessä on tyhjä paperi. Saadaksesi auki kuvan, jota aiot pienentää
LisätiedotCSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.
CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.
LisätiedotKuva xhtml-sivulla. Mirja Jaakkola
Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 9.2.2009 T-106.1208 Ohjelmoinnin perusteet Y 9.2.2009 1 / 35 Listat Esimerkki: halutaan kirjoittaa ohjelma, joka lukee käyttäjältä 30 lämpötilaa. Kun lämpötilat
LisätiedotEntiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla
1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.
Lisätiedot6. Funktiot 85. Kuinka funktioita määritellään ja kutsutaan. Kuinka funktioille viedään arvoja ja niistä palautetaan arvoja
6. Funktiot 85 OPPITUNTI 6 Funktiot Funktiot ovat hyvin laaditun skriptin perusta. Ne tekevät koodista helppolukuista ja uudelleen käytettävää. Laajoja projekteja on mahdotonta hallita ilman funktioiden
LisätiedotCollector for ArcGIS. Ohje /
Collector for ArcGIS Ohje / 10.5.2019 2 (11) Sisältö 1. Collector for ArcGIS... 3 2. Kartan luominen ArcGIS Onlinessa... 3 2.1 Karttatason luominen... 3 2.2 Ominaisuustietotaulun kenttien määrittäminen...
LisätiedotH6: Tehtävänanto. Taulukkolaskennan perusharjoitus. Harjoituksen tavoitteet
H6: Tehtävänanto Taulukkolaskennan perusharjoitus Ennen kuin aloitat harjoituksen teon, lue siihen liittyvä taustamateriaali. Se kannattaa käydä läpi kokeilemalla samalla siinä annetut esimerkit käyttämässäsi
LisätiedotEsitysgrafiikka (20 pistettä)
Esitysgrafiikka (20 pistettä) Yleistä Tehtävänäsi on rakentaa PowerPoint esitys osavuosikatsauksesta mielikuvituksellista automyyntiä tekevälle yritykselle Skills Car Turku. Käytettävät tiedostot Tiedostot
LisätiedotTAULUKKO, KAAVIO, SMARTART-KUVIOT
PowerPoint 2013 Taulukko, kaaviot, SmartArt-kuviot Sisällysluettelo TAULUKKO, KAAVIO, SMARTART-KUVIOT TAULUKOT... 1 Taulukon muotoileminen... 1 Taulukon koon muuttaminen... 2 Rivien valitseminen... 2 Sarakkeiden
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 2.3.2011 T-106.1208 Ohjelmoinnin perusteet Y 2.3.2011 1 / 39 Kertausta: tiedoston avaaminen Kun ohjelma haluaa lukea tai kirjoittaa tekstitiedostoon, on ohjelmalle
LisätiedotAdobe Photoshop Elements, kuvakäsittelyn perusteet
Sivu 1 / 8 Adobe Photoshop Elements, kuvakäsittelyn perusteet Lyhyesti Tämän oppaan avulla voit - kääntää kuvan - valita kuvasta vain tietyn alueen ja poistaa kuvasta muut (eng. crop, suom. rajaus) - muuttaa
LisätiedotOPPITUNTI 5 Ohjelman kulku
5. Ohjelman kulku 67 OPPITUNTI 5 Ohjelman kulku Viime tunnilla luomamme skriptit olivat suoraviivaisia. Ohjelmalauseet suoritettiin aina samassa järjestyksessä, joten ohjelmissamme ei ollut lainkaan joustavuutta.
Lisätiedot7. Taulukot 105. Kuinka taulukoiden tietoa käsitellään ja lajitellaan
7. Taulukot 105 OPPITUNTI 7 Taulukot Taulukot ja niiden käsittelyyn liittyvät toiminnot laajentavat suuresti PHP4-skriptien käyttöaluetta ja joustavuutta. Kun tunnet taulukot, voit tallentaa niihin monimutkaisia
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 12.4.2010 T-106.1208 Ohjelmoinnin perusteet Y 12.4.2010 1 / 34 Graafiset käyttöliittymät Tähän asti kirjoitetuissa ohjelmissa on ollut tekstipohjainen käyttöliittymä.
LisätiedotKäyttöliittymän muokkaus
Käyttöliittymän muokkaus Ohjelman pitkän kehityshistorian takia asetukset ovat jakaantuneet useampaan eri kohtaan ohjelmassa. Ohessa yhteenveto nykyisistä asetuksista (versio 6.4.1, 2/2018). Ylä- ja sivupalkkien
LisätiedotOhjelmoinnin peruskurssi Y1
Ohjelmoinnin peruskurssi Y1 CSE-A1111 30.9.2015 CSE-A1111 Ohjelmoinnin peruskurssi Y1 30.9.2015 1 / 27 Mahdollisuus antaa luentopalautetta Goblinissa vasemmassa reunassa olevassa valikossa on valinta Luentopalaute.
LisätiedotOPPITUNTI 3 Ensimmäinen skripti
3. Ensimmäinen skripti 35 OPPITUNTI 3 Ensimmäinen skripti Kun olet asentanut PHP:n ja asettanut sen kokoonpanon, on aika laittaa ohjelmisto testaukseen. Tällä tunnilla luot ensimmäisen skriptisi ja tutkit
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 7.2.2011 T-106.1208 Ohjelmoinnin perusteet Y 7.2.2011 1 / 39 Kännykkäpalautetteen antajia kaivataan edelleen! Ilmoittaudu mukaan lähettämällä ilmainen tekstiviesti
LisätiedotOPPITUNTI 11 DBM-funktioiden käyttö
11. DBM-funktioiden käyttö 193 OPPITUNTI 11 DBM-funktioiden käyttö Jos sinulla ei ole pääsyä SQL-tietokantaan, esimerkiksi MySQL- tai Oracle-tietokantaan, sinulla on varmaankin mahdollisuus käyttää DBM-tyylistä
LisätiedotPOWERPOINT HARJOITUKSET OMAN ESITYSPOHJAN RAKENTAMINEN
POWERPOINT HARJOITUKSET 3.1-3.7 OMAN ESITYSPOHJAN RAKENTAMINEN Tässä harjoituksessa luomme oman perustyylin, teemme omat värit, oman fonttiteeman, mukautamme perustyyliä ja tallennamme luomuksemme. 1/5
LisätiedotGeoGebra-harjoituksia malu-opettajille
GeoGebra-harjoituksia malu-opettajille 1. Ohjelman kielen vaihtaminen Mikäli ohjelma ei syystä tai toisesta avaudu toivomallasi kielellä, voit vaihtaa ohjelman käyttöliittymän kielen seuraavasti: 2. Fonttikoon
LisätiedotTasogeometriaa GeoGebran piirtoalue ja työvälineet
Tasogeometriaa GeoGebran piirtoalue ja työvälineet Näissä harjoituksissa työskennellään näkymässä Näkymät->Geometria PIIRRÄ (ja MITTAA) a) jana toinen jana, jonka pituus on 3 b) kulma toinen kulma, jonka
LisätiedotSonera Viestintäpalvelu VIP VIP Laajennettu raportointi Ohje
Sonera Viestintäpalvelu VIP VIP Laajennettu raportointi Ohje Sisällysluettelo VIP Laajennettu raportointi... 3 Luo raportti Laajennetun raportoinnin työkaluilla... 4 Avaa Laajennettu raportointi... 4 Valitse
LisätiedotEditorin käyttö. TaikaTapahtumat -käyttöohje
Editorin käyttö TaikaTapahtumat -käyttöohje Yleistä ohjelmasta etaika-järjestelmän HTML-moduuli sisältää tekstieditorin, joka on monipuolinen apuväline tehtäessä materiaalia sivustolle (esim. tapahtumakohtaiset
LisätiedotFrontPage 2000 - Näkymät
FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava
LisätiedotOhje internetkarttapalveluun
Ohje internetkarttapalveluun Kartalla liikkuminen Liiku kartalla käyttäen hiirtä, karttaikkunan zoomauspainikkeita tai pikavalikkotoimintoja. 1. Näkymän liikuttaminen: Liikuta karttaa hiirellä raahaamalla.
LisätiedotTaulukot. 2002 Päivi Vartiainen 1
Taulukot Taulukon lisääminen FrontPagessa tapahtuu samalla tavoin kuin Word tekstinkäsittelyohjelmassakin. Valitse vakiotyökaluriviltä Lisää taulukko painike. Kun olet napsauttanut painikkeen alas voit
LisätiedotHarjoitustyö: virtuaalikone
Harjoitustyö: virtuaalikone Toteuta alla kuvattu virtuaalikone yksinkertaiselle olio-orientoituneelle skriptauskielelle. Paketissa on testaamista varten mukana kaksi lyhyttä ohjelmaa. Ohjeita Noudata ohjelman
LisätiedotMuita kuvankäsittelyohjelmia on mm. Paint Shop Pro, Photoshop Elements, Microsoft Office Picture Manager
Missio: 1. Asentaminen 2. Valokuvien tarkastelu, tallennus/formaatit, koko, tarkkuus, korjaukset/suotimet, rajaus 3. Kuvan luonti/työkalut (grafiikka kuvat) 4. Tekstin/grafiikan lisääminen kuviin, kuvien/grafiikan
LisätiedotKuva 1. GIMP:in uuden kuvan luominen. Voit säätää leveyttä ja korkeutta ja kokeilla muitakin vaihtoehtoja. Napsauta sitten "OK".
Gimp alkeet III 8 luokan ATK-työt/HaJa Sivu 1 / 6 Uuden kuvan luominen GIMP:illä yleisinfoa ----> LUE! Sen lisäksi, että GIMP on loistava valokuvankäsittelyohjelma, sillä saa piirrettyä myös omia kuvia
LisätiedotKirjoita oma versio funktioista strcpy ja strcat, jotka saavat parametrinaan kaksi merkkiosoitinta.
Tehtävä 63. Kirjoita oma versio funktiosta strcmp(),joka saa parametrinaan kaksi merkkiosoitinta. Tee ohjelma, jossa luetaan kaksi merkkijonoa, joita sitten verrataan ko. funktiolla. Tehtävä 64. Kirjoita
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 11.2.2009 T-106.1208 Ohjelmoinnin perusteet Y 11.2.2009 1 / 33 Kertausta: listat Tyhjä uusi lista luodaan kirjoittamalla esimerkiksi lampotilat = [] (jolloin
LisätiedotAvaa ohjelma ja tarvittaessa Tiedosto -> Uusi kilpailutiedosto
Condess ratamestariohjelman käyttö Aloitus ja alkumäärittelyt Avaa ohjelma ja tarvittaessa Tiedosto -> Uusi kilpailutiedosto Kun kysytään kilpailun nimeä, syötä kuvaava nimi. Samaa nimeä käytetään oletuksena
Lisätiedot1 Funktiot, suurin (max), pienin (min) ja keskiarvo
1 Funktiot, suurin (max), pienin (min) ja keskiarvo 1. Avaa uusi työkirja 2. Tallenna työkirja nimellä perusfunktiot. 3. Kirjoita seuraava taulukko 4. Muista taulukon kirjoitusjärjestys - Ensin kirjoitetaan
LisätiedotTaulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara
Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005
LisätiedotTekstinkäsittelyn jatko Error! Use the Home tab to apply Otsikko 1 to the text that you want to appear here. KSAO Liiketalous 1
KSAO Liiketalous 1 Lomakkeet Lomake on asiakirja, joka sisältää täyttämistä ohjaavia tietoja tai merkintöjä. Wordin lomakekenttä-toiminnolla luodaan näytöllä täytettäviä lomakkeita tai tulostettavia lomakepohjia.
LisätiedotLuku 8. Aluekyselyt. 8.1 Summataulukko
Luku 8 Aluekyselyt Aluekysely on tiettyä taulukon väliä koskeva kysely. Tyypillisiä aluekyselyitä ovat, mikä on taulukon välin lukujen summa tai pienin luku välillä. Esimerkiksi seuraavassa taulukossa
LisätiedotValitse aineisto otsikoineen maalaamalla se hiirella ja kopioimalla (Esim. ctrl-c). Vaihtoehtoisesti, Lataa CSV-tiedosto
Versio k15 Näin laadit ilmastodiagrammin Libre Officen taulukkolaskentaohjelmalla. Ohje on laadittu käyttäen Libre Officen versiota 4.2.2.1. Voit ladata ohjelmiston omalle koneellesi osoitteesta fi.libreoffice.org.
LisätiedotOPPITUNTI 20 Tilan tallentaminen istuntofunktioilla
20. Tilan tallentaminen istuntofunktiolla 353 OPPITUNTI 20 Tilan tallentaminen istuntofunktioilla Edellisellä tunnilla tutkimme tilan tallentamista evästeiden ja kyselymerkkijonojen avulla. PHP4 on kuitenkin
LisätiedotFOTONETTI BOOK CREATOR
F O T O N E T T I O Y FOTONETTI BOOK CREATOR 6 2012 Kemintie 6 95420 Tornio puhelin: 050-555 6500 pro/kirja: 050-555 6580 www.fotonetti.fi Ohjelman asentaminen 1 Hae ohjelma koneellesi osoitteesta http://www.fotonetti.fi/kuvakirjatilaa
LisätiedotKirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta.
Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta. Sisäänkirjauduttuasi näet palvelun etusivulla helppokäyttöisen hallintapaneelin. Vasemmassa reunassa on esillä viimeisimmät tehdyt muutokset
Lisätiedot2 Pistejoukko koordinaatistossa
Pistejoukko koordinaatistossa Ennakkotehtävät 1. a) Esimerkiksi: b) Pisteet sijaitsevat pystysuoralla suoralla, joka leikkaa x-akselin kohdassa x =. c) Yhtälö on x =. d) Sijoitetaan joitain ehdon toteuttavia
LisätiedotOPPITUNTI15 Päivämäärien käsittely
15. Päivämäärien käsittely 269 OPPITUNTI15 Päivämäärien käsittely Päivämäärät kuuluvat niin usein jokapäiväiseen elämään, että niiden käsittely on rutiininomaista. Kalenterin käsittely ei aina ole kuitenkaan
LisätiedotTee html-sivu, jossa on yllä olevat kaksi taulukkoa.
TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan
LisätiedotArtikkelin lisääminen
Sisällys Artikkelin lisääminen...3 Artikkelin muokkaaminen...5 Kuvan lisääminen artikkeliin...6 Väliotsikoiden lisääminen artikkeliin...9 Navigointilinkin lisääminen valikkoon...10 Käyttäjätietojen muuttaminen...13
LisätiedotAIKAJANA-KAAVION KÄYTTÖOHJE Pitkäaikaissairaan hoito- ja palveluketju aikajanalla Kainuun RAMPE-osahanke
AIKAJANA-KAAVION KÄYTTÖOHJE Pitkäaikaissairaan hoito- ja palveluketju aikajanalla Kainuun RAMPE-osahanke Sisällysluettelo 1. Mikä aikajana-kaavio on?...2 2. Miten käytän aikajana-kaaviota?...3 3. Tulostaminen...4
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 1.4.2009 T-106.1208 Ohjelmoinnin perusteet Y 1.4.2009 1 / 56 Tentti Ensimmäinen tenttimahdollisuus on pe 8.5. klo 13:00 17:00 päärakennuksessa. Tämän jälkeen
Lisätiedot1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3
Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...
LisätiedotKun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti:
HENKILÖKORTTIEN SUUNNITTELUSOVELLUS SOVELLUKSEN KÄYTTÖOHJE Voit kokeilla korttien suunnittelemista valmiiden korttipohjien avulla ilman rekisteröitymistä. Rekisteröityminen vaaditaan vasta, kun olet valmis
Lisätiedotv1.2 Huom! Piirto-ohjelmissa asioita voi tehdä todella monella tavalla, tässä esitellään yksi esimerkkitapa tällaisen käyrän piirtämiseen.
v2 Tehtävä: Piirrä kartalle merkittyjen pisteiden ja välinen korkeusprofiili. Voit käyttää valmista Libre Office Draw koordinaatistopohjaa. Pisteiden välisen janan jakomerkit ovat 100m välein. Vaihtoehtoisesti
LisätiedotJoomla Pikaohje
Joomla 1.5.3. Pikaohje Kirjaudu sisään annetuilla tiedoilla. (Huom! ei käytössä 11.7.2008) 1. Joomlan käytöstä muutama tärkeä muistettava asia Älä käytä selaimen palaa edelliseen tai siirry toimintoja,
LisätiedotKeravan karttapalvelun käyttöohje
Keravan karttapalvelun käyttöohje Sisällys (klikkaa otsikkoa mennäksesi suoraan haluamaasi kappaleeseen) Keravan karttapalvelun käytön aloittaminen... 2 Liikkuminen kartalla... 2 Karttatasojen näyttäminen
LisätiedotMuuta pohjan väri [ ffffff ] valkoinen Näytä suuri risti
1. Qcad. Aloitusohjeita. Asenna ohjelma pakettien hallinasta. Tämä vapaa ohjelma on 2D. 3D ohjelma on maksullinen. Qcad piirustusohjelma avautuu kuvakkeesta. Oletuksena, musta pohja. On kuitenkin luontevaa
LisätiedotOma kartta Google Maps -palveluun
TAMPERE 1 (6) Oma kartta Google Maps -palveluun Google Maps palveluun on mahdollista luoda karttoja omilla paikkamerkeillä. Tilin luonti Google-palveluihin Tehdäksesi karttoja omilla paikkamerkinnöillä,
LisätiedotMerkkijono on palindromi, jos se säilyy samana, vaikka sen kääntää väärinpäin.
A Palindromi Sinulle annetaan merkkijono, ja tehtäväsi on poistaa siitä tarkalleen yksi merkki, minkä jälkeen merkkijonon tulisi olla palindromi. Onko tehtäväsi mahdollinen? Merkkijono on palindromi, jos
LisätiedotKJR-C1001 Statiikka ja dynamiikka. Luento Susanna Hurme
KJR-C1001 Statiikka ja dynamiikka Luento 9.3.2016 Susanna Hurme Päivän aihe: Palkin leikkausvoima- ja taivutusmomenttijakaumat ja kuviot (Kirjan luvut 7.2 ja 7.3) Osaamistavoitteet: Ymmärtää, miten leikkausvoima
Lisätiedot7. Kuvien lisääminen piirtoalueelle
7. Kuvien lisääminen piirtoalueelle Harjoitus 13: Symmetristen kuvioiden tutkiminen Takaisin koulun penkille... Avaa dynaaminen työtiedosto H13_symmetria.html. Se löytyy Työpöydälle luomastasi kansiosta
LisätiedotArtikkelien muokkaaminen sekä sisältöeditorin peruskäyttö
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4
LisätiedotKOLLAASI Kaari-ikkuna
KOLLAASI Kaari-ikkuna Aloitetaan luomalla uusi valkoinen arkki A4 Copyright Hannu Räisänen 2010 2 Aloitetaan luomalla uusi valkoinen arkki A4, joka käännetään vaakaan. Copyright Hannu Räisänen 2010 3 Pienennetään
LisätiedotKirjoita ohjelma jossa luetaan kokonaislukuja taulukkoon (saat itse päättää taulun koon, kunhan koko on vähintään 10)
Tehtävä 40. Kirjoita ohjelma, jossa luetaan 20 lukua, joiden arvot ovat välillä 10 100. Kun taulukko on täytetty, ohjelma tulostaa vain ne taulukon arvot, jotka esiintyvät taulukossa vain kerran. Tehtävä
LisätiedotJÄRJESTELMÄN TEKNINEN KÄYTTÖOHJE
JÄRJESTELMÄN TEKNINEN KÄYTTÖOHJE TEKNINEN OHJE OSAAJAPLUS- JÄRJESTELMÄN KÄYTTÖÖN OsaajaPlus -järjestelmä on luotu siten, että sen käyttöön tarvittavat ohjelmat ovat maksutta ladattavissa internetistä.
LisätiedotMainoksen taittaminen Wordilla
Mainoksen taittaminen Wordilla Word soveltuu parhaiten standardimittaisten (A4 jne) word-tiedostojen (.docx) tai pdf-tiedostojen taittoon, mutta sillä pystyy tallentamaan pienellä kikkailulla myös kuvaformaattiin
LisätiedotOffice 365 palvelujen käyttöohje Sisällys
Office 365 palvelujen käyttöohje Sisällys Sisäänkirjautuminen... 2 Office 365:n käyttöliittymä... 3 Salasanan vaihto... 5 Outlook-sähköpostin käyttö... 7 Outlook-kalenterin käyttö... 10 OneDriven käyttö...
Lisätiedoty=-3x+2 y=2x-3 y=3x+2 x = = 6
MAA Koe, Arto Hekkanen ja Jussi Tyni 5.5.015 Loppukoe LASKE ILMAN LASKINTA. 1. Yhdistä kuvaaja ja sen yhtälö a) 3 b) 1 c) 5 d) Suoran yhtälö 1) y=3x ) 3x+y =0 3) x y 3=0 ) y= 3x 3 5) y= 3x 6) 3x y+=0 y=-3x+
Lisätiedot3. Vasemman reunan resurssiselaimen Omiin resursseihin luodaan uusi Handmade -niminen kansio.
ActivInspire JATKO AINEISTON TUOTTAMINEN Uuden aineiston tekemisen alkua helpottaa etukäteen tehty suunnitelma (tekstit, kuvat, videot, linkit) miellekarttaa hyödyntäen. Valmista aineistoa voi muokata
Lisätiedot2016/07/05 08:58 1/12 Shortcut Menut
2016/07/05 08:58 1/12 Shortcut Menut Shortcut Menut Shortcut menut voidaan aktivoida seuraavista paikoista. Shortcut menun sisältö riippuu siitä, mistä se aktivoidaan. 1. Shortcut menu suunnitellusta linjasta
LisätiedotLuku 6. Dynaaminen ohjelmointi. 6.1 Funktion muisti
Luku 6 Dynaaminen ohjelmointi Dynaamisessa ohjelmoinnissa on ideana jakaa ongelman ratkaisu pienempiin osaongelmiin, jotka voidaan ratkaista toisistaan riippumattomasti. Jokaisen osaongelman ratkaisu tallennetaan
LisätiedotTIETOJENKÄSITTELY/PIKATAIVAL2 Tehtävä G
TIETOJENKÄSITTELY/PIKATAIVAL2 Tehtävä G 1 Tehtävänäsi on määritellä tietokantaan KisatSVNL.mdb lomake Kilpailut ohessa olevan mallin mukaan. Lomake on tarkoitettu kilpailutietojen lisäykseen, selailuun
LisätiedotOhjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen
Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ennen kuin aloitat: 1. Asenna tietokoneeseesi ilmainen Miso Regular fontti, jonka saat täältä: https://www.fontspring.com/fonts/marten- nettelbladt/miso
LisätiedotPOWERPOINT. A-ajokorttivaatimukset
POWERPOINT A-ajokorttivaatimukset Kurssin suorittaminen Tunneille osallistuminen Tehtävien teko ja palauttaminen Tämän A-ajokorttivaatimukset tehtävän täydentäminen Tuo kuvakaappauksia ja tee malleja toiminnoista
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
LisätiedotTasohyppelypeli. Piirrä grafiikat. Toteuta pelihahmon putoaminen ja alustalle jääminen:
Tasohyppelypeli 1 Pelissä ohjaat liikkuvaa ja hyppivää hahmoa vaihtelevanmuotoisessa maastossa tavoitteenasi päästä maaliin. Mallipelinä Yhden levelin tasohyppely, tekijänä Antonbury Piirrä grafiikat Pelaajan
LisätiedotKangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE. KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi
2015 Kangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi 1 Sisällysluettelo 1. Sivustolle rekisteröityminen... 2 2. Yrityksen lisääminen... 3 2.1. Yritystiedot...
LisätiedotTekijä MAA2 Polynomifunktiot ja -yhtälöt = Vastaus a)
K1 a) Tekijä MAA Polynomifunktiot ja -yhtälöt 6.8.016 ( + + ) + ( ) = + + + = + + + = + 4 b) 4 4 ( 5 + ) ( 5 + 1) = 5 + + 5 + 1 4 = + + + 4 = + 5 5 1 1 Vastaus a) 4 + b) 4 + 1 K a) f ( ) = + 1 f () = +
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 16.3.2009 T-106.1208 Ohjelmoinnin perusteet Y 16.3.2009 1 / 40 Kertausta: tiedostosta lukeminen Aluksi käsiteltävä tiedosto pitää avata: tiedostomuuttuja = open("teksti.txt","r")
Lisätiedot815338A Ohjelmointikielten periaatteet Harjoitus 6 Vastaukset
815338A Ohjelmointikielten periaatteet 2015-2016. Harjoitus 6 Vastaukset Harjoituksen aiheena on funktionaalinen ohjelmointi Scheme- ja Haskell-kielillä. Voit suorittaa ohjelmat osoitteessa https://ideone.com/
LisätiedotUpdateIT 2010: Editorin käyttöohje
UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...
LisätiedotValintanauhan komennot Valintanauhan kussakin välilehdessä on ryhmiä ja kussakin ryhmässä on toisiinsa liittyviä komentoja.
Pikaopas Microsoft Excel 2013 näyttää erilaiselta kuin aiemmat versiot. Tämän oppaan avulla pääset alkuun nopeasti ja saat yleiskuvan uusista ominaisuuksista. Komentojen lisääminen pikatyökaluriville Pidä
LisätiedotTekstinkäsittely (20 pistettä)
Tekstinkäsittely (20 pistettä) Yleistä Tehtävänäsi on toteuttaa ilmoittautumislomake Turussa pidettäviin Open Nature kilpailuun, jossa eri oppilaitosten opettajat kisaavat eläinten ja kasvien tunnistuksesta
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 15.3.2010 T-106.1208 Ohjelmoinnin perusteet Y 15.3.2010 1 / 56 Tiedostoista: tietojen tallentaminen ohjelman suorituskertojen välillä Monissa sovelluksissa ohjelman
LisätiedotLuokka Murtoluku uudelleen. Kirjoitetaan luokka Murtoluku uudelleen niin, että murtolukujen sieventäminen on mahdollista.
1 Luokka Murtoluku uudelleen Kirjoitetaan luokka Murtoluku uudelleen niin, että murtolukujen sieventäminen on mahdollista. Sievennettäessä tarvitaan osoittajan ja nimittäjän suurin yhteinen tekijä (syt).
LisätiedotTEKSTINKÄSITTELY Aloitusharjoitus
TEKSTINKÄSITTELY Aloitusharjoitus Kirjoita teksti, jossa kerrot lyhyesti, max. ½ sivua, mitä kaikkea olet tietokoneiden kanssa tähän mennessä puuhastellut. Mitä jo osaat ja mitä tarvitsisi vielä oppia?
LisätiedotE s i t y s g r a f i i k k a a s e l k o k i e l e l l ä MICROSOFT. PowerPoint. P e t r i V a i n i o P e t r i I l m o n e n TIKAS-SARJA
MICROSOFT E s i t y s g r a f i i k k a a s e l k o k i e l e l l ä PowerPoint P e t r i V a i n i o P e t r i I l m o n e n TIKAS-SARJA 6 Sisällysluettelo JOHDANTO TIKAS-PROJEKTI KIRJAN RAKENNE JA TASOMERKINNÄT
LisätiedotCSS. Tekstin muotoilua
CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight
LisätiedotSukupuu -ohjelma. Ossi Väre (013759021) Joni Virtanen (013760641)
Sukupuu -ohjelma Ossi Väre (013759021) Joni Virtanen (013760641) 7.11.2011 1 Johdanto Toteutimme C -kielellä sukupuuohjelman, johon käyttäjä voi lisätä ja poistaa henkilöitä ja määrittää henkilöiden välisiä
LisätiedotSen jälkeen Microsoft Office ja sen alta löytyy ohjelmat. Ensin käynnistä-valikosta kaikki ohjelmat
Microsoft Office 2010 löytyy tietokoneen käynnistävalikosta aivan kuin kaikki muutkin tietokoneelle asennetut ohjelmat. Microsoft kansion sisältä löytyy toimisto-ohjelmistopakettiin kuuluvat eri ohjelmat,
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 8.2.2010 T-106.1208 Ohjelmoinnin perusteet Y 8.2.2010 1 / 38 Debuggeri Tyypillinen tilanne: ohjelma on kirjoitettu, Python-tulkki ei valita virheistä, mutta ohjelma
LisätiedotPaikka-aikakaavio PlanMan Project
Paikka-aikakaavio PlanMan Project 30.4.2014 Sisältö 1. Paikka-elementin käyttöönotto... 2 2. Tehtävien lisääminen paikka-aikakaavioon... 4 3. Tehtävien ulkoasun muokkaus paikka-aikakaaviossa... 5 4. Tehtävien
LisätiedotOhjelmoinnin perusteet Y Python
Ohjelmoinnin perusteet Y Python T-106.1208 3.3.2010 T-106.1208 Ohjelmoinnin perusteet Y 3.3.2010 1 / 44 Kertausta: tiedoston avaaminen Kun ohjelma haluaa lukea tai kirjoittaa tekstitiedostoon, on ohjelmalle
LisätiedotLIITE A Vastaukset kysymyksiin
LIITE A Vastaukset kysymyksiin Liite A Vastaukset kysymyksiin 449 Tämä liite antaa vastaukset lukujen lopussa olleisiin kysymyksiin. 450 Liite A Vastaukset kysymyksiin TUNTI 1 1. Mistä kirjaimet PHP tulevat?
LisätiedotTYÖPAJA 1: Tasogeometriaa GeoGebran piirtoalue ja työvälineet
TYÖPAJA 1: Tasogeometriaa GeoGebran piirtoalue ja työvälineet Näissä harjoituksissa työskennellään näkymässä Näkymät->Geometria PIIRRÄ a) jana, jonka pituus on 3 b) kulma, jonka suuruus on 45 astetta c)
LisätiedotDIGITAALISEN TARINAN TUOTTAMINEN MICROSOFT PHOTO STORY 3- OHJELMAN AVULLA VAIHEINEEN
OMAN ALAN ESITELMÄ DIGITAALISENA TARINANA Laaditaan digitarina jostakin oman alan aiheesta (ks. lista aiheista). Edetään seuraavasti: 1. Valitse listalta aihe. Voit myös ehdottaa omaa aihetta. 2. Mieti,
LisätiedotRacket ohjelmointia II. Tiina Partanen 2015
Racket ohjelmointia II Tiina Partanen 2015 Sisältö 1) Peli I Yksinkertainen peli, jossa kerätään kohteita ja väistellään vaaroja Pitkälle viety koodi, johon täydennetään vain puuttuvat palat Ei tarvita
Lisätiedot