WebAppers

/ best free open source web resources /

Shopify

Mootools Mocha User Interface with Canvas Graphics

Posted · Category: Framework, MIT License

Mocha is a MooTools user interface class made with canvas tag graphics. It is really impressive that it requires no images. The windows, including their controls, gradients and shadows, are drawn with the canvas tag. The rounded corner radius are adjustable. Windows can be focused, dragged, resized, maximized, restored down and closed. You are able to create new windows dynamically as well. And also, it is being tested in Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9, so you are safe to use it on your web application.

mootools-mochaui.png

The author is planning to add the following additional features as well. I really can’t wait to see these features being implemented.

  • 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.

Requirements: Mootools Framework
Demo: http://greghoustondesign.com/demos/mocha/
License: MIT License

8 Comments
  • http://plainbeta.com Brian Purkiss

    Hm…
    but what’s the load time like?

    I think I shall experiment with it…

    Thanks!

  • Gis

    bookmarked! Will be a great tool if the the author holds what he has promised. :)

  • http://na RenOndska

    Nice !

    Works fine in FF (2.0.0.9), IE7, Safari 3.0.4 & Netscape 9.0.0.3 ! Not working properly in Opera 9.50 beta though..

  • Pingback: User Interface mit MooTools | bueltge.de [by:ltge.de]

  • Pingback: roScripts - Webmaster resources and websites

  • http://sstrudeau.com Scott T.

    Very cool. I expect to see more interesting Canvas stuff in the near future (eagerly awaiting John Resig’s Processing 2D implementation).

    This one has scroll bar issues on FF-Mac:

    http://screencast.com/t/P5aC3iTTu

    … and I’m not that excited about a windows UI in-browser — but definitely a nice example of what canvas can do!

  • http://metalbirds.com/popkorns/jobs/ Kuldeep

    Awesome!!

    Thanks for sharing…what a great tool.

  • XAVIT

    I can not see the clock Mocha with Internet Explorer 7. What happens? Help …

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons