cracker0dks / whiteboard

Lightweight collaborative Whiteboard / Sketchboard

whiteboard

This is a lightweight NodeJS collaborative Whiteboard/Sketchboard which can easily be customized...

Demowhiteboard

HERE (Reset every night)

Some Features

• Shows remote user cursors while drawing
• Undo / Redo function for each user
• Drag+Drop / Copy+Paste Images or PDFs from PC and Browsers
• Resize, Move, Rotate & Draw Images to Canvas or Background
• Write text and sticky notes
• Save Whiteboard to Image and JSON
• Draw angle lines by pressing "Shift" while drawing (with line tool)
• Draw square by pressing "Shift" while drawing (with rectangle tool)
• Indicator that shows the smallest screen participating
• Keybindings for ALL the functions
• REST API
• Working on PC, Tablet & Mobile

Projects using this Whiteboard

• Meetzi - WebRtc Conference tool
• LAMS - Managing and delivering online Collaboration learning activities
• Accelerator - WebRtc Conference tool
• Your Project here...

Install the App

You can run this app with and without docker

Without Docker

1. install the latest NodeJs (version >= 12)
2. Clone the app
3. Run npm install inside the folder
4. Run npm run start:prod
5. Surf to http://YOURIP:8080

With Docker

1. docker run -d -p 8080:8080 rofl256/whiteboard
2. Surf to http://YOURIP:8080

Development

After you have installed the app, run npm run start:dev to start the backend and a frontend development server. The website will be accessible on http://localhost:8080.

Default keyboard shortcuts

Use keyboard shortcuts to become more productive while using Whiteboard.

They are especially useful if you work with interactive displays such as XP-Pen Artist, Huion Kamvas and Wacom Cintiq. These devices have quick buttons (6-8 buttons and scrolling). By default, the buttons on these displays are mapped to standard Photoshop keyboard shortcuts. Keys can be configured to function effectively in other software.

The following are predefined shortcuts that you can override in the file ./src/js/keybinds.js

Result	Windows and Linux	macOS
Clear the whiteboard	Ctrl + Shift + Del	Command + Shift + Del
Undo your last step	Ctrl + Z	Command + Z
Redo your last undo	Ctrl + Y	Command + Y
Select an area	Ctrl + X	Command + X
Take the mouse	Ctrl + M	Command + M
Take the pen	Ctrl + P	Command + P
Draw a line	Ctrl + L	Command + L
Draw a rectangle	Ctrl + R	Command + R
Draw a circle	Ctrl + C	Command + C
Toggle between line, rectangle and circle	Ctrl + Shift + F	Command + Shift + F
Toggle between pen and eraser	Ctrl + Shift + X	Command + Shift + X
Toggle between main clolors (black, blue, green, yellow and red)	Ctrl + Shift + R	Command + Shift + R
Write text	Ctrl + A	Command + A
Take the eraser	Ctrl + E	Command + E
Increase thickness	Ctrl + Up Arrow	Command + Up Arrow
Decrease thickness	Ctrl + Down Arrow	Command + Down Arrow
Colorpicker	Ctrl + Shift + C	Command + Shift + C
Set black color	Ctrl + Shift + 1	Command + Shift + 1
Set blue color	Ctrl + Shift + 2	Command + Shift + 2
Set green color	Ctrl + Shift + 3	Command + Shift + 3
Set yellow color	Ctrl + Shift + 4	Command + Shift + 4
Set red color	Ctrl + Shift + 5	Command + Shift + 5
Save whiteboard as image	Ctrl + S	Command + S
Save whiteboard as JSON	Ctrl + Shift + K	Command + Shift + K
Save whiteboard to WebDav	Ctrl + Shift + I (i)	Command + Shift + I (i)
Load saved JSON to whiteboard	Ctrl + Shift + J	Command + Shift + J
Share whiteboard	Ctrl + Shift + S	Command + Shift + S
Hide or show toolbar	Tab	Tab
Move selected object up	Up Arrow	Up Arrow
Move selected object down	Down Arrow	Down Arrow
Move selected object left	Left Arrow	Left Arrow
Move selected object right	Right Arrow	Right Arrow
Drop object	Ctrl + Enter	Command + Enter
Add Image to background	Shift + Enter	Shift + Enter
Cancel all actions	Escape	Escape
Delete selected object	Delete	Delete
Use Line tool when pen is active (Not changeable)	Shift (Hold)	Shift (Hold)

