6

It happened that I have faced a task to create a ZUI (zooming user interface) on HTML Canvas. The examples of such interfaces are Deep Zoom and Microsoft's Seadragon.

I'm trying to find some libraries that will allow me to create ZUI without writing it by myself from scratch (though I have already done it for Mac and iOS).

The key features that library should have:

  1. Have some kind of 'views' as basic elements and arrange them hierarchically
  2. Draw vector graphics, text and images(optional) in views
  3. Zooming up to 200x times
  4. Mouse events that are handled by views (up/down, move, scroll)

Any suggestions (even if they don't fit the above conditions) will be very welcomed, as I have found nothing about ZUI on canvas.

GregoryM
  • 547
  • 5
  • 23

4 Answers4

5

This might get you started: https://github.com/florianguenther/zui53

ZUI53 is a JavaScript Library to create powerful web-based Zoomable User Interfaces (ZUIs) with new technologies like HTML5 and CSS3.

There is also OpenSeadragon, but I'm not sure if it uses Canvas.

Wingman4l7
  • 649
  • 1
  • 8
  • 23
4

Have you had a look at Zoomooz?

Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.

http://janne.aukia.com/zoomooz

You can use it to zoom to any DOM element. Works better with SVG than with Canvas though, since Canvas would show pixelated when zoomed in.

Janne Aukia
  • 1,003
  • 6
  • 7
  • 1
    It was quite long ago when this question was actually a question, and this task has even been assigned to other developer. As I've been told we have used this library for our ZUI module and it worked quite well. – GregoryM Feb 25 '13 at 14:30
2

Have you looked at Piccolo2d seems to meet most of your requirements. Have a look at the video from Geneaquilts that shows how they used it for there interface.

1.01pm
  • 841
  • 1
  • 12
  • 23
  • Thanks for your answer, though it's late to make any decisions now. We have decided to stick with CSS 3.0 transformations and self written library. – GregoryM Oct 24 '11 at 11:04
  • About your propositions. Piccolo seems to be using Java or .NET applets which are not suitable for UI rendered in web pages on client side. Especially for a wide range of mobile users (iOS, Android, RIM, etc.) – GregoryM Oct 24 '11 at 11:10
  • The `Piccolo2d` link appears to have been taken over. – iCollect.it Ltd Jul 10 '15 at 13:30
0

There is also Taaspace.js that uses HTML and CSS3 but not Canvas. Taaspace tries to abstract out all the different input methods, making it compatible with for example touch screen devices. You could check out this example application.

Akseli Palén
  • 27,244
  • 10
  • 65
  • 75