SimpleCameraReader – easy to use wrapper class for ZXing 2.0 for WP7

In the previous post I showed you how to use ZXing 2.0 with Windows Phone 7 for barcode scanning. Now I’m going to show how you can simplify that process a bit using the SimpleCameraReader class I wrote that wraps the Camera- and ZXing methods.

How do I use it?

First we have to start up Visual Studio and create a new Windows Phone 7 Application and reference SimpleCameraReader.dll and zxingwp7.dll. Follow the download links below to download the necessary files or build the latest source from Github to continue.

For the design we will re-use the design from last post with minor changes to the foreground and background color to match the theme on my blog.

MainPage.xaml

This sets up a full-screen view of the camera feed using a Rectangle and a VideoBrush as a fill. We overlay a Listbox that will show the codes we scan on top of the feed. VideoBrush lets you paint any XAML element using a video source, which comes in handy when we want to display the camera feed. Then we apply a CompositeTransform that lets us rotate the VideoBrush-element to match the cameras orientation depending on how we’re holding the phone. In essence, this means that you can turn your phone around and it will always end up showing correctly. That’s all there is to the design, now let’s go deeper and implement some functionality. Next up we’ll initialize the SimpleCameraReader and get to grips on how to use it. So go into the code-behind file for MainPage (MainPage.xaml.cs)

MainPage.xaml.cs

 

First we instantiate a ObservableCollection to hold our codes and the other is our SimpleCameraReader instance which is (obviously) essential for this tutorial. In the constructor we set up the ObservableCollection and bind it to our ListBox’s ItemsSource. Are you unfamiliar with ObservableCollection? Read my “ZXing 2.0 – Windows Phone 7 Library” post and get a general idea why we use it.

We override the OnNavigatedTo method (event) which will fire when the page is navigated to and this is where we’ll initialize our SimpleCameraReader instance. There are four simple steps to get it up and running. First create a new instance of SimpleCameraReader, then set the source of VideoBrush to the Camera property of our reader-instance. Next up we’ll hook up some events; when the reader successfully decodes a code and when the camera is finished initializing. We CAN’T start our scanning process before the camera is initialized so that’s what we’re going to do next:

MainPage.xaml.cs

When the camera has initialized we set the rotation of our preview to the CameraOrientation so the preview displays correctly. Then we set (this is optional) the FlashMode to FlashMode.On to indicate that when focusing use the flash. Finally we start the scanning process.

That’s all there is to start the process, now we just need to stop it when we’re navigating away from the page and or course handle our results.

MainPage.xaml.cs

That’s all there is to create an application for scanning barcodes, qr codes etc

UPDATE!

Thanks to Tomas and Payam for discovering that the application will crash if have multiple pages and navigate back and forth between the camerapage. The solution that was posted in the comments is as follows

Mainpage.xaml.cs

So, where to go from here?

This is a simple app and you might have noticed that we haven’t set any specific barcode-formats yet. That’s because if we don’t specify any formats when we’re creating a new instance of SimpleCameraReader it will include all formats that are available. To set it to only scan for QR codes for instance we can do that:

That’s all we can do with SimpleCameraReader right now, but it’s actively being developed on so watch the project on Github or come back here and look for updates!

 

ZXing 2.0 – Windows Phone 7 library

This weekend I’ve spent some good hours into porting the ZXing 2.0 library to a Windows Phone 7 library as well as a simple library called SimpleCameraReader that makes scanning for codes with the in-built camera an ease! Look forward to the next post for how to use the SimpleCameraReader.

So what is ZXing? Taken from the official homepage for the library:

[box icon=”info”]ZXing (pronounced “zebra crossing”) is an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages. Our focus is on using the built-in camera on mobile phones to scan and decode barcodes on the device, without communicating with a server. However the project can be used to encode and decode barcodes on desktops and servers as well. We currently support these formats:

  • UPC-A and UPC-E
  • EAN-8 and EAN-13
  • Code 39
  • Code 93
  • Code 128
  • ITF
  • Codabar
  • RSS-14 (all variants)
  • QR Code
  • Data Matrix
  • Aztec (‘beta’ quality)
  • PDF 417 (‘alpha’ quality)

[/box]

There’s a C# version for ZXing 2.0 which I used as a base (I’m hoping to rewrite the whole thing) in which I had to fix around 400-500 errors before it could compile as a Windows Phone 7 class library. The C# version also seems to be ported using a Java to C# tool so the codebase was a bit messy. I’ve fixed parts of it, trying to change and use newer techniques where I had the opportunity. That said, I haven’t gone through all the files and made changes so there’s plenty of room for improving!

