[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 702
  • Last Modified:

HTML5 Graphic Fill Percentage

Hello,

I need to represent tank levels on my website, based off of live data.  I have access to the data, but need recommendations on what the best tool is to create this view.  

I'm using an Apache server, but I was thinking HTML5 might be the best approach.  I'd like to show a picture of a liquid tank (like an empty clipart pic of tank).  Something like this:  http://photo.oempromo.com/Prod_799/Stock-Shape-Collection-Big-Propane-Tank-Key-Tag_45839759.jpg

I'd like to show a fill color that fills based on a percentage.  Would it be best to layer the tank, and make the inside of the tank transparent, and overlay that on top of an HTML canvas box?  Any suggestions would be appreciated.

Thanks
0
compsol1993
Asked:
compsol1993
1 Solution
 
WebDevEMCommented:
I don't have the time right now to work up a demo (meetings all day!) but my thought would be to use a canvas, draw the tank on there (which basically drops your image file onto the canvas, no need to draw it manually), and draw a rectangle either on top of it or behind it (if you make the center transparent) based on your data.

I'm pretty new to HTML5, but I'm sure somebody more familiar could whip up a demo fairly quickly.  It'd take me a decent amount of time... I'd love to see the solution!

I hope this gets you started,

WebDevEM
0
 
Robert SchuttSoftware EngineerCommented:
Canvas is certainly possible but have a look here: http://schutt.nl/ee/Q_28418447/

For this I have re-used parts of an earlier solution I posted here on EE (that's where the colors come from, I don't suppose you have blue and pink liquids ;-)

The files I used are also attached below.
index.html
tankfill.js
tankfill.css
tanktrans.png
0
 
compsol1993Author Commented:
Perfect, thanks!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now