[lug] Creating a cute graphic on webpage

[Zan Lynx]

On 5/10/11 5:01 PM, Gordon Golding 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?

If you use Canvas you can draw it with Javascript. That isn't too 
portable yet though.

If you use a PNG of the tank you can make the interior transparent, make 
the outside of the tank white (or other background color) and place that 
graphic on top of a rectangle image that is filling the tank. Put both 
images inside of a DIV block of fixed size so that the bottom of the 
rectangle does not show below the tank. To show the tank level use 
Javascript to control the position of the rectangle.

The resources I would use are a book on Javascript to write the code and 
The GIMP to create the graphics.
-- 
Zan Lynx
zlynx at acm.org

"Knowledge is Power.  Power Corrupts.  Study Hard.  Be Evil."