cracker0dks / whiteboard Goto Github PK
View Code? Open in Web Editor NEWLightweight collaborative Whiteboard / Sketchboard
License: MIT License
Lightweight collaborative Whiteboard / Sketchboard
License: MIT License
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.
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
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.
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
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)
`
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.
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
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).
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!
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 :)
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.
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.
mouse writing so hard, so sticky will be more usable.
Further more, just support sticky only may be more good for use.
Hello,
it would be awesome to be able to save the file crated using this app directly to Nextcloud using Webdav for example.
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
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.
When inserting images, the scaling does not work. I can not make them bigger or smaller.
Is this bug confirmed?
Thanks!
It would be fantastic to have a read-only link of an actual whiteboard! (similar to etherpad)
:)
Something that fills in a lined shape?
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
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.
/scripts/server-backend.js:235
smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 };
^
Can you help me ?
Regards, Jerome
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:
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
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
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
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 :)
I think it's attempting to access the uploads folder in the Node app but it's not accessing it correctly?
Wanna work on modifying the nginx location block so that you can go to
iporurl.com/boardid
Will input/edit as I try.
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"
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 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!
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:
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):
ctrl-x
, and rect-select in another key, to have the undo/redo like many other apps,ctrl-shift-z
and find another key for clear the board.@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:
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!
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
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',
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.
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.
Hello!
Thank you very much for the operational changes, unfortunately they did not help in solving the problem, so I ask you to do:
With respect and gratitude,
Ivan Semencha
Originally posted by @semencha in #20 (comment)
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?
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.
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.
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!
When the trashbin icon is clicked there should be a confirmation request before the board is erased.
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.
Awesome script. Can Anyone please guild me on adding Re-do Functionality?
@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.
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.
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.