Aurinkoenergiajärjestelmän tuotannon visualisointi

(1)

EMMA VÄHÄ-PESOLA

Aurinkoenergiajärjestelmän tuotan- non visualisointi

TIETOJENKÄSITTELYN KOULUTUSOHJELMA 2020

(2)

Tekijä(t)

Vähä-Pesola, Emma

Julkaisun laji Opinnäytetyö, AMK

Päivämäärä Marraskuu 2020

Sivumäärä 29

Julkaisun kieli suomi

Julkaisun nimi

Aurinkoenergiajärjestelmän tuotannon visualisointi Tutkinto-ohjelma

Tietojenkäsittelyn koulutusohjelma

Tämän opinnäytetyön tarkoituksena oli visualisoida Satakunnan ammattikorkeakoulun aurinkoenergiajärjestelmän tuotantodataa. Opinnäytetyön toimeksiantajana toimi Sata- kunnan ammattikorkeakoulu.

Toimeksiantaja halusi, että tuotantodataa pystyisi tarkastelemaan järjestelmäkohtaisesti.

Kaavioiden piti olla aiempaan ratkaisuun verrattuna enemmän informatiivisia sekä niiden täytyi toimia myös mobiililaitteilla. Tavoitteena oli, että nykyinen ratkaisu olisi helpommin ylläpidettävä sekä kehitettävä, kuin edellinen ratkaisu.

Opinnäytetyössä toteutettiin verkkosivusto Bootstrap-tekniikkaa käyttäen. Sivustolla vi- sualisoitiin Satakunnan ammattikorkeakoulun aurinkoenergiajärjestelmän tuotantodataa Chart.js-tekniikan avulla.

Bootstrap, Chart.js, datan visualisointi, www-sivut

(3)

Author(s)

Vähä-Pesola, Emma

Type of Publication Bachelor’s thesis

Date

November 2020 Number of pages

29

Language of publication:

Finnish Title of publication

Visualization of the productiondata of a solar energy system Degree programme

Degree Programme in Business Information Systems

The purpose of this thesis was to visualize the production data of the solar energy system of Satakunta University of Applied Sciences. The thesis was commissioned by Satakunta University of Applied Sciences.

The commissioner wanted to be able to consider the production data system-specifically.

The charts should provide more information than the previous solution, and they should also function in mobile devices. The aim was to create a solution which would be easier to maintain and develop than the previous solution.

The thesis work consisted of creating web pages by using the Bootstrap framework.

These web pages visualize the production data of the solar energy system of Satakunta University of Applied Sciences with the help of Chart.js technique.

Bootstrap, Chart.js, data visualization, web page

(4)

SISÄLLYS

1 JOHDANTO ... 5

2 TOIMEKSIANTO ... 7

3 MÄÄRITTELY JA SUUNNITTELU ... 7

3.1 Edellinen ratkaisu ... 7

3.2 Ratkaisut ... 8

4 TEKNIIKAT ... 8

4.1 Bootstrap ... 8

4.2 Chart.js ... 9

5 TOTEUTUS ... 9

5.1 Kehitystyökalut ... 9

5.2 Bootstrapin hyödyntäminen sivuston rakenteessa ... 10

5.2.1 Sivuston alustus ... 10

5.2.2 Tyylitiedostot ... 10

5.2.3 JavaScript-tiedostot ... 11

5.2.4 Ylänavigointi ... 12

5.2.5 Alanavigointi ... 13

5.3 Kaavioiden luominen Chart.js-tekniikkaa käyttäen ... 14

5.3.1 Datan lisääminen kaavioon ... 15

5.3.2 Kaavion luominen ... 16

5.3.3 Kaavion asetuksien määrittely ... 18

5.3.4 Kaavioiden ryhmittely ... 19

5.4 Tyylin rakentaminen ... 21

5.4.1 Chrome kehitystyökalut ... 21

5.4.2 Bootstrap luokkien ylikirjoitus ... 22

5.4.3 Responsiivisuus ... 24

6 JATKOKEHITYKSET ... 26

7 POHDINTA ... 27

LÄHTEET

(5)

1 JOHDANTO

Tämä opinnäytetyö käsittelee aurinkoenergiajärjestelmän tuotantodatan visualisoi- mista ja opinnäytetyössä etsitään vastausta kysymykseen, mikä ratkaisu on oikea au- rinkoenergiajärjestelmän tuotantodatan visualisoimiseen. Tuotantodatan visualisoimi- nen auttaa katsojaa hahmottamaan olennaisen tiedon sekä asiakokonaisuudet helposti.

Toisaalta valitsin tämän aiheen siksi, että uudet energiamuodot ovat esillä kansalli- sesti, EU-laajuisesti ja globaalisti. Näin mielenkiintoisena mahdollisuutena yhdistää tietojenkäsittelyn osaamistani edellä mainittuun teemaan tässä opinnäytetyössä.

Opinnäytetyön toimeksiantaja oli toteuttanut ulkopuolisen toimeksiantajan kautta hankkeen verkkosivustolle aikaisemman ratkaisun tuotantodatan visualisoinnista, jonka ei kuitenkaan koettu vastaavan nykyisiin tarpeisiin. Tästä enemmän luvussa 3.1.

Toimeksiantajan tavoitteena on, että tuotantodataa pystyisi tarkastelemaan järjestel- mäkohtaisesti ja kaaviot olisivat enemmän informatiivisia kuin sivuston aiemmat kaaviot. Kaavioiden tulisi myös toimia eri laitteilla esim. puhelimessa ja tabletilla. Opin- näytetyö rajautuu siten sivuston sekä kaavioiden toteutukseen. Sivuston ulkoasun suunnittelu, testaus, käyttöönotto sekä dokumentaation teko eivät sisälly opinnäyte- työhön.

