-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
838 lines (715 loc) · 32.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
<!DOCTYPE html>
<html>
<head>
<title>Tableaunoir</title>
<link rel="icon" type="image/svg" href="favicon.svg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=es6"></script>
<script src="./tableaunoir.js"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<div class="toolbar" id="controls">
<div>
<button id="buttonMenu" title="Menu">
<img draggable="false" class="icon" src="img/icons/menu-three-outlined-bars-svgrepo-com.svg" />
</button>
<span class="keyboardkeyhelp">Esc</span>
</div>
<div class="edit" id="toolsMenu">
<button id="buttonColors" title="Choose your color">
<img draggable="false" class="icon" src="img/icons/1F984.svg" />
</button>
<span class="keyboardkeyhelp">c</span>
<button hidden id="buttonChalk" title="Switch between erase and draw">
<img draggable="false" class="icon" src="img/icons/270F.svg" />
<span id="gauge">
<div id="eraserGaugeFrame">
<div id="eraserGauge"></div>
<div id="eraserLvl">lvl 0</div>
</div>
</span>
</button>
<button id="buttonEraser" title="Switch between erase and draw">
<img draggable="false" class="icon" src="img/icons/eraser-svgrepo-com.svg" />
</button>
<span class="keyboardkeyhelp">e</span>
<button class="onlyForDesktop" id="buttonTools" title="Open a menu with a lot of tools">
<img draggable="false" class="icon" src="img/icons/tools.svg" />
</button>
<span class="keyboardkeyhelp">t</span>
<button class="onlyForDesktop" id="buttonText" title="Add text (and/or LaTeX $...$)">
<img draggable="false" class="icon" src="img/icons/text-svgrepo-com.svg" />
</button>
<span class="keyboardkeyhelp">Enter</span>
</div>
<div class="edit">
<div class="toolbargroup onlyForDesktop">
<button id="buttonCancel" title="Cancel the last action">
<img draggable="false" class="icon" src="img/icons/21A9.svg" />
</button>
<button id="buttonRedo" title="Redo the last action">
<img draggable="false" class="icon" src="img/icons/21AA.svg" />
</button>
</div>
</div>
<div class="edit onlyForDesktop">
<button id="buttonDivide" title="Divide the screen vertically in two">
<img draggable="false" class="icon" src="img/icons/divide-svgrepo-com.svg" />
</button>
<span class="keyboardkeyhelp">d</span>
</div>
<div class="toolbargroup">
<button class="buttonNavigation" id="buttonLeft" title="Go left">
<img draggable="false" class="icon" src="img/icons/25C0.svg" /></button>
<button class="buttonNavigation" id="buttonRight" title="Go right">
<img draggable="false" class="icon" src="img/icons/25B6.svg" /></button>
<span class="keyboardkeyhelp">← →</span>
<button class="buttonNavigation onlyForDesktop" id="buttonMap" title="Fit to screen to see the full board">
<img draggable="false" class="icon" src="img/icons/fittoscreen.svg" /></button>
<span class="keyboardkeyhelp">n</span>
<button class="onlyForDesktop" id="buttonMovieMode" title="Show the timeline (only for non-shared boards)">
<img draggable="false" class="icon" src="img/icons/1F3AC.svg" /></button>
<span id="buttonMovieModeKey" class="keyboardkeyhelp">a</span>
</div>
<div class="toolbargroup onlyForDesktop">
<button id="buttonShare" title="share and copy link to clipboard (if your system allows it)">
<img draggable="false" class="icon" src="img/icons/E253.svg" />
</button>
<span id="numberOfUsers"></span>
</div>
<div>
<span class="keyboardkeyhelp">hide toolbar = h</span>
</div>
</div>
<div id="content">
<canvas id="canvasBackground" width=2000 height=1200></canvas>
<div id="container">
<div id="board">
<div id="documentPanel"></div>
<canvas width=2000 height=1200 id="canvas"></canvas>
<div id="magnets"></div>
<svg id="svg" width=100000 height=1300></svg>
<div id="cursors"></div>
<div hidden id="viewport"></div>
<div hidden id="newviewport"></div>
</div>
</div>
</div>
<div hidden id="questions">
</div>
<div style="display: none" class="toolbar toolbarBottom" id="animationToolBar">
<div id="timeline"></div>
<div class="timelinecontrols">
<button id="previousSlide" title="Previous slide (Page Up)">◀◀</button>
<button id="nextSlide" title="Next slide (Page Down)">▶▶</button>
<button id="buttonNewSlideAndClear"
title="Add a new clear slide after this one. The new slide will start by clearing the board, but you can remove that 'action' to create a slide starting with the current context.">
<img draggable="false" class="icon" src="img/icons/supererase.svg">
</button>
<button id="timelineMenu" title="Menu for modifying the timeline"><img draggable="false" class="icon"
src="img/icons/1F49E.svg" /></button>
<button hidden id="previousFrame" title="Previous action in the timeline">◀</button>
<button hidden id="nextFrame" title="Next action in the timeline">▶</button>
<div id="timelineSlideActionsWrapper">
<div id="timelineSlideActions"></div>
</div>
</div>
</div>
<div id="contextMenuMagnet" class="contextmenu" style="display: none">
<ul class="menu">
<li id="contextMenuMagnetBackground" title="Move the magnet in the background (behind the board)"><img
src="img/icons/magnetbackground.svg">Move magnet to background (b)</li>
<li id="contextMenuMagnetForeground" title="Move the magnet in the foreground (in front of the board)"><img
src="img/icons/magnetforeground.svg">Move magnet to foreground (b)</li>
<li id="contextMenuMagnetRemove" title="Remove the magnet"><img src="img/icons/E262.svg">Remove the magnet
</li>
</ul>
</div>
<div id="contextMenuTimeLine" class="contextmenu" style="display: none">
<ul class="menu">
<li id="forgetAnimation"
title="Simplify the list of actions, e.g. an erased line will be permanently removed."><img
src="img/icons/1F9F9.svg">Prune the animations in the slide</li>
<li id="mergeSlide" title="This slide will be 'disappear' and will be merged with the next one"><img
src="img/icons/2194.svg">Merge slide with the next one</li>
<li id="newSlide" title="Add a new slide after this one (without erasing the board)"><img
src="img/icons/1F5BC.svg"> New slide from now (Ctrl + Alt + N)</li>
<li id="newSlideAndClear"
title="Add a new clear slide after this one. The new slide will start by clearing the board.">
<img src="img/icons/supererase.svg">New clear slide from now (Alt + N)
</li>
</ul>
</div>
<div hidden id="loading">
<div id="welcomeMessage">Welcome to tableaunoir. The shared board you are trying to reach will appear soon.
Please wait...</div>
</div>
<div hidden id="hiddenToolbar">
<div id="hiddenToolbarMessage">Press <span class="keyboardkey">h</span> to show the toolbar again</div>
</div>
<div class="pageNumberHidden" id="pageNumber">1</div>
<div hidden class="slideNumberHidden" id="slideNumber">1</div>
<div id="menu" class="menuHide MenuPanel">
<div class="tabs">
<button class="tablink" id="defaultOpen" onclick="Menu.openPage('MyBlackboard', this)">
<img src="img/icons/board.svg" alt="My board" />
<span class="tablinkLabel">My Board</span>
</button>
<button class="tablink" id="tabShare" onclick="Menu.openPage('Share', this)">
<img src="img/icons/link.svg" alt="share" />
<span class="tablinkLabel">Share</span>
</button>
<button class="tablink" onclick="Menu.openPage('Background', this)">
<img src="img/icons/palette.svg" alt="background" />
<span class="tablinkLabel">Background</span>
</button>
<button class="tablink" onclick="Menu.openPage('Magnets', this)">
<img src="img/icons/magnet.svg" alt="magnets" />
<span class="tablinkLabel">Magnets</span>
</button>
<button class="tablink onlyForDesktop" onclick="Menu.openPage('ScriptTab', this)">
<img src="img/icons/codebraces.svg" alt="scripts" />
<span class="tablinkLabel">Script</span>
</button>
<button class="tablink" onclick="Menu.openPage('Options', this)">
<img src="img/icons/settings.svg" alt="settings" />
<span class="tablinkLabel">Options</span>
</button>
<button class="tablink onlyForDesktop" onclick="Menu.openPage('KeyboardShortcuts', this)" id="defaultOpen">
<img src="img/icons/keyboard.svg" alt="shortcuts" />
<span class="longText tablinkLabel">Keyboard Shortcuts</span>
</button>
<button class="tablink" onclick="Menu.openPage('Help', this)" id="defaultOpen">
<div>?</div>
<span class="tablinkLabel">Help</span>
</button>
<button class="tablink" onclick="Menu.openPage('About', this)" id="defaultOpen">
<img src="img/icons/about.svg" alt="about" />
<span class="tablinkLabel">About tableaunoir</span>
</button>
</div>
<div style="user-select: text;">
<div id="menucontent"></div>
<div id="About" class="tabcontent">
<h2>About tableaunoir</h2>
<div class="explanation">
<img src="img/welcome_tableaunoir.png" />
<span id="aboutPresentation">Tableaunoir is an <em>online blackboard</em>. It is ideally used with a
<em>graphics
tablet</em>. Help your audience <em>focus
on the content</em> by hiding the toolbar and using keyboard shortcuts.</span>
</div>
<div class="explanation">
<img src="img/welcome_magnets.png" />
<span id="aboutMagnets">Create <em>magnets</em> (think of them as fridge magnets) for making
<em>interactive courses</em>,
presentations and discussions with students.</span>
</div>
<div class="explanation">
<img src="img/shareInEverybodyWritesMode.png" />
<span id="aboutShare">Blackboards can be shared in order to <em>collaborate</em> with your
friends.</span>
</div>
<div class="explanation">
<img src="img/welcome_open.png" />
<span id="aboutFree">The project is <em>open source</em>. Feel free to collaborate:</span>
<a target="_blank" rel="noopener noreferrer"
href="https://github.com/tableaunoir/tableaunoir">https://github.com/tableaunoir/tableaunoir</a>
</div>
<h2>Videos</h2>
<a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=P6_lhqiPBow">Video
presentation of tableaunoir (in French)</a>
<br />
<a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=BtLaNBOuSHc">Video
presentation of tableaunoir (in English)</a>
<h2>Privacy policy</h2>
<ul>
<li>All data may be sent to the server you are connected to, and be dispatched to other users
connected to the same board. Some instances of tableaunoir are http, others are https. Data
means: the board itself, the magnets, options in the menu.</li>
<li>You own your own data. The server does not store the boards: they are ephemeral. Do not forget
to save and/or export boards you wish to keep.</li>
<li>Some options (right-handed or left-handed, toolbar visible or not, etc.) are local and stored in
<code>localStorage</code> (and do not use cookies 🚫 🍪).
</li>
</ul>
</div>
<div id="MyBlackboard" class="tabcontent">
<span class="edit">
<div class="menuDiv">
<button class="buttonClear" id="blackboardClear">
<img src="img/clearboard.png" /><br /><span>Clear and reset the board</span></button>
<button class="buttonClear" id="clearMagnet">
<img src="img/magnet_delete.png" /><br /><span>Remove all the magnets</span></button>
</div>
<h2>Load</h2>
<div class="menuDiv">
<img align="right" class="illustration" height="96px" src="img/illustrations/loading.png" />
<div class="menuDiv">
<label id="loadExplanation" for="file">
To open an existing board, drag and drop your <em>.tableaunoir file</em> in the
application
or
choose a file:</label>
<br /><br />
<input type="file" id="file" name="file" accept="image/png, image/jpeg, .tableaunoir" />
</div>
</div>
</span>
<h2>Save</h2>
<img align="right" class="illustration" height="96px" src="img/illustrations/saving.png" />
<div id="saveExplanation">
Save your board in a <em>.tableaunoir file</em> for later use:</div>
<div class="menuDiv">
<span>Name:</span> <input id="name" value="myblackboard" />
<button id="save"> <img src="img/icons/E260.svg" />Save</button>
</div>
<div>
<h2>Export the board</h2>
<div id="exportExplanation">Export your board as an <em>image .png file</em> or as a <em>PDF</em>.
All
magnets will be "flattened" in the resulting image. For PNG export, it exports the current
board.
For PDF export, typically a PDF page corresponds to a window. So <em>resize your window
approprietly</em>. If you made a presentation (with several slides), then each PDF page will
correspond to a slide. The PDF export is a bit slow, be patient!</div>
<div class="menuDiv">
<span>Name:</span> <input id="exportPngName" value="myblackboard" />
<button id="exportPng"><img src="img/icons/1F5BC.svg" />Get an image</button>
<button id="exportPdf"><img src="img/icons/pdf.svg" />Get a PDF</button>
<button id="exportTikz" title="Export the board in TikZ"><img src="img/icons/LaTeX.svg" />Get
tikz code</button>
</div>
<textarea rows="10" cols="30" id="exportCode" hidden readonly></textarea>
</div>
</div>
<div id="Background" class="tabcontent">
<span class="edit">
<div hidden id="backgroundSnapshot">
<div id="backgroundSnapshotBackgroundColor"></div>
<div id="backgroundSnapshotBackgroundImageDiv">
<img id="backgroundSnapshotBackgroundImage" />
</div>
<img id="backgroundSnapshotCanvas" src="img/animatedsmiley.gif" />
</div>
<h2>Background Color</h2>
<button id="customBoardSwitch"><img
src="img/switchcustombackground.png" /><br /><span>Customboard</span></button>
<button id="blackBoardSwitch">
<div class="boardColor" style="background-color: black;"></div><span>Blackboard</span>
</button>
<button id="whiteBoardSwitch">
<div class="boardColor" style="background-color: white;"></div><span>Whiteboard</span>
</button>
<button id="greenBoardSwitch">
<div class="boardColor" style="background-color: darkgreen;"></div> <span>Greenboard</span>
</button>
<div id="backgroundCustomColor">
<input type="color" id="inputBackgroundColor" />
<input checked="false" type="checkbox" id="checkboxBackgroundGradient" />
<label for="checkboxBackgroundGradient">Vertical Gradient </label>
<div hidden id="backgroundIfGradient">
<input type="color" id="inputBackgroundColor2" /> (bottom color)
</div>
</div>
<h2><span>Wallpaper</span></h2>
<button id="buttonMusicScore">
<img src="img/backgroundmusicscore.png" /><br /><span>Music score</span></button>
<button id="buttonGrid">
<img src="img/grid.png" /><br /><span>Grid</span></button>
<button id="buttonSeyes">
<img src="img/seyes.png" /><br /><span>Seyès ruling</span></button>
<button class="buttonClear" id="buttonNoBackground">
<img src="img/nobackground.png" /><br /><span>No wallpaper</span></button>
<h2><span>Insert documents (images or PDF)</span></h2>
<div id="backgroundInsertDocumentExplanation">You can insert several documents. Each document is
inserted on the <em>top-left corner</em> of the screen.</div>
<input type="file" accept="image/png, image/jpeg, image/svg, application/pdf"
id="inputBackground" />
<br />
<div hidden id="forpdf">
<div>Choose the page of the PDF to insert.</div>
<br />
<label for="pdfNumPage">Page number:</label>
<input type="number" id="pdfNumPage" min=1 />
<button id="buttonPDFInsertPage">Insert PDF page</button>
<div id="pdfSnapshot"></div>
</div>
<br />
<br />
<button class="buttonClear" id="buttonNoImageBackground">
<img src="img/nobackground.png" /><br /><span>Remove all documents</span></button>
</span>
</div>
<div id="ScriptTab" class="tabcontent">
<div class="warning">
On this page, you can write scripts for adding more interactivity. This
functionnality is still
experimental.</div>
<button title="Run/stop the script" id="buttonScriptRun">▷</button>
<a target="_blank" rel="noopener noreferrer"
href="https://tableaunoir.github.io/documentation/scripts.html">Documentation for writing
scripts</a><br />
<textarea id="script" cols=50 rows=40></textarea>
</div>
<div id="Options" class="tabcontent">
<h2>🔊 <span>Sound</span></h2>
<input type="checkbox" id="inputSound" /><label for="inputSound">Sound</label>
<h2>🎉 <span>Drawing effects</span></h2>
<label for="lineWidth">Line width:</label>
<input type="number" id="inputLineWidth" name="lineWidth" min="1" max="40" step="0.5">
<br />
<input type="checkbox" id="inputSmoothing" /><label for="inputToolbar"><span>Smoothing (your
drawing are
getting smoother after you draw)</span></label>
<br />
<input type="checkbox" id="inputChalkEffect" /><label for="inputChalkEffect">Artistic chalk effect
(your drawing looks more beautiful but Tableaunoir is slower)</label>
<br />
<input type="checkbox" id="inputParticulesEffect" /><label for="inputParticulesEffect"><span>Particules
of chalk (Tableaunoir is even slower!)</span>
</label>
<br />
<input type="checkbox" id="inputEraserEffect" /><label for="inputEraserEffect">Artistic dust
effect when you erase (your chalkboard looks more real but Tableaunoir is slower)</label>
<div class="onlyForDesktop">
<h2>⚒ <span>Toolbar</span></h2>
<input type="checkbox" id="inputToolbar" /><label for="inputToolbar">Show the toolbar
(h)</label>
<br /><br />
<input type="radio" id="inputToolbarPositionLeft" name="inputToolbarPosition" value="left">
<label for="inputToolbarPositionLeft">Left</label><br />
<input type="radio" id="inputToolbarPositionTop" name="inputToolbarPosition" value="top">
<label for="inputToolbarPositionTop">Top</label><br />
<input type="radio" id="inputToolbarPositionRight" name="inputToolbarPosition" value="right">
<label for="inputToolbarPositionRight">Right</label><br />
<input type="radio" id="inputToolbarPositionBottom" name="inputToolbarPosition" value="bottom">
<label for="inputToolbarPositionBottom">Bottom</label>
</div>
<h2>🕐 <span>Presentation</span></h2>
FPS: <input id="inputFPS">
<helpbutton
title="Number of frames per second in animations/redrawing of the slides. By default: 150 is ok. Bigger the FPS number is, faster the animations are. Put 10000 and you are sure that the display is (almost) immediate!">
</helpbutton>
<br />
<input type="checkbox" id="inputPresentationSlideNumber" /><label
for="inputPresentationSlideNumber">Show the current slide number</label>
<h2>🗣 <span>Language</span></h2>
<input type="radio" id="inputLanguageEn" name="inputLanguage" value="en">
<label for="inputLanguageEn">English</label><br />
<input type="radio" id="inputLanguageDe" name="inputLanguage" value="de">
<label for="inputLanguageDe">German</label><br />
<input type="radio" id="inputLanguageFr" name="inputLanguage" value="fr">
<label for="inputLanguageFr">French</label><br />
<input type="radio" id="inputLanguageEs" name="inputLanguage" value="es">
<label for="inputLanguageEs">Spanish</label><br />
<h2>🎨 <span>Palette</span></h2>
<input type="checkbox" id="inputPaletteShowOnKey" /><label for="inputPaletteShowOnKey">Show the
palette when using keyboard shortcut c/shift+c</label>
<helpbutton
title="By default, Tableaunoir shows the palette at the location of the cursor so that you may choose your appropriate color by clicking. However, you may prefer not get disturbed by the palette at all and just want to choose your color with the keyboard shortcuts.">
</helpbutton>
<br /><br />
<input type="radio" id="inputPaletteStandard" name="inputPalette" value="standard">
<label for="inputPaletteStandard">Standard 8 color palette</label><br />
<input type="radio" id="inputPaletteCrazy" name="inputPalette" value="crazy">
<label for="inputPaletteCrazy">21 color palette</label><br />
<div class="onlyForDesktop">
<h2>✐✎ <span>Cursor</span></h2>
<input type="checkbox" id="inputLeftHanded" /><label for="inputLeftHanded">Left-handed</label>
<br />
<input type="checkbox" id="inputCursorVisible" /><label for="inputCursorVisible">Show the
mouse
cursor (chalk, eraser, etc.)</label><span class="keyboardkeyhelp">Ctrl+Alt+h</span>
<helpbutton
title="By default, the cursors (chalk, eraser, etc.) are shown. But sometimes, as you work on a tablet with a screen, you do not need to see the cursor. Also, if you make videos, maybe it could annoying to see the cursors.">
</helpbutton>
<label hidden>Show a horizontal scrollbar</label>
<input hidden type="checkbox" id="inputHorizontalScrollbar" />
</div>
</div>
<div id="KeyboardShortcuts" class="tabcontent">
<h2>Blackboard keyboard shortcuts</h2>
<div class="menuDiv">
<table>
<tr>
<td><span class="keyboardkey">Esc</span> or <span class="keyboardkey">F1</span></td>
<td>show/hide this <em>menu</em></td>
</tr>
<tr>
<td><span class="keyboardkey">e</span></td>
<td>switch between chalk and <em>eraser</em></td>
</tr>
<tr>
<td><span class="keyboardkey">c</span></td>
<td>change the <em>color</em> of the chalk or of the selected magnet</td>
</tr>
<tr>
<td><span class="keyboardkey">f</span></td>
<td><em>fill</em> the last drawn shape with current color</td>
</tr>
<tr>
<td><span class="keyboardkey">d</span></td>
<td><em>divide</em> the screen</td>
</tr>
<tr>
<td><span class="keyboardkey">Ctrl+Z</span></td>
<td><em>cancel</em> the last action</td>
</tr>
<tr>
<td><span class="keyboardkey">Ctrl+Y</span> or <span class="keyboardkey">Ctrl+Shift+Z</span>
</td>
<td><em>redo</em> the last action</td>
</tr>
<tr>
<td><span class="keyboardkey">←</span> <span class="keyboardkey">→</span>
</td>
<td><em>move</em> in the board half-page by half-page</td>
</tr>
<tr>
<td><span class="keyboardkey">Shift+←</span> <span class="keyboardkey">Shift+→</span>
</td>
<td><em>move</em> slowly in the board</td>
</tr>
</table>
<h2>Magnet keyboard shortcuts</h2>
<table>
<tr>
<td><span class="keyboardkey">Del</span></td>
<td><em>delete</em> the current magnet</td>
</tr>
<tr>
<td><span class="keyboardkey">Ctrl+x</span></td>
<td><em>cut</em> the content inside the drawn contour into a magnet</td>
</tr>
<tr>
<td><span class="keyboardkey">Ctrl+c</span></td>
<td><em>copy</em> the content inside the drawn contour into a magnet</td>
</tr>
<tr>
<td><span class="keyboardkey">Ctrl+Shift+x</span></td>
<td><em>cut</em> the content inside the drawn contour into a magnet, but keep the contour
</td>
</tr>
<tr>
<td><span class="keyboardkey">Ctrl+Shift+c</span></td>
<td><em>copy</em> the content inside the drawn contour into a magnet, and keep the contour
</td>
</tr>
<tr>
<td><span class="keyboardkey">Ctrl</span>+move</td>
<td><em>duplicate</em> the magnet</td>
</tr>
<tr>
<td><span class="keyboardkey">m</span></td>
<td><em>cut</em> the content inside the drawn contour into a magnet / <em>flatten</em> the
current magnet to the
blackboard</td>
</tr>
<tr>
<td><span class="keyboardkey">Shift+m</span></td>
<td><em>cut</em> the content inside the drawn contour into a magnet and keep the contour
</td>
</tr>
<tr>
<td><span class="keyboardkey">Ctrl+v</span> or <span class="keyboardkey">p</span></td>
<td><em>print</em> the current magnet (like rubber stamping)</td>
</tr>
<tr>
<td><span class="keyboardkey">-</span> or <span class="keyboardkey">=</span></td>
<td><em>decrease</em> the size of the current magnet</td>
</tr>
<tr>
<td><span class="keyboardkey">+</span></td>
<td><em>increase</em> the size of the current magnet</td>
</tr>
<tr>
<td><span class="keyboardkey">b</span></td>
<td>the current magnet is put in the <em>background/foreground</em></td>
</tr>
</table>
<h2>Text Magnet keyboard shortcuts</h2>
<table>
<tr>
<td><span class="keyboardkey">Enter</span></td>
<td>create a new magnet that contains <em>text</em> (then type the text)</td>
</tr>
<tr>
<td><span class="keyboardkey">Esc</span></td>
<td><em>exit</em> the text edition in a magnet</td>
</tr>
<tr>
<td><span class="keyboardkey">Ctrl + +</span></td>
<td><em>increase</em> the size of the text</td>
</tr>
<tr>
<td><span class="keyboardkey">Ctrl + -</span></td>
<td><em>decrease</em> the size of the text</td>
</tr>
</table>
<h2>Presentation</h2>
<table>
<tr>
<td><span class="keyboardkey">Alt + N</span></td>
<td>New clear slide/board</td>
</tr>
<tr>
<td><span class="keyboardkey">Ctrl + Alt + N</span></td>
<td>New slide (without erasing)</td>
</tr>
</table>
</div>
</div>
<div id="Share" class="tabcontent">
<div id="sharePrivacyExplanation">For privacy reasons, this board is <em>not stored</em> on the server.
Save it on your device at the end of the session if needed.</div>
<div hidden class="visibleIfShared">
<h2>Link</h2>
<input readonly id="shareUrl" value="" /><button id="buttonCopyShareUrl">Copy</button><span
id="shareUrlCopied" hidden="true">Copied!</span> <br />
<img src=""
id="qrcode">
</div>
<h2>Pseudo</h2>
<div>
<input id="inputUserName" maxlength="20" />
</div>
<div id="shareAndJoin">
<h2>Make a shared board</h2>
<img align="right" class="illustration" height="96px" src="img/illustrations/share.png" />
<div>
<span>🔑</span><label for="password">Password (optional):</label> <input type="password"
id="password" />
<button id="shareButton">Make a shared board</button>
<div id="sharePasswordExplanation">
The <em>password</em> makes you keep your sharer privileges. If no password is set, all
participants
will have full privileges.</div>
</div>
<br />
<div id="join">
<h2>Join an existing board</h2>
<img align="right" class="illustration" height="96px" src="img/illustrations/join.png" />
<div>
<div id="shareJoinExplanation">
In order to <em>join</em> an existing shared board, type its URL:</div>
<input id="joinUrl" value="" />
<button id="joinButton">Join</button>
</div>
</div>
</div>
<div hidden class="visibleIfShared">
<div hidden id="shareMode">
<h2>Permission mode</h2>
<div>
<button id="buttonOnlyRootCanWrite"><img id="imgWritePermissionfalse"
src="img/shareInTeacherMode.png" /><br />Teaching:<br /> incoming and non-root users
can not write</button>
<button id="buttonAllCanWrite"><img id="imgWritePermissiontrue"
src="img/shareInEverybodyWritesMode.png" /><br />Collaborative:<br /> existing and
incoming
users can write</button>
</div>
</div>
<h2>Users</h2>
<div id="userList"></div>
<h2>Discussion</h2>
<button id="buttonAskQuestion" title="Ask a question because you do not understand the course">
<img class="icon" src="img/icons/say.svg" /></button>
<div id="askPrivilege">
<h2>Get privileges</h2>
<div>Actually, you do not have any privileges, and this board is <em>protected</em>. To obtain
them, type the correct <em>password</em>.</div>
<input id="passwordCandidate" type="password" /><button id="buttonAskPrivilege">Ask
Privilege</button>
</div>
</div>
</div>
<div id="Magnets" class="tabcontent">
<span class="edit">
<div class="menuDiv">
Remark: For using your <em> own images as magnets</em>, drag and drop .png/.svg/.gif/.jpg files.
</div>
<br />
<input id="magnetCollectionSearch" placeholder="type the type of magnets you are searching for" />
<div class="menuDiv" id="magnetCollection">
</div>
<div class="menuDiv" id="magnetCollectionSearchResult"></div>
<h2>Quick magnet manipulation</h2>
<div class="menuDiv">
<button id="magnetsArrange"><img src="img/arrange.png" /><br />Arrange the magnets on the
board</button>
<button id="magnetsCreateGraph"><img src="img/graph.png" /><br />Create graph from the
magnets</button>
</div>
</span>
</div>
<div id="Help" class="tabcontent">
<h1>Documentation</h1>
<div>
See the <a target="_blank" rel="noopener noreferrer"
href="https://tableaunoir.github.io/documentation">full documentation</a></div>
<h1>Frequently asked questions</h1>
<h2>How to completely clear the board?</h2>
Use the eraser, and do <span class="keyboardkey">Ctrl</span> + click. If you cleared the board by
mistake, you can always do <span class="keyboardkey">Ctrl+Z</span> to undo it.
<h2>How to create a magnet?</h2>
<img src="img/help/createmagnet.gif" />
<ul>
<li>Draw a contour around the picture</li>
<li>Then press <span class="keyboardkey">Ctrl+X</span></li>
</ul>
<h2>How to duplicate a magnet?</h2>
<ul>
<li>Press and maintain <span class="keyboardkey">Ctrl</span></li>
<li>Drag the magnet</li>
</ul>
<h2>How to write LaTeX formulas?</h2>
<img src="img/help/latex.gif" />
<ul>
<li>Create a text magnet by pressing <span class="keyboardkey">Enter</span></li>
<li>Type your LaTeX code between between <code>$</code> and <code>$</code>, or <code>\[</code> and
<code>\]</code>
</li>
<li>Press <span class="keyboardkey">Esc</span> to get the output</li>
<li>The magnet LaTEX code can be reedited by double-clicking (except if the magnet contains several
formulas)</li>
</ul>
<h2>How to draw squares, circles, horizontal/vertical lines?</h2>
<ul>
<li>Open the tool menu (or press <span class="keyboardkey">t</span>)</li>
<li>Choose the shape you want to draw</li>
<li>Press <span class="keyboardkey">Shift</span> to draw a regular shape (squares, circles,
horizontal/vertical lines)</li>
</ul>
<h2>How to draw interactive graphs?</h2>
In Tableaunoir, you can draw interactive graphs, in which vertices are magnets, and when they are moved,
edges and vertex labels move accordingly.
<ul>
<li>To draw an edge between two magnets, or to draw a self loop, just draw it. If it does not work,
maintain <span class="keyboardkey">Shift</span></li>
<li>To add a label to a vertex, press <span class="keyboardkey">Shift</span> and draw your label
nearby the magnet.</li>
</ul>
<h2>How to draw over a magnet?</h2>
The solution is to put the magnet behind the board. To do that, 1. pass the mouse cursor under the
magnet, and 2. press
<span class="keyboardkey">b</span>. Now, you can draw over the magnet. To put the magnet to the
foreground again, repeat 1 and 2.
<h2>I use a different screen and now my board exceeds the size of the screen. How to see the full board?
</h2>
In the toolbar, click on <img draggable="false" class="icon" src="img/icons/fittoscreen.svg" /> to
entirely see you board.
</div>
</div>
<div class="divMenuHide"><button onclick="Menu.hide()">X</button><span class="keyboardkeyhelp">Esc</span></div>
</div>
<div id="msg" hidden></div>
</body>
</html>