GithubHelp home page GithubHelp logo

lovasoa / whitebophir Goto Github PK

View Code? Open in Web Editor NEW
1.9K 41.0 389.0 10.24 MB

Online collaborative Whiteboard that is simple, free, easy to use and to deploy

Home Page: https://wbo.ophir.dev

License: GNU Affero General Public License v3.0

CSS 4.62% JavaScript 91.04% HTML 4.15% Dockerfile 0.19%
collaborative javascript whiteboard teaching education draw art

whitebophir's Introduction

WBO

WBO is an online collaborative whiteboard that allows many users to draw simultaneously on a large virtual board. The board is updated in real time for all connected users, and its state is always persisted. It can be used for many different purposes, including art, entertainment, design, teaching.

A demonstration server is available at wbo.ophir.dev

Screenshots

The anonymous board collaborative diagram editing Screenshot of WBO's user interface: architecture
teaching math on WBO wbo teaching drawing art kawai cats on WBO

Running your own instance of WBO

If you have your own web server, and want to run a private instance of WBO on it, you can. It should be very easy to get it running on your own server.

Running the code in a container (safer)

If you use the docker containerization service, you can easily run WBO as a container. An official docker image for WBO is hosted on dockerhub as lovasoa/wbo: WBO 1M docker pulls.

You can run the following bash command to launch WBO on port 5001, while persisting the boards outside of docker:

mkdir wbo-boards # Create a directory that will contain your whiteboards
chown -R 1000:1000 wbo-boards # Make this directory accessible to WBO
docker run -it --publish 5001:80 --volume "$(pwd)/wbo-boards:/opt/app/server-data" lovasoa/wbo:latest # run wbo

You can then access WBO at http://localhost:5001.

Running the code without a container

Alternatively, you can run the code with node.js directly, without docker.

First, download the sources:

git clone https://github.com/lovasoa/whitebophir.git
cd whitebophir

Then install node.js (v10.0 or superior) if you don't have it already, then install WBO's dependencies:

npm install --production

Finally, you can start the server:

PORT=5001 npm start

This will run WBO directly on your machine, on port 5001, without any isolation from the other services. You can also use an invokation like

PORT=5001 HOST=127.0.0.1 npm start

to make whitebophir only listen on the loopback device. This is useful if you want to put whitebophir behind a reverse proxy.

Running WBO on a subfolder

By default, WBO launches its own web server and serves all of its content at the root of the server (on /). If you want to make the server accessible with a different path like https://your.domain.com/wbo/ you have to setup a reverse proxy. See instructions on our Wiki about how to setup a reverse proxy for WBO.

Translations

WBO is available in multiple languages. The translations are stored in server/translations.json. If you feel like contributing to this collaborative project, you can translate WBO into your own language.

Authentication

WBO supports authentication using Json Web Tokens. This should be passed in as a query with the key token, eg, http://myboard.com/boards/test?token={token}

The AUTH_SECRET_KEY variable in configuration.js should be filled with the secret key for the JWT.

Within the payload, you can declare the user's roles as an array. Currently the only accepted roles are moderator and editor.

  • moderator will give the user an additional tool to wipe all data from the board. To declare this role, see the example below.
  • editor will give the user the ability to edit the board. This is the default role for all users.
{
  "iat": 1516239022,
  "exp": 1516298489,
  "roles": ["moderator"]
}

Moderators have access to the Clear tool, which will wipe all content from the board.

Board name verification in the JWT

WBO supports verification of the board with a JWT.

To check for a valid board name just add the board name to the role with a ":". With this you can set a moderator for a specific board.

{
  "roles": [
    "moderator:<boardName1>",
    "moderator:<boardName2>",
    "editor:<boardName3>",
    "editor:<boardName4>"
  ]
}

eg, http://myboard.com/boards/mySecretBoardName?token={token}

{
  "iat": 1516239022,
  "exp": 1516298489,
  "roles": ["moderator:mySecretBoardName"]
}

You can now be sure that only users who have the correct token have access to the board with the specific name.

Configuration

When you start a WBO server, it loads its configuration from several environment variables. You can see a list of these variables in configuration.js. Some important environment variables are :

  • WBO_HISTORY_DIR : configures the directory where the boards are saved. Defaults to ./server-data/.
  • WBO_MAX_EMIT_COUNT : the maximum number of messages that a client can send per unit of time. Increase this value if you want smoother drawings, at the expense of being susceptible to denial of service attacks if your server does not have enough processing power. By default, the units of this quantity are messages per 4 seconds, and the default value is 192.
  • AUTH_SECRET_KEY : If you would like to authenticate your boards using jwt, this declares the secret key.

Troubleshooting

If you experience an issue or want to propose a new feature in WBO, please open a github issue.

Monitoring

If you are self-hosting a WBO instance, you may want to monitor its load, the number of connected users, and various other metrics.

You can start WBO with the STATSD_URL environment variable to send it to a statsd-compatible metrics collection agent.

Example: docker run -e STATSD_URL=udp://127.0.0.1:8125 lovasoa/wbo.

  • If you use prometheus, you can collect the metrics with statsd-exporter.
  • If you use datadog, you can collect the metrics with dogstatsd.

whitebophir's People

Contributors

ariarijp avatar bhavik001 avatar chistikov avatar danielhabenicht avatar dependabot[bot] avatar droundy avatar finnboeger avatar h2entwicklung avatar holema avatar hophat avatar iblech avatar ishabalin avatar jamesdeacon avatar kimbtech avatar lexaul avatar lovasoa avatar luandro avatar mohmadhabib avatar nneka-nu avatar ovari avatar paolobolzoni avatar rdbeach avatar rothgar avatar russtedrake avatar sents avatar snowkylin avatar sysdef avatar the7thnightmare avatar vasylostrovskyi avatar wandesky avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

whitebophir's Issues

allow sharing the board as a QR Code

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:

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.

Legal Information

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?

More control over permissions (view only / edit, maybe also access authorization?)

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:

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.

See who is drawing what

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

starting server times out

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?

Infinite canvas in all directions

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.

Possibility to edit / move entities

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

Feature: SVG download for embedding

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.

Support end-to-end encryption

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.

User locale detection doesn't work with safari mobile

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.

Feature: Load board from file

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 (?)

New listener for tools

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.

New GUI, new tools, new features...

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.

Unable to run this project on "Node JS - AWS Lightsail instance"

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

Problem in installation

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

How to delete user from specific connected board by socket.id or any other method.

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

Date format modification for tmp file

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.

Background to text

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

We must have the ability to store json board files in a shared location (external storage or DB) so we could have scaled out WBO nodes

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.

Handle misbehaving users

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

Bug: Can't preview or download boards with spaces

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

Start up errors

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.

Use pointer events for better input

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.

Give the eraser a width

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.

Installation instructions for Ubuntu 20.04

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.

TypeError: Cannot read property 'length' of null

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)

Option to export to pdf/jpg/...

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!

Allow to zoom in and out

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

Remove wbo-backup.zip

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.

Lack in documentation

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

links with relative path

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>

Design template?

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

Going straight to public board?

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.

Client's pencil tool discards strokes

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.