lovasoa / whitebophir Goto Github PK

I believe the addition of wbo-backup.zip was in error. Maybe one of the rare cases where a force push might be in order? (Feel free to also delete this issue if you see fit.)

Thank you very much for WBO. Having compared many online collaborative whiteboard solutions, this is by far my favourite and a key ingredient to how I will conduct my university teaching this term. I'm currently packaging it for NixOS.

First thanks for this really nice tool (the only open source one I can find on the whole internet so far...). But it still lacks a feature I'd really love to have: the ability to export the drawing into another format (png for example). It would be great to be able to save a document.

Thanks!

The size selector stays open when the user starts drawing on mobile browsers (tested in chrome and firefox mobile).

See #49

Thank for this simple tool.

A splash like @finnboeger purpose, or a help button should be nice to explains tools and shortcuts.

Intro / Help Screen:

Hi, very nice tool! I like the demo and I am trying to run it local now.

I have:
0. -bash-4.2# cat /etc/redhat-release
Red Hat Enterprise Linux Server release 7.6 (Maipo)

1. downloaded repos zip
2. unzip in /whitebophir
3. cd /whitebophir/whitebophir-master
4. npm install -d
   (installed clean, no errors)
5. vim ./server/server.js
   (changed port 8080 to 8000)
6. npm run start
   -bash-4.2# npm run start

[email protected] start /whitebophir/whitebophir-master
node ./server/server.js

2020-02-29T08:55:15.975Z server started {"port":8000}

Opening my localhost:8000 in browser shows empty page and times out.

Did I miss something? Any ideas?

Hi,

I try to deploy wbo with docker, behind an apache webserver with proxypass because I want to use it as a subsection of a website : https://www.toto.fr/wbo

But some resources are in absolute path, when I try to access https://www.toto.fr/wbo/boards/test, /background.png, /socket.io/socket.io.js, /js/canvascolor/canvascolor.min.js gets 404 or 500 error code.

Or maybe I made a mistake in my apache conf ?

<Location /wbo>
        ProxyPass "http://wbo.host.fr:5001/"
        ProxyPassReverse "http://wbo.host.fr:5001/"
</Location>

Right now while drawing something from desktops and listening that event on mobile devices, only 1/4th(approx) part of what we drew on desktop is being shown on mobile.

It would be wonderful if you could optionally add a background to the text. Like a sticky note.

It would be great to automated generate shortlinks and qr codes from the random URL.

UseCase:

• QR Code can be used to integrate in printed worksheets.
• QR Code can be displayed via beamer / TV in the classromm or meetingroom and used to allow pupils/users to use their mobile device for a collaborative session
• Shortlinks can be used in printed worksheets or chats as well (if you cant use a mobile device)

Possibilities:

• Use the yourls API (if one uses a yourls server) https://yourls.org/ can automate both the shortlink and the qr code.
• Use a qrcode generator e.g. https://www.npmjs.com/package/qrcode

yourls example:

https://eldshort.de/j0hhwy

