Big boards

[francoisschwarzentruber]

Handling big boards depends on how boards are implemented: let us discuss about canvas and SVG.

Now, tableaunoir is (essentially) canvas-based, except for the animated shapes (issue #86) for which SVG is used. Tableaunoir benefits from the advantage of canvas and svg.

Canvas
The advantages of canvas are:

• a very very precise eraser tool
• extraction of portions of the board for creating magnets is easy.
• implementation of potential tools suitable for canvas could be: graffiti, brushes, etc.
• easy to add png images and being able to erase, modify
  However, a unique big canvas is not suitable for a big board. A solution is to have several tiles. The board is divided in 2000x2000 tiles and only visible tiles are loaded.

SVG
On the other hand, SVG is suitable for handling big boards. It is also suitable when geometrical information should be stored. For instance, animated shapes(like drawing edges between nodes that can be moved) are currently implemented with svg (and they are actually implemented with svg). SVG could slow down when the board contains a looot of objects (but again having tiles would be a solution). In SVG, it is difficult to implement a nice eraser. For the moment, animated handwritten shapes are made up of small svglines. The eraser on animated lines is not as good as the eraser for fixed shapes (implemented with canvas).

• Do you have some ideas on how we should proceed?
• Do we actually need big boards?

[tekhnee]

@francoisschwarzentruber I've been looking for a project like yours for months. The open-source interactive whiteboard space is crowded, as you most certainly know, but there is a lot of repetition between projects, as well as an evident lack of pedagogic expertise involved in the design decisions.

As I see it, your project has three competitive advantages in comparison to most other tools around:

1. Speed.
2. Natural writing and erasing experience.
3. Beautiful chalk-like rendering.
4. Real-time animated drawing on all connected clients (a precious feature from a pedagogic point of view).
5. Small yet important design details evidently informed by actual teaching experience.

It would be a pity if any of these characteristic advantages of tableaunoir were sacrificed.

Now several, if not all, of these advantages are made possible by the canvas, or would have been difficult to implement otherwise.
Also, your innovative "magnet" model already circumnavigates several hypothetical reasons one might have for choosing SVG (especially movable and repeatable objects).

The main general-purpose advantage of SVGs, to my mind, is their lossless scalability (zoom). But a good dithering/anti-aliasing routine could easily compensate for this, while maintaining all the advantages of the canvas.

For a great deal of reasons, I generally don't think vector graphics are an appropriate representation for handwriting or real-time graphic interaction.

All in all, if this either/or question, then I'd fervently support the canvas model.

And that said, I think that a large (infinite?) board is just as important—tableaunoir does feel a bit cramped—and we should rather find ways of achieving that without abandoning the canvas model.

Thanks for this good discussion.

[francoisschwarzentruber]

Thank you for your pro-canvas message! I especially agree with 2. eraser. And especially, to erase a tiny precise portion of a drawing. With canvas, you can erase very precise small portions of a line because you manipulate pixels, as shown in that animation:

With SVG (e.g. drawing between two vertices, in SVG because it should be animated when vertices are moved, meaning the eraser is less precise for this kind of drawings), the eraser will always remove totally small lines, as shown in that animation:

Some users may be happy with this eraser and do not need a very precise eraser;

However, for 1-5, both canvas and SVG work. For magnet, it is a bit more difficult to implement via SVG.

If we decide tableaunoir to remain mainly in canvas, it could be nice offer some other killing use of canvas (brushes, etc.).

To sum up:

• Infinite board: easy with SVG, doable with canvas (maybe get inspiration from http://mypaint.org/about/, an excellent drawing software where the canvas is... infinite!)
• Magnets of several types (images png, svg, or obtained from the board): easy with canvas, a bit complicated with SVG
• Eraser & complex brushes: "easy" with canvas, nightmare with SVG
• Undo/Redo: easy with SVG, complex with canvas (especially the multi-user undo/redo is a nightmare with canvas)

[tekhnee]

@francoisschwarzentruber we work with advanced music notation here, therefore ultra-precise drawing and erasing are of utmost importance. Thank you for providing both!

Regarding undo/redo: I hadn't thought about this, but it now see what you mean. What if undo/redo was centrally coordinated on the server side (a single linear history of all actions by all users)?

[francoisschwarzentruber]

@tekhnee That sounds very interesting! What kind of music notation do you use? And thank you to precise that you indeed actually need a very precise eraser, and thus Canvas is more suitable. Well, in SVG, we could still have a very precise eraser but it will need to perform intersection computations, crop small lines, etc. :)

Concerning the undo/redo, the coordination between clients is still not perfect, but the main issue is not there. Currently, in tableaunoir, there is a linear history and undo will undo the last action, whoever the author of that action is. The issue is to undo only our own actions but not actions of others (issue #46). For instance, if the linear history [..., action1 by user1, action2 by user2, action 3 by user3], the undo by user1 should only undo action1. With SVG, simply remove/add some SVG objects. With Canvas, go back in time after ..., and execute action2 and action3. :)

[tekhnee]

Undoing one's own actions only — now that is quite an ambitious feature! I wonder how you'd go about it — perhaps having a separate layer ("transparency") per user could rationalize this(?)

The music notation we use for analytic work is mostly conventional in terms of symbology (plus a few extended symbols) but can get quite dense and requires precise positioning of notes and all other symbols (partly because it is often non-mesuré — no barlines). Both magnets and the recent capability to "anchor" graph edges would come very handy for this kind of work. Thank you!

[francoisschwarzentruber]

Multi-user undo/redo: yes it can be ambiguous. :) With Canvas, a layer per user hmm.. the issue is the number of users.
Happy to see that Tableaunoir is useful for musicians. Your project sounds really interesting. Probably you have seen the "music score background". If you have some needs in that direction, do not hesitate. Also, I would like to hear the notes that are drawn (issue #87)... but maybe it goes outside the scope of Tableaunoir ;).