View the zxingwp7 library on Github!

Or download the binaries!

How do I use it?

When I first looked up how to use zxing in Windows Phone 7 I stumbled a cross a really nice guide showing you all the steps you need (the steps all apply with my port too!) to get your app scanning for codes using an older version of the ZXing library. You can check it out here. It’s wrriten by Jonas Follesø and is an excellent example of how to use both the old library and mine.

The first thing you want to do is create a new Windows Phone 7 application and reference the zxingwp7 library which you can download here.

Next up is editing the MainPage.xaml and replace the LayoutRoot grid with the following code (Sorry Jonas, I’m copying your code!)

[box]

MainPage.xaml

[/box]

What’s happening here is that we’re creating a Rectangle element that will hold our camera feed and specify that our rectangle’s fill should be a new element, VideoBrush. VideoBrush lets you paint any XAML element using a video source, which comes in handy when we want to display the camera feed. Then we apply a CompositeTransform that lets us rotate the VideoBrush-element to match the cameras orientation depending on how we’re holding the phone. In essence, this means that you can turn your phone around and it will always end up showing correctly.

Next step is to implement some functionality; initiating our camera and connect the camera to our VideoBrush element!

[box]

MainPage.xaml.cs

[/box]

In this snippet we instantiate a ObservableCollection to hold our results, a timer that will on a reguler basis scan the camera feed for codes, our PhotoCamera object that talks directly to the Camera on WP7 and in this instance a QRCodeReader which can detect and decode QR codes from a image.

The nice thing about ObservableCollection in case you haven’t used it before is that when you add or remove items from it, it will notify the component that is bound to the ObservableCollection that it needs to update. That means when we add an item to our _matches object it will automatically popup in the Listbox without us having to tell our Listbox that it needs to update. Handy little thingie.

In our constructor we set up our ObservableCollection (_matches) and databind it to our ListBox (_matchesList.ItemsSource = _matches) as well as setting up our timer with interval of 250 milliseconds. The tick event fires off every 250 milliseconds and will then call a method called ScanPreviewBuffer() which we will take a look at in a bit. Notice that the timer hasn’t started yet; we have to call _timer.Start(); before it will start ticking. You will see how this is done in a bit.

The next method is an overriden event-method inherited from the PhoneApplicationPage class. This method gets called when this page gets navigated to and it’s here we’ll setup our Camera and bind it to our VideoBrush element. We create a new instance of PhotoCamera and bind to the Initialized event that gets fired when the camera is ready to go.

[box]

[/box]

Here’s the code that tells our VideoBrush to use our PhotoCamera as it’s video source.

[box]

[/box]

This piece of code tells that when you half-press the camera button it should start the auto-focus process.

The next step is to set up our QRCodeReader and start the timer when the Camera has initialized:

[box]

MainPage.xaml.cs

[/box]

When the camera has initialized we create a new instance of PhotoCameraLuminanceSource with the width and height of the preview resolution. The class inherits from LuminanceSource and is responsible for extracting luminance data from an image. Next up we create an instance of QRCodeReader which is responsible for detecting and decoding the image to scan for a QR code. I’ll show you later on how to read other formats as well! When it’s all set up we use the Dispatcher to invoke the next methods (get our code to run on the UI-thread instead of the thread that the Camera runs on). We set the rotation of the preview and start our timer.

[box]

MainPage.xaml.cs

[/box]

The ScanPreviewBuffer is the method where all the magic happens. To best explain the process I’m going to copy the description from Jonas Follesø’s guide:

[box icon=”info”]

The GetPreviewBufferY method takes a byte array as its parameter and will populate this byte array with the luminance data from the preview buffer. We pass in the PreviewBufferY property from the PhotoCameraLuminanceSource. Once we have captured the luminance data we create a HybridBinarizer and a BinaryBitmap. They are part of the ZXing library. I haven’t worked enough with ZXing yet to fully understand the architecture, but these classes are steps the luminance data pass through before being passed to the decode method of the QRCodeReader. If the decode is successful the decoded text is added to the ObservableCollection, which in turn will update the ListBox. The QRCodeReader decode method will throw an exception if it is not able to decode the image, so we need to wrap the code in a try-catch block.

[/box]

And that’s all there is for a simple QR code scanning app. Try it!

You can download the tutorials source code here.

So, where to go from here?

I’ve only shown how to scan QR codes, but the library has a ton of other formats as shown in the start of this post. To get the individual readers for each format just replace QRCodeReader with EAN13Reader or EAN8Reader for European product barcodes. If you want to create an app that can scan for multiple codes at the same time you can use the MultiFormatReader. This one requires a little bit of extra effort of adding what formats to scan for but it’s really simple.

