Harjoittelijana Symbiolla – Infonäytön koodaus
Tämä oli hauska ja itsenäinen projekti. Saan nähdä työni jäljen joka aamu, kun saavun toimistolle.
Olen Juha Rainto ja aloitin insinööriharjoittelijana Symbiolla helmikuussa. Heinäkuusta elokuuhun kehitin infonäyttöä Symbion toimistolle Oulussa. Näytössä tulisi näkyä kaikki rakennuksen yritykset kerroksittain, sekä kello ja sääennuste. Jokaisella yrityksellä tulisi olla oma muokattava viestikenttä ja lisäksi taustalle haluttiin livestriimi Oulun kauppatorilta.
Kaikki alkoi softasta
Projekti alkoi sopivan alustan löytämisellä, jolla näyttö toteutettaisiin. Sain vinkin vanhemmalta kollegalta käyttää Ghost CMS alustaa. Ghost oli itselleni tuntematon blogialusta, mutta tarpeisiimme juuri sopiva. Kahdessa kuukaudessa ja kovalla työllä tämä blogialusta toivottaa nyt kävijät tervetulleiksi rakennukseen.
Admin -sivut ovat yksinkertaiset ja helppokäyttöiset. Yrityksen logo, tunnusväri ja lyhyt viesti ovat yritysten muokattavissa. Ghostin alkuperä blogausalustana tarjosi helpot työkalut käyttäjien oikeuksien muokkaamiseen. Sivun haltijalla, eli adminilla on kaikista eniten valtaa. Admin voi lisätä uusia yrityksiä rakennukseen, muokata nykyisten yritysten tietoja, sekä ylläpitää sivua. Jokaisen yrityksen edustaja voidaan lisätä sisällöntuottajakäyttäjänä, jolloin heidän oikeutensa rajoittuvat oman yrityksensä tietojen muokkaamiseen.
Sukellus syvemmälle toiminnallisuuksiin
Etusivu, eli itse infonäyttönäkymä vaati eniten työtä. Ghost käyttää sivun mallien luomiseen Handlebars -kirjastoa, joten itse HTML sivun rakentaminen oli yksinkertaista. Handlebars syöttää sivun sisällön automaattisesti ja käyttämällä Handlebars -apufunktioita, sisältö saadaan suodatettua if-else lauseilla sivun latausvaiheessa. Tästä syntyy staattinen HTML sivu ja ensimmäinen urakka olikin sivun tietojen päivittäminen automaattisesti.
Ghost tallentaa sivun sisällön SQLite3 tietokantaan ja yritin ensin lukea sisällön muutokset suoraan tietokannasta. Tämä toteutus jäi pian turhaksi. Lukiessani Ghostin dokumentaatiota huomasin Ghost Content API ominaisuuden, eli REST API:n josta pystyi hakemaan kaiken blogin sisällön. Sivu käyttää tällä hetkellä ajastettua JavaScript funktiota, joka lukee dataa API:sta AJAX:n avulla ja vertaa sitä sivulla olevaan dataan. Jos tekstiin on tullut muutoksia, se korvataan uudella tekstillä.
Pienempiin työtehtäviin lukeutui kellon ja säädatan näyttäminen sivun alareunassa. Kello, on vain kello, jonka JavaScript lukee järjestelmän ajasta. Säädata haetaan XML -tiedostona Norjan meteorologisen instituutin avoimesta API:sta. Ticker teksti tuli animoida, jos se ylitti annetun merkkimäärän. Animointi käyttää CSS3 animaatiota, jolle on luotu oma HTML luokka. Luokka annetaan dynaamisesti ticker elementeille JavaScript funktion avulla. Tätä funktiota kutsutaan kerran, kun sivu latautuu, jolloin se tarkastaa kaikkien ticker elementtien pituuden. Tämän jälkeen sitä kutsutaan vain, kun ticker teksti päivittyy.
Virheitä ja niiden korjaamista
Viimeinen ja työläin osa projektia oli Oulun kauppatorin livestriimi. Tässä kohtaa haluan antaa suuret kiitokset työtoverille ja kanssaharjoittelijalle Topi Ruokamolle, jonka apu ja tietämys oli korvaamaton RTSP striimin ongelmanratkaisussa. RTSP striimi tuli muuntaa web tuettuun muotoon. Striimin piti näkyä reaaliajassa, mutta aluksi saimme vastaanotettua vain yhden kuvan sekunnissa ja striimi kaatui hetken kuluttua yhdistämisestä. Kokeilimme eri kuljetuskerroksia, sekä koodekkiasetuksia, mutta mikään ei tuntunut auttavan. Tämän tehtävän piti olla suhteellisen yksinkertainen, mutta siitä tuli projektin suurin päänvaiva.
Yhtenä päivänä työskennellessäni kotoa huomasin, että striimi toimi normaalisti. Tässä oodi kotoa työskentelylle – ilman sitä tämän ongelman ratkaiseminen olisi kestänyt varmasti pidempään. Ongelmana oli käyttämämme verkko ja toimiston verkossa testattaessa emme saaneet vakaata yhteyttä striimiin, mutta henkilökohtaisessa verkossa emme kohdanneet samaa ongelmaa. Tämän jälkeen pääsimme keskittymään striimin näyttämiseen itse sivulla.
Tässä vaiheessa sivu toimi Windows-järjestelmälläni ja oli aika siirtää se sille tarkoitetulle laitteistolle.
Laitteisto, joka näyttöä pyörittää
Projektin oli alun perin tarkoitus pyöriä Raspberry Pi 4 -alustalla. Edullinen ja helposti asennettava ja aina saatavilla, Raspberry Pi on jo käytössä suuressa määrässä info- ja mainosnäyttöjä ympäri maailman. Suunnitelmamme käyttää Raspberry Pi -alustaa pyörittämään infonäyttöä kohtasi ongelman, kun ticker tekstin animaatiossa ilmeni satunnaista viivettä. Lisäksi livestriimi ja sivun frame rate putosi viiteen kuvaan sekunnissa. Voi olla, että ohjelmani vei liikaa resursseja, tai että Raspberry Pi:n teho loppui kesken. Projekti pyörii tällä hetkellä HP ProDesk 600 G3 Mini -tietokoneella.
Omat ajatukset
Tämä oli hauska ja itsenäinen projekti. Olen suhteellisen uusi lisäys Symbion tiimissä, sekä valmistumisen kynnyksellä, joten tämä projekti oli itselleni myös hyvin opettava. Projektin alussa seurasin suunnitteludokumenttia tarkasti, mutta projektin edetessä pystyin tekemään ehdotuksia projektiin liittyen ja sain myös palautetta ehdotuksilleni, mikä oli upeaa. Olen lopputulokseen tyytyväinen ja asiakas jakaa saman tuntemuksen. Saan nähdä työni jäljen joka aamu, kun saavun toimistolle. Toivon vain, että aamulla ei ole virheviestejä odottamassa minua.
Juha Rainto
11.10.2022 | Artikkelit
C++ harrastelijasta asiantuntijaksi – Tatun uratarina Symbiolla
Symbio muuttaa: Osa 2 – Helsinki