URL Parameters

Call your site with GET parameters to change the WhiteboardID or the Username

http://YOURIP:8080?whiteboardid=MYID&username=MYNAME

• whiteboardid => All people with the same ID are drawing on the same board
• username => The name which will be shown to others while drawing
• title => Change the name of the Browser Tab
• randomid => if set to true, a random whiteboardId will be generated if not given aswell
• copyfromwid => set this to a whiteboardId you want a copy from. Only copies the content if the current whiteboard is empty.

Configuration

Many settings of this project can be set using a simple yaml file, to change some behaviors or tweak performances.

Config. file

To run the project with custom settings:

1. Create a config.run.yml file based on the content of config.default.yml,
2. Change the settings,
3. Run the project with your custom configuration (it will be merged into the default one):

• locally: node scripts/server.js --config=./config.run.yml
• docker: docker run -d -p 8080:8080 -v $(pwd)/config.run.yml:/config.run.yml:ro rofl256/whiteboard --config=/config.run.yml

Highlights

Security - AccessToken (Optional)

To prevent clients who might know or guess the base URL from abusing the server to upload files and stuff, you can set an accesstoken at server start (see here).

Then set the same token on the client side as well:

Client (With and without docker): http://YOURIP:8080?accesstoken=mySecToken&whiteboardid=MYID&username=MYNAME

Done!

REST API

You can fully control the whiteboard through a REST API. Explore and test the API for your server version by surfing to: [yourRootWhiteboardUrl]/apidoc/index.html You can see the API for the Demowhiteboard here: DemoAPI

Note: This API is pretty new, so be sure to use the latest Whiteboard version.

WebDAV (Optional)

This function allows your users to save the whiteboard directly to a webdav server (Nextcloud) as image without downloading it.

To enable set enableWebdav to true in the configuration.

Then set the same parameter on the client side as well:

Client (With and without docker): http://YOURIP:8080?webdav=true&whiteboardid=MYID&username=MYNAME

Refresh the site and You will notice an extra save button in the top panel. Set your WebDav Parameters, and you are good to go!

Note: For the most owncloud/nextcloud setups you have to set the WebDav-Server URL to: https://YourDomain.tl/remote.php/webdav/

Done!

And many more (performance, etc.)

Many more settings can be tweaked. All of them are described in the default config file.

Things you may want to know

• Whiteboards are gone if you restart the Server enable "enableFileDatabase" in the config file or export the board to prevent that.
• You should be able to customize the layout without ever touching the whiteboard.js (take a look at index.html & main.js)

Nginx Reverse Proxy configuration

Add this to your server part:

    location /whiteboard/ {
        proxy_set_header HOST $host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_pass http://YOURIP:8080/;
    }

To run it at /whiteboard. Don't forget to change -> YOURIP!

Apache Reverse Proxy configuration

<VirtualHost example.org:443>
...
# Proxy /whiteboard/ to whiteboard container
ProxyPass "/whiteboard/" "http://YOURIP:8080/"
ProxyPassReverse "/whiteboard/" "http://YOURIP:8080/"
...
</VirtualHost>

To run it at /whiteboard. Don't forget to change -> YOURIP!

Nextcloud integration

1. Install this app on your server
2. Enable and go to "external sites" (app) on your Nextcloud
3. Add a link to your server: https://YOURIP/whiteboard/?whiteboardid=WHITEBOARDNAME&username={uid} You can give each group its own whiteboard by changeing the WHITEBOARDNAME in the URL if you want.

Note: You might have to serve the app with https (If your nextcloud server runs https). To do so, its recommend to run this app behind a reverse proxy. (as shown above)

(Optional) Set whiteboard icon in nextcloud

Upload both icons present at /doc/nextcloud_icons/ to your nextcloud at the "external sites" admin section. Then set it as symbol on your link.

_ MIT License _

whiteboard's Issues

paste images (ctrl-v) not working

Hi,

I miss the function that I can paste images directly into the whiteboard with ctrl-v. This feature used to be working and was extremely handy! I think the shortcuts messed up something.

Thanks :)

Whiteboard shortcut keys

Hello!

It is more comfortable to work on the whiteboard using interactive displays, such as Xp-pen Artist, Huion Kamvas and Wacom Cintiq, such devices have quick buttons (6-8 buttons and scroll). By default, the buttons on these displays are mapped to standard Photoshop keyboard shortcuts. Keys can becustomized to function efficiently in other software.

