Tuesday, November 20th, 2007
Mocha UI – MooTools Canvas UI class
Category: Canvas, MooTools
, UI
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.
Related Content:
3.3 rating from 178 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. :)
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
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?
Greg has done an awesome job on this, I am actually in the process of designing a CMS using Mocha UI.
Simply amazing!
Very good UI, but updates is too recent.
The last one was in Feb, 2011