#bigpicture

Make a zooming + panning user interface work on mobile devices (in progress)

What's cool with Zooming User Interfaces is that you have always free space available anywhere (either by zooming or panning) to write new ideas.

That was the key idea in 2014 when creating BigPicture (ready-to-use infinite notepad in-the-cloud) and the open-source JavaScript library bigpicture.js powering it:

It works as expected on desktop browsers. Now, the next big challenge is: how to make it work on mobile devices?

It's funny to even have to ask this question, since touch devices are natively made to do panning (slide finger on screen) and zooming (pinch with 2 fingers). So it should be straightforward to adapt BigPicture to mobile devices.

However here are the difficulties:

1. The transform/scale from CSS has limitations (probably max 10x or 100x factor when I started this project a few years ago), so we can't only use this to do a (nearly) infinite zooming user interface

2. It requires to be able to zoom on a particular part of the viewport and not zoom the other parts of the HTML document (e.g. a top navigation header). Here are many potential solutions:

   • Prevent that a fixed element resizes when zooming on touchscreen: 5 answers, 3 of them are non-working, 1 suggests to use the jQuery TouchSwipe plugin (looks promising), 1 of them is "half-working": the supposedly "fixed" element doesn't stay fixed while pinch-zooming (it is zoomed/enlarged), but its position/zooming factor will be reset, after a few hundreds of milliseconds when the pinch-zooming is finished, thus the UI is not really good.

   • Disable zoom on a div, but allow zoom on the page (an alternate div): 4 answers, none of them gave a useful solution; accepted solution not working

   • How to prevent (bootstrap) fixed top navigation from zooming on mobile: 2 answers, none of them really working on modern touch devices. The main one is using the following code, but it's not really usable (during zoom-pinching on mobile devices, the supposedly fixed top navbar does resize, then when you stop pinching it restores the normal size. But the navbar doesn't stay sticky at the top of the viewport like it should):

     $(window).on('load scroll', function() {
         var ds = window.innerWidth / screen.width;
         $('.device-fixed-height').css('transform','scale(1,' + ds + ')').css('transform-origin', '0 0');
         $('.device-fixed-width').css('transform', 'scale(' + ds + ',1)').css('transform-origin', '0 0');
     });

   • Zoom specific element on webcontent (HTML,CSS,JavaScript): 1 answer about Hammer.js, 1 answer about Zoomooz

   • Pinch/zoom within a div but not whole page: closed, 1 answer (use Zoomooz library)

   • Pinch-to-zoom, but only in a specific div (not full page): closed, duplicate

3. Possible useful tools for this:

   • Zoomooz (however, I read in comments: Zoomooz does not support multi-touch pinching events. Its only a library for zooming into elements on a page, but has no support for pinching behavior, so far as I can see in the documentation.)

   • Hammer.js

   • ZUI53

   • TouchSwipe, a jQuery plugin for touch devices

Work in progress!

By the way, here is how to simulate touch events on Chrome for desktop computer: open the Developer console (F12), then there's a top-left button "Toggle device toolbar" (CTRL+SHIFT+M), here you go! For pinch-zoom events, use SHIFT + click + mouse up.

Your tests / pull requests / help to build a mobile version are welcome on this branch!

If you really like that open-source project, you can donate here: 1NkhiexP8NgKadN7yPrKg26Y4DN4hTsXbz.

See the BigPicture — a zooming user interface

This topic has been present in my thoughts for a long time, probably years:

“How to be able to think/write about lots of unrelated various topics, and still have a way to look at the big picture of what you’re doing?”

Here is my contribution about this:

1. bigpictu.re, a ready-to-use infinite notepad (infinite zooming and panning)
2. bigpicture.js, a JavaScript open-source library that you can use in various projects
3. A standalone version of 1. (so you can take notes offline) is also available here: bigpicture-editor
4. AReallyBigPage, an infinite collaborative notepad. It has been a real chaos once hundreds of people joined in. Probably internet’s deepest page ;)

Such an interface is called a Zooming User Interface (interesting reading: The humane interface by Jef Raskin, one of the creators of the Apple Macintosh), and strangely, ZUI has been very few used in modern interfaces.

As of 2017, nearly every software interface uses a 2D, or even a 1D navigation process: a web page only offers two scrolling directions: north and south. Even nowadays's apps famous for their "new kind of interface" still use a 1-axis navigation: "Swipe left or right".

Is there a future made of new interfaces?