Monday, November 26, 2007

Creating drawings on Mobile devices

I am currently developing a mobile application for my customer. In that application the customer wants to create and modify pictures/drawings. Those pictures must be stored in a database as binary data.


Possible solutions
There are two possible solutions:

  • Using the Microsoft Ink controls

  • Implementing a custom paint




  • Using the Microsoft Ink conrols
    The Microsoft Ink controls are not included in the .NET framework. You must download the Microsoft Windows XP Tablet PC Edition Software Development Kit 1.7 to use the Microsoft.Ink namspace. After installation the Microsoft.Ink library will be installed in the GAC.

    The Ink controls are especially developed for Tablet PCs. In fact the Ink controls provides a wrapper class around a COM component.


    The namespace contains 4 Ink controls:
  • InkEdit

  • InkPicture

  • InkCollector

  • InkOverlay


  • In our project, we are using the InkCollector to create and modify drawings. It is not necessary to use the Ink controls for text recognition. In fact it is also an out-of-the-box drawing surface to generate images.


    We can store the drawings created by the Ink controls in:
  • ISF (Ink Serialized Format)

  • Fortified Gif image (regular Gif + metadata in ISF)

  • HTML (with Base64-encoded fortified gif)

  • Xml (with Base64-encoded ISF)




  • When you need to modify the stored files, you must use a ISF/Xml file or Fortified gif image.

    You can save the Ink as fortified Gif or ISF/Xml file by calling the Save method on the Ink property of the ink control.

    byte[] fortifiedGif = anInkCollector.Ink.Save(PersistenceFormat.Gif)

    When it is not necessary to modify the images in the future, you can access the Renderer property on the Ink control to generate a picture in a .NET ImageFormat (Gif, jpg, Bmp, Png, ...)



    Click here to learn more about the Microsoft.Ink namespace.

    Custom Paint solution
    In fact, it seems to be quite easy, but writing a good custom paint is not easy at all. I conduct the possibilities and I survived following problems:

    The more lines, points on the form, the more the form is flickering
    Drawing too fast, do not result in a solid line, but in a range of dots.

    The first problem can be easily resolved by a search on Google. (Code Project flicker-free drawing project). The second problem is tough!. In fact the MouseMove event does not fire for each movement an event. This result in a dotted line, not in a solid line ! We can use a Line-Drawing Algorithm, for example the 'Bresenham Line-Drawing algorithm.

    You can download the Phoenix Paint project (Open source project under BSD license), author: http://grapefruitopia.com.


    Conclusion
    Both solutions provides a drawing tool. The Ink controls are specially created for Tablet PCs and uses the Ink Serialized Format to store drawings. On the other hand, the custom paint solution is more open. You determine the resolution, size, colors, format and compression.

    The choice is up 2 you !

    1 comment:

    joshua said...

    I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.


    sharon

    Term Life Insurance