OK, so hello everyone, I am François-François Centrobois, 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 a solution online that enables to draw and share ideas, but

they don't fit completely the needs. Some of them looks really like, I would say, graphical drawing softwares, so with many buttons, and usually you need to get rid of 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 a magnet for that, it's very easy on a blackboard. You have a magnet 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 this, 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 web page.

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 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 a button, 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, okay? 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. Okay, so the tool table 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 table

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 magnets.

So magnets are things you can move on the board. So you can, for instance, explain the sort algorithms directly in table noir by moving the magnets. Actually, you also have magnets from OpenMoji. This is a very nice project.

I accidentally went on this. It's all like icons for, and table noir provides these icons in the web, 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 magnets are the nodes, and you have edges that you have drawn by hand, and then, interestingly, you can move the magnets and the graph will be updated accordingly.

Okay, you can also put the magnets 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 magnet, and then put the magnet 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 table noir.

So, interestingly, if you are alone, if you use table 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 you click on this button, which is here, you will share the board, right? And then it will contact the server. So in the table noir.github.io, the kind of official address, it will contact the server

that is located in my lab in Rennes. 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.

There is no zoom. Why? Because suppose we have zoom on a blackboard. If somebody writes 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 table noir. And actually, the presentation that you are seeing is made in table noir.

So actually, so it's not completely clear, but it's like we have another way to do presentations. So I would divide the way to make presentation in three. You have LibreOffice style, La Terre Bimmer style, and table noir. So how do you make animations?

In LibreOffice, 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. In La Terre, you have to write, sorry, I write these 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 table 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 Fosdem. And we want to explain how we arrive at the Fosdem. So there is a little cat.

This is not a cat, this is a cat, no? This is my first slide. So now I create a new slide from here. And we have this cat, and this cat is going to the Fosdem.

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.

T-shirt. Ah, 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 am a cat. I want to go to the Fosdem, my entrance.

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 I don't know. So now, I am tempted to add new features, but this is the opposite of a 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. Thanks.