Home › Developer Forums › General Topics › Coder's Lounge

New Component: CapacityBar

will.gilbert's picture
Mon, 08/03/2009 - 11:57 — will.gilbert

Similar capacity bar as used in Apple's iTunes or Safari Debugger. This component uses the HTML canvas element, so don't try to display it using MSIE. Life is probably too short to write a works-a-like using CSS.

http://informagen.org/Echo/Components/CapacityBar.html

‹ CSS Sprites Table models ›
Mon, 08/03/2009 - 15:03 — tliebeck
tliebeck's picture

Extremely cool, that looks

Extremely cool, that looks really good! Is there any way I can get a copy without Maven...JAR download link seems inoperable at the moment? And I'll add a link to http://echo.nextapp.com/site/echo3/addons (if you don't mind).

I'm tempted to write an uglier CSS version for old browsers to fall back on, such that it could be used anywhere.

PS... it says "HorizontalRule" on the web page.

Mon, 08/03/2009 - 15:14 — will.gilbert
will.gilbert's picture

All set!

"Hast makes waste". I was in such a hurry to share that I didn't check the links myself.

All of the source code you need is in the source code download. It's a Maven project, but you can pull out or examine whatever you like. At some point, I want to write a "How-to" to extract any individual component out and compile it into it's own JAR.

I'll take a crack at the CSS fallback solution.

I would be an honor to listed on any of your pages!

Mon, 08/03/2009 - 17:45 — tliebeck
tliebeck's picture

Awesome, again, very cool

Awesome, again, very cool stuff there. Added the link from the add-ons page, feel free to suggest a better description if you'd like.

Wed, 08/05/2009 - 05:36 — will.gilbert
will.gilbert's picture

CapacityBar: Fallback for IE added

Added a CSS fallback for browsers which do not support the canvas element. The component honors the width, height, colors and values parameters. The fallback look resembles a horizontaly stacked bar chart with a 3px bevel border.

Thu, 08/06/2009 - 18:23 — tliebeck
tliebeck's picture

Not sure how much time you

Not sure how much time you want to spend on the fallback, but I'd suggest a couple enhancements if you have time/interest... First, I think it'd look a bit better with a 1px border rather than 3px.

It would also be possible to add a gradient over it using semi-transparent to fully-transparent white/black gradients. The outer DIV would need to be relatively positioned, with two absolutely positioned DIVs placed over it (one for the upper and the other for the lower background gradients).

Again, no idea how concerned you are with regard to IE. :D

Tue, 08/18/2009 - 18:09 — Time_lord

Your page

Your page http://informagen.org/Echo/Components/CapacityBar.html doesn't seem to work for me in Seamonkey (but it appears to work in FF). Does your component have browser detection that is too restrictive and/or examining the browser UA string instead of the rendering engine (i.e. Gecko) maybe?

Cheers!

Wed, 08/19/2009 - 13:40 — will.gilbert
will.gilbert's picture

Looks for 'canvas' element

It checks to see if your browser supports the 'canvas' element, if not it creates a rather boring barchart. No data is lost just the rendering of that data.

It does not do browser string checking -- thus as more browsers support the 'canvas' element then the better rendering will be enabled.

This setting in the .mozconfig configuration file might help.....

# This option specifies to include support for rendering the HTML
# <canvas></canvas> tag in the SeaMonkey browser.
ac_add_options --enable-canvas

Sun, 08/23/2009 - 12:35 — Time_lord

It appears that Seamonkey

It appears that Seamonkey 1.1.x (or probably the version of Gecko it uses) supports the canvas element, but poorly. V2.0 of SM brings it into line with FF 3.5.... I haven't had a chance to try beta1 of SM yet, but one of the fine chaps on the Seamonkey IRC tested your CapacityBar test page and it worked fine :)
Sorry for raising the issue ;-)