Freigeben über


Live Geometry with Silverlight 2

I'm happy to announce a project I started on CodePlex: https://codeplex.com/DynamicGeometry

Live preview at: https://geometry.osenkov.com

Dynamic geometry

In a nutshell, it's an interactive designer for ruler-and-compass constructions - it lets you plot points, connect them with lines, construct circles, intersection points, parallel lines - everything that you usually do with "plain" geometry. But then the magic part comes in - you can drag the points and the entire construction is recalculated immediately - this is why they call it dynamic geometry. The way it works is the program doesn't store the coordinates of figures - instead, it stores the algorithm of their construction. Every time you move any of the points, the entire construction is being reconstructed on-the-fly given the new coordinates of the point using the algorithm stored in memory - that's why I like calling it "CAD with lazy evaluation".

The actual program available online

The application is deployed live at https://geometry.osenkov.com - you'll need Silverlight 2 Beta 2 to view this site. At first, the UI might seem not very intuitive for you - it takes a while to figure out how to use the toolbar and construct tools - but I hope an interested reader can tackle this challenge. The trick is to know the rules how the toolbox buttons work. Plotting points is easy - just select the point tool and click anywhere. Dragging points is easy too - select the arrow (cursor) tool and drag the points. Now, to construct a segment between two points, you select the segment tool, click (and release) the first point, and then click (and release) the second point. See, you specify that this segment depends on two points - every time you drag one of the points using the Drag tool, the segment will update itself accordingly.

The source code is available online too!

I used Visual Studio 2008, C# 3.0 and Silverlight 2 Beta 2. I have to say, those are awesome technologies and a pleasure to use (at least for me).

I split the code into several projects. DynamicGeometry is a class library that provides a framework for defining figures and their interaction. My goal was to allow for extensibility - so that you can just plug in a new kind of a figure, and automatically consume all the centralized goodies - serialization, painting, dependency tracking, transaction system, interaction, etc. Now, the code for almost every figure fits in one screen of text - so I rarely have to scroll when editing these files. SilverlightDG is the Silverlight 2 front-end - UI. DG is the WPF front-end. I try to maintain two projects - WPF and Silverlight - to build from the same sources. So far so good :)

Implementation details

The project is still in its early Mickey Mouse stages and only some very basic functionality is there - however, there is already something that is worth noting:

  • an extensible type hierarchy to model geometric figures - all starts with IFigure and FigureBase
  • a State and Strategy pattern implementations to enable interactive mouse input from the user - different toolbox buttons provide different strategies to handle mouse input
  • a pretty decent transaction system, which enables nested transactions, Rollback, delayed execution, record/playback and, of course, unlimited Undo/Redo
  • a dependency tracking mechanism that allows to express dependencies between figures (i.e. a midpoint depends on two existing points) - I employ Topological Sorting to sort the figure DAG by the dependencies - we first want to recalculate the basic figures, and then their dependents
  • a toolbar that took me many painful hours to design - I highly respect UI designers and think that getting the UI right is more difficult than to implement the rest of the actual functionality. I hope I didn't do too bad, although I'm definitely not a great UI designer.

Silverlight 2 Beta 2

Most probably by this time you already know what Silverlight is all about - if not, www.silverlight.net is a great place to start. I personally believe that Silverlight is our liberation from the old web story and am very optimistic about this technology. While Silverlight 1.0 only allowed JavaScript programmability, Silverlight 2 gives you full experience of .NET and managed languages - C#, VB, IronPython, IronRuby and others (did I forget something?). I think that Silverlight's advantage over Adobe technologies is this rich programming model - the fact that you can use .NET and C# 3.0 for the web client just makes me so excited about this.

Targeting both Silverlight and WPF from same source

If you look closer at my source code, you will notice that I have two projects - the WPF one and the Silverlight one - including the same .cs files. Because WPF and Silverlight use different CLR and runtimes, the project format is incompatible - i.e. I can't include a Silverlight class library in a WPF application. Workaround is relatively easy - just create two separate .csproj files in the same folder, that reference the same sources - and you're fine.

CodePlex

By the way, CodePlex is a quite awesome site for open-source projects - it provides version control (I love TFS and think it's excellent), item tracking, forums, wiki, downloads, stats - all for free and without annoying ads. Codeplex is one of the products that still make me proud to be working at Microsoft.

DG 1.0 - the inspiration

The project that I'm describing in this post is actually based on an earlier one that I've implemented 7-8 years earlier - here's a blog post about my original dynamic geometry project: https://kirillosenkov.blogspot.com/2007/12/dg-10-free-dynamic-geometry-software.html

I'd like to reach parity with the first version - however this is going to be tricky, because it has a lot of different goodies - from analytical expressions to ability to create hyperlinks and compose complex documents. Interestingly enough, I implemented DG 1.0 using VB6 - and though I think VB6 was an awesome environment at that time (I think it's Edit-and-Continue is still better than the one we have in Visual Studio 2008), I feel so much better and more comfortable using C# 3.0 - it just lets me express stuff about my program that I want to express in the way that I want.

