tableaunoir/tableaunoir

An online blackboard 🖉 with fridge magnets 🌈🧲 for teaching, and making animations 🏃 and presentations ⎚. All of that in a lightweight user interface.

Tableaunoir

https://tableaunoir.github.io/

Tableaunoir is an online collaborative blackboard tool with fridge magnets available in many languages. "Tableau noir" means blackboard in French. Contrary to plenty of other collaborative boards on the Internet, with Tableaunoir you can create interactive animations via the use of fridge magnets. The full documentation is available here.

Screenshots

Tableaunoir has been designed to give lectures. Tableaunoir enables to easily divide your board in panels and navigate panel by panel.

Tableaunoir offers magnets, like fridge magnets. They are small images, numbers, texts. The user can add/move/delete magnets to create animations. The screenshot below shows the use of magnets when teaching algorithms in a computer science curriculum. In the examples below, magnets data in some data structure, nodes in some graph, etc.

Features

We list the main features of Tableaunoir.

• Of course, you can draw and erase, with your mouse or a graphic tablet. You can draw shapes.
• Collaborate edit the same board at the same time (need a server for that),
• does not require an account
• Backgrounds: staffs for teaching music, grid, images and PDF documents
• You can also use kind of predefined fridge magnets that you can move on the board, to make animation e.g. for illustrating sorting algorithms, graphs algorithms etc (and even playing Go!).
• Create your own fridge magnets for interactive courses, by importing any image, or by transforming a part of the board (Ctrl + X).
• Color palette for chalk (c, 7 colors black/white , yellow , orange , blue , red , pink , green ),
• Draw interative graphs : vertices are magnets, labels of vertices and edges are handwritten but are updated when vertices are moved,
• Change the color of magnets' background,
• Load/Save the current board,
• Export in PNG or PDF,
• Add texts (Enter and type), and move texts. Supports LaTeX (using MathJax)!
• Switch to a whiteboard instead of a blackboard, or any background color
• Change from right-handed (default) to left-handed cursor,
• Divide yourboard in half. Ideal for teaching. Add as many new half-board as you need, going right with → and then left/right with ←/→ keyboard arrows,
• Make slides, record animations. This can be used to prepare slides for a talk or for a video.

You can teach online by sharing the screen with Discord, Zoom, Teams, etc, or by sharing a link (need a server for that).

Videos

