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.

[piiskop]

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

I tried it out. There's no option for zooming out or fitting the whole canvas onto the screen.

[lovasoa]

@piiskop : You can edit your comments on github instead of posting new ones. This will prevent you from sending a new notification to everyone too often.

The loading time on WBO could certainly be improved by a lot, but boards usually already load very quickly. Only very large boards (such as the anonymous one) take a significant time to load.

You can zoom out with the zoom tool, using your scrolling wheel or shift+click. But there is no notion of an entire canvas. WBO is made around the idea of growing your board as you go, giving the feeling of an infinite board. (There are actually technical limits, but you should never reach them in real-life usage of the tool).

[piiskop]

I discovered that zoom out functionality meanwhile.

Now, there's another problem: we can't see who drew what. Everything is anonymous.

And there's no option for recovering to a version.

And we can't import images.

[samtuke]

These workarounds are great, but an officially supported whiteboard integration would be a better solution for many users. 8x8 customer here and looking for integrated whiteboard support.

[JIBSIL]

Take another look at the wiki, I updated it according to a new npm package I made. Should be very seamless... (although it is for etherpad and is not a standalone plugin for jitsi) Edit: Look at the WBO wiki, not the etherpad or jitsi

[piiskop]

Take another look at the wiki, I updated it according to a new npm package I made. Should be very seamless... (although it is for etherpad and is not a standalone plugin for jitsi) Edit: Look at the WBO wiki, not the etherpad or jitsi

Where's that wiki? Whom did you respond to exactly?

[lovasoa]

https://github.com/lovasoa/whitebophir/wiki/

[JIBSIL]

@piiskop https://github.com/lovasoa/whitebophir/wiki/WBO-Jitsi-integration

[3CE8D2BAC65BDD6AA9]

hi, https://meetzi.de/ did integrate https://github.com/cracker0dks/whiteboard into jitsi. Is there any possibility to have this whiteboard without etherpad - just the plain whiteboard?

IMHO, https://github.com/cracker0dks/whiteboard ("Cracker") is better because:

1. the whiteboard in etherpad keeps appearing and disappearing when the mouse if moved to the navbar.
2. Cracker allows to directly edit an image uploaded. In etherpad, after enabling an plugin, the pasted image does not interact with the whiteboard
3. Cracker allow to directly edit a PDF as an image.

But there is no documentation on how to integrate Cracker with Jitsi.

[lovasoa]

Of course I'm biased because I'm the author of the former, but I think WBO has a few significant advantages over cracker0dks/whiteboard. The main one is that it is entirely based on vector graphics, which avoids the pixelated look of cracker's whiteboard.

cracker	WBO

[saghul]

More importantly, WBO can integrate with Etherpad via the ep_draw plugin, so no new code needs to be added to Jitsi for example.

[JIBSIL]

I'm no expert, but I just play one on TV. That being said, it may be possible to add a whiteboard plugin directly to Jitsi using <iframe id='drawEmbed' src='//"+draw_host+"/boards/"+padID+"?authorName="+authorName+"&authorColor="+authorColor+"' width='100%' height='100%' style='border:none' frameborder='0' scrolling='no'></iframe> (the same code in my repository here)

I might start some work on a plugin that does this

[3CE8D2BAC65BDD6AA9]

@lovasoa thanks for the good work! Is any chance that you will allow image upload (PDF will be also be very nice)? @JIBSIL I will give it a try

This thread may not the place to discuss Etherpad. But the attached video may show how I struggle to use WBO with Etherpad: (1) the overlay appeared and then minimized that frequently - I understand this is because I moved the mouse to the menu bar. But it took me a few trials to understand why. (2) cannot interact with the image I pasted nicely

https://drive.google.com/file/d/1jaY0Ty2RHxj9RKBylprPleVzIvbVSM8x/view?usp=sharing

[JIBSIL]

@3CE8D2BAC65BDD6AA9 The overlay problem is to minimize the problem that you just have to click the button to bring it in and out. It does that in the interest of multitasking. You need @lovasoa to add image support before you will be able to interact with images in that manner.

[jabi27]

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

How can wbo be integrated into jitsi ?

[lovasoa]

See https://github.com/lovasoa/whitebophir/wiki/WBO-Jitsi-integration. And do not hesitate to contribute !

[Thatoo]

Would it be possible for WBO not to work on a blank screen but on a "shared screen" the screen shared by one of the participant? That would help to make this feature become real https://github.com/jitsi/jitsi-meet/issues/8128

[lovasoa]

Yes, wbo doesn't have a background, so you can overlay it on top of something else if you want.

[Thatoo]

One participant is sharing his/her screen, let's say a map, can I, with the help of WBO, draw on the map and all participant seeing it?

[norhantharwat]

@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.

can you please help me to install it on self-hosted Jitsi @pandian-egnaroinc

[tngusdl3719]

I did it

[Thatoo]

@tngusdl3719 would you mind writing a tutorial explaining step by step how you did it?

[tusharsonawanes]

How did you do it ? can you please guide us ? @tngusdl3719 ?

[norhantharwat]

How did you do it ? can you please guide us ? @tngusdl3719 ?

+1

[davidwin3]

I did it

AWESOME :D

[tngusdl3719]

I will prepare and share the guide as soon as possible.

[tusharsonawanes]

That will be of soo much help @tngusdl3719

Waiting for it

[navinmistry]

@tngusdl3719 , it's great to see. could you please give a little summary of what has been done to achieve this before you share the full guide? it will help going meanwhile.

thanks

[tngusdl3719]

1. When the desktop sharing function is activated, the draw button is activated.
2. Clicking the draw button creates a canvas, and captures and draws the desktop screen on the canvas in a fixed frame unit.
3. Create a drawing component with startEffect and stopEffect functions and do localVideo.setEffect
4. A drawing event is created on the video element, and within the event, a drawing operation is executed on the canvas.
5. Users who participated in the conference create a drawing event in the video element when the drawing flag of the user they are currently viewing is activated, and in the event, a drawing event is sent to the user with the canvas through room.sendCommand.

this is rough logic

[tusharsonawanes]

@tngusdl3719

Thank you for this,

If its not too much, do you mind sharing the code ?

[nitin6674]

@tngusdl3719

Thanks for your guide line. If you don't mind, can you share the code ?

[TAGHDOUTI]

@tngusdl3719

if you don't mind to share a description for what you have done ?

Thanks you

[treeislife]

@tngusdl3719 I am really interested in a guide of what you did also. This feature would help out alot :)

[researchbrain]

@lovasoa

ep_draw seems deprecated. - https://www.npmjs.com/package/ep_draw

features like "onByDefault" : true aint working

[saghul]

ep_whiteboard is its successor: https://www.npmjs.com/package/ep_whiteboard

[tusharsonawanes]

@saghul tried using ep_whiteboard

Seems the onByDefault setting ain't working there too.

[saghul]

I'd suggest you open an issue on their GH repo then.

[Thatoo]

Yes, wbo doesn't have a background, so you can overlay it on top of something else if you want.

Good to know but the question is : how to do so @lovasoa ? How can we overlay wbo on top of the shared screen by one user and allow all users to comment on it?

[Thatoo]

@tngusdl3719 , could you share your tutorial in here https://github.com/lovasoa/whitebophir/issues/190 and even make a PR to improve the wiki here https://github.com/lovasoa/whitebophir/wiki/WBO-Jitsi-integration ? That would be great.

[timowevel1]

1. When the desktop sharing function is activated, the draw button is activated.
2. Clicking the draw button creates a canvas, and captures and draws the desktop screen on the canvas in a fixed frame unit.
3. Create a drawing component with startEffect and stopEffect functions and do localVideo.setEffect
4. A drawing event is created on the video element, and within the event, a drawing operation is executed on the canvas.
5. Users who participated in the conference create a drawing event in the video element when the drawing flag of the user they are currently viewing is activated, and in the event, a drawing event is sent to the user with the canvas through room.sendCommand.

this is rough logic

Hey, could you share your code? Everything looks nice, but that doesnt help me :/

[tusharsonawanes]

I'd suggest you open an issue on their GH repo then.

Seems there is no issue tab in that repo.

https://github.com/JIBSIL/ep_draw

[DanielHabenicht]

I added a PR to include generic IFrames but with the main goal of adding a Whiteboard:

It will be configurable in the main config.js by adding:

genericIFrameTemplateUrl: "https://wbo.ophir.dev/boards/{room}?lang={lang}"

[1a7r0ch3]

I wrote a light and free editable beamer slideshow tool for live online lectures, maybe this could interest you. Beware that my tool is only visual, so users must use two tabs, one for voice over IP (Jitsi or Mumble or anything else) and one for my tool. I'd be glad that you report here or on the Gitlab page of my project if you find it useful!

[Piyen]

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.

@pandian-egnaroinc Hi pandian-egnaroinc, It didn't create a new whiteboard but linked to someone's . How can I solve this ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ImaCrea]

hey there, was wondering how is it going here? This was a great project and it seemed there was a great dynamic here.

[DanielHabenicht]

From my side I try to keep the PR #11052 up to date. Currently I am waiting for feedback.

[ankurranpariya4066]

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.

which post can you pls give the link here?

[nsde]

I'd be happy to see kind of an DrawIo implementation/widget for this! :)

[saghul]

We have integrated Excalidraw. It's currently in beta and will be released soon.