Solved

HTML5 Graphic Fill Percentage

Posted on 2014-04-23
3
607 Views
Last Modified: 2014-05-15
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
Comment
Question by:compsol1993
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 9

Expert Comment

by:WebDevEM
ID: 40018215
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
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40019451
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
 

Author Closing Comment

by:compsol1993
ID: 40068178
Perfect, thanks!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I made this because I wanted to get e-mail with a attached csv file so I'd would be able to import user input into a MS Excel template, but I also wanted to register/save all inputs from each day in a file on the server. 1st - It creates a temp C…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question