• Video in english: [https://www.youtube.com/watch?v=BtLaNBOuSHc]
• First video in french: [https://www.youtube.com/watch?v=P6_lhqiPBow]

Examples of use

Give a lecture

Tableaunoir is used for teaching at ENS Rennes. The main advantage is that, by hiding the toolbar, the screen is fully black: there are no buttons that annoy or distract the students (in my personal use, I simply hide the toolbar). Tableaunoir is controlled by a graphic tablet and by the keyboard of the computer (7 keys!). It makes it very interactive compared to fixed slides.

Share ideas

An idea to explain and share? Tableaunoir enables to write together on shared collaborative boards.

Draw pictures

Tableaunoir can simply be used to draw pictures: [https://team.inria.fr/erable/en/marie-france-sagot/blog/silly-things/]

Make slides for videos or presentation

Tableaunoir can also be used to build slides. See the documentation.

---

Commands for the Tableaunoir project

remove all node_modules and install back again

npm ci

Build everything to dist

npm run build

See linter warning/errors

npm run lint

Starts a local node server

npm run serve

Offline version

If you prefer to use an offline version, it is possible. You have to install Electron. Make sure to have compiled the project with npm run build. Then the application can be launched as follows (from the main directory):

$ electron mainElectron.js

Create your own tableaunoir server

In order to share blackboards, you need a server. For installing the server:

• In the server, first git clone (and then later git pull) the project.
• Modify the src/config.js.
• Compile Tableaunoir (see above)
• Install Apache HTTPD to deploy dist/index.html (other web servers might work too, but have not been tested).
• Configure the server part, see server/README.md.
• Then server/run.sh.

---

License

This software is open-source under the GPLv3.0 license.

Credits

Thank you to all contributors. Also thank you for your support. Please find the list of the source of the images.

• Some pictures come from @nicholas-ochoa/OpenSC2K, an open-source clone of Sim City 2000.
• [https://openmoji.org/]
• Some CC0 icons from [https://www.svgrepo.com/]
• The sound of the chalk comes from [https://lasonotheque.org/detail-0541-craie-sur-tableau-noir.html]
• [https://upload.wikimedia.org/wikipedia/commons/3/38/Icon_pdf_file.svg]
• [https://pxhere.com/en/photo/1057578]

tableaunoir's Issues

Undo on shared boards

The undo functionality seems not to be working on shared boards. Clicking the button in the toolbar does nothing noticeable.

Possibility of giving a user name

I suggest to add the possibility of adding/changing the user name in the menu. That name could be displayed near the cursor of other participants. I suggest to store that user name in the localStorage so that a user do not need to given a user name at each use.

Prevent or allow sharees from sending text ?

• When using the shared screen with pupils, there is a risk that they will fill the screen (and those of their mates) with ludicrous comments. Ideally, it would be good that, on the control panel of the sharer, a toggle would exist to enable or disable the chat.

• The same toggle could exist for allowing sharees to draw or not. At the time being, there are two different buttons, but this is really not intuitive, as the sharer cannot know in which state the board is. A toggle would be preferrable, in my opinion.

Annotating slides

Shared boards

The possibilities of sharing a board

Translations

Hi,
I'm busy translating tableaunoir in French. I am presently doing it in the code itself, but it would be better to use some locale library or included file to do it. Do you plan to use a particular library in a future release ?
May I push my translated file somewhere ?
Thanks.

Building the server part too

If I understand correctly, the new workflow for the front-end part of tableaunoir is:

1. Write code in src/
2. Build to dist/
3. Deploy the dist/ folder only

This looks good to me, it feels cleaner to put the dist folder on the server rather than serving the whole content of the git repository 👍

Do you think it be possible to do the same for the backend part ? (the server folder).
Maybe src/ could be built to dist/frontend/ and server to build/backend or so.

I wish I could help on this but I'm a complete beginner in javascript (not to mention typescript) 🙁

Is it possible to choose black or white chalk color indistinctly in black *and* white boards ?

Hi!
The reason is simple: when I write on a blackboard, over a background image with white background, I cannot see where my cursor is.
Workaround: change chalk color to another one ;-)
PS : I think FrPellegrini emitted the same wish somewhere inside enhancement #17

iPad

Tableaunoir works a bit better for tablet :). But it still does not work on iPads! The error is on line:

user = new User(true)

where User is a defined class, and Chrome on iPad says that User is undefined, where it is! Tableaunoir works on Linux, Windows, Android! I do not understand what is happening.

Does anyone knows why we get this error?

Thank you in advance.

Edit LaTeX magnet text

When creating a magnet with a LaTeX formula, trying to edit the text again proves rather difficult: one can erase parts of the formatting, characters, etc. but not edit the formula. It would be nice if the original LaTeX text was displayed when trying to edit the magnet contents.

Backgrounds! (for instance for teaching music)

Tableaunoir can be helpful for teaching music notation. There is a background with two staffs. If you have ideas for adding other backgrounds, or want to contribute on that issue, do not hesitate!

Saving as an image has disappeared

Hi!
First of all, many thanks for this application. I use it with my students and, personally, I find it more user friendly than other such applications (e.g. whiteboard).
In recent versions, the "saving as image" possibility has disappeared.
I find it useful for students to see the image of the session afterwords.
Do you plan to reactivate this feature in the (hopefully near) future?

Draw geometrical shapes

Harmless(?) error messages in the firefox and chromium console

Probably a minor issue since it doesn't seem to affect the usability of tableaunoir.
But I stepped upon some error messages in the firefox console (while investigating an unrelated issue), I thought I might report it:

At startup:

error: impossible to connect to the server DOMException: The operation is insecure. share.js:31:12
GET https://tableaunoir.github.io/[object%20Blob] → 404

After every use of the chalk:

Uncaught TypeError: this.ws is undefined
    send https://tableaunoir.github.io/js/share.js:72
    sendFullCanvas https://tableaunoir.github.io/js/share.js:77
    save https://tableaunoir.github.io/js/boardManager.js:84
    save https://tableaunoir.github.io/js/boardManager.js:80
    saveCurrentScreen https://tableaunoir.github.io/js/boardManager.js:117
    mouseup https://tableaunoir.github.io/js/User.js:152
    mouseup https://tableaunoir.github.io/js/ShareEvent.js:13
    execute https://tableaunoir.github.io/js/share.js:95
    <anonymous> https://tableaunoir.github.io/js/main.js:170
    load https://tableaunoir.github.io/js/main.js:170
    EventHandlerNonNull* https://tableaunoir.github.io/js/main.js:1

For the record:

$ firefox --version
Mozilla Firefox 82.0

Hope it helps

Different positions for the chalk (depending on the handedness)

Improve the design of the toolbar

The toolbar looks complicated, no? Maybe remove the texts in some button? Icons for menu, chalk, eraser, text, etc. are sufficient, aren't they?

Toggle the toolbar

Organisation of the repository (Typescript)

The tool is now written in Typescript (in src). Javascript code (in js) is generated. The issue is that the repository contains both:

• the source code in TS
• the generated JS code so that https://tableaunoir.github.io/ works.

Do you know how to run the TS compiler during the github.io deployment phase of https://tableaunoir.github.io/?

Images for users

I plan to use images from https://openmoji.org/ for having images to represent users.
https://openmoji.org/ seems really a nice project.

Weird bug when using text input/magnets: if text is too long (to the right), view is moved and menu is lost

I encountered a weird bug when using text input/magnets: if text is too long (to the right), view is moved and menu is lost.
See this big:

I cannot think of a solution...

One solution to never loose the menu would be to use absolute coordinate to display the menu, no matter the state and position of the drawing canvas below it.

Split tool doesn't work anymore

Hi!
On Github.io
Try it, the behavior is funny: the line draws, then disappear, then draw... as long as you stay over the tool.
When you leave the tool, there remains no line.

Simplify the deployment on a server

Background image not visible for sharees

Hi!
Today, sharing a blackboard with my students, I was the only one able to view the background image of the board (png file).
I dont think it is the intended behavior, isn't it ?
PS : And also, when I press F5 the background image is discarded, and I have to set it again (annoying).

Change size of font

Hi,

Would be great if one could change the size of the font used when inserting typed text.

I don't know if this is because I have a low resolution, but text appears big on my screen :[

Write the help tab in the menu

What about adding other examples? Other gifs that explain some features of tableaunoir?

Chat text does not disappear for shared screen

When sharing a screen between two people (and more ?), the sharer can click on the messages to make them disappear from the bottom of the screen. However, the sharee cannot do the same. The text takes more and more space on the bottom of the screen, and hides the pictures.

Toolbar placement

Horizontal toolbar on the top/bottom?
Vertical toolbar on the left/right?
Customizable placement?
Remove buttons/add buttons?

Background image(s) ?

Great and simple tool, bravo!
In order to use it to comment e.g. geographical or electronics maps, it would be good to be able to upload images as backgrounds. Such backgrounds could be selected for every new (full) screen, that is, after two moves, one would have a full new image. Images would be centered, and scaled to fit on their biggest extent without distorsion. Supporting SVG would be a big plus.

No welcome page?

There were at some point a welcome page in Tableaunoir. I found it very annoying and useless. Do you agree?

Add an easter egg or hidden feature: generate a new random word to play Pictionnary from tableaunoir

Hi,
I'm in the progress of having a list of words (in French and English) to be used when playing Pictionnary.
I will try to also write a tiny javascript library to easily generate a new random word.
By using it, it should be very easy to add a "hidden" feature (in the menu not the toolbar) in tableaunoir:

• a keyboard shortcut or a menu toggle could add a button on the toolbar
• this button could then be hit to randomly generate a new random word, displayed using a window.alert() to only one person (when using shared mode)
  I will try to write all this myself, this issue is to track it's development.

Chalk effect?

Actually, I reduced the resolution of the canvas in the tool to 600px height. And surprise: there is a chalk effect, that looks nice to me.

Do you like it?

With no extra code, we obtain a chalk effect.

Magnet creation

Not clear -- from the app documentation available online -- how one must proceed to create a magnet from a drawing. I only saw how to import pre-existing magnets on my board. Not clear either from the youtube tutorial.

Improve the scrolling

Hello,

up to now, the scrolling is half-page by half-page. This is suitable for teaching. However some users find it annoying especially when the window is resized.

There are several ways to solve that.

1. Add an option and a classical scrollbar
2. Left and right keyboard keys => scroll by a small amount of pixels VS Ctrl + Left, Right => scroll by half-page
3. Show a snapshot of the board (like a map in strategy games)
4. Move the board when the cursor reaches the left or right boarder of the board? (like in strategy games)
5. Allow for a scrolling mode on smartphone/Android tablet?

What do you think?

Improve the usability on smartphone/tablets

Tableaunoir works on Android, even the usability could be improved. Tableaunoir does not work at all on iPad.

Increase/decrease size of magnets

Text tool

A "text" tool, allowing to type text from the keyboard, would be nice.

Geometric shapes and the shift key

Hi!
Thank you for the good geometric shape tool :-)

I observed that you implemented the possibility to make regular shapes (square and circle) by pressing the shift key, and that's nice. But I still have two suggestions.

• Don't you think it would be nice to add a shift possibility for making straight lines? One would then be able to draw forced horizontal or forced vertical lines.
• Shouldn't users be aware of this shift possibility by a few words in section « ? Help » for example ?

Doesn't work with stylus

Hi,
I tried the demo with my laptop Lenovo CHromebook. It has a wacom stylus working with the touch screen.
Tableaunoir does not work with this configuration : it draws only a little line of ~0.5cm.

On the screenshot bellow, the big lines have been made with touchpad, little ones with stylus.

Yannick LB

Maybe "freeze" the canvas (especially, do not split) when switching left/right ?

Hi.
I love the two features of switching left/right, and splitting the board in two with d or the button.

When I try to quickly allocate a few extra "half tabs" to the right, and split them correctly, to prepare for a lecture for instance, if I hit the d button during the animation to switch left/right, the splitting appears midway, not in the middle of the screen (when animation stops).
See this short GIF for a demo (I frenetically hit d, left, right)

OK it's a weird failure case, as I expect nobody in their right mind will hit buttons that fast, except when trying to break the tool 😕... but maybe it could be safer to just "freeze" the canvas (making it un-drawable) as long as a left/right animation in happening?

Visual indicator of the middle of the screen

Hi, first of all great project!
I particularly appreciate that the "next" button only moves to the right by one half-screen so that I and the student can still see the previous half-board when I start writing on the next one.
But it would be even more convenient with a visual indicator of the middle of the board, so that I don't cross the middle of the board when writing on the left half.
Do you think it would be possible (and desirable) to add such a thing? Maybe a discrete thin gray line?

escape does not render latex

I'm trying the latex renderer in text boxes, but when I hit escape I trigger the menu shortcut instead (the one with help, options, etc.). Is there another key I should use?

Cancel/redo optimisation

It appears that on some computers, if there are more than 15 half-boards, the program slows down. I guess it is because of the cancel/redo that is naively implemented. This issue consists in improving the efficiency of cancel/redo.

Disappointed with "Save as image" feature

Hi!
In the past (I think it was before the use of TypeScript) I used to get images (png) for my blackboards to share the whole part of the board with students once the session was over, and it worked like a charm.
This feature has momentarily disappeared, then reappeared (thank you !), but now it captures only the visible part of the board. Moreover the capture is polluted by some pixels from the color palette (?).

Consider having some smoothing?

This is no big deal but I find my text and drawings not very smooth (the "hello" part is good but you can see the broken lines on the other symbols):

It also happened to become worse after adding many half-boards.

I imagine it is not related to tableaunoir but rather to my slow laptop / slow firefox / the js engine not scheduling enough "mouse" events per second / another reason?
I observe the same behaviour on https://awwapp.com/ but they seem to fix this issue by smoothing the line right after I raise the pen. I think their smoothing is a bit too violent but I like the idea.

So:

• do you observe the same behaviour?
• do you know how hard it would be to add a little bit of smoothing in tableaunoir?

(Side note: the xournal++ desktop app gives my smooth lines without post-processing, it suggests it is indeed browser/js related).

Strange regression

Hi!
On Github.io it is now (26/11/2020 at 21:05) impossible to view the making of a geometric figure (when you drag, and before you drop) after one arrow move, on the second half of the screen :

1. press right arrow (go to screen 2/4)
2. select rectangle tool (for example)
3. go to the right half of the screen and try to drag a rectangle : you don't see the rectangle growing during the drag action, but you can see it after releasing mouse button

Move the chat in the menu, or remove it?

In the current version, tableaunoir in the share mode, provides a chat button for students to ask questions. I must confess that when I used tableaunoir in courses, almost no question were asked with that tool. Also, I think that a student could flood a course if that button is too easy to reach.

There I suggest to move this functionnality in the menu. What do you think?

Another option would be to remove the chat in tableaunoir since tableaunoir is almost always used with another tool for discussing.
What do you think?

Privacy policy

I think Tableaunoir must show the privacy policy. They have to be written clearly. To sum up:

• all data can potentially reach the server and be dispatched to other users connected to the same board.
• the server does not store the boards (is it good or not?)
• options (right-handed or left-handed) are local and stored in localStorage (maybe use cookies instead?)

Deleting text magnet freezes the board

Hi!
Today, interacting with my students, the blackboard suddenly became empty for every body, losing everything we wrote.
Here is how to reproduce this behavior:

1. press Enter and type some text
2. draw some line (quit editing the magnet)
3. drag the magnet another place, then delete it (press del key)
4. everything disappear (I mean the other line and the cursor too) and the board is frozen

No matter if you're alone or if you share your board.

PS : I am not very familiar with posting issues, I hope I am not overdoing it by opening so much issues...

Text stays on black background when switching to whiteboard

See this small gif:

Maybe the text magnets could be "inverted" to white-on-black instead of staying "black-on-white", when switching from blackboard to whiteboard ?

Note: this feature is really not so urgent or important.

Pen not active on rightmost quarter of screen

When drawing on a "tableaunoir" instance, either on a PC or an Android smartphone, I ran into the problem that when the cursor gets farther than the rightmost quarter of the board, the pen does not follow the cursor, and when the cursor goes back to the left, then a straight vertical line is drawn between the "exit" and "re-entry" points.