Right method to build a online whiteboard

Question

I am building a whiteboard, which would have a server(teacher) and clients(students). Teacher would draw something on his side, which will be shown exactly same to the students.

1. I want to know which component i should use to do the drawing? i am currently drawing on JPanel .
2. I want the screen of Server gets copied on the clients, so for that what could be the right method to do this?
   • option1: i save the JPanel as image, and send thru socket, and loads it on the screen of client, also it always saves the background image only, not what the user has drawn onto it. OR
   • option2: both server and client JPanel dimensions are same, so i just send the new coordinates drawn everytime thru socket, with some protocol to understand whether it is rubber or pencil..

Any help would be appreciated.

Answer 1

1. Use a JComponent unless you need to add other components, then use a JPanel.
2. Send the drawing objects rather than an image. It is less bandwidth than pushing the image. Also implement the protocol to allow the 'adding or deleting' of drawn elements. That way you only need to send the latest object(s) to each client. This approach also has the added benefit of being more use to the end-user (student). You might add functionality later to allow the student to adjust/add/delete the elements in the drawing.

Update

if I draw a line on teacher's side, the same should happen to the child's screen, live, so there is a feeling of realtime drawing..

Then you definitely want to go the least bandwidth intensive route possible. That will be the bottleneck.

..have a JFrame, onto which i have 2 JPanels, 1 for drawing, 1 for buttons.

In that case, make the drawing component a JComponent & stay with a JPanel (or a JToolBar) for the controls.

..what would be that "least bandwidth intensive route possible"?

In order of bandwidth and ignoring corner cases, they would decrease in approximately this order:

1. Sending full-screen image:
   1. High quality JPEG
   2. PNG.
   3. High compression JPEG
2. Sending part-screen image:
   1. High quality JPEG
   2. PNG.
   3. High compression JPEG
3. Dealing with the drawing elements directly, by sending:
   1. The entire list of drawn objects each update
   2. The current modifications, additions, deletions of drawn elements, relying on the client to hold a model and adjust it as needed.

In case there is any confusion, I recommend option 3.2.

Answer 2

Use Robot.createScreenCapture() and broadcast the entire teacher's screen.

to capture:

sendBuffer[index++] = robot.createScreenCapture(new Rectangle(0,0,1360,768));

to display:

public void paintComponent(Graphics g) {
    super.paintComponent(g);
    g.drawImage(receiveBuffer[index], 0, 0, jFrame.getWidth(), jFrame.getHeight(), null);
    receiveBuffer[index++]=null;
}

You'll have to do rescaling in the receiver.