Työssä toteutetaan verkkosivusto Bootstrap-tekniikalla. Bootstrap on ilmainen avoimen lähdekoodin framework-tekniikka verkkosivujen toteutukseen. Verkkosivulla visualisoidaan Satakunnan ammattikorkeakoulun aurinkoenergiajärjestelmän tuotantodataa Chart.js-kaaviokirjaston avulla. Chart.js on JavaScript-ohjelmointikielen avoimen lähdekoodin kirjasto, jonka avulla voidaan helposti toteuttaa erilaisia kaavioita visualisointiin.

Opinnäytetyön rakenne muodostuu toteutetun projektin mukaisesti siten, että työn alussa käydään läpi työn toimeksianto. Teoriaosuudessa eli luvussa neljä käydään läpi tekniikat, joita käytetään sivuston toteuttamisessa. Luvussa viisi perehdytään sivuston toteutukseen sekä tuotantodatan visualisoimiseen Chart.js-tekniikka käyttäen. Lopuksi

(6)

pohditaan sitä, millainen opinnäytetyöstä olisi alun perin pitänyt tulla ja mitkä asiat haittasivat opinnäytetyön etenemistä.

(7)

2 TOIMEKSIANTO

Opinnäytetyön toimeksiantajana toimii Satakunnan ammattikorkeakoulu. Opinnäyte- työn tarkoituksena on visualisoida Satakunnan ammattikorkeakoulun aurinkoenergia- järjestelmän tuotantodataa. Toimeksiantaja haluaa, että tuotantodataa pystyisi tarkastelemaan järjestelmäkohtaisesti ja kaaviot olisivat enemmän informatiivisia kuin sivuston aiemmat kaaviot. Kaavioiden tulisi myös toimia eri laitteilla esim. puhelimessa ja tabletilla.

Tavoitteena on saada visualisoinnin toteutus sellaiseksi, että sitä pystytään jatkossa helpommin ylläpitämään ja kehittämään. Toimeksiantajan toiveena oli myös, että toteutuksesta on kattava dokumentaatio myöhempien kehitystarpeiden pohjaksi. Opin- näytetyö rajautuu sivuston sekä kaavioiden toteutukseen. Sivuston ulkoasun suunnittelu, testaus, käyttöönotto sekä dokumentaation teko eivät sisälly opinnäytetyöhön.

3 MÄÄRITTELY JA SUUNNITTELU

3.1 Edellinen ratkaisu

Edellinen ratkaisu oli toteutettu ulkopuolisen toimijan toimesta hankkeen verkkosi- vulle. Sivusto oli tehty Wordpress-julkaisujärjestelmällä. Hankkeen sivustolla oli koottuna seurantakohteiden aurinkoenergiajärjestelmiä, joiden toiminnasta sivulla näytettiin tuotantodataa kaavioiden avulla. Kaaviot oli toteutettu Chart.js-tekniikalla, joka on JavaScript-kaaviokirjasto. Tuotantodata oli esitetty kuukausikohtaisesti pyl- väskaavion avulla. Dataa pystyi selaamaan kuukausikohtaisesti valitsemalla halutun kuukauden ja vuoden. Kaavioiden toimivuudessa oli ongelmia ja kaikkiin kaavioihin ei tullut tuotantodataa. Sivusto ja kaaviot eivät olleet responsiivisia eli eivät skaalautu- neet pienemmille laitteille.

(8)

3.2 Ratkaisut

Vaihtoehtona tuotantodatan visualisoimiseen oli muuan muassa se, että kaaviot toteu- tettaisiin WordPress-lisäosan avulla hankkeen sivustolle. Sopivaa lisäosaa ei lopulta löytynyt. Lisäosassa ongelmia aiheutti se, että niissä ei ollut mahdollisuutta tarkastella kaaviota tietyn ajanjakson mukaan esimerkiksi kuukausi, viikko tai päivänäkymänä.

Suurin osa lisäosista oli maksullisia sekä niiden ulkoasu ei aina miellyttänyt.

Toimeksiantajan kanssa tultiin lopulta siihen tulokseen, että tuotantodatalle tehdään kokonaan uusi sivusto. Kaikille järjestelmille tulee sivustolle omat sivut, jossa esite- tään niiden tuotantodata. Hankkeen pääsivustolle tulee linkki, josta pääsee tälle sivustolle.

Tekniikoiksi sivuston toteuttamiseen valikoitui Bootstrap ja Chart.js. Bootstrap-framework tekniikan avulla sivusto saadaan vaivattomasti toimimaan myös mobiililaitteilla. Chart.js-kaaviokirjasto oli käytössä jo aiemmassakin ratkaisussa. Päätin hyö- dyntää sitä myös tässä ratkaisussa, koska kaaviot ovat selkeitä ja ne ovat helppo toteuttaa. Kaaviokirjasto on pienikokoinen ja kaaviot toimivat myös mobiililaitteilla.

4 TEKNIIKAT

Tässä osiossa kuvataan työssä käytettyjä tekniikoita.

4.1 Bootstrap

Bootstrap on ilmainen avoimen lähdekoodin framework-tekniikka verkkosivujen ja web-applikaatioiden kehittämiseen. Se on yksi suosituimmista HTML-, CSS- ja Ja- vaScript-framework tekniikoista responsiivisen ja Mobile First -verkkosivuston kehit- tämiseen. Verkkosivut, jotka toteutetaan käyttäen Bootstrap-tekniikkaa skaalautuvat automaattisesti eri laitteille. Laite voi olla puhelin, tabletti tai tietokone. Bootstrapiin sisältyy erilaisia komponentteja, esimerkiksi navigointi, painikkeet, taulukot ja lomak- keet. (Qhmit.com 2020.)

