Verkkosovellus tulosgrafiikoiden luomiseen : Case: Frisbeegolf

Abstract

Tässä opinnäytetyössä käsittelen frisbeegolfin tulosgrafiikoiden luomiseen tarkoi-tetun verkkosovelluksen suunnittelua ja toteutusta. Työ toteutettiin HTML5:n canvas-elementin ja JavaScriptin avulla. Työssä kerron myös käytettävistä teknii-koista ja esittelen käytetyt JavaScript-kirjastot. Tavoitteena oli toteuttaa sovellus joka helpottaa tulosgrafiikoiden tekemistä ja näin nopeuttaa videoiden jälkieditointia. Sovellukseen lisättiin maltillisesti omi-naisuuksia, mutta tarjottiin työkalut myös vaativammalle käyttäjälle. Verkkosovelluksen suunnitteluosuudessa rajasin ensin sovellukseen tulevat omi-naisuudet analysoimalla muiden tulosgrafiikoita. Kun ominaisuudet oli päätetty, mietin minkälainen käyttöliittymä niille tarvitaan. Lopuksi suunnittelin ulkoasun vaatimusten pohjalta. Toteutusosuudessa kerron, kuinka ensin tein ulkoasun vaatimusten pohjalta ja tä-män jälkeen aloin toteuttaa toiminnallisuutta. Toiminnallisuuden toteutuksesta kerron, kuinka eri elementtien lisäämisen, tulosten kirjoituksen ja kuvien proses-soinnin funktiot toimivat. Työ onnistui hyvin ja sovelluksesta tuli toimiva. Käytetyt tekniikat voidaan todeta hyvin toimiviksi ratkaisuiksi projektin suorittamiseen.

In this thesis designing and developing a web app for creating score graphics for disc golf videos was studied. The web app was built with a HTML5 canvas ele-ment and JavaScript. Also different techniques and JavaScript-libraries used in development were introduced. The goal was to develop an app to ease the making of score graphics and that way speed up the editing process. To the web app I built a moderate amount of features but also added tools for more demanding users. In web app designing section I analyzed the score graphics made by others and picked the features I considered were most needed. After defining the features for the web app, I figured out what controls were needed for those. As the last step, the layout and the style for this web app were designed using defined demands. In the development phase I first discussed the building of the front end with given demands. Functionality was built after that and in this thesis it is explained how adding elements, writing scores and processing pictures work in terms of func-tions. Building the web app was successful and the web app worked as it was expected. It can be stated that the chosen techniques were well-working choices.