[lug] Creating a cute graphic on webpage

[Bear Giles]

>From a design perspective you don't want to show different things in the
same way. What I would do is a basic tank outline and:

1) the level indicates the amount of liquid remaining,

2) a 'mercury' thermometer shows the temperature. You can also use color
(and intensity) but you need to make sure you account for people with color
blindness and that it's okay to only give people a broad idea of how hot it
is. Think perfect pitch - there's probably fewer people who can look at a
bit of color and tell you exactly what it is and what it means in this
context.

3) the outline of the tank can bulge in or out to represent pressure.
 Overpressure makes it look rounder, underpressure makes it look more like
an hourglass.  You can have a faint line indicating the respective limits.

Now as to how you do this....

On Tue, May 10, 2011 at 5:36 PM, Zan Lynx <zlynx at acm.org> wrote:

> 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."
> _______________________________________________
> 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/c56a577f/attachment.html>