(9)

Bootstrap on ohjelmoitu tukemaan HTML5- ja CSS3-tekniikoita. Bootstrapin avulla säästää paljon aikaa, kun voi käyttää valmiita komponentteja eikä jokaista tarvitse tehdä itse. Kaikilla komponenteilla on yhtenäinen ulkoasu. Jos niiden ulkoasu ei miel- lytä, Bootstrapin CSS-tiedostoa saa vapaasti muokata.

4.2 Chart.js

Chart.js on avoimen lähdekoodin JavaScript-kaaviokirjasto. Sen avulla pystyy helposti visualisoimaan dataa. Chart.js on yksi suosituimmista datan visualisointiin käytettä- vistä JavaScript-kirjastoista ja hyvä valinta pienemmille projekteille. Kirjasto sisältää kahdeksan kaaviotyyppiä esimerkiksi viiva-, pylväs ja ympyräkaavion. Chart.js on res- ponsiivinen. Data sijoitetaan kaavioon JavaScript-taulukon avulla. Chart.js automaattisesti skaalaa datan, luo akselit sekä ruudukon ja sovittaa kaavion valittuun alueeseen.

Chart.js:n käyttöä varten tarvitsee perustietämyksen HTML- ja JavaScript-tekniikoista. (Bjerrome 2017.)

5 TOTEUTUS

Tässä osiossa kerrotaan sivuston toteutuksesta sekä tuotantodatan visualisoimisesta.

Sivusto toteutetaan käyttämällä Bootstrapin luokkia sekä komponentteja. Kaavioiden visualisoimisessa käytetään Chart.js-kaaviokirjastoa.

5.1 Kehitystyökalut

Sivuston toteutuksessa käytettiin Visual Studio Code -ohjelmistoa, joka on Microsof- tin kehittämä. Visual Studio Code on avoimen lähdekoodin tekstieditori. Ohjelma on mahdollista saada macOS, Windows ja Linux käyttöjärjestelmille. Ohjelmassa on tuki usealle eri ohjelmointikielelle. Ohjelmassa on laaja valikoima erilaisia laajennuksia.

(Visual Studio Code 2020.)

(10)

5.2 Bootstrapin hyödyntäminen sivuston rakenteessa

Sivuston toteuttamista varten luotiin kansio tarvittavia tiedostoja varten. Kansioon li- sättiin ensin ”index.html”-tiedosto sekä alikansiot ”css” ja ”js”. Kansioon ”css” lisät- tiin sivuston CSS-tiedostot ja ”js” kansioon JavaScript-tiedostot. Näin saatiin kansion tiedostojen järjestys pysymään selkeänä.

5.2.1 Sivuston alustus

Seuraavaksi avattiin Visual Studio Code -ohjelmassa kansio, jonka luotiin sivustoa varten. Sivuston toteutus aloitettiin ”index.html”-tiedostosta lisäämällä siihen tarvittavat elementit. Tiedoston ensimmäiselle riville lisättiin <!DOCTYPE html>, joka kertoo selaimelle millä HTML-versiolla tiedosto on kirjoitettu. Sivusto toteutettiin HTML5-versiolla. Seuraavaksi lisättiin <html>-elementti, joka on HTML-sivun juu- rielementti. Elementtiin lisättiin ”lang”-määrite, joka kertoo millä kielellä sivuston si- sältö on kirjoitettu. (Korpela 2014, 192-193.)

Elementin <html> sisälle lisättiin <head>-elementti. Kun sivuston toteutuksessa käy- tettiin apuna Bootstrap-framework tekniikkaa, sivuston <head>-elementtiin täytyi li- sätä <meta>-elementti, joka varmistaa, että sivusto skaalautuu oikein eri laitteille.

Kuva 1. Kuvakaappaus ”index.html”-tiedoston <head>-elementin määrittelystä.

5.2.2 Tyylitiedostot

Seuraavaksi linkitettiin tarvittavat CSS-tiedostot <head>-elementtiin. Bootstrapin CSS-tiedosto linkitettiin CDN avulla <head>-elementtiin. Uusi CSS-tiedosto luotiin

(11)

”css”-kansioon, jonka nimeksi annettiin ”style.css” ja se linkitettiin <link>-elementin avulla Bootstrapin CSS-tiedoston jälkeen. Tähän tiedostoon ylikirjoitetaan tarvittavat Bootstrapin CSS-tyylit. On tärkeää, että oma CSS-tiedosto on ”bootstrap.min.css”-tiedoston jälkeen, koska myöhemmin ladatun tiedoston ominaisuudet ylikirjoittavat edel- lisen päälle. Enemmän CSS-tyylien ylikirjoittamisesta luvussa 5.4.

Kuva 2. Kuvakaappaus ”index.html”-tiedoston tyylitiedostojen linkittämisestä

<head>-elementtiin.

5.2.3 JavaScript-tiedostot

Osa Bootstrapin komponenteista tarvitsevat toimiakseen JavaScript-tiedostoja. Tarvit- tavat tiedostot ovat jQuery, ”Popper.js” sekä Bootstrapin oma JavaScript-tiedosto

”bootstrap.min.js”. Tiedostot lisätään HTML-tiedoston loppuun, ennen <body>-elementin sulkemistagia. Tiedostot linkitettiin CDN avulla. Tiedostojen järjestyksellä on myös merkitys: ensin jQuery, sitten Popper.js ja lopuksi Bootstrapin oma

