Water Meter Simulator based on HTML5 and JavaScript Technology

OData support
Dr. Simon Balázs
Department of Control Engineering and Information Technology

Since water metering is a persistent economical need and most water meters are read manually, teaching the reading of these devices is an important task. But using real water meters for presentational purposes could be hard and expensive, especially if we want to show it's moving state. Instead of using phisical instrument an application which simulates and visualizes a water meter's behaviour would be more suitable.

The HTML5 is dynamically advancing standard because of its multimedia features and new possibilities, making the client-side web technologies (HTML, CSS, JavaScript) the most widespread lightweight multi-platform application framework.

The new features HTML5 and CSS3 introduces on the client-side of web development makes it possible to create a water meter simulator running in the browser without serious performance or usability problems. My task was to survey the new HTML5 components that could be used for developing such an application, compare their eectiveness and create one complete version of the software that will be used in real life education.

I've chosen three ways of visualising a water meter:

- drawing it with HTML5 Canvas from JavaScript procedurally

- creating it as a vectorgraphical image with SVG and animating its components from JavaScript

- compositing it from HTML tags and animating it from JavaScript with the help of CSS3 transforms and animations

I made three version of the simulator with these technologies (consulting during the process with the client about his needs) as compatible among the dierent web browser engines as possible. Then I compared the technologies themselves through these implementations in the light of performance, development eorts and compatibility. In the end I chose the best one - that used HTML5 canvas to visualise the water meter - based on my comparison and deployed it to the client succesfully.


Please sign in to download the files of this thesis.