Graafisen suunnittelutyökalun toteutus

Abstract

Opinnäytetyö tehtiin digitaalisen median tuotantoyhtiö Imager Oy:lle. Opinnäytetyön tarkoituksena oli toteuttaa asiakkaalle web-sovellus peltiprofiilien suunnittelemiseen ja mitoittamiseen. Työkalun tarkoituksena oli siirtyä käsin tehdyistä suunnitelmista ja mitoituksista, sovelluksella piirrettyihin yhteneväisiin ja selkeämmin luettaviin suunnitelmiin. Web-sovellus toteutettiin käyttäen HTML-, CSS- ja JavaScript-tekniikoita. Piirtoalustana sovelluksessa toimii HTML5 canvas-elementti. Canvas-elementille piirtäminen toteutettiin käyttäen Paper.js JavaScript-kirjastoa. Myös jQuery- ja TweenLite-kirjastot ovat olleet merkittävästi mukana toteutuksessa. Opinnäytetyön teoriaosuus keskittyy sovelluksessa käytettyjen tekniikoiden ja elementtien esittelyyn. Esiteltyjä tekniikoita ovat HTML, CSS, JavaScript, HTML5, Canvas, CSS3, jQuery, AJAX, JSON, Paper.js sekä TweenLite. Käytännön osuudessa käydään läpi graafisen suunnittelutyökalun ominaisuuksia ja toteutusta. Suunnitelun kaksi osuutta, piirto ja mitoitus, käydään yksityiskohtaisesti läpi ja pureudutaan tarkemmin niissä tehtyihin ratkaisuihin. Lopputuloksena sovellukseen saatiin sisällytettyä kaikki halutut ominaisuudet ja sovellusta tullaan tulevaisuudessa testaamaan lisää ja kehittämään asiakkaan toiveiden mukaan.

This Bachelor’s Thesis was made for a digital media production company called Imager Ltd. The purpose of the thesis was to make a web application for designing and dimensioning sheet metal profiles. The objective of the application was to move from hand-drawn designs and dimensioning to consistent and clearly readable plans. The web application was made by using HTML, CSS and JavaScript techniques. The HTML5 canvas element functions as the drawing platform of the application. Actual drawing was implemented using JavaScript library called Paper.js. The jQuery and TweenLite libraries had a big role in the implementation. The theoretical part focuses on the introduction of the techniques and elements used. The techniques are HTML, CSS, JavaScript, HTML5, Canvas, CSS3, jQuery, AJAX, JSON, Paper.js and TweenLite. The practical part contains the introduction of the features and implementation of the graphical design tool. The two sections of the application, design and drawing, are analyzed thoroughly and a closer look is taken at the solutions that were made during the developing process. As a result, the application included all of the desired properties, and the application will be tested more in the future and developed according to the customer's wishes.