Tuesday, November 20th, 2007

Mocha UI – MooTools Canvas UI class

Category: Canvas, MooTools, UI

In an ongoing exercise to become more familiar with MooTools and Canvas, Greg Houston has created an extension to MooTools called Mocha UI which provides a new UI class made with canvas tag graphics.

The new class provides the following set of features:

  • No images. The windows, including their controls, gradients and shadows, are drawn with the canvas tag.
  • Adjustable rounded corner radius.
  • Windows can be focused, dragged, resized, maximized, restored down and closed.
  • Dynamically create new windows on demand.
  • Fullwindow window size is adjusted if the browser window size changes.
  • Minimal HTML markup required.
  • Tested in Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9.

Greg is also considering the following enhancements:

  • Create custom canvas scrollbars.
  • Add a modal window.
  • Create more class options.
  • Add minimize to windows.
  • Add a sortable dock.
  • Make shadows easier to adjust.

Posted by Rey Bango at 11:02 am

3.3 rating from 183 votes


Comments feed TrackBack URI

It’s neat to see the canvas tag being used this way. The rounded corner slider is kind of neat.

Comment by Adam Sanderson — November 20, 2007

This is a really nice idea seeing as how it works in all of the modern browsers. Keep up the good work.

Comment by Andy Kant — November 20, 2007

great alternative to ModalBox and Windoo!

Comment by (v) — November 20, 2007

awesome…although I tried to put a select tag in there and as I expected it has the old z-index problem in IE…

Comment by G Medina — November 20, 2007

I also recommend the moo.rd extension for MooTools (examples) which provides a lot of features, like the Virtual.Box and the Virtual.Ajax, and Custom.ALert and Custom.Confirm modal box.

Comment by RD — November 20, 2007

Wow, that looks extremely sweet, building window elements with canvas … RD, adopt that design from the example for your whole page and you’ll win more visitors ;)

Comment by Harald — November 20, 2007

Wow, this is really neat. I need to learn how to use the <canvas> tag. Except by allowing you to inject HTML into the windows, they are practically acting for a XSS attack…

Comment by Steven — November 20, 2007

Why do these guys using Mootools always come up with the slickest styled stuff? Great work Greg, works smooth and looks super tight.

Comment by Nick — November 20, 2007


Because mootools makes coming up with slick stuff easy =)

Comment by Marat Denenberg — November 21, 2007

Looks brilliant – this guy should be designing GUI’s for Linux distro’s ;-)

Technically it’s pretty impressive, too. I never thought Mootools was this capable, to be honest (I mean, “moo tools”..) – I guess it’s time to build a few proof of concepts in this baby now :-)

Comment by Marcel — November 21, 2007

Two problems:
1.) generating many windows (simply click “create” 20 times) will throw a mootools error
2.) it seems that this only works for html pages and not php pages. I cannot get the windows to align to the left even if I enter negative numbers in the config at the top of the file.

Other than that, it’s really nice. :)

Comment by Alex — November 21, 2007

Kudos to Greg, this is really nice.

Comment by Cal Jacobson — November 21, 2007

Very impressive window functionality using MooTools. The unfortunate part about this is I don’t see a great amount of use for these type of “windows” YET. Ninety-X percent of websites have no use for it. The other X percent, however, should jump on this right away! Great work.

Comment by David Walsh — November 21, 2007

1) Awesome work. I need to start digging into the canvas tag ASAP

2) The Mootools team is working on similar concepts

3) Check out CNET’s (a.k.a. my) StickyWin which doesn’t use canvas (yet!) but has most of the same functionality and more including modal windows and no IE6 select box issues:


There’s a default skin for it, too, but it’s based on PNGs, not canvas:


Comment by Aaron N. — November 21, 2007

This is going to look very nice on my website. Thanks bro!

Comment by Ryan M — November 21, 2007

Does anybody knows what is the memory consumption of a canvas?
Is it the same in FF and in IE implementation of canvas?

Is it realistic to paint a picture using canvas?

Comment by dror — November 21, 2007

Greg has done an awesome job on this, I am actually in the process of designing a CMS using Mocha UI.

Comment by cnizz — December 8, 2008

Simply amazing!

Comment by soundseller — June 19, 2009

Very good UI, but updates is too recent.
The last one was in Feb, 2011

Comment by minerminer — June 6, 2011

Leave a comment

You must be logged in to post a comment.