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, IgnacioAnonymous
June 27, 2008
The comment has been removedAnonymous
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 FarquharAnonymous
July 17, 2008
very nice >< just want ask do u have any idea "How to zoom in or out polyone" thxAnonymous
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 HapinessAnonymous
July 26, 2008
The comment has been removedAnonymous
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 anAnonymous
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! DavidAnonymous
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 removedAnonymous
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 removedAnonymous
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, KirillAnonymous
March 02, 2011
that is great code. at the beginning i thought it was a very simple library