[lug] Creating a cute graphic on webpage

[Steve Sullivan]

If you're willing to have an abstract representation
instead of a tank-like image ...

Many plotting packages, like R (cran.r-project.org) offer a
variety of ways to plot multidimensional data.
A google for chernoff faces, star glyphs, and sun ray plots
will give you some possibilities.

In fact R does have the ability to plot rectangles with varying
fill levels, but probably not rounded corners.

Steve



On Tue, May 10, 2011 at 05:36:06PM -0600, Zan Lynx 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

-- 

========================================
Steve Sullivan      sullivan at mathcom.com
303-494-7144        http://www.mathcom.com
========================================