add .qr to shortlink to get an qrcode image
![](https://eldshort.de/j0hhwy.qr)

I'm not a programmer, but I'm willing to test. Furthermore I can provide a yourls server for testing.

Great tool. To use it within the laws in Germany I need a place where to left the "Impressum" Imprint / legal notice. How can I do that on the landing page?

Hello,
I really like it, but I facing the problem, that there is no installation guide in the readme.
How does the data get stored? How to delete the whiteboards once created?
Is there an API can access to make changes.
There is just a docker file, but no explanation what it does or how to work with it etc.

Hope you can give me some more information, if you dont have time to update the manual, I can write a short text which can be improved, so at least its saved here.
Thanks

Allow toolbar to be moved to the right side to allow left handed users the use of WBO on touch devices without accidentally triggering the menu

hi,

thanks for this tool. It is helpful.

Just a little thing, currently i need to run it under windows (no other choice at now) and i see an error.
when node tries to save the tmp file of board an error is occured.

the reason is due to date format used in backupFileName function.
This one is not comptatible on Windows (error in fs.writeFile)

before

function backupFileName(baseName) { return baseName + '.' + new Date().toISOString() + '.bak'; }

after

function backupFileName(baseName) {
	//date format modifcation for Windows
	var mydate =  new Date().toISOString().replace(new RegExp(':','g'),'.');
	return baseName + '.' + mydate + '.bak';
}

it's work without any problem on Windows and Debian (under WSL)

hope this can be useful

Regards

K.

Just an information for german users an maybe a thing for the Wiki:

I wrote a howto on installing WBO: https://eldshort.de/2092sz. It should be a kind of open educational ressource that IT teacher or in-company instructor can use to show their trainees how to deploy a service in Ubuntu/ Debian.

As WBO ist small, functional and really useful for collaboration it is in my opinion a ideal tool for learning in both meanings: build up IT competencies as well as using it as tool.

optionally reducing its resolution.

The data of a board can already be downloaded.
Now, if there was a function to upload/import, this would allow for:

• User-controlled backups (accidential clear)
• Merge a drawing into another whiteboard
• Transfer a drawing to another server
• Implicitly: renaming whiteboards
• archival (?)

Thank you very much for WBO. Having compared many online collaborative whiteboard solutions, this is by far my favourite and a key ingredient to how I will conduct my university teaching this term. I'm currently packaging it for NixOS.

It would be awesome if WBO could support end-to-end encryption, in the simplest way possible: The encryption key has to be given in the fragment part of the URL, such as in http://localhost:8080/boards/secret-doodle#OVrijCCAQUJJQ22LEIYvyQ.

Perhaps I might work on that.

Currently, the eraser is just one pixel wide. It means that you have to be very precise when trying to erase a small shape, like a single point. We could make the eraser larger, so that you can just click less that X pixels away from a shape to erase it.

Hi @lovasoa ,

Thanks for creating this awesome project and making it public!
Can you please help me with installation on a remote server?

I installed this on my localhost and everything seems working. I used

Git clone https://github.com/lovasoa/whitebophir/
npm install
npm start

But, when I do this same on my AWS instance. its just listing all files and directories "index of/"

I also got this kind of response on my CLI

server started	{"port":8080}

Can you please help me fixing it ASAP?

Thanks,
Rohit Kumar

Having a way to collaboratively "moderate" a board would be great, especially for boards with many users, such as boards/anonymous

Currently: if I want to modify an entity, I must delete the current one and create a new one. It's ok for basic entities, but as soon as my schema is made of several entities, it will be complicated.

Expected: allow to modify an entity. The minimum would be to be able to move an entity.

This would be a required feature for us to integrate the tool in tracim as a dedicated app

Hi Team,

I was going through code for each tool in the app, right now the listeners available for each tool are press, move and release. Can I add new listeners like click or db click or hover etc to the existing code.
It'll be helpful if you can help me on this.

Mouse scrolling does not scroll at the same speed in all browsers, and in most cases, it is probably much slower than what the user wants.

Hi,
I'm trying to install a whiteboard on my server. I'm getting the following error:

[warsztatmiejski@s42]:<~/domains/makerspace.silesia.pl/public_nodejs/whitebophir>$ PORT=5001 npm start

> [email protected] start /usr/home/warsztatmiejski/domains/makerspace.silesia.pl/public_nodejs/whitebophir
> node ./server/server.js

/usr/home/warsztatmiejski/domains/makerspace.silesia.pl/public_nodejs/whitebophir/server/sockets.js:42
	async function joinBoard(name) {
	      ^^^^^^^^

SyntaxError: Unexpected token function
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/usr/home/warsztatmiejski/domains/makerspace.silesia.pl/public_nodejs/whitebophir/server/server.js:2:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node ./server/server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/warsztatmiejski/.npm/_logs/2020-05-20T11_13_59_795Z-debug.log

I'm not really familiar with node.js (sorry) – is this an easy fix?
Thanks.

Currently, it is very easy to get lost in a large board, or not to be able to find something drawn earlier. We could have the URL reflect the current position on the board.

Currently, there is no concept of "users". But when there will be, it would be good to be able to see the name of the person drawing.

Related to #4

I think an error slipped through my review in #57 , which introduced repeated errors in production.

I think this is due to mutating request.url, which is supposed to be read-only.

Trace: TypeError: Cannot read property 'length' of null
    at SendStream.hasTrailingSlash (/opt/app/node_modules/send/index.js:304:30)
    at SendStream.pipe (/opt/app/node_modules/send/index.js:590:34)
    at serveStatic (/opt/app/node_modules/serve-static/index.js:125:12)
    at handleRequest (/opt/app/server/server.js:89:5)
    at Server.handler (/opt/app/server/server.js:60:3)
    at Server.<anonymous> (/opt/app/node_modules/engine.io/lib/server.js:473:22)
    at Server.<anonymous> (/opt/app/node_modules/socket.io/lib/index.js:343:16)
    at Server.emit (events.js:310:20)
    at parserOnIncoming (_http_server.js:784:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:119:17)
    at Server.handler (/opt/app/server/server.js:62:11)
    at Server.<anonymous> (/opt/app/node_modules/engine.io/lib/server.js:473:22)
    at Server.<anonymous> (/opt/app/node_modules/socket.io/lib/index.js:343:16)
    at Server.emit (events.js:310:20)
    at parserOnIncoming (_http_server.js:784:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:119:17)

When running the latest master or prod branch and creating a board with a space in its name it is possible to draw on it just fine, however if one wants to download the board or render a preview the url gets encoded twice (first by the browser changing the space to %20, then again by the server changing it to %2520).
For some reason this does not present an issue on the wbo.ophir.dev server although the same double encoding behaviour can be observed there

Currently, loading the board can take several seconds. It should be faster

The client should not extend the board further than the server allows

As soon as a schema is being more complex/large, the ability of zoom in / zoom out is required.

It would be nice if there were a way to know who is connected to a given board.

Pointer events are fairly well supported and have various neat improvements over using mouse events. For example, I have an erase button on my Surface Pen, and I’d really like it to work as an eraser, rather than requiring me to switch mode.

More involved things that could be done with pointer events: greater precision and update frequency, variable-width stroke (algorithmically much more complex to draw, but very useful), handling multiple simultaneous inputs.

For platforms not supporting pointer events, mouse events can still easily be used.

The boards data are currently saved as json files as far as I can see. They should be saved using any database. And maybe there could be a mode without any persitence - everything streamed over WS.

On mobile safari, the site always appears in english, not in the user's locale.

This is because mobile Safari sends a very short Accept-Language header containing a single LOCALE-VARIANT option, without the LOCALE alternative. This is standard compliant, and we should support it.

It would be cool to be able to control who is allowed to edit and who is only allowed to view (and maybe use some kind of temporary marker / pointer to point out what he is talking about when asking a question).

A simple way to achieve something like this could be with to links like:

• view only:
  https://wbo.ophir.dev/boards/e2r-vvdnchZuv6gQjUJW5s/
• with edit permission (just appending an additional authorization string):
  https://wbo.ophir.dev/boards/e2r-vvdnchZuv6gQjUJW5s/NG6m4d6T0vC-GWf21GuQo-

A more secure way would be with authentication, this would also allow more fine gradient permission and access control, but at the cost of being more complex to implement.

For embedding whiteboards (e.g. in wikis) it would be nice to have the possibility to download a full SVG, e.g. with a link like /embed/board-name.

This can already be achieved with /preview/board-name, but there all paths are rendered as lines instead of curves - I guess that's intended for a "preview"?

To make it more scalable a simple caching might be wise. Trivial approach would be that createSVG.renderBoard() checks if there is an .svg in server-data/ and otherwise regenerates and saves one, and whenever board-name.json is rewritten any existing .svg is deleted.

We are planning to roll out the product for wider usage in our org. There might be n number of users using the board and at times having a single wbo service node may not be scalable. We would like to have multiple WBO service running and then having a front ending server load balancing it. In such cases having the json files stored locally on the node would not work out and we need to have a shared storage or DB etc., to provide consistent results to the users. Also we need to take care of sync'ing the changes to json back to external storage or DB too.

Feature idea: being able to set the opacity of your strokes.

I'm using first time Whiteboard. i'm facing a problem in installing whitebophir. please can you guide me.

Hi, I've managed to install and run the app, however by default the 'Welcome to WBO' screen appears. Is it possible for the app to bypass this screen and go straight to the public board? Thanks.

In the "move" listener of the "pencil" tool, there is a 70 ms check, probably to avoid sending data to the server too fast. I suggest to decouple drawing and sending.

Right now, it happens that it silently discards strokes (see steps to reproduce below).

Steps to reproduce:

• select the pencil tool
• draw a "V" letter with the stylus quickly

Actual result:

• either a single line is drawn, or an "U" shape

Expected result:

• V shape

Suggested fix:

• collect more data points for drawing and (ideally) draw on each listener event
• try to simplify the resulting path by discarding intermediate points that are close to the path to avoid sending too many data points
• update the server by sending differences of the resulting path e.g. every 100 ms

Is it possible to customise the HTML/CSS of the board UI (e.g. add a logo, etc)?

Hey. Thanks for a great board. I have forked this board and made some alterations (actually quite a bit), mostly for my own personal use as a math tutor. Check them out at rdbeach/wb So far, the changes have undergone limited testing on Safari and Chrome, both on my laptop and on my phone. Seems to work pretty good so far.

A list of changes:

Redesign of the GUI/layout
Added whiteout tool
Added circle tool
Modified text tool so that the input appears closer to the text
Made the removal tool more robust so you can remove small objects easier
Added an optional grid
Added an eraser tool
Added a clear board tool
Added an undo tool
Added a redo tool
Added a zoom in and zoom out tool in separate files.
Made some changes to the server to accommodate the new tools.

the "zoom button" doesn't allow you to dezoom (I know you can do it with mouse but still)

Hi @lovasoa

I am trying to modify some parts of code, and I am working on introducing new features for this tool. I am stuck on a part where i want to delete a connected user from a specific board. Can you please suggest me or guide me how to achieve that?

I tried doing it with this, but i wasn't able to do it.

board.users.delete(socket.id);

I picked this above code snippet from server/socket.js

socket.on('disconnecting', function onDisconnecting(reason) {
		Object.keys(socket.rooms).forEach(function disconnectFrom(room) {
			if (boards.hasOwnProperty(room)) {
				boards[room].then(board => {
					board.users.delete(socket.id);
					var userCount = board.users.size;
					log('disconnection', { 'board': board.name, 'users': board.users.size });
					if (userCount === 0) {
						board.save();
						delete boards[room];
					}
				});
			}
		});
	});
}

Summary:

I just want to remove a connected user from a specific board.

Thanks,
Rohit

According to this article, one of the main benefits of digital whiteboards is their infinite canvas:

While physical whiteboards certainly have size restrictions, going digital should mean that you're no longer limited in how big or complex your visualizations are.

However, unlike some commercial offerings, WBO does not offer this feature: When I create a new whiteboard, my viewing area is positioned on the top-left corner of the canvas. If I start drawing immediately and later realize that I want to draw something to the left or above of my initial drawing, I have no way of moving my viewing area further to the left.

Ideally, WBO would instead work like this: on a new whiteboard, the viewing area is positioned on the "center" of an effectively infinite canvas. If I use the hand tool to pan the viewing area to the top, I can draw there, and I could repeat that process endlessly.

Note: if WBO offered a way to move objects, one could work around the lack of an unlimited canvas by selecting the entire drawing and moving it away from the edge of the canvas. But that would be cumbersome, especially if one has to do it repeatedly.