”bootstrap.min.js”-tiedosto.

Kuva 3. Kuvakaappaus ”index.html”-tiedostosta JavaScript-tiedostojen linkityksestä.

(12)

5.2.4 Ylänavigointi

Sivuston ylänavigoinnin rakentaminen aloitettiin luomalla <div>-elementti, jolle annettiin luokaksi ”container-fluid”. Tämä elementti toimii sivuston kehyksenä. Luotiin

<nav>-elementti, jolle annettiin luokat ”navbar navbar-expand-lg navbar-dark main- menu”. Luokan ”navbar-expand{-sm|-md|-lg|-xl}” avulla pystytään määrittämään missä vaiheessa romahtava navigointi (collpase nav) tulee näkyviin. Tässä tapauksessa romahtava navigointi tulee näkyviin, kun sivuston leveys on alle 992 pikseliä.

Luokka ”main-menu” ei ole Bootstrap-luokka vaan itse toteutettu. Sivustolle tulee alanavigointi, joka näkyy ”Seurantakohteet”- ja ”SolarLeap”-sivujen alasivuilla. Luokan

”main-menu” avulla pystytään erottamaan navigoinnit toisistaan ja luomaan niille eri- laiset ulkoasut. Jos luokkaa ei olisi, alanavigointi perisi joitakin ylänavigaation omi- naisuuksista.

Elementin <nav> sisälle lisättiin <div>-elementtiin luokka ”container-lg”. Tämän luokan avulla navigointi saadaan keskitettyä ja irti sivuston vasemmasta reunasta. Levey- deksi määriteltiin 1140 pikseliä. Sivuston logoa varten määriteltiin <a>-elementille luokka ”navbar-brand”. Romahtava navigaatio määriteltiin <button>-elementille ja tälle määriteltiin ”navbar-toggler” luokka. Jotta navigointi toimii halutulla tavalla, pi- tää <button>-elementille antaa avaus- ja sulkemistoiminnallisuus data-toggle= ”collapse” sekä data-target=”#mainNavigation”. Elementin <button> sisälle määriteltiin

<span>-elementti, johon lisättiin viiva-ikoni ”navbar-toggler-icon” luokan avulla.

Navigointilinkit ympäröitiin <div>-elementillä, johon määriteltiin luokat ”collapase navbar-collapse”. Elementille määriteltiin myös ID, joka tulee olla sama kuin <button>-elementtiin määritelty ”data-target”. Elementin <div> sisälle lisättiin <ul>-elementti, jolle annettiin luokat ”navbar-nav ml-auto”. Luokan ”ml-auto” avulla navigointilinkit saadaan sijoitettua sivuston oikeaan reunaan. Seuraavaksi luotiin kolme

<li>-elementtiä, joille määriteltiin luokka ”nav-item”. Luokan ”active” avulla pysty- tään ilmaisemaan, millä sivustolla käyttäjä on. Elementtien <li> sisälle luotiin <a>- elementit sivujen linkitystä varten ja niille määriteltiin luokka ”nav-link”.

(13)

Kuva 4. Kuvakaappaus ”index.html”-tiedoston ylänavigoinnista.

5.2.5 Alanavigointi

Alanavigointi näkyy ”Seurantakohteet”- ja ”SolarLeap”-sivujen alasivuilla. Sivustolla alanavigointi sijaitsee heti ylänavigoinnin jälkeen. Tätä varten luotiin uusi HTML- tiedosto, jonka nimettiin ”samk.html”. Sivu on ”Seurantakohteet”-sivun alasivu. Tä- hän tiedostoon toteutetaan myös Satakunnan ammattikorkeakoulun aurinkosähköjär- jestelmän tuotantodatan visualisointi myöhemmässä vaiheessa opinnäytetyötä. Seu- raavaksi kopioitiin edellisessä luvussa tehdyt koodit ”index.html”-tiedostosta.

Ylänavigoinnin koodi kopioitiin vielä uudestaan ja tehtiin alla mainitut muutokset elementtien luokkiin.

Elementtiin <nav> vaihdettiin luokan ”navbar-expand-lg” tilalle ”navbar-expand- md”. Alanavigoinnissa romahtava navigointi tulee näkyviin, kun sivuston leveys on alle 768 pikseliä. Elementtiin lisättiin myös itse toteutettu luokka ”sub-menu”, jonka avulla saan luotua alanavigoinnille erilainen ulkoasu verrattuna ylänavigointiin.

Alanavigointiin ei tule logoa, joten <a>-elementin jätettiin pois. Elementtiin <button>

vaihdettiin data-target=”#subNavigation” sekä <div>-elementtiin ID:ksi ”subNaviga- tion”. Elementtiin <ul> vaihdettiin luokan ”ml-auto” tilalle ”mr-auto”, jonka avulla navigointi saadaan sijoitettua sivuston vasemmalle puolelle.

(14)

Kuva 5. Kuvakaappaus ”samk.html”-tiedoston alanavigoinnista.

5.3 Kaavioiden luominen Chart.js-tekniikkaa käyttäen

Kaaviot toteutetaan ”samk.html”-tiedostoon. Kansioon ”js” luotiin JavaScript-tiedosto

”app.js”, johon määritellään kaaviot. Toimiakseen kaavio tarvitsee ”Chart.min.js”-tiedoston, joka ladattiin Chart.js GitHub-sivustolta. Tiedostot ”app.js” ja ”Chart.min.js”

linkitettiin ennen <body>-elementin sulkemistagia. Linkitettiin myös jQuery-tiedosto, jota tarvitaan kaavio datan hakemiseen.

