Zoom and Pan Background Image

Question:

We are working on a project that needs quite a bit of complex image handling in a web browser. For simple image viewing as a gallery there are quite many Javascript libraries out there. Our unique requirement is to load template images with standard body part markings and then allow medical practitioners to mark their observations against the specific body parts. With the introduction of canvas element, HTML5 has made this a little bit easier. As the use cases need us to have multiple layers of images and markers with ability to zoom and pan, we were exploring options to have the ability to zoom and pan a background image so that we would be able to overlay additional layers containing markers and labels on top of it. Can you suggest how to get this done?

Question by: Sangeetha Sundram.

Answer:

Kinetic Javascript library is a good candidate for accomplishing lots of image handling abilities that you have described here. It supports adding a wide ranging shapes and even SVG paths into layers and then on to a stage container. In terms of HTML, these are canvas elements.

Since your specific question is about the ability to zoom and pan the background image, I suggest the following approach using jQuery library:

Use the Mouse Move in conjunction with the Mouse Down and Mouse Up events to do the image panning. This can be accomplished by manipulating the background-position-x and background-position-y css properties based on the current mouse co-ordinates as the mouse move happens. Use the Mouse Down event to initiate the pan action and then Mouse Up event to stop the pan. It would be appropriate to use the Mouse Up on the document as against the specific element as moving outside the element's boundary should mean to end the panning.

For Zoom in and Out, the background-size is the css property that you should be manipulating and you may derive a suitable algorithm to set a higher (for Zoom In) or lower (for Zoom Out) percentage to this attribute and you will have the background image zoomed in or out accordingly. Depending on your needs, you may want to use the background-position property as well to have the image zoomed in at the point of click and thus keeping the point of click in the visible frame.

Check out the Javascript code in action for simple image pan here on jsfiddle. I have extended it a bit to make the pan to happen on mouse click and move (drag) and also for Zoom In and you can check this out here at jsfiddle. You may further improve this code to suit your needs and do share it here so that it will be useful for all the developers.

Hope this is of help to you.

How to Integrate a POS device in a .NET Windows Forms Application

Question:

One of our recent project requires integrating our Windows Forms application with point of sale devices like barcode scanner, check reader etc. I could find out that there is a POS.NET library that can be used for the purpose, but it seems to have been built for .NET 1.12 and no updates after that. Can you suggest me if there is any other .NET libraries that can be used for the purpose. You may also help me by sharing your thoughts and ideas.

Question by Selvamurugan N.

Answer:

Answering your first part of the question - Why there are n't any updates to this library? - I can only guess the answer for this and that I feel is due to the fact the device manufacturers lag behind in updating the communication protocols, which is more so because typically these devices are built for a low cost specific purpose operating environments. For instance, the POS terminals don't have to be on a Windows 7, it would just be enough for them to be on Windows XP or even older operating system. That probably is the reason, why the Library continues to be based on COM components and does not need an update.

On using the POS.NET library, yes, you can still use it in the later frameworks of .NET, but be aware of some of the constraints or issues as described in this blog post. The blog author calls out issues with 64 bit environment and also with .NET Framework 4.0. Don't miss out the comments, as there are some valid opinions and observations in the form of comments. You may also want to check out the Microsoft's publication on using the POS.NET titled as Creating a Proof of Concept POS Application.

If that does not suit you, then go ahead and learn to access and work with USB devices using HID (Human Interface Device), but you need to know the communication protocols and the data structures as specified by the device manufacturer. This will for sure will give you a better control over your integration, but you would be re-inventing the wheel. Here is a nice introduction to working with USB devices in .NET.

My recommendation is that check out if the device vendor provides you a .NET or a COM Library and if yes, using that will be the best option as some device manufacturers may have built certain proprietary protocols, which would work best with their own drivers. If that is not the case, then evaluate POS.NET whether it fits your use cases. Most of the times it should be fine, unless you meet up with some of the constraints when using with later versions of .NET Framework. If left with no choice, use HID interface to have your requirements met. You may also want to check out this msdn article on using Alternate Input Devices.