muaz-khan / canvas-designer Goto Github PK

Hi Muaz,

I'm trying to use Canvas-Designer into my Angular7 (Typescript) application. I tried to follow the documentation and couldn't make it work with Typescript.
The 1st hurdle is at "new CanvasDesigner()" with error "ReferenceError: CanvasDesigner is not defined".

1. Copied canvas-designer-widget.js, widget.js and widget.html files
2. Declared both js files in "angular.json". Declared the function in ts file.
   "declare function CanvasDesigner(): void"
3. Then the following code:
   let designer = new CanvasDesigner();
   designer.widgetHtmlURL = './widget.html';
   designer.widgetJsURL = './widget.js';

Could you offer any suggestions to resolve this error?

It should clear all the points of pencil not a point by point. For arrow and lines its clearing on single click itself but for pencil, it is not.

Hello,,,, i have a little problem.... How to change the toolbox position from left vertical to top horizontal???

Thank you sir,, this is a great projects :)

I have tried to use socketio-over-node.js and it works fine in video application but when i try to do the same for canvas designer application the user don't connect and in the node.js console there is a this message:- info-unhandled socket.io url .
I have tried to look for errors in console of Chrome this is the error i get in console:-

the issue might be small but as i am new and don't have complete knowledge of webrtc hence i am stuck.

Hi Muaz,

i am not able to switch tools on a touch enabled device. i see that in some places based on isTouch mouse events are replaces with touch events. i tried the same by registring for tap event instead of click event but with no luck.

Any pointers?

hi, thx for your nice code.

When i see the canvas by video tag, the background color is black.

Can cahnge background color on canvas?

i have tried to debug the code by creating a new function with the same name but then i start get other errors. any help is appreciated

Hi Muaz Khan,

I have some doubts:

• Have the library support for mobile devices? I can't draw on Android.
• How can I make the canvas responsive?
• Can two peers draw at the same time? I have some issues when two persons are drawing, because the canvas only render one of them.

Best regards,

It works fine when using individually but when i try to integrate it into canvas application i am not able to connect both the user. I was following the video tutorial on this link http://www.rtcmulticonnection.org/docs/openSignalingChannel/ to create a signaling mechanism using socketio. I want to remove the firebaseio call and replace it with some local signalling mechanism.

By default canvas 2d design is in hidden, when user want to use he clicks the tab and displays the canvas 2d design box. But its not loading properly. If i set canvas 2d tab is in active mode, it works fine.

I hope chinese is supported by text

@muaz-khan thanks

I want the user to only watch the drawing but he won't have any access to select anything or draw anything.

designer.setTools({ pencil: false, text: false, ............... ................ });

After I set everything to false plus not calling designer.setSelected('pencil'); for a particular user, two things are happening.

1. 3 tools are still showing: Line, Width and Extras
2. Pencil tool though not showing is selected by default and I can draw easily.

So first of all, how can I call Line, Width and Extras so that I can set them to false? And how can I unselect pencil tool so that the user can't draw?

hello sir,
In Firefox when i draw image and erase some part and then click on export as
image button then in image, erase part also get displays but in chrome erase part not display.
how to get rid from this?

Hi,
Your comment:
"Also, you can collaborate your drawing with up to 15 users; and everything is synced from all users. So, if you draw a line and your friend-A draws quadratic curve and friend-B draws rectangle then everything will be synced among all users!"

Is this limit for 15 online users?

I have saved the object that is available on the code button click. How can i redraw the old drawing and start from where i left the session last time.

How do I prevent another person from drawing when someone is already drawing?

I'm studying canvas designer and facing difficulty that how Room id is being created

I went through your document on rtcmulticonnect.js i am trying to eject a particular user using the connection.eject but i get errors currently i am using rtcMulticonnect-v3.js and i use socket.io for signalling purpose. If i replace it with rtcmulticonnect i start getting errors for firebase connection.

current I have integrate canvas designer into rectangle div 457x321, but problem: canvas not display correct on two or more user
I have attach image to easy understand, can you have a look
here is canvas from drawer

here is canvas from receiver

you see, receiver lack some drawing
do you have any solution for that?

so i tried to add this canvas to my website by your "How to use" but it not work

I am trying to make the connection work with safari but there seems to be a connection issue. The application works fine with chrome and firefox. does webrtc not work with safari ?

Im trying to use faye sockets as the way to sync.

It works, the only problem is, addSyncListener function doesnt seem to 'kick-in' till random data goes through the open socket first. So i have a little 'chat' app alongside the whiteboard, and it uses the same socket to communate. So the whiteboards dont sync till i send a message over the 'chat', then all of a sudden, making changes to the whiteboard is resulting in sending data over the socket.

No idea why i have to send random data over the socket first before addSyncListener will work.

Also, for some reason, on IOS safari, addSyncListener doesnt seem to ever work from what i can tell. My app running on an iphone can see the whiteboard and changes, but never sends its own changes when the user draws on the whiteboard.

Seems like addSyncListener might need some revisions or something ? Or am i doing something wrong.

Issues of canvas designer :

1 . sometimes it takes too much time to connect with room instance.

2 . when i join the room after starting the discussions my canvas was blank and when i start writing something , all the previous instance of that room was removed, even if anyone refresh the webpage, all the content is also removed from everyone's canvas of that room.

Is there a way that we can capture live changes in the database of our server, and show them?

Right now when a new user is connected we get to see a random string which tells us if user is connected and collaborating. Can we have a method to allow the connecting user to put his/her name and show the list of all connected users.

How to erase without erasing image and how to set size of eraser

i have checked this in console of chrome and other browser i don't get any errors but the collaboration is not working. Is there some detail/step that i am missing out.
my console for host screen looks like this:-

everything looks fine to me
console for client screen looks like this:-

is there some installation that i have miss out on. Also i would like to add that if i run the demo present on the following link https://www.webrtc-experiment.com/Canvas-Designer/ and keep the room-id same on both the local project and the demo(present on the above link) collaboration works.

I have configured my TURN Server like the way you did but it seems like not working. Can I know how you guys made it? @muaz-khan

How could I disable editing in Canvas??.

When I draw incessantly the drawing doesn't sync. But this doesn't happen when I draw intermittently. Is it possible to fix?

i would like to display a list of all the users that are connected in a room. Is it possible to do this?

Dear Mauz,
Your font tool is very nice!! I wrote a font tool myself but it is not like yours. You can see my font tool in this firefox addon - https://addons.mozilla.org/en-US/firefox/addon/nativeshot/

I was wondering how are you calcuating line height so well when the user presses the enter key? Also how are you calculating the perfect height of the i-beam? (your ibeam top most seems to line up with top most of letter and ibeam bottom lines up with the bottoms most _ character its amazingly cool)

Thanks I'm going to dig into your code now

i am trying to create a collaboration drawing application. i have downloaded the code from github and trying to install it in a asp web application but it doesn't working. i get these errors:-
from RTCMulticonnect.js(line-3682):-

from RTCMulticonnect.js(line-4950):-

Hello Muaz khan,

Thanks for nice app.

(1) I have one issue:
When I save the object that is available on the code button click and use that in

CanvasDesigner. syncData( database.arrayOfData );

The shape is drawn but color and drawing style is not preserved.

(2) I can save whiteboard screenshot as image. Is there any way we can draw image from a web url that was saved?

Thanks

Bhanu

hi muaz-khan:

would you like to tell me how to drag all the element not drag last element.
how to select single element and zoom or in element.

@muaz-khan

thank you!

I am trying to set the stun/turn server in a windows environment is it possible? if it is possible is there any link or documentation that can help me. The second part is the call to firebaseIO.com from RTCmuliticonnect.js is there any way to avoid this call. My effort is to make canvas collaboration to work under local LAN network.