Please add the ability to access the toolbar items using shortcut keys, as well as the ability to configure a combination of keys and apply these settings when starting the server.

Next, I suggest default values ​​for various controls:

• Clear the whiteboard - Ctrl+Shft+Z
• Undo your last step - Ctrl+Z
• Take the mouse - Esc
• Select an area - Ctrl+A
• Take the pen - Ctrl+P
• Take the eraser - Ctrl+E
• Toggle Pen/Eraser - Ctrl+B
• Draw a line - Ctrl+L
• Draw a rectangle - Ctrl+R
• Draw a circle - Ctrl+C
• Switch Line/Rectangle/Circle - Ctrl+D
• Write a text - Ctrl+T
• Thickness decrease size - Shft+[
• Thickness increase size - Shft+]
• Colorpicker - Shft+Z
• Predefined color shortcut keys
  • Black - Shft+0
  • Blue - Shft+1
  • Green - Shft+2
  • Red - Shft+3
  • Yellow - Shft+4
• Save whiteboard as image - Ctrl+S
• Save whiteboard as JSON - Ctrl+[
• Save whiteboard to webdav - Ctrl+W
• Upload image to whiteboard - Ctrl+U
• Load saved JSON to whiteboard - Ctrl+]
• Share whiteboard - Shft+S
• Show / Hide buttons - Tab
• Move selected item Up/Down/Left/Right - Up/Down/Left/Right
• Move whiteboard - Shft+Up/Down/Left/Right

Also need a button on the toolbar button, when clicked, a dialog box appears with a description of the shortcuts keys.

Regards to you and the project
Ivan Semencha

crash in heroku

it work fine in localhost but when i deploy it in heroku it crash. can you please find the problem . i can't find the problem.

Uploaded images not working with NGINX proxy?

I think it's attempting to access the uploads folder in the Node app but it's not accessing it correctly?

docker-compose.yml broken

Hi,
great project, thank you :)

The current docker-compose.yml is broken. It should be something like

version: "3.2"
services:
  whiteboard:
    image: rofl256/whiteboard
    ports:
      - "8080:8080"

docker-compose

Can you please add simple docker-compose.yml file that implements the environment variables.

Thanks :)

eg.:
version: '3.1'
services:
whiteboard:
image: rofl256/whiteboard
restart: always
ports:
- 8080:8080/tcp
environment:
- ACCESSTOKEN:mysecrettoken

Partial transparency for menu button backgrounds

Another proposal regarding the menu buttons:
As the buttons are situated on the drawing canvas, they might block the view to what is behind them. Maybe some transparency for the background colour would help.

Straight lines with pen tool

@cracker0dks As a fan of the Shift-key modifiers that apply to the line and rectangle tools, may I suggest extending the feature to the pencil tool, also? The sequence of events would be this:

• select pen tool
• locate point of origin (A) on the canvas
• press Shift
• roll the pen around the canvas
• remove the pen from the canvas at point (B)

Result: a straight line between points (A) and (B).

Obviously, this assumes that a thin dotted guideline would continuously connect (A) and the cursor while the cursor is being moved, providing feedback before the line is actually drawn.

Hope this makes sense. Thanks!

"Digital Wellbeing"

Can you please add a config to set the color of the background to another color. Sometimes it is very exhausting to look at the bright white the whole day :)

Add optionally random whiteboardid if empty

Thanks for your work I'm using it with my students.
Would be great if open with empty "whiteboardid" then whiteboard generates a random ID (optionally).

Provide option to hide menu buttons

On a small screen the menu buttons can consume quite a lot of space.
This could be mitigated by providing an additional button that hides/collapses the rest of the menu, until needed again, e.g. burger menu:

On mobiles (ios): Buttons hidden, unable to change zoom and view-area

I stumble across a problem with different users' screen-sizes during collaborations. The view-area and zoom on mobiles (iOS both with safari and chrome) changes "magically". This leads into situations where you can't see the buttons anymore:

It's not possible to change the zoom or move the view-area on the mobile, because the gestures are catched by the whiteboad and this just results into funny drawings...

It would be so great if

1. the user could disable auto-zooming / auto-moving
2. the user could choose whether the gestures should draw into the canvas (like it is now) or zooms / moves / scrolls (as he is used to). Something like a button "release mouse".

Drag and Drop shapes

