Blogi 7.9.2016

Kosketuskäyttöinen kirjauslaite kikkeritulosten kirjausjärjestelmälle

Kiva kun löysit tämän artikkelin! Se sisältää varmasti hyvää tietoa, mutta pidäthän mielessä, että se on kirjoitettu 8 vuotta sitten.

(Mikä kikkeri? Mikä järjestelmä? Lue blogisarjan ensimmäinen osa pohjaksi!)
Huolimatta web-pohjaisen kirjauskäyttöliittymän toiminnasta päätelaitteella kuin päätelaitteella pelejä jäi toisinaan kirjaamatta. Kännykällä ei aina raaski selailla kirjaamaan ja matkalla työpöydän ääreen voi törmätä yllättäviin asioihin joiden seurauksena kirjaaminen unohtuu. Päädyin tilaamaan firman tarjoaman ”itsenäisen osaamisen kehittämisen tuen” puitteissa itselleni tarvittavat komponentit kirjauslaitteen rakentamiseksi, joka voitaisiin sijoittaa kikkeripöydän läheisyyteen. Goforen tyypilliseen ”kehtaamiskulttuurin” tapaan en kysynyt tähän lupaa, vaan pistin tilauksen menemään firman kortilla.
Aloitin sovelluksen kehittämisen elokuussa 2016 jo ennen laitteen saapumista. Olin valinnut teknologioiksi Qt:n, joten sovelluksen kehittäminen onnistui pitkälle näppärästi työpöytäsovelluksena. Ensimmäinen taustajärjestelmälle keskusteleva versio oli valmis parissa tunnissa ja ensimmäinen testikirjaus kosketusystävällisellä käyttöliittymällä syntyi samana päivänä. Toisen kehityspäivän jälkeen sovellus oli valmis prototyyppi testattavaksi kohdelaitteella.

Ensimmäinen käyttöliittymäprototyyppi
Ensimmäinen käyttöliittymäprototyyppi

Seuraavana perjantaina työpöytäni ääreen kiikutettiin kaksi pakettia, joista kuoriutuivat Raspberry Pi 3 -tietokone sekä yhteensopiva 7″ kosketusnäyttö. Kokosin koko komeuden pikaista toimivuustestiä varten, johon käytin Debian Linux pohjaista Raspbiania. Ensimmäisellä käynnistyksellä ylösalaisin piirtynyt kuva selvisi nopeasti järjestelmän ”ominaisuudeksi”, joka korjaantui pienellä asetustiedoston viilaamisella.
Tuleva kirjauslaite

 
Laite koottuna
Laite koottuna

Viikonlopun aikana käyttöjärjestelmä vaihtui kevyempään archlinuxarmiin, koska Raspbianin repositoryssa ei ollut riittävän tuoreita versioita käyttämistäni sovelluskomponenteista. Tämä osui myös yksiin muiden tavoitteideni kanssa, koska halusin tehdä laitteesta mahdollisimman virtapihin, eikä Raspbianin näkökulmastani ylimääräisten sovelluskomponenttien ajaminen sopinut tähän. Pienen näpertelyn jälkeen sain vihdoin sovellukseni ruudulle ilman ikkunointijärjestelmää tai muutakaan taustalla pyörivää ylimääräistä graafista käyttöliittymää.
Kuva vihdoin myös laitteella, fonttien puuttuminen tosin vaikeutti käyttöä.
Kuva vihdoin myös laitteella, fonttien puuttuminen tosin vaikeutti käyttöä.

Loppuaika meni pienempien viilausten parissa. Puhdas kosketusnäyttölaite tarvitsee tietojen syöttämiseen tietysti virtuaalinäppäimistön, ja Qt:n perusratkaisu ongelmaan näytti vaativan taustalle edes jonkinlaisen ikkunointijärjestelmän. Hetken asiaa tutkittuani päädyin rakentelemaan oman ratkaisuni, joka tarjosikin mahdollisuuden parempaan integrointiin muun käyttöliittymän kanssa. QtQuickControls2:n käyttöliittymätyyleistä löytynyt Googlen Material-tyyliä jäljittelevä qml-material osoittautui hyväksi pohjaksi ja pienen värisäädön jälkeen käyttöliittymä alkoi näyttää toimistollemme sopivalta. Viime silauksina toteutetut virranhallintatuki ja laitteen käynnistyminen suoraan sovellukseen viimeistelivät kokonaisuuden käyttöä varten.
Käyttöliittymä lähes lopullisessa muodossaan
Käyttöliittymä lähes lopullisessa muodossaan