I hope some of you have found this interesting. I'd be happy to hear any feedback or advice on this.

Thanks!

Comments

  • Anonymous
    June 19, 2008
    PingBack from http://www.arjansworld.com/2008/06/19/linkblog-for-june-19-2008/

  • Anonymous
    June 25, 2008
    Kirill! Good work with new technologies! Keep on writing a good code! :)

  • Anonymous
    June 26, 2008
    Hoping to replace visio on the web.

  • Anonymous
    June 27, 2008
    Very good job! I would have killed to have this for geometry in the school (not to mention playing with 3d geometries in highschool). I dont know if you are planning on adding more funcionalities but beeing able to fix angles/segments and to messure angles/segments would be great. Thinking on the OCPL this could be a really good app for the kids, specially for those who like geometry :D. Ohh, beeing able to changes the lines colors would help with complex drawings. I might do some modifications myself. Best regards, Ignacio

  • Anonymous
    June 27, 2008
    The comment has been removed

  • Anonymous
    June 29, 2008
    Just read in your original post "250 interactive drawings." This is crying for a XmlReader/Writer transform (i.e. writer.WriteNode(reader)), just like one of the MSDN mag authors did with geneology data a while back. Great work!!!

  • Anonymous
    June 29, 2008
    Jonathan - that sounds interesting - can you give some more details? I don't quite follow yet... Geneology data?

  • Anonymous
    July 01, 2008
    nice..but need draw polygon.. ^-^

  • Anonymous
    July 12, 2008
    Kirill, This is just marvellous. I look forward very much to updates. Have you seen swordfish charts. Another nice Silverlight development. I am in the process of using Silverlight to develop learning objects. BTW, it would be nice to be able to label points in order to describe the geometry. Also it would be nice to be able to superimpose a coordinate system with axes and gridlines so that coordinates become more meaningful to the user. Greg Farquhar

  • Anonymous
    July 17, 2008
    very nice >< just want ask do u have any idea "How to zoom in or out polyone" thx

  • Anonymous
    July 26, 2008
    Great blog, good thinking well put. Way cool Kirill. Not just what dg is but HOW you did it, SL2B2 XAML... F# love that you did not forget something; looking for more there. Once I have a geometry, how can I map a picture/static image to it, or a video/moving image to it? Better yet how can I map images to a dynamic geometry? (Hey with 2,4,8,42, ...1024 CPU's and GPGPU's  why not?) Peace, Love and Hapiness

  • Anonymous
    July 26, 2008
    The comment has been removed

  • Anonymous
    August 06, 2008
    Hi, The CLR of Silverlight (AGCLR) and .NET framework have different names but they are not different. The CLR of Silverlight and .NET framework (and thus WPF) are SAME. The reason why we cannot reuse the libraries between both is not for CLRs being different, but because the SL framework assemblies have a different public key than the .NET framework assemblies.

  • Anonymous
    August 06, 2008
    Thanks Rahul, I didn't know that.

  • Anonymous
    August 10, 2008
    It is more often than you would suspect that people have to deal with some sort of dependencies in an

  • Anonymous
    December 01, 2008
    Very nice talk you gave to the .Net Developers Association (http://www.dotnetda.com/) tonight. I look forward to playing with this to reinforce some design pattern concepts. Say, am I missing something or is the Codeplex project missing the WPF solution? Cheers! David

  • Anonymous
    December 02, 2008
    Thanks David! This is unfortunate naming on my side... Just open Main/Silverlight/WPF.sln - it references the same .cs files. Let me know if you have any questions.

  • Anonymous
    December 04, 2008
    Arghh! Not so much unfortunate naming - more like CNS (CodePlex Newbie Syndrome) - I was downloading the CTP from the home page, which only has the silverlight solution. I finally noticed the source code tab... :-)

  • Anonymous
    March 09, 2009
    The comment has been removed

  • Anonymous
    June 06, 2009
    is it possible to save the drawing?

  • Anonymous
    June 06, 2009
    Not through the Silverlight UI (didn't implement support yet). From code, just call Drawing.SaveAsText() Also, the WPF version supports saving and loading. I'll add support soon. Where would you like to save? Local file? Isolated storage? Cloud?

  • Anonymous
    September 10, 2009
    The comment has been removed

  • Anonymous
    September 11, 2009
    Hi Eric, thanks for the feedback! Definitely, this is one of my priority items to give users visual feedback when they drag over a figure or an intersection. Also, if a mouse is over 2+ figures, I want to display a disambiguation menu with an option to bring any of the figures to front! Stay tuned! Thanks, Kirill

  • Anonymous
    March 02, 2011
    that is great code. at the beginning i thought it was a very simple library