Kuva 6. Tarvittavien JavaScript-tiedostojen linkitys ”samk.html”-tiedostoon.

Seuraavaksi määriteltiin elementti, johon kaavio sijoitetaan. Chart.js käyttää HTML5

<canvas>-elementtiä, johon määritellään ID. ID:n nimeksi annettiin ”chart”.

Kuva 7. Kaavion paikan määritteleminen ”samk.html”-tiedostossa.

(15)

5.3.1 Datan lisääminen kaavioon

Kaavion datan ja asetuksien määritteleminen tapahtuu ”app.js”-tiedostossa. Data kaavioon haettiin jQueryn ajax()-metodilla URL-osoitteesta. Chart.js olettaa, että data syötetään kaavioihin taulukkona (array).

Kuva 8. Datan hakeminen jQueryn ajax()-metodin avulla "app.js"-tiedostossa.

Data, jota kaaviossa käytetään, on JSON-muodossa ja se sijaitsee URL-osoitteessa.

Dataa tulee tiedostoon viiden minuutin välein ja päiväkohtaisesti. Tiedosto koostuu sisäkkäisistä JSON objekteista. Yksi objekti sisältää seuraavat ominaisuudet: date, dev211, dev212, dev213, dev214, dev215, dev216, dev217, dev218, dev222, dev223.

”Date”-ominaisuuteen tulee arvoksi päivämäärä. ”Dev”-alkuiset ominaisuudet ovat in- verttereitä, joihin tulee arvoksi teholukema kilowattituntina (kWh).

Kuva 9. Kuvakaappaus objektien rakenteesta ”data.json”-tiedostosta.

Seuraavaksi luotiin tyhjät taulukkomuuttujat, jotka nimettiin samannimisiksi kuin

”data.json”-tiedostossa olevien objektien ominaisuudet. Tämän jälkeen lisättiin data muuttujiin for-silmukassa push()-metodin avulla.

(16)

Kuva 10. Datan lisäys muuttujiin push()-metodin avulla.

5.3.2 Kaavion luominen

Seuraavaksi luotiin muuttuja ”ctx”, johon sijoitettiin document-olion getElement- ById()-metodi. Metodin arvoksi annettiin ID ”chart”. Tämä on sama ID, jonka annettiin HTML-tiedostossa <canvas>-elementille. Uusi kaavio luotiin käyttämällä Chart()- konstruktoria, joka ottaa kaksi parametria: ensimmäinen parametri on canvas, johon kaavio sijoitetaan eli muuttuja ”ctx”. Toinen parametri on objekti eli olio, jossa on kaavion ominaisuudet. Kaavion ominaisuudet sijoitetaan aaltosulkeiden sisälle. Kaa- vion tyyppinä käytettiin viivakaaviota. Kaavion tyypin määrittely tapahtuu sijoitta- malla type-ominaisuudelle arvoksi ”line”.

Kuva 11. Uuden kaavion luominen ja kaavion tyypin määrittäminen.

Seuraavaksi lisättiin data kaavioon. Type-ominaisuuden jälkeen lisättiin data-objekti, joka sisältää kaksi ominaisuutta labels ja datasets. Ominaisuudet laitettiin aaltosulkeiden sisälle. Labels-ominaisuus ottaa arvoksi taulukon, joka sisältää x-akselin nimik- keet. Tässä kaaviossa x-akseliin tulee päivämäärät, joten label-ominaisuuteen sijoitettiin muuttuja ”date”. Datasets-ominaisuus on taulukko, joka sisältää ainakin yhden dataset-objektin. Datasets-ominaisuuden avulla lisätään lukuarvot kaavioon, joita hyö- dynnetään kaavion piirtämisessä.

(17)

Dataset-objektiin lisättiin neljä ominaisuutta: label, borderColor, data, fill. Label-ominaisuus määrittelee datasetin nimen ja borderColor-ominaisuus viivan värin. Data- ominaisuuteen sijoitettiin taulukko muuttuja ”dev211”, joka sisältää lukuarvoja. Fill- ominaisuuteen määriteltiin arvo ”false”. Tämä poistaa viivan alla olevan alueen täytön.

Kuva 12. Datan määrittely kaavion.

Kaavion tulee dataa kymmenestä invertteristä, joten dataset-objekteja tehtiin yhdeksän kappaletta ja niille määriteltiin samat ominaisuudet. Dataset-objektit erotetaan toisistaan pilkulla. Label-ominaisuuteen vaihdettiin datasetin nimi ja viivan värin. Data- ominaisuuteen vaihdettiin eri taulukkomuuttuja. Näillä muutoksilla syntyy alla olevan kuvan näköinen kaavio (Kuva 13).

Kuva 13. Kuvakaappaus ”samk.html”-tiedoston kaaviosta data lisäämisen jälkeen.

(18)

5.3.3 Kaavion asetuksien määrittely

Seuraavaksi tehtiin muutoksia kaavion oletusasetuksiin. Data-objektin jälkeen lisättiin options-objekti, johon määriteltiin seuraavat ominaisuudet (Kuva 14).

Kuva 14. Kuvakaappaus kaavion asetuksista.

Elements-objektin point.radius-ominaisuus muuttaa viivan pisteen muotoa. Tässä tapauksessa arvoksi asetettiin nolla, koska pistettä ei haluttu näkyviin. Datassa päivä- määrä on muodossa ”DD.MM.YYYY HH:MM” ja se näkyy kaavion x-akselissa sa- massa muodossa. Toimeksiantaja halusi, että x-akselissa näkyy vain kellonaika. Tätä varten piti ladata ”moment.js” tiedosto ja lisätä se HTML-tiedostoon ennen <body>

