GWT Whiteboard (freehand drawing)

[Zach]

Hey I'm trying to have a client draw freely (like MSPaint) onto a canvas, and have that data then be sent to another client where they can view and also draw. The project I'm working in is in GWT, so I'm looking for a way to accomplish this using Google's WebToolkit. The perfect example I have of this is found at: http://drawboard.appspot.com  only I have absolutely no clue where to begin. If you can point me towards any google searches (I've been doing many with nothing but failure) that'd be awesome! Or if you happen to know exactly how the above website implements this, that'd be perfect as well. Let me know!

[Alfredo Quiroga-Villamil]

Very interesting question and use case. Assuming you need a bit more than just simple "hand - mouse drawing", my recommendation would be to start with Lienzo (www.emitrom.com/lienzo) as a base. A couple of reasons why:

- It will support both mouse and touch events.

- It will give you support not only for "hand/mouse drawn objects" but also access to a pretty big list of already built in geometrical shapes. All draggable, transformable, etc...

- Say you wanted more than just the hand drawn things as previously mentioned, after you are done with the user's view or on demand, every x number of seconds or whichever way you like to implement the server push synchronization mechanism for all your clients, you can then call:

.toJson()

and you'll get a JSON representation of your entire viewport. See an example here, click the save button.

http://www.emitrom-lienzo.appspot.com/#ExplorerPlaceImpl:json

The only thing we don't have implemented is a "hand-drawn" shape. In other words, you'll need to implement the hand drawn part and hook into our serialization mechanism. Essentially you'll create a Custom Shape. But we have all this documented so it should be fairly straight forward. See how to extend Lienzo here:

http://wiki.emitrom.com/wiki/index.php/Extending_Lienzo

Our community is here if you have questions and decide to go with this approach.

https://plus.google.com/u/0/communities/111441257302891144143

Best regards,

Alfredo

On Mon, Dec 17, 2012 at 2:55 AM, Zach <zjz...@gmail.com> wrote:

Hey I'm trying to have a client draw freely (like MSPaint) onto a canvas, and have that data then be sent to another client where they can view and also draw. The project I'm working in is in GWT, so I'm looking for a way to accomplish this using Google's WebToolkit. The perfect example I have of this is found at: http://drawboard.appspot.com  only I have absolutely no clue where to begin. If you can point me towards any google searches (I've been doing many with nothing but failure) that'd be awesome! Or if you happen to know exactly how the above website implements this, that'd be perfect as well. Let me know!

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/ofG1FddHUfkJ.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Alfredo Quiroga-Villamil

AOL/Yahoo/Gmail/MSN IM:  lawwton

[Zach]

I like it! I just got the hello world up within my own project, and am going to try and create a custom shape (I have yet to create one) that depends on mouse events. What really got me trying it out is the fact that the shapes are JSON-serializeable. Will post again!

To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Zach]

Rather than create a new shape, I found I'm able to simply create a LienzoPanel that has a Layer in it. This Layer will be the canvas: on mouse events I can draw a PolyLine and add points to it. After any mouseUp event I can then JSONify the Layer and send that, which will have all shapes within it.

[Alfredo Quiroga]

Check that out, even better if that gives you all you needed.

Regards.

Sent from my iPhone

On Dec 17, 2012, at 4:58 PM, Zach <zjz...@gmail.com> wrote:

Rather than create a new shape, I found I'm able to simply create a LienzoPanel that has a Layer in it. This Layer will be the canvas: on mouse events I can draw a PolyLine and add points to it. After any mouseUp event I can then JSONify the Layer and send that, which will have all shapes within it.

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/eY8mcIzdLn4J.

[Alfredo Quiroga]

Forgot to mention ... You can also add a touch end handler and apply the same concept. This way it will work on mobile devices as well.

Sent from my iPhone

On Dec 17, 2012, at 4:58 PM, Zach <zjz...@gmail.com> wrote:

Rather than create a new shape, I found I'm able to simply create a LienzoPanel that has a Layer in it. This Layer will be the canvas: on mouse events I can draw a PolyLine and add points to it. After any mouseUp event I can then JSONify the Layer and send that, which will have all shapes within it.

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/eY8mcIzdLn4J.

[James]

Is it promising to use this library for reporting to replace other third party chart libraries such as GWT Visualization?

On Monday, December 17, 2012 5:34:17 PM UTC-5, Alfredo Quiroga-Villamil wrote:

Forgot to mention ... You can also add a touch end handler and apply the same concept. This way it will work on mobile devices as well.

Sent from my iPhone

On Dec 17, 2012, at 4:58 PM, Zach <zjz...@gmail.com> wrote:

Rather than create a new shape, I found I'm able to simply create a LienzoPanel that has a Layer in it. This Layer will be the canvas: on mouse events I can draw a PolyLine and add points to it. After any mouseUp event I can then JSONify the Layer and send that, which will have all shapes within it.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/eY8mcIzdLn4J.
To post to this group, send email to google-we...@googlegroups.com.

To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.

[Alfredo Quiroga-Villamil]

Hi James,

I am unfortunately not familiar with GWT Visualization. I've seen threads about it though. But to answer your question, yes, it would be fairly straight forward to create a slick charting library. That doesn't mean it would be simple. The devil is usually as people say in the details.

However, because the core things are there all implemented in Lienzo, I don't personally think it would be that hard either and it would be crazy slick. What's even better it would run on anything that supports the HTML5 canvas spec. Now days that's a lot of devices out there, mobile, desktop. The charts could have some crazy animations also.

http://www.emitrom-lienzo.appspot.com/#ExplorerPlaceImpl:transform_3_points

Move the three red dots around the screen and hit "animate". This is just one line of code for the user of the Lienzo API. The transform and all the details are worked out for the user behind the scenes.

Just to play around, for fun really, we created this pie chart. We didn't make it pretty or anything. Just made it draggable, no animation, shadows, cool gradients, nothing, a crud pie chart and it was just a few lines of code:

http://www.emitrom-lienzo.appspot.com/#ExplorerPlaceImpl:pie_chart

Hope that helps.

Regards.

Alfredo

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/ec4JGx0RqasJ.

To post to this group, send email to google-we...@googlegroups.com.

To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Dean S. Jones]

GWT Visualization is just for charting, and uses Google's services, Lienzo can be used for Charting, ( as well as any other 2D graphics )... and we are building a charting package that should  surpass GWT Visualization or Highcharts

Charts in general are not all that hard, the math is pretty easy, and the primitive types for drawing them are available in Lienzo, the complexity comes in when you start adding all the configuration options.

Still, it's on the working list of future things to come. Not just charts, but DAG visualization and layout,  diagrams ( Heat Maps, etc ), and visualizations ala InfoVis

:-)

[James]

I am feeling this library can provide good chart potential abilities. I can wait for a couple of months for my project. Do you have a road map for chart features?

James

[Dean S. Jones]

well, we have already started

http://www.emitrom-lienzo.appspot.com/#ExplorerPlaceImpl:pie_chart

that is a pretty poor excuse for a pie chart, but the math is right, and it's only 50 LOC

As for timelines, we have a few things to solidify in Lienzo core, so it will be at least the end of January before we can get to work on it. All of us have full time day jobs,and families, so we get to it as time permits... but..

I have already coded a full GWT binding to Highcharts I use at my day job, much of it is reusable. I just need to study that codebase, it's quite a few years old.

[Dean S. Jones]

in the meantime, here is a mandelbrot app you can have fun with, just for kicks, it's all in-browser

http://graphics4j-test.appspot.com

;-)

On Tuesday, December 18, 2012 4:01:57 PM UTC-5, James wrote: