whiteboard
whiteboard copied to clipboard
cracker0dks
Furthering the 'background layer'?
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!
Hey, thanks for the post. zooming would be nice. I thought about as well but it is bit tricky -> Zooming and drawing at the same time. I also don't need it and don't have time to code it.... If you have the time and be able to implement it, this would be awesome.
The different layer problem I would solve by just init two new whiteboards (with different Ids) on the same site, then remove the background grind from both and move them ontop of each other. Now add a background grid behind both layers (if you want one). After that, you only need toggle button to select the whiteboard which is infront. (Hide the button for normal players)
I know this is a workaround, but I think, the work is like 5% from implementing the function into the basic whiteboard...
You think this is a vaild solution for you?
Happy holiday as well :)
Hmm yea that should work. It would definitely be easier than building a whole new second layer.
If I manage to figure out the zooming I'll let you know.
I was able to get your suggestion to work, but it took some splicing. I had to create two separate instances of the core 'whiteboard' variable and change some div names around due to some overlap. Most of the button functions I had to edit to check which whiteboard was 'active' at the time. And then I had to temporarily take out the user wid/socket check in the 'sendToAllUsersOfWhiteboard' function to get that part working again, though I'm pretty sure I can add the socket-id check back in there without problems.
But overall, it works. I've got 2 separate whiteboards on top of each other that I can switch between freely. Next step will be to try and get zooming/panning to work. Best case, I can stretch the whiteboard divs out to match the max map size and then zoom/pan visually without having to edit and translate coordinates. Worst case, I'm about to stare at a lot of tedious math for quite a while.
If I get a free moment of non-laziness I'll upload the changes I've made thus far to my fork.
@Tmktahu How did your project go? Did you ever get zooming/panning to work?
@christf It's been a while, so I don't remember if I got working bug-free. But yes I think I had it working for the most part. Unfortunately I don't think I have the code anymore.
If I remember correctly, it was just a matter of figuring out the correct zoom/panning math and then applying it to both canvases equally at the same time.