elementin sulkemistägiä. Scales-objektin xAxes.time.displayFromats.hours-ominaisuuden avulla saa muutettua päivämäärän siten, että pelkkä kellonaika näkyy. Ensin pitää xAxes.time.parser-ominaisuudessa kertoa, missä muodossa päivämäärä alun perin oli.

(19)

Kun xAxes.ticks.autoSkip-ominaisuuden arvo on ”true”, kaikkia x-akselin arvoja ei näytetä. Ominaisuus automaattisesti laskee, kuinka monta arvoa akselille mahtuu. Jos arvo olisi ”false”, näytettäisiin kaikki arvot, vaikka ne eivät mahtuisi ja menisivät pääl- lekkäin. Y-akselin minimi arvo määritellään yAxes.ticks.min-ominaisuudessa eli alle nollan olevia arvoja ei näytetä.

Kuva 15. Kuvakaappaus kaaviosta oletusasetuksien muutosten jälkeen.

5.3.4 Kaavioiden ryhmittely

Edellisessä luvussa luotiin kaavio, jossa oli kaikki invertterit. Seuraavaksi on tarkoitus ryhmitellä kaaviot eli luoda vielä neljä uutta kaaviota edellisessä luvussa luodun kaavion alapuolelle. Ensimmäiseen kaavioon tulee invertterit dev211, dev212 ja dev213.

Tätä kaaviota kutsutaan nimellä ”Itä-Länsi tutkimus”. Toiseen kaavioon tulee invertterit dev214, dev215, dev216, dev217 ja dev218. Tätä kaaviota kutsutaan nimellä ”Ri- vivälitutkimus”. Kolmanteen kaavion tulee invertteri dev222 ja kaaviota kutsutaan ni- mellä ”Iso tracker”. Neljänteen kaavion tulee invertteri dev223 ja kaaviota kutsutaan nimellä ”Sähköpyöräkatos”.

Kaavioiden ryhmittelyssä hyödynnettiin Bootstrapin accordion-komponenttia. Mikäli kaikki kaaviot olisi laitettu allekkain, olisi se vienyt enemmän tilaa ja sivusto olisi näyttänyt sekavammalta. Accordion avulla pystyy piilottamaan ja näyttämään sisältöä.

Alla olevassa kuvassa (Kuva 16) on esimerkki accordion-komponentin rakenteesta.

(20)

Kuva 16. Esimerkki accordion-komponentin rakenteesta HTML-tiedostossa.

Tässä tapauksessa <div>-elementtejä, joihin on määritetty luokka ”card”, tulee neljä kappaletta, koska kaaviota on neljä. Kaavio sijoitettiin ”card-body”-luokan sisälle.

Kaavion lisäys HTML-tiedostoon ja asetuksien määrittely tapahtui samalla tavalla kuin edellisessä luvussa. Alhaalla olevassa kuvassa (Kuva 17) on kuvakaappaus siitä miltä accordion-komponetti näyttää sivustolla.

Kuva 17. Kuvakaappaus ”samk.html”-sivun accordion-komponentista.

Alhaalla olevassa kuvassa (Kuva 18) on kuvakaappaus siitä, miltä accordion-kompo- nentti näyttää sivustolla, kun yhtä listan otsikoista klikataan. Silloin sisältöosuus eli tässä tapauksessa kaavio tulee näkyviin. Kun seuraavaa otsikkoa klikkaa, edellinen sisältöosuus menee automaattisesti kiinni ja toinen avautuu.

(21)

Kuva 18. Kuvakaappaus ”samk.html”-sivun accordion-komponentista, kun yhtä listan otsikoista on klikattu.

5.4 Tyylin rakentaminen

Bootstrap komponenteilla ja lisäosilla on oletustyylit. Jos niille haluaa luoda oman tyylin, pitää oletustyylit korvataan omilla tyyleillä. Parhaiten tämä onnistuu luomalla oma CSS-tiedosto, johon ylikirjoitetaan Bootstrapin tyylit omilla tyyleillä. Tyylitie- dostojen linkitys tehtiin luvussa 5.2.2.

5.4.1 Chrome kehitystyökalut

Tyylin määrittelyssä käytettiin apuna Chrome-selaimen kehitystyökaluja. Kehitystyö- kalut saa näkyviin klikkaamalla hiiren oikeaa ja valitsemalla listasta kohta ”Tarkista”.

Tämän jälkeen kehitystyökalut ilmestyvät sivuston oikeaan- tai alareunaan. Sivuston toteutuksessa käytettiin ”Elements”-välilehteä. Välilehdellä pystyy tarkastelemaan sivuston rakennetta sekä tyylimäärittelyjä. Tyylimäärittelyihin pystyy tekemään muok- kauksia reaaliajassa.

(22)

Alhaalla olevassa kuvassa (Kuva 19) tarkastelen, mitä tyylimäärityksiä logossa on eli luokassa ”navbar-brand”. Elementtien tarkastelu tapahtuu klikkaamalla vasemmassa reunassa olevaa kuvaketta, jossa on nuoli. Tämän jälkeen valitaan elementti, jota ha- lutaan tarkastella klikkaamalla sitä hiirellä. Oikeanpuoleiseen laatikkoon tulee näky- viin logon sen hetkiset määrittelyt. Tämän avulla saadaan selville, mitä luokkaa elementti käyttää ja mitä tyylimäärityksiä Bootstrap on luokille määritellyt eikä tarvitse selata erikseen Bootstrapin CSS-tiedostoa.

