Picasoft-rdelaage
/
PicaPortal
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
3 Commits
1 Branch
0 Tags
1.2 MiB
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
PicaPortal/whiteboard.html

293 lines
11 KiB
Raw Permalink Blame History

<!DOCTYPE html>
<html>
<head>
<title>WhiteBoard - Picasoft</title>
<script src="trianglify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta charset="utf8" />
</head>
<body>
<header>
<img src="logo_picasoft_white.svg" alt="Logo de Picasoft" /><!--
--><ul>
<a href="https://md.pad.test.picasoft.net/"><li>CodiMD</li></a>
<a href="https://week.pad.picasoft.net/"><li>EtherPad</li></a>
<a href="whiteboard.html"><li>WhiteBoard</li></a>
</ul><!--
--><ul>
<a href="https://picasoft.net/co/cgu.html"><li>CGU</li></a>
<a href="mailto:picasoft@assos.utc.fr"><li>Contact</li></a>
</ul>
</header>
<div id="content">
<h1>WhiteBoard</h1>
<div id="wb-interface">
<a href="https://wb.pad.test.picasoft.net/?randomid=true">Nouveau tableau rapide</a><!--
--><form action="https://wb.pad.test.picasoft.net" method="GET">
<label for="name">Nom du pad : </label><br />
<input type="text" id="name" name="title" /><br />
<label for="id">ID du pad : </label><br />
<input type="text" id="id" name="whiteboardid" /><br />
<label for="username">Nom d'utilisateur : </label><br />
<input type="text" id="username" name="username" /><br />
<input type="submit" />
</form>
</div>
<h2>Quelques raccourcis usuels</h2>
<table>
<thead>
<tr class="header">
<th style="text-align: left;">Result</th>
<th style="text-align: left;">Windows and Linux</th>
<th style="text-align: left;">macOS</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;">Clear the whiteboard</td>
<td style="text-align: left;">Ctrl + Shift + Z</td>
<td style="text-align: left;">Command + Shift + Z</td>
</tr>
<tr class="even">
<td style="text-align: left;">Undo your last step</td>
<td style="text-align: left;">Ctrl + Z</td>
<td style="text-align: left;">Command + Z</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Redo your last undo</td>
<td style="text-align: left;">Ctrl + Y</td>
<td style="text-align: left;">Command + Y</td>
</tr>
<tr class="even">
<td style="text-align: left;">Increase thickness</td>
<td style="text-align: left;">Ctrl + Up Arrow</td>
<td style="text-align: left;">Command + Up Arrow</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Decrease thickness</td>
<td style="text-align: left;">Ctrl + Down Arrow</td>
<td style="text-align: left;">Command + Down Arrow</td>
</tr>
<tr class="even">
<td style="text-align: left;">Set a color</td>
<td style="text-align: left;">Ctrl + Shift + 1,2,3,4,5</td>
<td style="text-align: left;">Command + Shift + 1,2,3,4,5</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Toggle between main clolors</td>
<td style="text-align: left;">Ctrl + Shift + R</td>
<td style="text-align: left;">Command + Shift + R</td>
</tr>
</tbody>
</table>
<h2>Tous les raccourcis</h2>
<table>
<thead>
<tr class="header">
<th style="text-align: left;">Result</th>
<th style="text-align: left;">Windows and Linux</th>
<th style="text-align: left;">macOS</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;">Clear the whiteboard</td>
<td style="text-align: left;">Ctrl + Shift + Z</td>
<td style="text-align: left;">Command + Shift + Z</td>
</tr>
<tr class="even">
<td style="text-align: left;">Undo your last step</td>
<td style="text-align: left;">Ctrl + Z</td>
<td style="text-align: left;">Command + Z</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Redo your last undo</td>
<td style="text-align: left;">Ctrl + Y</td>
<td style="text-align: left;">Command + Y</td>
</tr>
<tr class="even">
<td style="text-align: left;">Select an area</td>
<td style="text-align: left;">Ctrl + X</td>
<td style="text-align: left;">Command + X</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Take the mouse</td>
<td style="text-align: left;">Ctrl + M</td>
<td style="text-align: left;">Command + M</td>
</tr>
<tr class="even">
<td style="text-align: left;">Take the pen</td>
<td style="text-align: left;">Ctrl + P</td>
<td style="text-align: left;">Command + P</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Draw a line</td>
<td style="text-align: left;">Ctrl + L</td>
<td style="text-align: left;">Command + L</td>
</tr>
<tr class="even">
<td style="text-align: left;">Draw a rectangle</td>
<td style="text-align: left;">Ctrl + R</td>
<td style="text-align: left;">Command + R</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Draw a circle</td>
<td style="text-align: left;">Ctrl + C</td>
<td style="text-align: left;">Command + C</td>
</tr>
<tr class="even">
<td style="text-align: left;">Toggle between line, rect, circ</td>
<td style="text-align: left;">Ctrl + Shift + F</td>
<td style="text-align: left;">Command + Shift + F</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Toggle between pen and eraser</td>
<td style="text-align: left;">Ctrl + Shift + X</td>
<td style="text-align: left;">Command + Shift + X</td>
</tr>
<tr class="even">
<td style="text-align: left;">Toggle between main clolors</td>
<td style="text-align: left;">Ctrl + Shift + R</td>
<td style="text-align: left;">Command + Shift + R</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Write text</td>
<td style="text-align: left;">Ctrl + A</td>
<td style="text-align: left;">Command + A</td>
</tr>
<tr class="even">
<td style="text-align: left;">Take the eraser</td>
<td style="text-align: left;">Ctrl + E</td>
<td style="text-align: left;">Command + E</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Increase thickness</td>
<td style="text-align: left;">Ctrl + Up Arrow</td>
<td style="text-align: left;">Command + Up Arrow</td>
</tr>
<tr class="even">
<td style="text-align: left;">Decrease thickness</td>
<td style="text-align: left;">Ctrl + Down Arrow</td>
<td style="text-align: left;">Command + Down Arrow</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Colorpicker</td>
<td style="text-align: left;">Ctrl + Shift + C</td>
<td style="text-align: left;">Command + Shift + C</td>
</tr>
<tr class="even">
<td style="text-align: left;">Set black color</td>
<td style="text-align: left;">Ctrl + Shift + 1</td>
<td style="text-align: left;">Command + Shift + 1</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Set blue color</td>
<td style="text-align: left;">Ctrl + Shift + 2</td>
<td style="text-align: left;">Command + Shift + 2</td>
</tr>
<tr class="even">
<td style="text-align: left;">Set green color</td>
<td style="text-align: left;">Ctrl + Shift + 3</td>
<td style="text-align: left;">Command + Shift + 3</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Set yellow color</td>
<td style="text-align: left;">Ctrl + Shift + 4</td>
<td style="text-align: left;">Command + Shift + 4</td>
</tr>
<tr class="even">
<td style="text-align: left;">Set red color</td>
<td style="text-align: left;">Ctrl + Shift + 5</td>
<td style="text-align: left;">Command + Shift + 5</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Save whiteboard as image</td>
<td style="text-align: left;">Ctrl + S</td>
<td style="text-align: left;">Command + S</td>
</tr>
<tr class="even">
<td style="text-align: left;">Save whiteboard as JSON</td>
<td style="text-align: left;">Ctrl + Shift + K</td>
<td style="text-align: left;">Command + Shift + K</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Save whiteboard to WebDav</td>
<td style="text-align: left;">Ctrl + Shift + I (i)</td>
<td style="text-align: left;">Command + Shift + I (i)</td>
</tr>
<tr class="even">
<td style="text-align: left;">Load saved JSON to whiteboard</td>
<td style="text-align: left;">Ctrl + Shift + J</td>
<td style="text-align: left;">Command + Shift + J</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Share whiteboard</td>
<td style="text-align: left;">Ctrl + Shift + S</td>
<td style="text-align: left;">Command + Shift + S</td>
</tr>
<tr class="even">
<td style="text-align: left;">Hide or show toolbar</td>
<td style="text-align: left;">Tab</td>
<td style="text-align: left;">Tab</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Move selected object up</td>
<td style="text-align: left;">Up Arrow</td>
<td style="text-align: left;">Up Arrow</td>
</tr>
<tr class="even">
<td style="text-align: left;">Move selected object down</td>
<td style="text-align: left;">Down Arrow</td>
<td style="text-align: left;">Down Arrow</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Move selected object left</td>
<td style="text-align: left;">Left Arrow</td>
<td style="text-align: left;">Left Arrow</td>
</tr>
<tr class="even">
<td style="text-align: left;">Move selected object right</td>
<td style="text-align: left;">Right Arrow</td>
<td style="text-align: left;">Right Arrow</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Drop object</td>
<td style="text-align: left;">Ctrl + Enter</td>
<td style="text-align: left;">Command + Enter</td>
</tr>
<tr class="even">
<td style="text-align: left;">Add Image to backgroud</td>
<td style="text-align: left;">Shift + Enter</td>
<td style="text-align: left;">Shift + Enter</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Cancel all actions</td>
<td style="text-align: left;">Escape</td>
<td style="text-align: left;">Escape</td>
</tr>
<tr class="even">
<td style="text-align: left;">Delete selected object</td>
<td style="text-align: left;">Delete</td>
<td style="text-align: left;">Delete</td>
</tr>
</tbody>
</table>
<script>
// Create Trianglify pattern - feel free to use whatever settings here
// **NOTE: Must export as svg with namespace included ".svg({ includeNamespace: true })"
var pattern = Trianglify({
height: window.innerHeight,
width: window.innerWidth,
}).svg({ includeNamespace: true });
// Take Trianglify SVG pattern and serialize it into XML string
var patternString = new XMLSerializer().serializeToString(pattern);
// URL encode the pattern and set into the proper format for SVG background
var patternMin = 'url("data:image/svg+xml,' + encodeURIComponent(patternString) + '")';
document.body.style.backgroundImage = patternMin;
</script>
</div>
</body>
</html>