[lug] Creating a cute graphic on webpage

[Glenn Murray]

If you generate the page with the CSS, you could do it with just CSS,
filling out a rectangular div according to how full the tank is.  The CSS
would set the color gradient as well.  No images, no JavaScript.

For a fancier graphic you could use a colored graphic just for the
elliptical bottom and top; the distance between them set and filled in CSS,
though the gradient is more of a problem.  Rounded corners are a CSS3
feature not implemented in IE < 9.

Cheers,
Glenn

On Tue, May 10, 2011 at 5:01 PM, Gordon Golding <gordongoldin at aim.com>wrote:

>  I am working with a remote sensing cluster.  Rather than just show
> numbers, I want to come up with an informational graphic.
>
> Can anybody point me to resources to figure out how to do this?
>
> I have a tank of volatile liquid which needs to be kept within temp and
> pressure parameters.
>
> So what I'd like to do is something like this:
>
> Have a rectangle - a nice oblongy, round-cornered tanky looking thing would
> be cooler - maybe cutsy background graphic with oblong transparent region in
> center....?
>
> Separate it with a line or division - the line represents how much liquid
> left in the tank, moves up and down.
>
> Top division and bottom division both change color:
> Bottom = blue for cold, green for OK, red for hot - ranging through a
> spectrum is cooler.
> Top = same changing color idea for over-pressure, nominal,
> under-pressurized
>
> Choice of colors obviously isn't a big deal, once I have the basis - like
> deep blue for the bottom, pale aqua-blue for the top, for example.
>
> I'm using Drupal, but I imagine this to not tie in at all - just be it's
> own html dropped onto blank region.
>
> Any thoughts?
>
>  Gordon
>
> _______________________________________________
> Web Page:  http://lug.boulder.co.us
> Mailing List: http://lists.lug.boulder.co.us/mailman/listinfo/lug
> Join us on IRC: irc.hackingsociety.org port=6667 channel=#hackingsociety
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lug.boulder.co.us/pipermail/lug/attachments/20110510/95056130/attachment.html>