Laite nököttää nyt kikkeripöydän läheisyydessä ja ensikirjaukset on jo tehty. Tämän ensimmäisen version toteuttamiseen aikaa meni ehkä parisenkymmentä tuntia kaikkineen. Jatkokehitys on helppoa, koska kehitysympäristö on nopea pystyttää ja laitteen päivittäminen GitHubista vaatii lähinnä erillisen näppäimistön kiinnittämistä.
Valmiina käyttöön!
Valmiina käyttöön!

Tekninen toteutus

Valmistelu

Laitteella ajettava käyttöjärjestelmä on archlinuxarm, joka tarjoaa pääosin Arch Linuxin pakettien kanssa ajan tasalla olevan repositoryn ARM-alustoille. Sovelluksen ajamiseen ei tarvita ikkunointijärjestelmää tai -palvelinta, vaan suoritus onnistuu suoraan EGL:n päällä. Koska Raspberry Pi 3:n VideoCore4-GPU:n kernelimoduuli ei ole ymmärtääkseni vielä ihan iskussa, se täytyy ottaa käyttöön erikseen. Samoin itse Raspberry Pi tarvitsee muutamia säätöjä grafiikkakiihdytyksen käyttöönottoon ja kuvan saamiseen ruudulle oikein päin. Näidenkään korjausten jälkeen näytön koko ei tunnistu virtuaaliterminaalille oikein, vaan tulee asettaa stty:llä oikeaan 100×30 merkin kokoonsa käytön helpottamiseksi. Taustavalon ohjaaminen on myös oletuksena rajattu vain root-käyttäjälle, joten tämän salliminen käynnistyksen yhteydessä kuului myös tarvittavaan räätälöintiin. Tämän kaiken tekemisen ja muutaman tarvittavan paketin asentamisen jälkeen järjestelmä on valmis sovelluksen ajamiseen.

Sovellus on toteutettu Qt:lla kahdesta syystä: tuki sovelluksen ajamiselle suoraan EGL:n päällä ja QtQuick. EGL:n päällä ajaminen onnistuu sopivalla QPA-pluginilla (Qt Platform Abstraction), tässä tapauksessa EGLFS:llä. QPA mahdollistaa saman graafisen sovelluksen ajamisen useissa eri ympäristöissä, mikä helpottaa myös kehitystyötä: sama sovellus toimii sekä työpöytäsovelluksena että laitteella ilman emulaattoreita. QPA-plugineja on olemassa pitkälti kaikille yleisimmille alustoille työpöydältä mobiiliin.

QtQuick ja QML

QtQuick on käyttöliittymäkehys, joka mahdollistaa hyvin nopean prototypoinnin ja erittäin suoraviivaisen modularisointiin ja kapselointiin pohjautuvan työnkulun. Käyttöliittymä kuvataan QML-kielellä, jonka käyttöön voi tarvittaessa paljastaa C++:lla toteutettuja osia.
QML-käyttöliittymä koostuu elementtipuusta, joka sisältää sekä visuaalisia että toiminnallisia elementtejä. Puu jakautuu komponentteihin, jotka muodostavat luontevasti kukin oman käsitteellisen näkyvyysalueensa. Komponentit voivat paljastaa juurielementtinsä ominaisuuksien kautta komponenttikohtaisia ominaisuuksia ja signaaleja, joihin komponentin käyttäjät voivat reagoida. Moderniin web-kehitykseen tottuneella tässä ei ole mitään uutta, mutta koska kaikki tämä on toteutettu kielen tasolla on käyttömukavuus aivan omassa luokassaan. Käyttöliittymän osien toiminnallisuutta voidaan mukauttaa JavaScriptillä, jolla onnistuu yksinkertaisen toimintalogiikankin rakentaminen. Suosittelen QML:n kokeilua ainakin pienen sovelluksen verran kenelle tahansa käyttöliittymiä tekevälle. Alla esimerkkinä sovelluksen virtuaalinäppäimistön yksittäisen napin pohjatyyppi. Tällaisen määrityksen jälkeen napin käyttäminen onnistuu esimerkiksi KeyboardKey { text: "foo" } kuten minkä tahansa elementin.

