Drag & Drop, kartat - viikkotehtävä 5
Opetellaan drag & dropia ja karttojen käyttämistä.
Ennen tämän tehtävän tekemistä käy tarkkaan läpi seuraavat materiaalit:
- Pääteohjaus 5
- HTML Drag and Drop API
- MouseEvent
- clientX
- clientY
- offsetX
- offsetY
- pageX
- pageY
- screenX
- screenY
Kaikille tasoille yhteiset vaatimukset ovat:
- Javascript-ohjelmassa on käytettävä Strict modea
- HTML-dokumentin on oltava validi eikä validaattori saa antaa sivusta varoituksiakaan (warnings). Myös dynaamisesti javascriptilla luodun HTML-koodin on oltava validia. Poikkeus: ulkopuolisten kirjastojen tuottaman HTML-koodin validiutta ei vaadita.
- Valmiiseen pohjaan linkitetty JSHint ei saa antaa javascript-koodista virheilmoituksia tai -varoituksia
- Sivulla käytetyn CSS:n on oltava validia CSS3:sta (CSS level 3 + SVG).
- HTML-dokumentissa ei saa esiintyä Javascript- tai CSS-koodia vaan näiden on oltava erillisissä tiedostoissa. Elementtien css-ominaisuuksia saa kuitenkin asettaa elementti.style.ominaisuus-rajapinnan kautta.
- Apuna saa käyttää samoja kirjastoja joita on käytetty ohjaus 5-tehtävissä eli leaflet
- Käytä standardia drag & drop -rajapintaa.
- Valmiin sivun pitää toimia Google Chromella ja Firefoxilla. Muista selaimista ei tarvitse toistaiseksi välittää.
- Koodin oleelliset osat on oltava kommentoitu.
- Kaikkien tiedostojen merkistönä on käytettävä UTF-8-merkistöä.
- Toteutetun sivun täytyy järkevästi mukautua selainikkunan koon muutoksiin: kartan täytyy aina mahtua selainikkunaan ja sivun alaosan joukkueet ja rastit alueiden täytyy skaalautua. Kolmostasosta alkaen myös kartalla-osan täytyy kaventua ja leventyä selainikkunan koon mukaan
- Tietorakenne on sama kuin viikkotehtävässä 3
- innerHTML ja muut vastaavat metodit, jotka sallivat suoraan html-koodin lisäämisen sivulle, ovat kiellettyjä
Taso 1
Toteuta mallivideon mukainen sovellus:
- Käytä valmista pohjaa
- Sivun ulkoasun on vastattava mallivideolla näkyvää. Generoi värit valmiiksi annetulla funktiolla.
rainbow-funktiolle annetaan kaksi parametria, joista ensimmäinen kertoo montako
väriä tarvitaan (joukkueiden tai rastien lukumäärä) ja toisena parametrina monesko väri
- Joukkueiden on oltava aakkosjärjestyksessä. Joukkueet on esitettävä järjestämättömänä listana (ul ja li)
- Rastien on on oltava käänteisessä aakkosjärjestyksessä. Rastit on esitettävä järjestämättömänä listana
- Kartalla-alue saa pysyä vakiokokoisena esim. 600 pikseliä leveänä. Laidoilla olevien alueiden on skaalauduttua selainikkunan muutosten mukaan. Sivulle ei saa tulla vaakasuuntaista skrollbaria. Pystysuuntainen skrollbar saa ilmestyä, jos selainikkuna on niin matala, että joukkuelistaus ei mahdu.
- Myös Kartalla-alueen on oltava järjestämätön lista
- Joukkuelistaus ja rastilistaus ovat listoja. Käytä html-rakenteessa ul- ja li-elementtejä.
- Piirrä kartalle punaisina ympyröinä kaikki tietorakenteessa olevat rastit. Keskitä kartta siten, että kaikki rastit näkyvät kartalla riippumatta selainikkunan koosta. Käytä fitbounds-metodia. Toteuta yleiskäyttöisellä tavalla.
- Mahdollista joukkueiden raahaaminen sivun alaosassa mallivideota vastaavalla tavalla. Jokaisen raahatun joukkueen kulkema reitti pitää piirtää kartalle joukkueen omalla uniikilla värillä. Käytä polylinea. Reittiin lasketaan mukaan vain validit rastileimaukset eli matkan pituus lasketaan kuten aiemmissa viikkotehtävissä (ei duplikaatteja, viimeisestä lähtöleimauksesta ensimmäiseen maalileimaukseen). Kts. vt1.js ja laskeMatka-funktio
- Viimeisimpänä raahatun joukkueen reitti piirtyy päällimmäiseksi.
- Kartalla-alueella olevat joukkueet voi raahata takaisin vasemman laidan Joukkueetlistaukseen.
Takaisin raahattu joukkue tulee aina listauksen viimeiseksi.
- Joukkueita ei saa raahata rastitlistaukseen
- Kartalla-alueelta poistetun joukkueen reitti poistetaan kartalta
- Mahdollista Rastit-listauksessa olevien rastien raahaaminen kartalla alueelle mallivideota
vastaavalla tavalla. Rastin voi myös raahata takaisin Rastit-listaukseen, jolloin rasti
siirtyy listauksen viimeiseksi.
- Rasteja ei saa raahata joukkueetlistaukseen
- Kartalla-alueelle raahattu joukkue tai rasti asemoidaan aina siihen kohtaan johon raahattu objekti tiputetaan. Joukkueen tai rastin on pysyttävä Kartalla-alueella suhteessa samassa paikassa vaikka selainikkunan kokoa muutettaisiin.
- Leimauksia joille ei löydy vastinetta rasteista ei tarvitse käsitellä
- Rastiympyrän säde on oltava 150 metriä.
- Älä luo turhia layereita. Älä piirrä koko karttaa uudelleen jokaisen muutoksen jälkeen.
- Varmista, että et raahaa listaelementtejä (li-elementti) toistensa sisään. HTML-koodin rakenteen täytyy pysyä ehjänä ja validina
- Älä käytä pelkkää joukkueen nimeä tai rastin koodia id-attribuutin arvona. Id-attribuutin arvo ei saa alkaa numerolla.
- Vinkki: columns
Taso 3
Toteuta ensin tason 1 -mukainen ohjelma ja laajenna sen jälkeen ohjelmaa seuraavilla ominaisuuksilla:
- Tee Kartalla-alueesta skaalautuva eli alue muuttaa kokoaan selainikkunan koon muuttuessa. Alueen täytyy aina olla 50vw levyinen. Huomioi skaalautuminen raahattavien objektien sijoittelussa. Kartalla-alueelle raahattujen objektien on säilytettävä suhteellinen sijaintinsa alueen koon muutosten yhteydessä.
- Huomioi kartalla alueelle dropattaessa myös kohta, josta joukkuetta tai rastia on raahattu. Raahatun objektin on jäätävä tismalleen siihen kohtaan, johon se on pudotettu eli pudotuksessa on huomioitava mistä kohdasta kys. objektia on tartuttu kiinni. Mallivideossa tätä ei huomioida vaan dropatun objektin vasen ylänurkka tulee aina pudotuskohtaan. Tee siis mallia parempi toteutus
- Laske jokaisen joukkueen nimen viereen kuinka pitkän matkan joukkue on kulkenut. Matka on oltava näkyvissä heti sivun latauduttua. Matka lasketaan kuten aiemmissa viikkotehtävissä. Kts. vt1.js ja laskeMatka-funktio.
- Mahdollista joukkueen nimen tai rastikoodin raahaaminen selaimen ulkopuolelle esim. wordpadiin tai muuhun ohjelmaan, joka osaa vastaanottaa dropissa tekstimuotoista tietoa. Wordpadiin raahattu joukkue näkyy Wordpadissa joukkueen nimenä. Rasti näkyy rastikoodina
- Kartalta alueelta takaisin Joukkueet- tai Rastitlistaukseen raahattu objekti sijoitetaan
siihen kohtaan listausta johon se raahataan.
- Jos raahaat rastin 31 rastin 55 päälle, niin rasti 31 sijoitetaan listauksessa ennen rastia 55.
- Jos raahaat joukkueen Dynamic Duo joukkuen Tollot päälle, niin Dynamic Duo sijoitetaan listauksessa ennen joukkuetta Tollot.
- Rasteja ja joukkueita voi suoraan järjestellä raahaamalla niitä niiden omalla alueella.
- Rasteja ei saa raahata joukkuelistaukseen eikä toistepäin
- Mahdollista rastiympyröiden siirtäminen kartalla seuraavalla tavalla:
- Valitse ympyrä klikkaamalla hiirellä ympyrää
- Muuta ympyrä kokonaan punaiseksi osoittamaan, että se on valittuna
- Luo ympyrän kohdalle marker
- Jos et raahaa markeria, vaan valitset hiirellä uuden ympyrän, niin vaihda tämä ympyrä valituksi, ja siirrä marker tämän ympyrän kohdalle
- Raahaa marker uuteen paikkaan
- Siirrä edellä valitsemasi ympyrä markerin osoittamaan uuteen kohtaan
- Poista marker
- Palauta ympyrän alkuperäinen ulkoasu
- Älä piirrä koko karttaa uudelleen jokaisen raahaamisen jälkeen!
- Jos rastia on siirretty, niin päivitä joukkueiden kulkema matka vastaamaan muuttunutta reittiä. Päivitä myös kartalle siirretyn rastin kautta kulkevat reitit.
- Lisää kartalle myös rastikoodit rastiympyröiden sisään samaan tapaan kuin mallivideolla.
Taso 5
- Muokkaa joukkueiden raahaaminen toimimaan siten, että se tapahtuu vain joukkueen nimeen tartuttaessa. Tärkeintä,
on, että et sotke kahta eri raahausta keskenään.
Tee joukkueen nimistä Kartalla-listauksessa seuraavanlaisia käyttäen details- ja summary-elementtejä.
-
Joukkue 1 ( 30,5 km )
- 33
- 5D
- 4A
- 88
- ...
-
Joukkue 2 ( 47,8 km )
- 43
- 68
- 4A
- 38
- ...
Klikkaamalla joukkueen nimeä saa auki joukkuekohtaisen listan, jossa ovat kaikki joukkueen validit leimaukset aikajärjestyksessä. Mahdollista näiden leimausten uudelleen järjestäminen drag & dropin avulla. Mihin tahansa leimaukseen voi tarttua hiirellä kiinni ja siirtää sen listassa uuteen kohtaan. Tiputettaessa jonkun toisen leimauksen päälle sijoitetaan tiputettu leimaus listaan ennen dropin kohteena ollutta leimausta. Varmista, että leimauksen saa siirrettyä myös listan viimeiseksi.
Järjestäminen ei vaikuta leimausten kellonaikoihin mutta vaikuttaa kartalle piirrettyyn reittiin. Reitti pitää päivittää aina, kun joukkueen leimauksien järjestystä muutetaan. Samoin pitää päivittää joukkueen kulkema matka.
Huom. pidä huoli, että joukkueen leimausta ei voi vahingossa raahata toisen joukkueen leimausten joukkoon
-
- Kommentoi koodistasi pois markereilla toteutettu rastiympyröiden siirtäminen. Toteuta rastiympyröiden raahaaminen ilman markereita. Rakenna oma drag & drop rastiympyröiden raahaamiseen.
Vinkit
Värien generointiin pitää käyttää seuraavaa funktiota:
function rainbow(numOfSteps, step) { // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps. // Adam Cole, 2011-Sept-14 // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript let r, g, b; let h = step / numOfSteps; let i = ~~(h * 6); let f = h * 6 - i; let q = 1 - f; switch(i % 6){ case 0: r = 1; g = f; b = 0; break; case 1: r = q; g = 1; b = 0; break; case 2: r = 0; g = 1; b = f; break; case 3: r = 0; g = q; b = 1; break; case 4: r = f; g = 0; b = 1; break; case 5: r = 1; g = 0; b = q; break; } let c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2); return (c); }
Käyttäjien kommentit