Shared drawing canvas / whiteboard

[jondo]

For teaching mathematics, a shared whiteboard would be useful (as e.g. Zoom has got). For now, I will test WBO (https://wbo.ophir.dev) as workaround.

[rasos]

Integrating a WBO whiteboard could be done similar how etherpad is integrated. This would result in a larger PR with about 20 files involved, at every etherpad occurence add a whiteboard section.

[rainbyte]

My professor rejected Jitsi because it doesn't have whiteboard nor ppt/pdf presentation integrated, so we are using zoom instead :(

[poVoq]

https://github.com/spacedeck/spacedeck-open

Might be another option.

[lovasoa]

Hello ! I'm the author of WBO. Let me know if there is anything I can do to help.

[Echolon]

As long as there is no implementation please use the screen-sharing feature in combination with e.g. Drawpile - https://drawpile.net/

[ryanmartinneutrino]

Shouldn't it be possible to get it to work with etherpad and ep_draw plugin? Then opening the shared document (etherpad) would have drawing possibilities? I can't get ep_draw to work though...

[rainbyte]

As long as there is no implementation please use the screen-sharing feature in combination with e.g. Drawpile - https://drawpile.net/

This is also about usability, because for many people it is difficult to use Jitsi with 3rd party apps instead of having an integrated whiteboard and presentation.

[saghul]

Something that can be integrated with Etherpad as a plugin would be ideal here. Our Etherpad integration is not ideal, so adding another service is nontrivial. Having it as an Etherpad plugin would solve that.

I looked at ep_draw at one point, but it seemed dead. I see that it got some activity recently, but the server side, Etherdraw, seems to be dead: https://github.com/JohnMcLear/draw/issues/271

I think creating an Etherpad plugin for Drawpile (or whatever other similar tool which is easy to self-host) is the way forward here.

[foranastes]

WBO seems to be a good option. Has anyone tried to integrate WBO with jitsi?

[arunvc]

Self hosted wbo with meeting-id can make unique meeting boards

Example https://wbo.ophir.dev/boards/meeting-id

Possible solution

May be in screen share a new option to choose White board. And on click of White board launches local wbo with meeting-id that appears in the main content or in a new window,

To collaborate others would have the option to Join White board which can launch wbo with the same meeting-id

[pandian-egnaroinc]

For teaching mathematics, a shared whiteboard would be useful (as e.g. Zoom has got). For now, I will test https://wbo.ophir.dev (moved from https://wbo.openode.io) as workaround.

I just integrated WBO with selfhosted jitsi server and it works great!

Just configure the etherpad_base to use WBO url in the config.js and thats it. (etherpad_base: 'https://wbo.ophir.dev/boards/' to config.js) Jitsi will use the above as base url and attach a meeting specific UID to the base and creates a new whiteboard specific to the meeting.

After this, the WBO will appear as the collaborative document when you click 'open shared document' during the meet.

Of course it is for trying out. If you want all your data to be local, you should be hosting a WBO server (https://github.com/lovasoa/whitebophir) and adjust etherpad_base url with your server's url.

Hope it helps.

[pandian-egnaroinc]

WBO seems to be a good option. Has anyone tried to integrate WBO with jitsi?

I did and it is working great. Please refer previous post.

[pandian-egnaroinc]

My professor rejected Jitsi because it doesn't have whiteboard nor ppt/pdf presentation integrated, so we are using zoom instead :(

Share your screen => Chrome tab does not work for you? The chrome tab can contain any content and it will be shared. It is not totally integrated but it works.

[pandian-egnaroinc]

Hello ! I'm the author of WBO. Let me know if there is anything I can do to help.

Hi lovasoa,

I get a black background in WBO when integrated with jitsi (all functionalities are fine and same otherwise).

Any idea how to make it white like in https://wbo.ophir.dev/? (I am unsure if it is a WBO or Jitsi specific issue as of now)

[rainbyte]

My professor rejected Jitsi because it doesn't have whiteboard nor ppt/pdf presentation integrated, so we are using zoom instead :(

Share your screen => Chrome tab does not work for you? The chrome tab can contain any content and it will be shared. It is not totally integrated but it works.

Professor said it is complicated that way because extra things are needed and students cannot be seen while sharing the screen. Zoom lets you share a ppt/pdf, use whiteboard and watch other people, all at the same time pressing just one button. I tried to provide Jitsi as alternative, but they want all these features.

[pandian-egnaroinc]

Hello ! I'm the author of WBO. Let me know if there is anything I can do to help.

Hi lovasoa,

Is there a way to clear the whole canvas? Currently it is time consuming to remove all contents. A button to clear all contents can go a long way in not limited to jitsi integration. This would improve usability of highly collaborative environment (5+ users). Currently only way is to create new whiteboard and move all the 5 users around, not ideal and time consuming.

Also let me know a better place to request improvements etc for WBO, this place is not ideal.

Thanks,

[lovasoa]

Yes, WBO is its own project, with its own issue tracker where you can open feature requests. Being able to clear the whole whiteboard has been requested before, but I am reluctant to implement it. WBO is sometimes used in massively multi-user settings, in which one wouldn't want a single misbehaving user to be able to delete a whole board. Just as you don't have a big "delete article" button on wikipedia.

[umagon]

Yes, WBO is its own project, with its own issue tracker where you can open feature requests. Being able to clear the whole whiteboard has been requested before, but I am reluctant to implement it. WBO is sometimes used in massively multi-user settings, in which one wouldn't want a single misbehaving user to be able to delete a whole board. Just as you don't have a big "delete article" button on wikipedia.

@lovasoa isn't old plain eraser kind of a problem too in that sense?

I like the suggestion in this issue lovasoa/whiteobophir#84.

[siddharthsrivastava]

Hello ! I'm the author of WBO. Let me know if there is anything I can do to help.

Hi lovasoa,

I get a black background in WBO when integrated with jitsi (all functionalities are fine and same otherwise).

Any idea how to make it white like in https://wbo.ophir.dev/? (I am unsure if it is a WBO or Jitsi specific issue as of now)

I am also facing this issue. It is black on chrome desktop browser, but while using it from jitsi meet android app, it is white.

[awlx]

We have integrated https://github.com/lovasoa/whitebophir to https://meet.ffmuc.net with the ep_draw plugin in etherpad and it's working like a charm even on the mobile apps. Thank you very much @lovasoa for this awesome tool.

[lovasoa]

@awlx : Good work 👍 I created a page in the WBO wiki about how to setup jitsi meet with WBO. It is currently mostly empty. Maybe you can fill it with step-by-step instructions about how to setup the plugin ? It would certainly be super useful for future administrators wanting to achieve the same thing.

[pandian-egnaroinc]

@awlx : Good work 👍 I created a page in the WBO wiki about how to setup jitsi meet with WBO. It is currently mostly empty. Maybe you can fill it with step-by-step instructions about how to setup the plugin ? It would certainly be super useful for future administrators wanting to achieve the same thing.

Etherpad is really not that useful with chat directly integrated with jitsi. Direct integration as I mentioned above works great.

Please check below image.

As I also mentioned, Not sure why the background is black. Filed a bug regarding configurable canvas color.

[awlx]

@pandian-egnaroinc that's why integrated WBO as a plugin for etherpad (with ep_draw). So the background stays white and you can share everything via export functions of etherpad and send the link for reading after the session.

[pandian-egnaroinc]

@pandian-egnaroinc that's why integrated WBO as a plugin for etherpad (with ep_draw). So the background stays white and you can share everything via export functions of etherpad and send the link for reading after the session.

@awlx Are you populating the wiki page shared by lovasoa? I think a middle ground need to be reached. The ep_draw with only middle section for other functions and full screen for WBO seem not so professional. Will try once the wiki is ready.

[rainbyte]

@awlx : Good work +1 I created a page in the WBO wiki about how to setup jitsi meet with WBO. It is currently mostly empty. Maybe you can fill it with step-by-step instructions about how to setup the plugin ? It would certainly be super useful for future administrators wanting to achieve the same thing.

Etherpad is really not that useful with chat directly integrated with jitsi. Direct integration as I mentioned above works great.

Please check below image.

As I also mentioned, Not sure why the background is black. Filed a bug regarding configurable canvas color.

Wow, it looks really good, and with pdf it would be perfect.

[saghul]

@awlx That sounds very promising! Did you fork ep_draw to integrate with WBO? I'd be very interested in experimenting with this as part of our Docker setup for example.

[awlx]

@saghul no, there was no need to fork it "yet". But I think we gonna fix/add some stuff to ep_draw.

For now it's as simple as adding this to the etherpad config:

    "ep_draw":{
        "host": "ffmuc.net/draw"
    }

Where the host is the instance of WBO.

So the only trick which is needed is the following "hack" in the nginx config of the WBO host:

rewrite /draw/d/(.*) /boards/$1 break;

And this hack can be eliminated I think by forking the ep_draw plugin and fix the path. So for now it's not 100% perfect but good enough for most of our teachers :).

[awlx]

@pandian-egnaroinc that's why integrated WBO as a plugin for etherpad (with ep_draw). So the background stays white and you can share everything via export functions of etherpad and send the link for reading after the session.

@awlx Are you populating the wiki page shared by lovasoa? I think a middle ground need to be reached. The ep_draw with only middle section for other functions and full screen for WBO seem not so professional. Will try once the wiki is ready.

I added the steps I have done so far :). https://github.com/lovasoa/whitebophir/wiki/WBO-Jitsi-integration

[bkiisee]

@saghul no, there was no need to fork it "yet". But I think we gonna fix/add some stuff to ep_draw.

For now it's as simple as adding this to the etherpad config:

    "ep_draw":{
        "host": "ffmuc.net/draw"
    }

Where the host is the instance of WBO.

So the only trick which is needed is the following "hack" in the nginx config of the WBO host:

rewrite /draw/d/(.*) /boards/$1 break;

And this hack can be eliminated I think by forking the ep_draw plugin and fix the path. So for now it's not 100% perfect but good enough for most of our teachers :).

hi @awlx @lovasoa i am deploy WBO on same server with etherpad and jitsi, with nginx conf

    # Etherpad-lite
    location ^~ /etherpad/ {
        proxy_pass http://localhost:9001/;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_buffering off;
        proxy_set_header       Host $host;
    }

    #whiteboard Drawing
   location ^~ /draw/ {
   
		rewrite /draw/d/(.*) /boards/$1 break;	
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";
		proxy_pass http://localhost:8042/;
    }

but the problem is socket.io cant forward properly xhr because wrong path. could you give me idea how fix the ngnix conf, because i am new on nginx. thnks

[lovasoa]

Hi @bkiisee ! The answer to this question is on our wiki: https://github.com/lovasoa/whitebophir/wiki/Setup-behind-Reverse-Proxies#nginx