How to add a new tool in v2.6

[James MacLean]

Hi Everyone,

Previously I had worked through how to add a new tool, a right triangle, to BigBlueButton in version previous to 2.6. I was successful after receiving help from this channel. See https://groups.google.com/g/bigbluebutton-dev/c/1ZJt5CAMNWY/m/WISgysLfBAAJ .

Now I would like to do the same thing in version 2.6. I recognize this change to TLDRAW as the whiteboard and even was able to clone the triangle code in the standalone TLDRAW sample server application to make a working right triangle.

I thought I would bring that success back to BBB and just apply that plus my old changes and produce the new tool. Unfortunately I appear to be missing how to even understand how a shape like a triangle is even drawn/described in this version. 

Previously I would start by cloning bigbluebutton-html5/imports/ui/components/whiteboard/annotations/triangle to a new righttriangle directory and work from there.

Now I don't see where this similar piece is sitting so that I can look at the function that defines how to draw a triangle so that I might adjust it to always draw a right triangle. Last time I created a new tool, but perhaps there is a simple way to bind a key to force the tool to draw as a right triangle.

Unfortunately I find myself stuck and hoping someone might explain how to add a tool, or even, point me to where there is another thread that covers this or some documentation that I missed. I'm hoping that it is just me missing the obvious :).

Thanks in advance,

DrJES

 

[Hiroshi Suga]

Unfortunately, I do not think it's possible anymore in a similar way we have been doing until 2.5, because 2.6 uses tldraw like an untractable module.

In theory, it's possible either 1) by replacing the tldraw module with your modified version or 2) by injecting your code which operates tldraw through the API. But both are tricky and I would not thus recommend it after all. Instead you'd better wait for the new version of tldraw after requesting new functions such as more customizable drawing tools at https://github.com/tldraw.

[Luiz Carlos Almeida Telles]

TL Draw es imposible de usar, prefiero 100 veces las version 2.4

--
You received this message because you are subscribed to the Google Groups "BigBlueButton-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bigbluebutton-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/bigbluebutton-dev/508327a7-33c7-40f9-ac48-c810c69816d7n%40googlegroups.com.

[Felipe Cecagno]

Would you please elaborate on that, Luiz?

We'd be very interested in better understanding your thoughts based on your experience.

Regards,

--

   Felipe Cecagno

To view this discussion on the web visit https://groups.google.com/d/msgid/bigbluebutton-dev/CAE-Nt8VwTxNhU0yvKmuW-p-YGNSiCymAyX%3Dw%3DHACZJ0LWNK%3DEQ%40mail.gmail.com.

[James MacLean]

Hello Everyone,

I took the TLDraw v1 git, mirrored the TriangleUtil and TriangleTool subdirectories to RightTriangleUtil and TightTriangleTool. Made the new shape do a right triangle. Then followed up the tree to connect them in. That worked so I took the new dist pieces and applied them to my BigBlueButton git and again followed up the tree to attempt to copy triangle code to righttriangle. 

In the end, I have a working right triangle in the whiteboard that appears to function as expected.

But it fails when I try to watch it in a recorded presentation. 

This reminds me of the problem I had last time in that I was not connecting the new shape to the logic to display it. I have added my same code to record-and-playback/presentation/scripts/publish/presentation.rb, but alas, no go. A sample where I create a triangle, then a right triangle that kicks out the presentation looks like:

{"type":"tldr/clipboard","shapes":[],"assets":[],"bindings":[]} 

{"name":"New Document","fileHandle":null,"document":{"id":"doc","name":"New Document","version":15.5,"pages":{"page":{"id":"page","name":"Page 1","childIndex":1,"shapes":{"slide-background-shape":{"assetId":"slide-background-asset-1","childIndex":-1,"id":"slide-background-shape","name":"Image","type":"image","parentId":"page","point":[0,0],"isLocked":true,"size":[1440,810],"style":{"dash":"draw","size":"medium","color":"blue"}},"7eb91415-868d-4dd6-2965-a46c647273e4":{"size":[313.92,230.45],"style":{"isFilled":false,"size":"small","scale":1,"color":"black","textAlign":"start","font":"script","dash":"draw"},"label":"","rotation":0,"id":"7eb91415-868d-4dd6-2965-a46c647273e4","labelPoint":[0.5,0.5],"parentId":"page","childIndex":0,"name":"Triangle","point":[283.29,287.4],"userId":"w_iff8vc6ujasv","type":"triangle"},"a792303f-853c-4b6f-3c76-01360e57e9b4":{"size":[357.06,223.69],"style":{"isFilled":false,"size":"small","scale":1,"color":"black","textAlign":"start","font":"script","dash":"draw"},"label":"","rotation":0,"id":"a792303f-853c-4b6f-3c76-01360e57e9b4","labelPoint":[0.5,0.5],"parentId":"page","childIndex":1,"name":"RightTriangle","point":[674.31,302.96],"userId":"w_iff8vc6ujasv","type":"righttriangle"}},"bindings":{}}},"pageStates":{"page":{"id":"page","selectedIds":[],"camera":{"point":[0,0],"zoom":0.5160493827160494}}},"assets":{"slide-background-asset-1":{"id":"slide-background-asset-1","size":[1440,810],"src":"/presentation/25508a873a7e9b91c9364dbe8297f2ba70b2ce3f-1694738902242/presentation/f7a450d2b0b7ea7de84c96a9ffb63983e1dcdce2-1694738902311/svgs/slide2.svg","type":"image"}}},"assets":{}}

I've been searching the code for what I missed and am drawing a blank. 

Would anyone be able to offer a way to narrow down where to look or maybe what I really should be searching for?

Thanks,

JES

[James MacLean]

Did not realize that playback was now a separate repo : https://github.com/bigbluebutton/bbb-playback . Added the right triangle modifications to that and deployed it. Now getting to see right triangle during playback. I have some recordings failing. At first I thought it was only when no mic was active during the session, but currently satisfied that is not the cause. Glad to have gotten this far :).

All the best,

JES

[Bob Teng]

Hello 
Recently we got same issue on BigBlueButton 3.0 , the new version 
See screenshot , this happening during recording playback


Is this due to the new version BBB 3.0 or  also related with server capacity ? 
If server overloaded or storage is low in capacity ,then will cause this issue? 

Thanks 

[Bob Teng]

One more image to show what we saw in the console 

Is there any know solution on this? 

[Bob Teng]

We found the issue and solve it already, Just share it here and may help others 

Simply added that part in try...catch block solved the problem.

        try {
            const {
                shape,
            } = tldrawData[i];

            shape.parentId = tldrawAPI?.getCurrentPageId();
            shapes[shape.id] = shape;
        }catch (e) {
            console.error(e);
        }

Thanks 

[Bob Teng]

Just update one more message 

For the solution you can fine more information at this Github link 
https://github.com/bigbluebutton/bbb-playback/issues/315

Thanks