Sovelluksen rakenne

Sovellus on pääosin QML:llä tehty, mutta sen alle tarvitaan pieni määrä C++:aa. Tämä pohjakoodi alustaa sovelluksen sellaisenaan, ilman isäntäsovellusta ajettavaksi ja määrittelee mahdolliset QML-ympäristölle tarjottavat C++:lla toteutetut lisäelementit ja -rajapinnat. Kirjaussovelluksen tapauksessa QML-sovellukselle tarjotaan rajapinta sekä näppämistöeventtien luomiseen, että Raspberry Pi:n taustavalon ohjaamiseen.

Kun esimerkiksi taustavalon ohjaus on määritelty QML-kerrokselle näkyvänä QtObject-oliona, voidaan sen varaan rakentaa toiminnallisuutta, esimerkiksi taustavalon sammuttamisen ajastuksen.

Taustavalon mennessä päälle taustavalo-olio ilmoittaa tilansa muuttuneen, jolloin ajastin käynnistyy. Ajastimen saavuttaessa määräajan taustavalo sammutetaan.
Ensimmäisissä, vain työpöytäkäytössä testatuissa versiossa sovellus käytti Qt:n omaa virtuaalinäppäimistöjärjestelmää. Tällä oli useita hyötyjä, kuten laaja kielituki ja jopa käsialantunnistus. Laitteella ajettaessa kävi kuitenkin nopeasti selväksi, että helposti käyttöönotettava virtuaalinäppäimistökomponentti oletti jonkinlaisen ikkunointijärjestelmän olemassaolon, joten sen käyttö ei tullut kysymykseen. Kokeilin muutamia githubista löytyneitä toteutuksia, mutta loppujen lopuksi päädyin rakentamaan oman ratkaisuni. 173 riviä QML:ää (josta 78 riviä on näppäimistön asettelua) ja 58 riviä C++:aa (josta noin 22 riviä on toiminnallista koodia) myöhemmin virtuaalinäppäimistöni oli käyttövalmis. Aikaa oman version toteuttamiseen meni kymmeniä minuutteja ja se on helposti korvattavissa toisella ratkaisulla jos tarve vaatii.
Sovellus keskustelee taustapalvelimen kanssa tavallisin XmlHttpRequestein hakien käytettyjen pelaajien ja tagien nimiä sekä pelituloksia tarpeen mukaan. Samalla, web-kehittäjille tutulla mekanismilla onnistuu myös pelattujen pelien lähettäminen.

Jatkokehitysajatuksia

Laite ei tällä hetkellä vielä tue tilastojen esittämistä kuvaajilla eikä sisällä turnausnäkymää. Käyttöliittymän käytettävyyden hiominen on myös tärkeänä kohtana listalla, esimerkiksi pisteiden merkitsemisessä käytettyihin liukusäätimiin on toisinaan vaikea osua käsien täristessä pelin jäljiltä.
Niin taustapalvelin kuin käyttöliittymäkään ei kovin tiukasti rajaa käyttömahdollisuuksia vain kikkeriin. Pienellä räätälöinnillä saatetaan lähiaikoina nähdä vastaava biljardin ystävillekin.
Sovelluksen lähdekoodi löytyy GitHubista.

foosball

kehtaaminen

kikkeri

kulttuuri

pöytäfutis

pöytäjalkapallo

qml

qt

qtquick

raspberrypi

Takaisin ylös