Okay, so hello everyone, I am François Chrois-Sinterbeur, I'm really glad to be here and I will present
to you Tableau Noir, which is an online blackboard.
So a long time ago, in a galaxy far, far away, a mysterious virus attacked the population.
So it attacked almost everybody and that's why we decided to organize a lockdown, right?
But we still had to teach and actually we did blackboards to teach and we are not able to use
blackboards anymore. And actually there exists solutions online that enables to draw and share ideas,
but they don't feel completely the need. Some of them look really like, I would say, graphical drawing softwares,
so with many buttons and usually you need to get rid from all these buttons that are on the screen.
Also, usually when you have to explain things, you need to make animations and to make students interact with you.
So for instance, you know maybe sorting algorithms?
Sorting algorithms, like insertion, sort. And you can use manettes for that, it's very easy on blackboards.
You have manettes like that and you can teach, okay, you have to insert five in this, so you will move this
and put five here and nine will be here, okay? And it's very difficult to use that with real blackboards,
with existing tools, solutions that are online. Also many of them, when you go on the website, you have to sign.
And maybe you don't want to sign up and to give data to the services that offer some white or blackboards online.
And also when you are using them, actually their server, they keep all your data maybe, they store your information
and you don't want that. So that's why we decided to create Tableau Noir, which is available on this webpage.
You can, so it's online and it's also offline, you can also use Tableau Noir offline with Electron,
which is a kind of software to make websites used like offline. It's collaborative and that's it.
So now the rest of the presentation is divided in several parts.
The first part, I will discuss the philosophy of the tool.
The second part, I will explain a bit more the use of these fridge magnets here.
Then we will discuss the collaborative board aspects of Tableau Noir.
Then I will discuss how to make a presentation with Tableau Noir and finally we'll conclude.
So what is the philosophy of Tableau Noir? The philosophy is kiss.
So maybe you know this philosophy, this philosophy means keep it simple and stupid.
This is a bit the philosophy behind Tableau Noir.
So if you have a lot of tools like that in your drawing software, actually you don't need them
because if you want to select a part of your board when you teach,
you don't have time to select the correct tool selecting and then blah blah blah.
You will use directly, suppose you have this little guy and you want to move this guy on the board
but you just select with the shark you put around and then control X
and boom you can move the little guy or little girl.
So we don't need this button.
Now you have a button for shark and erase.
You just have one button for toggling, it's sufficient.
Then you have, usually in drawing software you can draw more thick or thin lines
but with a shark you don't need, you do that.
So let's get rid of these buttons too.
Button for the type of line is the same, it's very easy to do that when you teach.
So we don't need that.
Zoom, we don't need also.
I will explain that later why we don't need Zoom.
So the tool Tableau Noir is teaching oriented.
You can hide the toolbar.
There is a toolbar but usually you hide it.
We don't care about the toolbar.
You have short keys like C.
If you press C you can change the color of your shark and so on.
Dynamic size of the eraser, usually when you erase in drawing software
you have to choose the size of your eraser.
When you teach you don't have time, maybe this size is good.
No, when you erase, if you do it slowly you erase not so much
and if you start to, then it will be big.
Okay, cool.
Accessibility, some persons are left-handed and others are right-handed.
So on the project I had a request about that
and I think it's important that everybody can use Tableau Noir
so you can flip also the cursor.
You can add text and also later formula in your lecture.
Okay, so now let's talk about manettes.
So manettes are things you can move on the board.
So you can, for instance, explain the sort of algorithms directly in Tableau Noir
by moving the manettes.
Actually, you also have manettes from OpenMoji.
This is a very nice project.
I accidentally went on this.
It's all icons.
And Tableau Noir provides these icons in the interface
so you can use this little picture for whatever you want.
You can make interactive diagrams.
So for instance, you can draw graphs where the manettes are the nodes
and you have edges that you have drawn by hand.
And then interestingly, you can move the manettes
and the graph will be updated accordingly.
Okay, you can also put a manette in the background.
So if you have a grid and you want to draw on the top of the grid
so you can transform that into a manette
and then put the manettes in the background by pressing B
and then you can draw on the top.
And especially when you erase, you will not erase the grid.
Otherwise, you have to redraw it and it's boring.
Let's talk now about the collaborative aspect of Tableau Noir.
So interestingly, if you are alone, if you use Tableau Noir alone
there is no communication with the server.
Nothing.
Especially just loading the HTML file and JavaScript otherwise
then during the interaction there is no communication with the server.
But as long as long as you click on this button, which is here
you will share the board, right?
And then it will contact the server.
So in the tableau noir.github.io, the kind of official address
it will contact the server that is located in my lab in Ren, so Iriza.
And it will create a shared board and you can share the URL with others.
And then when you share the URL, they are all connected
and when you draw something, you have messages that are passing
and giving the information that has been done on the board.
That's somehow how it's implemented.
So the server is written in JavaScript.
It's very small in Node.js.
And the client, so it's a bundle file and the entire project is written in TypeScript.
Using some libraries to...
Yeah, I don't have the list here, but yeah.
So the features of the...
When you share the board so you have no account
you can protect a board with a password.
So by protect I mean some users may not have the right to draw on the blackboard.
They only have the right to see the blackboard.
And those data are stored on the server.
So it means if everybody is stopping the session, sorry for that, data are lost.
So you have to save manually the blackboard when you want to.
Ah, there is no zoom.
Why?
Because suppose we have zoom on a blackboard.
If somebody is writing something, for instance, okay, everything is okay.
And the other person is writing hello.
But this person is not seeing it because the zoom is not the same.
So if you introduce zoom, you will get troubles.
So that's why we decided not to have zoom.
So the solution, if you don't have zoom everybody is seeing the same thing.
We are happy and that's it.
Okay.
So with this tool actually, so this is a kind of new feature that has been added afterwards.
We can now make presentation with Tableau Noir.
And actually the presentation that you are seeing is made in Tableau Noir.
So actually, so it's not completely clear, but it's like we have another way to do presentations.
So I will divide the way to make presentation in three.
You have Librophys style, La Terre Bimmer style and Tableau Noir.
So how do you make animations?
In Librophys, you have to navigate through a lot of menus to see, ah, I want to move this on the left.
Coming from the right and so on.
Okay.
In La Terre, you have to write, sorry, I write this type of codes many times.
You have to write some obscure code to encode animations.
You can say, ah, this is on the slide, not on the next slide and so on.
And kind of in Tableau Noir, you just do it.
So maybe we can make a demo.
We have one minute for the demo.
So let's suppose we are at the first demo.
And we want to explain how we arrive at the first demo.
So there is a little cat.
This is not a cat. This is a cat, no?
Okay.
Okay. This is my first slide.
Okay.
So now I create a new slide from here.
Boom.
And we have this cat.
And this cat is going to the first demo.
Okay.
So now we have two slides.
This one and this one.
Okay. Now maybe we create a new slide where we erase everything.
And you have, I don't know, this, I am improvising.
Sorry.
Maybe if you have ideas, don't hesitate.
A t-shirt.
Ah, a t-shirt. Okay.
So we have a t-shirt.
The cat.
And then, so this is a slide, right?
And then it takes the t-shirt and goes home.
So let's see the presentation.
So hello. I'm a cat.
I want to go to the first demo.
I entered.
And I want to have a t-shirt.
So you have a t-shirt here.
The cat is quite happy.
And he gets home with the t-shirt.
Okay.
So conclusion.
So kind of table noir can be summed up.
It fits the teachers and students need.
Plus the kiss principle, keep it simple, stupid.
Plus a bit of nostalgia.
You have the real blackboard aspect, which is not completely clean,
but you have, like, of dust.
Dust that is a bit of dust.
Yes.
Video game aspect with a circular menu.
With also, like, if you draw something very far, like this,
you will have the overview of the map of the board.
So kind of Zelda games or whatever.
So now I am tempted to add new features.
But this is the opposite of kiss.
So I would be very glad to discuss with you about some features
that I would like to add.
And that's it.
Thank you for your attention.
Really cool project.
I think we all agree.
So thank you.
Thanks a lot for the presentation.
And if you guys have any questions, feel free to grab them outside
and ask your questions.
Thank you.