While placing a dental implant, a dental surgeon must decide on the position and the angle of placement in the jaw bone among other things, and this needs to be communicated to the lab. The 3D Click guide is a model-based guided implant placement technology. As detailed on this page, the placement of the BLP is a surgical decision and one way to do it was to use it is layers in Photoshop.
If you are wondering, you are not on a dental blog, this is just a prelude to a project that I have been working on. It all started when Dr. Vidhya was introduced to the 3D click guide technique by Dr. Lambert Stumpel. She noticed that the technique could use some more optimization in the way the placement of the implant is communicated with the lab. Photoshop was a really big tool and expecting labs to have Photoshop just to view the angle and placement that the dental surgeon wants. If you are still interested in learning about what the actual process was, you could check out this presentation.
Seeing me working on HTML5, Vidhya realized that this is something that CSS3 Transforms and HTML5 could solve, and wanted to develop a web based approach that would make the communication a lot easier.
She came up with the design and requirements of the project and I decided to take a jab at writing code. The tools is live (with examples) on github, and on the site. Now to the CSS3 part of the tool.
The computer science part of the problem was the ability to resize, move and position an image on top of another image. Once it is done, the whole setup needs to be saved.
JQuery UI could be used to drag and resizer but it fails when CSS rotation is applied to it - the resize and drag handles do not interact well with the mouse. I started working on rolling out my own version of a library that could do this, but then stumbled across this work by Pavel Markovnin. The library basically tracks mouse drag and changes the image based on the resizee or rotation handles. Some changes to the library and I got it working for my requirement.
The harder part was get capture the final work, and save it as an image. Drawing the background image on a canvas was simple, the trick was in the way the foreground smaller image (called blp) had to be drawn. For getting the rotation, the transform css property returns the martix. This matrix can be directly applied to the canvas using the canvas context.transform property. However, the library applies rotation with the rotation origin being the center of the image; this is more natural when rotating the image. Canvas transforms however start at top left of the image, and hence, this difference has to be corrected. Also, the jQuery offset function seemed to return different values for a rotate image in Firefox 11 and Firefox 12, Chrome, etc. This additional quirk had to be take care of, before the image was obtained using canvas.toDataUrl.
With the image, the surgeon can send it to the lab for implementation. Thanks to Dr. Vidhya, the BLP process is one step easier - no more Photoshop installs; just a simple web based approach to make it better !
