About demo : collaborative painting

This demo show how to do a collaborative page.

Open this page in multiple differents browsers, and magic Ocelotds.

What's append ?

  • The client subscribe to 2 topics, eventCanvas and subscriber:eventCanvas
  • All events are send to topic eventCanvas, Ocelotds resend them to all subscribvers.
  • When clients subscribe or unsubscribe to the eventCanvas Topic, the server send the number of subscribers to subscriber:eventCanvas topic.

Hover the mouse  highlighted code  and get infos about it

0 Subscribers

@DataService(resolver = Constants.Resolver.CDI)
public class DrawingServices {
   // When someone call this method, 
   // every subcribed clients receive the return method
   @JsTopic("eventCanvas")
   public CanvasEvent pushCanvasEvent(CanvasEvent evt) {
      return evt;
   }
}
				

public class CanvasEvent {

   private int x;
   private int y;
   private String type;

   public CanvasEvent() {}

   public CanvasEvent(int x, int y, String type) {
      this.x = x;
      this.y = y;
      this.type = type;
   }

   public int getX() {
      return x;
   }

   public void setX(int x) {
      this.x = x;
   }

   public int getY() {
      return y;
   }

   public void setY(int y) {
      this.y = y;
   }

   public String getType() {
      return type;
   }

   public void setType(String type) {
      this.type = type;
   }
}
					
var subCanvasEvent, canvas, context, pencil, 
pencil = {
	mousedown: function (ev) {
		context.beginPath();
		context.moveTo(ev.x, ev.y);
		canvas.addEventListener('mousemove', sendMouseEvent, false);
		canvas.addEventListener('mouseup', sendMouseEvent, false);
	},
	mousemove: function (ev) {
		context.lineTo(ev.x, ev.y);
		context.stroke();
	},
	mouseup: function (ev) {
		this.mousemove(ev);
		canvas.removeEventListener('mousemove', sendMouseEvent);
		canvas.removeEventListener('mouseup', sendMouseEvent);
	}
};
canvas = document.getElementById('imageView');
if (!canvas || !canvas.getContext) {
	alert('Error: Canvas element or Context not accessible!');
	return;
}
context = canvas.getContext('2d');
canvas.addEventListener('mousedown', sendMouseEvent, false);
subscriberFactory.createSubscriber("subscribers:eventCanvas").message(function (nb) {
	document.getElementById("subscribersNumber").innerHTML = nb;
});
subCanvasEvent = subscriberFactory.createSubscriber("eventCanvas").message(function (evt) {
	pencil[evt.type](evt);
});
function sendMouseEvent(ev) {
	drawingServices.pushCanvasEvent({"x": ev.offsetX, "y": ev.offsetY, "type": ev.type});
}

<html>
   <head>
      <script src="ocelot/services.js" type="text/javascript"></script>
      <script src="ocelot/core.min.js" type="text/javascript"></script>
   </head>
   <body>
      <div>
         <canvas id="imageView" width="400" height="300"></canvas>
      </div>
   </body>
</html>