Hi, thanks for this tool. It works great!
Would it be possible to allow the cursor tool to support drag and drop of shapes? So when clicking the select tool, I could select a shape that was drawn and move it on the board. This is different than the rectangular tool, in that it selects the actual shape, and not a rectangular selection around the shape.

Thank you

Embedding PDF as images

Would you consider supporting PDF embeds, dragged-and-dropped into the whiteboard just like images? Only the first page of the PDF would be rendered, of course. Several commercial whiteboards offer this feature already, and I think it makes sense especially in an educational context.

Thank you for this fantastic piece of work.

New element - Image viewer

Hi!

Please add an element that allows users to display and scroll through images previously placed in the WebDav directory.

When placing this element on the Whiteboard, the user selects the location, the canvas format is 4:3 or 16:9, and proportionally increases or decreases its size, and also sets the path to the WebDav directory.

Then, on this canvas, the first image from the list of files in the WebDav directory appears (sorting by file name), as well as controls to move through the file list - forward, backward and moving to a specific image number.

Next to the controls, it would be nice to show the number of images available in the catalog and the number (name) of the current image.

When working with a canvas, need to draw on top of the image placed on it.

Thanks!

Sincerely, Ivan Semencha

Difference between with docker and without docker

Hi cracker0dks, may I know what is the difference of running with docker and running without docker. I tried both ways and I couldn't notice the difference yet. Please kindly guide me. Thanks.

image download configurations

Hi chaps,

For me it would be handy to set the downloaded image of the whiteboard to jpg instead to png, including the background. Would it be possible to implement these two settings in the config file?

Regards

nginx "pretty url" server block

Wanna work on modifying the nginx location block so that you can go to

iporurl.com/boardid

Will input/edit as I try.

Add a paint/fill tool option?

Something that fills in a lined shape?

Problem with stylus (drawing small things)

Hello,
I'm having issues drawing small things with a stylus. The drawing doesn't follow the path of the tool.

Please help me in finding what the issue might be.

Awesome Script : Just need re-do

Awesome script. Can Anyone please guild me on adding Re-do Functionality?

Add webdav support for directly saving to Nextcloud?

Hello,

it would be awesome to be able to save the file crated using this app directly to Nextcloud using Webdav for example.

Furthering the 'background layer'?

This is the best collaborative whiteboard project I've found thus far, so props. I'm attempting to make a home-hosted, interactive Dungeons and Dragons map for an upcoming campaign. My hope is to take this whiteboard and overlay it on top of a map that functions similarly to a google map.

To complete the project, I need to add a few features. Panning/zooming are hopefully going to be done by the map and then I can 'copy/paste' the translation and scale values onto the whiteboard container. I've fiddled with zooming shenanigans before through D3.js and am fairly confident I can figure it out.

But, I would additionally like to have a separate layer for more 'static' drawings. Things like map icons, background drawings, entity tokens, or other things that should not be editable normally.

I found the "drawImgToBackground" function which currently just appends a static div with the image in question to the whiteboard container. My hope is to advance the idea of a 'background' layer further and turn it into a completely separate layer from the primary whiteboard. Then, hopefully, there would be a toggle-switch along the top to flip between which layer you would like to edit at the time. This way I could set more static-esk images and drawings in the background and my players could draw freely on the 'whiteboard' layer without having to worry about disturbing the background.

What are your thoughts on this? Would it be difficult to implement? If you don't have the time to add this yourself, then do you have any pointers or suggestions to get me started?

Also, have a happy holiday!

Possible refactoring of the code base

Hi @cracker0dks
First of all, very nice project :)

Due to the confinement I have a bit of extra free time. @jb-leger is interested in adding a pressure sensitive feature and suggested I take a look at it. I did a little POC here https://github.com/FloChehab/whiteboard/tree/feat/pressure_drawing .

By doing so, I was thinking about updating the code base to ES6+ and adding some tooling (webpack, babel, etc.) to change the way libs are handled, simplify the code base and make it easier to dive in / extend.

As this would require a big refactoring / rewrite, adding dependencies, etc. I wonder if you'd be interested in such a thing: I won't do it, if you don't want it.

Endless board

Hi!

Are you planning to realize the possibility of an endless board and the ability to navigate on it?

It would also be interesting to see which particular user edited what part of the information on the board.

Thank you for your work.

Whiteboard shortcut keys Problem

When opend a Text-Field the shortcuts are resulting in total chaos because text color is changing, etc ...

but keep up the good work - you are a hero in these days!

Whiteboard-name in tab title

If you have multiple whiteboards open for several groups of people you have to coach, it would be extremely handy to have a way to (human-readable) distinguish between the tabs.

How about to add the possibility to append a tab name via

&tabname=group1

Regards :)

BTW: there is a double definition
'defmod-shift-j' : 'saveWhiteboardAsJson',
'defmod-shift-j' : 'uploadJsonToWhiteboard',

autogenerate ID

Hi,

It would be very good, if there were a function to automatically generate random IDs. eg. by calling the whiteboard with &generateid and afterwards one will be redirected to a random instance of the whiteboard.

Regards

Read only link

It would be fantastic to have a read-only link of an actual whiteboard! (similar to etherpad)

:)

New feature: multipage support

The project meetzi.de has implemented some "multipage-thing". Of course you can everytime create a new whiteboard with another ID - but just opening another board in a session by clicking on something as "next page" would be awesome.

Could Sticky be supported?

mouse writing so hard, so sticky will be more usable.
Further more, just support sticky only may be more good for use.

Crach when IOS Ipad use the Whithboard

Hi,

Thx for the WhiteBoard, it's wonderfull.

All works, expeted i have a big problem. When i use my IPAD en IOS 13.3.1, then the deamon server chash just after the first draw line by my Ipad.

Error :

/scripts/server-backend.js:235
smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 };
^

TypeError: Cannot set property 'xeOdrrSY2nSDlv7dAABl' of undefined
at Socket. (/scripts/server-backend.js:235:68)
at Socket.emit (events.js:315:20)
at /node_modules/socket.io/lib/socket.js:513:12

Can you help me ?

Regards, Jerome

Minor display issues

The new transparency in the menu buttons has led to a minor display problem concerning the recycle bin. If you click it (and only if you then move the mouse away from it), the checkmark is partially hidden:

Another minor display issue:
The height of the line tool menu button frame seems to be too small:

Also the height of the line thickness tool seems to be a little bit too small:

Sorry for bothering with these trivialities and thank for your work on this great tool!

backend: add the ability to auto-delete whiteboards

With the new possibilities offered by #52, I'd like to add an option to auto delete all the data associated with a whiteboard after some amount of time after the last user connected to it / something was drawn.

It will ease handling of this app in a "production" setting.

When integrated in Nextcloud, download buttons don't work.

I get a "Content Security Policy" error in Firefox when trying to download the image or json file.

I guess this is a security feature of the browser to prevent download popups from an iframe? Maybe there could be a alternative pop-up similar to the one for sharing and image upload that would just give a download URL to manually download it?

Storing whiteboard data as JSON in database

Hi cracker0dks.

I like your idea of saving the whiteboard data as JSON. I am trying to post the json data to PHP laravel controller and store it in database(MySQL) via axios http request but I didn't manage to handle it yet. Do you have any suggestion on where I shall start the http post request? In server.js or main.js?

Thanks in advance.

SyntaxError: Invalid or unexpected token

Hello, I just run npm install and then after node scripts/server.js but its error
`{ backend:
{ accessToken: '',
enableWebdav: false,
performance: { whiteboardInfoBroadcastFreq: 1 } },
frontend:
{ onWhiteboardLoad: { setReadOnly: false, displayInfo: false },
showSmallestScreenIndicator: true,
imageDownloadFormat: 'png',
drawBackgroundGrid: false,
backgroundGridImage: 'bg_grid.png',
performance:
{ refreshInfoFreq: 5,
pointerEventsThrottling:
[ { fromUserCount: 0, minDistDelta: 1, maxFreq: 30 },
{ fromUserCount: 10, minDistDelta: 5, maxFreq: 10 } ] } } }
C:\Users\praful\Desktop\Projects\whiteboard-master\scripts\services\ReadOnlyBackendService.js:9
#idToReadOnlyId = new Map();
^

SyntaxError: Invalid or unexpected token
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
`

Shortcut conflcts

I introduce a redo function, but I choose ctrl-shift-z because ctrl-x was already used. But I forget that ctrl-shift-z was already used for clean the bord.

I do not see trivial solution, a a choice must be done, so I do not propose a PR, but I open a issue.

It is your choice, but some options are (this list is not limitative):

• put redo in ctrl-x, and rect-select in another key, to have the undo/redo like many other apps,
• find another shortcut for redo,
• keep redo in ctrl-shift-z and find another key for clear the board.

Exprt PNG doesn't print the CR (line return) caracter

Hi,

When i use the function to export PNG Format, i receive an PNG image without the returns lines.

Original :

The PNG :

Can you help me ?

Regards

load balancing

Hi,

I experience quite a performance breakdown in the middle of the day, when lots of whiteboards have been used. My idea was to use a nginx load balancer to split the requests up to multiple instances/servers. I open up two whiteboards (on 8080 and 8081) and use the config below. Then the whiteboards does not work any more. Strange thing ist, that a few lines get drawed, but very randomly. The cursor of other participants is not visible any more.

upstream backendwhiteboard {
	hash $request_uri;
	server localhost:8080;
        server localhost:8081;
    }
	
server {
        server_name MYDOMAIN.XYZ;

        location / {
		proxy_pass http://backendwhiteboard;
	}
}

Do you have an idea how to get a load balancer working?

Regards

How to manage content outside the screen boundaries

Continuing the discussion from #21

@bpcurse I don't like the idea of scrollbars especially on mobile devices. Is this a real problem you encounter? If so, we might find an other better solution than scrollbars.

I agree that scrollbars on mobile aren't pretty 😄
In this case the issue is the desktop device's display.

Desktop:

Mobile:

You did a great job for mobile as it seems to automatically adapt the zoom factor 👍

I'm not sure what alternative solution (to scrollbars) is possible on a desktop, but I'm not experienced in these things. BTW we are using the newest version you just released.

scaling of images does not work

When inserting images, the scaling does not work. I can not make them bigger or smaller.

Is this bug confirmed?

Thanks!

Cyrillic charset support

Hello!

Thank you very much for the operational changes, unfortunately they did not help in solving the problem, so I ask you to do:

1. When displaying the username on the board, please do it through the transformation encodeURI(username), username is the parameter passed in the url request. This will display Cyrillic characters and spaces in the username;
2. When zooming the board, also zoom in on the username displayed on the board and the toolbar;
3. Please use a font that contains Cyrillic characters, now if you use the “Text” element and try to enter the sentence “Из России с любовью!” other participants will not see this text.

With respect and gratitude,
Ivan Semencha

Originally posted by @semencha in #20 (comment)

Provide service only if a valid token was submitted

It seems that the server provides service to everyone who knows the uri. If you know/guess the BoardID you can even watch the boards.
As a security measure I would suggest that the server only provides service if a predefined general access token is submitted.
An additional enhancement could be board associated keys/tokens.

autoscale inserted image

Sometimes it gives very nasty error messages when you try to insert an image or even a screenshot with the wrong filesize. Is there a way to auto downscale the image, if it is to big? or set the maximum uploadsize of images?

Regards

Optimize co-working on different screen sizes

If you use whiteboard on different screen sizes, let's say large desktop and tablet. The one using the tablet won't see anything drawn outside the tablet screen limits.
The problem is, there is no way for the user with the smaller screen to know that there is any information beyond the screen limits.

I was thinking about some possible ways to deal with this and came to these ideas:

• Show the screen limits of the smallest screen on all larger screens (e.g. dotted grey lines)
• Show small arrows to the right or bottom on the smaller screens to indicate that there is more hidden information and
  • add zoom functionality and / or
  • add scroll functionality

Ask for confirmation before erasing board

When the trashbin icon is clicked there should be a confirmation request before the board is erased.

Cyrillic character support

Hello!

Thank you for a good project, if possible, add support for fonts with critical symbols, as well as information about the user of the board in UTF-8

Thanks.

Is there a way to integrate this to react based project ?

Hi

i am working on a online teaching tool and i want to know if there a guide on integrating whiteboard with react. As it looks like there is a lot of dependancies on Jquery.

thanks

Access denied! Wrong accessToken

Hi,

In the last versionof Withboard, when an user try to connect with a bad AccessToken (URL Get argument) then he received the message "Access denied! Wrong accessToken!" (Windows Alert).

But now, with the last version of Withboard, if you use a bad AccessToken, you dont't receive a message. The security is still good, because, the user can't use the Whiteboard, but he doesn't understand.

./usr/js/main.js :

    let accessDenied = false;
    signaling_socket.on("wrongAccessToken", function () {
        if (!accessDenied) {
            accessDenied = true;
            showBasicAlert("Access denied! Wrong accessToken!");
        }

Browser version : Chrome PC last version
Whiteboard ; Last version