Hello, there are a few suggestions during the test:

1. Add images and PDFs as a background so that the entire page is maximized.
2. Upload PPTX for collaboration.
3. Red dot function, which makes it easier for others to see my mouse position.
4. In addition, uploaded images and PDF files seem to be deleted on the whiteboard.
5. Zooming in and out of the whiteboard function seems to have bugs, and using the zoom function has become a zoom out function.

Hi Muaz,
Now Canvas-Designer only can add image, I want to add other, such as PDF. Do you any advice? I am looking forward to your reply.

Hi muaz-khan,

I really like this tool, looks like just the thing I need to annotate documents, I just wondered if there is an option to import .pdf files, annotate and then export them?

I can see there is the import image and export image but I presume its possible to do the same with pdf or any other document extension potentially?

As I really want to annotate something like a contact and then save the annotations and share. Is this something you have done or a new feature I need to look into?

Many thanks

Jon

I am trying to save the current drawings to a database for future use. So far I am sure it can be saved but i am not sure if it can be re-draw-ed to the canvas. Also there are errors in cross domain call between canvas-designer application and WCF web-service which i am using in the save process. I am running my site on https is there any thing more that can be done to re-solve this cross domain errors.

How have local signaling server on canvas. connection.socketURL . i try other signaling in your repo but iw not work when i use on canvas but on video it working fine. how to fix this? https://imgur.com/a/loWfgQx this is my error on console

Hi dude, i have some problems.

It wont work from mobile.

If I draw from computers to mobile, it works.
If I draw from mobile to computer, it does not work
The drawing does not appear.
It does not work either in your demo

Also i have some problem to make the iframe responsive.

Thank you

Hi Muaz Khan
On implement multiroom connection when you open a conection on browser ie firefox
https://www.webrtc-experiment.com/Canvas-Designer (Picture 1.png)
and create a room abc
and draw something copy the share link and opnen https://www.webrtc-experiment.com/Canvas-Designer/#abc (Picture 2.png) on chrome it will generate jason parse error
Please see the attached picture for further detail

Hi bro, i need to help for install in ubuntu 16
Tnks

How to get the clear canvas? @muaz-khan

I am attaching a screen-short of the error:-

The error is coming from Plugin.EveryWhere.js . Sorry for the Trouble but i am totally new to this.

Hello,

I just selected text tool and write some text then hit "undo all" then it's not working, But I saw when I click again on screen then "undo all" works. After undo all when I'm trying to write something then it's not working. In that case I need to select text tool again. Please provide your suggestions on that. I just want if I "UNDO ALL" then click again I should be able to write.

Thanks.

can i customize my icon (pencil, eraser,... ) ? and where i can do this

I'm allways getting the "NS_Error_Failure" error. After this error the created iFrame will stays like shown bellow:

And this is the code I'm using to create a new instance.

var designer_div = document.getElementById('designer_div');
var designer = new CanvasDesigner();

//---------------------------------------------------------------Setup:---------------------------------------------------------------
designer.widgetURL = "https://cdn.webrtc-experiment.com/Canvas-Designer/widget.html";
designer.widgetJsURL = "https://cdn.webrtc-experiment.com/Canvas-Designer/widget.js";
designer.setSelected('pencil');

designer.setTools({
    pencil: true,
    text: true,
    image: true,
    eraser: true,
    line: true,
    arrow: true,
    dragSingle: true,
    dragMultiple: true,
    arc: true,
    rectangle: true,
    quadratic: true,
    bezier: true,
    marker: true,
		zoom: true
});

designer.appendTo(designer_div);

//---------------------------------------------------------------Events:--------------------------------------------------------------
connection.getSocket().on('designer-update', function(data) {
    designer.syncData(data);
});

designer.addSyncListener(function(data) {
    connection.getSocket().emit('designer-update', data);
});

//---------------------------------------------------------------Functions:-----------------------------------------------------------

Where is TopLevelImageDocument.css in Canvas designer ??