Tuesday, November 20th, 2007
Mocha UI - MooTools Canvas UI class
Category: UI
, Canvas, MooTools
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.
3.1 rating from 151 votes
It’s neat to see the canvas tag being used this way. The rounded corner slider is kind of neat.
This is a really nice idea seeing as how it works in all of the modern browsers. Keep up the good work.
great alternative to ModalBox and Windoo!
awesome…although I tried to put a select tag in there and as I expected it has the old z-index problem in IE…
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.
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 ;)
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…
Why do these guys using Mootools always come up with the slickest styled stuff? Great work Greg, works smooth and looks super tight.
@Nick
Because mootools makes coming up with slick stuff easy =)
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 :-)
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. :)
It’s about time Mootools had something to compare to EXT. I love Mootools but for my last project I had to go with Ext for it’s awesome UI components.
Justin Geek Daily
Kudos to Greg, this is really nice.
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.
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:
http://clientside.cnet.com/wiki/cnet-libraries/03-jswidgets/02-dhtml-popups#stickywin.js
There’s a default skin for it, too, but it’s based on PNGs, not canvas:
http://clientside.cnet.com/wiki/cnet-libraries/03-jswidgets/02-dhtml-popups#stickywin.default.layout.js
I’m glad to see this has had such a positive response.
@Alex: What browser and OS were you using when you got the Mootools error after creating 20 windows?
@Aaron: Hopefully this weekend I will have some free time again and can look into IE6 select box issue. How did you get around it with your StickyWin?
@Everyone: Feel free to report bugs or make suggestions at the Mootools forum post or at my blog post.
Cheers.
This is going to look very nice on my website. Thanks bro!
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?