Kuva 19. Esimerkki elementin tarkistamisesta Chromen kehitystyökalulla.

5.4.2 Bootstrap luokkien ylikirjoitus

CSS-tiedostossa Bootstrap luokkaan ”container-fluid” määriteltiin ominaisuus ”padding: 0px”, joka poistaa elementin ympäriltä täytteet (padding). Tämän avulla saan poistettua vasemmalla ja oikealla puolella olevat 15 pikselin sivutäytteet. Tämän jäl- keen elementti on sivuston reunasta reunaan.

Seuraavaksi siirryttiin ylänavigoinnin tyylin määrittelyyn. Sivuston logon tyyli määri- teltiin luokan ”navbar-dark .navbar-brand” avulla. Logon kirjaimet muutettiin kaikki isoksi märittelemällä ominaisuudeksi ”text-transform: uppercase”. Lisäksi logon ko- koa muutettiin sekä ominaisuuden ”text-color” arvoksi määriteltiin ”#f8b739”

(oranssi), joka on heksamuotoinen RGB-koodi.

(23)

Ylänavigointipalkin taustaväri muutettiin tummanharmaaksi lisäämällä luokan

”navbar.main-menu” ominaisuuden ”background-color” arvoksi ”#333”. Yläpuolelle lisättiin 40 pikseliä täytettä, näin saatiin sivuston yläreunaan enemmän tilaa.

Navigointilinkkien tyyli määriteltiin luokkien ”.main-menu .navbar-nav .nav-link”

avulla. Linkkien kirjaimet muutettiin kaikki isoksi sekä linkin väriksi määriteltiin val- koinen. Linkkien lihavointi saatiin määriteltyä lisäämällä ominaisuuteen arvoksi ”font- weight: 500”. Linkkien oikealle puolelle lisättiin täytettä 20 pikseliä, jolloin linkkien väliin saadaan enemmän tilaa. Yläpuolelle lisättiin 15 pikseliä täytettä. Tämän avulla linkit saatiin samalle tasolle logon kanssa.

Luokkaan ”.main-menu .navbar-nav .nav-link:hover” määriteltiin tekstin väriksi oranssi. Tällä määrityksellä linkin väri muuttuu oranssiksi, kun kursori on linkin päällä. Luokkaan ”.main-menu .navbar-nav .nav-item.active > a” määriteltiin tekstin väriksi oranssi. Tämän avulla näytetään millä sivustolla käyttäjä on.

Alanavigoinnin taustavärin muutettiin oranssiksi määrittelemällä luokkaan

”.navbar.sub-menu” ominaisuuden ”background-color” arvoksi ” #f8b739”. Yläpuo- lelle lisättiin täytettä 10 pikseliä. Alapuolelle lisättiin marginaalia (margin) 30 pikseliä.

Tällä määrityksellä saadaan alanavigoinnin sekä sivuston sisällön välille enemmän tilaa.

Alanavigoinnin linkkien tyyli määriteltiin luokkien ”sub-menu .navbar-nav .nav-link”

avulla. Linkkien väri muutettiin vaaleanharmaa sekä niihin lisättiin lihavointi. Link- kien oikealle puolelle lisättiin täytettä 30 pikseliä. Vasemmalta puolelta poistettiin täytteet määrittelemällä ominaisuuden ”padding-left” arvoksi ”0px”, jolloin saadaan ensimmäinen linkki alkamaan samasta kohtaa kuin yläpuolella sijaitseva logo. Luok- kiin ”.sub-menu .navbar-nav .nav-link:hover” sekä ”.sub-menu .navbar-nav .nav- item.active > a” määriteltiin vielä tekstin väriksi oranssin.

Kuva 20. Navigointi Bootstrapin oletustyyleillä.

(24)

Kuva 21. Navigointi oletustyylien ylikirjoittamisen jälkeen.

5.4.3 Responsiivisuus

Kun sivuston leveys on alle 992 pikseliä, tehtiin seuraavat muutokset. Logon vasemmalle puolelle lisättiin 15 pikseliä täytettä, jolloin logo saadaan irti vasemmasta reunasta. Ylänavigointipalkin yläpuolelle lisättiin 25 pikseliä täytettä. Vasemmalta, oikealta ja alhaalta poistettiin ylimääritäiset täytteet. Ylänavigoinnin painikkeelle määri- teltiin ylös 15 pikseliä ja alas 10 pikseliä täytettä. Vasemmalle ja oikealle puolelle 20 pikseliä täytettä. Tämän avulla saadaan painiketta irti sivuston reunoista sekä keskitet- tyä samaan tasoon logon kanssa. Navigointilinkit keskitettiin keskelle. Linkkien ylä- ja alapuolelle lisättiin 10 pikseliä täytettä sekä vasemmalle ja oikealle puolelle 20 pik- seliä. Linkkien taustaväriksi määriteltiin vaaleanharmaa. Alanavigointipalkin vasemmalta puolelta poistettiin täytteet, jolloin alanavigoinnin ensimmäinen linkki alkaa samasta kohtaa kuin yläpuolella oleva logo.

Kuva 22. Navigointi Bootstrapin oletustyyleillä, kun sivuston leveys on alle 992 pik- seliä.

(25)

Kuva 23. Navigointi oletustyylien ylikirjoittamisen jälkeen, kun sivuston leveys on alle 992 pikseliä.

Kun sivuston leveys on alle 768 pikseliä, tehtiin seuraavat muutokset. Alanavigoinnin painike keskitettiin keskelle ja lisättiin ylä- ja alapuolelle 10 pikseliä täytettä. Ala- navigointipalkista poistettiin ylimääräiset täytteet asettamalla ominaisuudet ”padding”