[box]

[/box]

For the MultiFormatReader we need to create a list of type BarcodeFormat of the formats we want to include in the scan, and then create a Dictionary of type DecodeHintType as the key and Object as value. We add our formats to the hint dictionary with DecodeHintType of POSSIBLE_FORMATS. We could also add another hint for the Reader to try harder:

[box]

[/box]

That’s all there is to set that up, and replace _reader.decode(binBitmap) with multiReader.decodeWithState(binBitmap); — The decodeWithState tells the MultiFormatReader to use our hints.

If you want to include all the formats then I’ve added an extra touch to the ZXing library; just replace var formats = … with:

[box]

[/box]

That’s pretty much there is for a basic barcode scanning app. There’s a bit of code to get it done but if you check my blog in a couple of days I’ll have a tutorial up explaining how to use my SimpleCameraReader class for simplifying the process a bit. If you’re eager you can check it out at Github already! Just click here

MPC Remote v1.0

Hi everybody!

The site has been down for a couple of days now due to us transferring the domain over to a new provider and thus hasn’t been pointing to the right location. Happy to see that everything’s fixed now though!

I can announce that I’ve completed the work on my first working version of MPC Remote which I’ve set to version 1.0 because it is stable and fulfills the features and goals I’ve set. This version will be submitted to the marketplace soon (as soon as Microsoft can fix a bug in the submission page) but you can download it today from my blog here if you happen to own an unlocked phone.

Shows how the main screen looksFeatures

  • Clean new interface (not very exciting in terms of flashy ‘yet’)
  • Buttons to control playback, volume and seeking (currently implements the five-second seek back/forward)
  • Main page provides the information you need
  • Settings page allows for setting the host and port of the machine running MPC

Head on over to the project page for download

Windows Phone 7: a bit flawed

It’s been a week or two since I got my Samsung Omnia 7 device in the mail after my previous phone was stolen from me. I’ve been really excited about Windows Phone 7 and the capabilities and potential it has to offer me as a .NET developer. Sadly, there’s somethings that really annoys me and makes me wonder what they were thinking:

Keyboard layout support – The operating system has been around for quite a while now but it still lacks simple language support. I mean, on Android if there’s a layout missing; all you can do s search the market for it and someone surely has developed a keyboard you can use. On Windows Phone 7 you can’t do that which brings me to another point.

Developing for the platform – I think it’s nice that they’ve chosen to use .NET and Silverlight/XNA but it’s not a nice thing that I as an individual developer has to cash out for a Marketplace account just to be able to unlock my phone and deploy my own applications to it. They should really opt for a more open solution like Android. Since I don’t live in the United States getting a Marketplace account seems like a really tedious process. Awkward.

Marketplace Search –  It’s nice that the marketplace has apps, music and games but there’s no apparent way to search for only one or the other. Search for a poker game and all you get is an old single from Lady Gaga entitled ‘Poker Face’.  It should be easier to be able to search for what you want. If I press the search-button in any of the app/game/music-hub it should bring me to the Application Search or Games Search.

Marketplace / Region locked – Also one thing Microsoft should have learned from Google in the sense that even if I can’t buy applications in my region yet at least let me make an account and get access to the free applications and games. A really poor decision to have it like this. Shame on you.

Customization – Last night I wanted to change my ringtone and notification sounds and I couldn’t. I can change it to some standard tones but I can’t import my own sounds which has been a feature on every phone since I first got one when I was a kid. Like the Angry Video Game Nerd has said oh-so many times before: “What were they thinking!?!?”

Calendar support – Windows Phone lets you add accounts from Google, Windows, Exchange etc but the calendar synchronization is really poorly implemented. It feels like parts of the system is in early beta and rushed out. I have multiple calendars linked on my gmail account but I can’t see any of them because the implementation doesn’t let you see more than your main calendar.

There’s probably some other points there related to development that I haven’t listed but these are my first concerns in regard to the general user experience, and it’s sad to see that such a great OS has some extreme flaws. I hope these things get fixed as soon as possible because it really annoys me. Microsoft should open up the platform a bit more in my opinion.

My first Windows Phone 7 project!

Main screen as of todayI’m happy to introduce my first Windows Phone 7 project! I have to say it’s quite an awesome platform to code for; I can utilize my C# knowledge and I can learn Silverlight and WPF fundamentals at the same time which I later can utilize in desktop- and/or web-applications. What’s the app you ask? It’s an application for remotely controlling your Media Player Classic instance when you’ve enabled the Web-interface.

Head on over to the project page for more information and updates!