Vízóra szimulátor HTML5 és JavaScript technológiával

OData támogatás
Konzulens:
Dr. Simon Balázs
Irányítástechnika és Informatika Tanszék

Miután a vízhasználat mérése gazdasági szükségszerűség és a vízórák többsége manuálisan kerül leolvasásra, ezen eszközök leolvasásának tanítása egy fontos feladat. Viszont a vízórák szemléltető céllal való használata nehézkes és adott esetben költséges is lehet, főleg ha működés közben akarjuk azokat bemutatni. A fizikai eszközök helyett célravezetőbb lehet egy alkalmazás használata, amely szimulálni illetve megjeleníteni képes a vízórák működését.

A HTML5 multimédiás képességei illetve az általa bevezetett új lehetőségek miatt egy dinamikusan fejlődő szabvány amelynek révén a kliensoldali webes eszközök (HTML, CSS, JavaScript) lassan a legelterjedtebb könnyűsúlyú multi-platform alkalmazás keretrendszerré válnak.

Az új elemek amelyeket a HTML5 és a CSS3 behoz a webfejlesztés kliens oldali ágára lehetővé teszik a böngészőben futó vízóra-szimulátor alkalmazás fejlesztését annak működése során komolyabb teljesítménybeli vagy használhatósági problémák nélkül. A feladatom az volt, hogy mérjem fel az új HTML5-ös technológiákat amelyek egy ilyen alkalmazás fejlesztéséhez szükségesek lehetnek, hasonlítsam össze a hatékonyságukat illetve készítsem el a szoftver egy végleges példányát amely aztán a való életben is használva lesz oktatási célból.

A vízóra megjelenítésének három különböző módját dolgoztam ki:

- HTML5 Canvas segítségével a vízóra számlapját procedurálisan kirajzolni JavaScriptből

- a vízóra számlapjának vektorgrafikus képét létrehozni SVG-ben majd az elemeit JavaScriptből animálni

- a vízóra számlapját képek segítségével HTML elemekből összeállítani majd JavaScriptből animálni CSS3 transzformációk illetve animációk segítségével

Az alkalmazásnak három verzióját készítettem el az előbb említett megoldási módszerekre alapozva (a fejlesztési folyamat során a megrendelővel konzultálva), a lehetőségekhez mérten a böngészők közötti kompatibilitást figyelemben tartva. Ezen implementációk segítségével hasonlítottam össze az egyes technológiákat teljesítmény, a fejlesztés nehézsége illetve kompatibilitás szempontjából. Végül pedig kiválasztottam az összehasonlítás alapján általam legmegfelelőbbnek verziót és sikeresen átadtam a megrendelőnek.

Letölthető fájlok

A témához tartozó fájlokat csak bejelentkezett felhasználók tölthetik le.