0

As a front-end developer, I've been given a mock-up design to implement. This design features several tachograph-style icons, which have me stumped as to the best way to mark them up in HTML and CSS.

The images look like the following:

enter image description here enter image description here

Obviously these assets represent the empty state and the full state respectively.

My issue is this: how can I mark-up these images so that I can show varying levels of completion, i.e. 10% full, 60% full etc?

Waiting in anticipation to hear your answers.

Martin Bean
  • 38,379
  • 25
  • 128
  • 201

3 Answers3

2

I would seriously recommend looking into the Raphael javascript library. You can knock something like this up in just a few lines of code.

See also this question: Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed) where I gave an answer including a four-line code sample using Raphael, which provides an animated fuel gauge. You'll need to tweak it for your design, but even then it's only going to be a few lines of code.

The great thing about using Raphael to draw things like this is that it is fully compatible with older browsers, even IE (as far back as IE6 if you need it), without you having to do any special code to support it. It's a great little library.

Hope that helps.

Community
  • 1
  • 1
Spudley
  • 166,037
  • 39
  • 233
  • 307
0

Given that the image reprisents actual data and isn't purely a design mechanism, I'd mark the image up as an HTML image.

<img ... alt="10%">

If your concern is about showing portions of the image, one way you could do this would be to set the image as a background to some container and use width and height to identify the amount of the image to show.

Jamie Dixon
  • 53,019
  • 19
  • 125
  • 162
  • Well, you see, I'm all about semantics, so when I've coded say, a progress bar in the past, I've done things like: `
    50%
    `. Plus creating 100× images isn't ideal; there's various instances of these gauges at varying sizes. I need a reusable mark-up pattern to employ.     – Martin Bean Sep 14 '11 at 11:06
  • I agree on the semantics front. That's why I think an image tag is the most semantic. You're displaying a graphical reprisentation of data, which I believe should be marked up as such. This solution doesn't help much on the progress front though. @Spudley's answer seems quite relevant. – Jamie Dixon Sep 14 '11 at 11:09
0

i'm not an expert on html5 /css3, but would you not use the html5 arc command to create a mask to reveal the full state.

As you have a 270 degree rotation from empty to full, you'd just map the value as percentage of 270 to create the value of the arc that would mask the appropriate value.

I believe that there is a java script Math.PI that might help to.

david coxon
  • 1
  • Unfortunately this needs to be somewhat backwards-compatible with older browsers that do not support HTML5 and CSS3 (*cough* Internet Explorer *cough*) – Martin Bean Sep 14 '11 at 12:05
  • @Martin Bean - since you specify that you need IE support, I've amended my answer to point out that Raphael does indeed support IE. – Spudley Sep 14 '11 at 13:55