arvon ”0px”. Alanavigoinnin linkit keskitettiin keskelle ja lisättiin myös ylä- ja alapuolelle 10 pikseliä täytettä.

Kuva 25. Navigointi oletustyylien ylikirjoittamisen jälkeen, kun sivuston leveys on alle 768 pikseliä.

(26)

Kun sivuston leveys on alle 595 pikseliä, tehtiin seuraavat muutokset. Logo keskitettiin keskelle ja lisättiin ylä- ja alapuolelle 5 pikselin marginaalin, jolloin logon ympä- rille tulee enemmän tilaa. Leveydeksi määriteltiin 100%. Ylänavigointipalkkiin lisät- tiin ominaisuudelle ”padding” arvoksi ”20px 0px 0px”. Tällä määrityksellä saadaan yläpuolelle tilaa ja vasemmalta, oikealta sekä alhaalta poistetaan ylimääräset täytteet.

Ylänavigoinnin painike keskitettiin keskelle ja lisättiin yläpuolelle 5 pikseliä ja alapuolelle 15 pikseliä täytettä.

6 JATKOKEHITYKSET

Alun perin oli tarkoitus, että tässä opinnäytetyössä visualisoidaan Satakunnan ammattikorkeakoulun aurinkojärjestelmän lisäksi vielä etäjärjestelmien tuotantodataa. Etä- järjestelmiä ovat Porin uimahalli, Porin kaupungin ympäristövirasto sekä kevään 2016

(27)

aikana toteutetut SOLARLEAP Satakunta -hankkeen oppilaitospilottikohteet. Oppi- laitospilottikohteita on yhdeksän kappaletta ja ne ovat eri omakotitalojen yhteyteen toteutettuja aurinkosähkö- ja aurinkolämpökohteita ympäri Satakuntaa. Etäjärjestel- mien tuotantodataa ei saatu visualisoitua sen takia, että datan vienti tietokantaan vii- västyi.

Opinnäytetyön teon hetkellä tuotantodataa pystyi tarkastelemaan vain päiväkohtai- sesti. Tuotantodataa ei pystynyt selaamaan tietyn ajanjakson mukaan. Tulevaisuudessa on tarkoitus, että tuotantodataa olisi mahdollista selata päiväkohtaisen näkymän lisäksi kokonais-, kuukausi ja viikkonäkymässä.

7 POHDINTA

Hankkeen suunniteltua toteutusta haittasivat muun muassa seuraavat tekijät: tuotantodataa varten piti tehdä kokonaan uusi tietokanta sekä sopivan henkilön löytäminen edellä mainittuun tehtävään vei aikaa odotettua kauemmin. Tämä hidasti sekä hankkeen että etenemistä. Myös tuotantodatan keruun rakennuttaminen vaikutti opinnäyte- työn etenemiseen. Aiempi tuotantodatan keruu oli toteutettu itse kehitetyin järjestel- min. Toimeksiantaja halusi nykyisen ratkaisun muotoon, jossa se on helpommin yllä- pidettävissä ja siihen löytyy teknistä tukea sekä laajempaa hyötyä oppilaitoksen kan- nalta. Opinnäytetyötäni varten sain kuitenkin käyttööni Satakunnan ammattikorkeakoulun aurinkoenergiajärjestelmän tuotantodataa, jota hyödynsin, että sain opinnäyte- työni tehtyä. Ongelmia oli myös sopivan ratkaisun löytämiseen tuotantodatan visualisoimiseen.

Tämän opinnäytetyön toteutus oli opettavainen, mutta haasteellinen projekti. Haasta- vin asia oli oikean ratkaisun löytäminen tuotantodatan visualisoimiseen. Tuntui, että aina, kun löysi uuden mahdollisen tavan, jolla visualisoimisen voisi toteuttaa, tuli usein jonkin este, minkä vuoksi tätä tapaa ei voitu käyttää. Koin myös turhauttavaksi sen, kun projekti ei edennyt niin kuin piti ja tuli viivästyksiä. Haasteita tuotti myös

(28)

joidenkin toiveiden toteuttaminen sekä dokumentaation puuttuminen edellisestä rat- kaisusta. Minulla oli jo entuudestaan kokemusta Bootstrap-tekniikasta. Chart.js-tekniikasta minulla ei ollut aiempaa kokemusta, mutta sen tekniikka oli silti helppo omak- sua.

Vaikka opinnäytetyön toteutuksessa oli vastoinkäymisiä ja tuntui, että ei tämä koskaan valmistu, oli sitä tehdessä myös niitä onnistumisen tunteitakin. Niitä tuli esimerkiksi silloin kun vihdoin löydettiin ratkaisu siihen, miten tuotantodataa saadaan helpoiten visualisoitua. Vaikka opinnäytetyöstä ei tullut sellainen kuin siitä alun perin piti tulla, olen silti tyytyväinen lopputulokseen.

(29)

LÄHTEET

Korpela, J. K. 2014. HTML5-käsikirja. Jyväskylä: Docendo Oy. Viitattu 29.4.2020.

Bjerrome, T. A. 2017. Data visualization with Chart.js: An introduction. Viitattu 8.6.2020. https://tobiasahlin.com/blog/introduction-to-chartjs/

Qhmit.com 2020. What is Bootstrap? Viitattu 5.5.2020.

https://www.qhmit.com/bootstrap/bootstrap_4/tutorial/what_is_bootstrap.cfm Visual Studio Code 2020. Getting Started. Viitattu 8.5.2020. https://code.visualstu- dio.com/docs