[lug] Creating a cute graphic on webpage

[Will]

You can probably do all of this with a script and build SVG images.

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

On Tue, May 10, 2011 at 6:04 PM, Bear Giles <bgiles at coyotesong.com> wrote:

> 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
>>
>
>
> _______________________________________________
> 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/8a65038b/attachment.html>