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 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:
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.