AIR apps for viewing Android pictures on desktops

This week I had time to play with another idea for Android/Desktop applications: a picture viewer. My friend Alex Chiculita from the AIR team gave me this idea. A couple of weeks ago he played with a multi-screen application that let you load a picture from a device and send the picture to all the other devices connected to the same Wi-Fi network (the app runs on Android, Windows, MacOS, and Linux).

While playing with his application I realized that I could transform it into something more helpful (at least for me). Here is the challenge: we all use our smartphones for a lot of things, including taking pictures. Having a decent digital camera (this is what a smartphone became lately on top of a mobile phone) with you all the time means you can take interesting pictures. And usually you want to show these pictures to your friends or family. However, here is the problem: while taking pictures is extremely easy, sharing them involves cables,  Bluetooth, or seeing the picture on the phone’s screen.

My solution to this problem is AndroidPictures (the above pictures show AndroidPictures in action on my mobile). This Android application lets you browse through the pictures taken with the phone and scale/rotate/pan them. On the desktop, you use the companion AIR application for AndroidPictures, which displays the pictures sent by the Android application. All you have to do to see the pictures with your family is:

  • connect your Android phone to the WI-FI network;
  • start the AndroidPictures app on your Android phone, and start the PicturesViewer app on one of/all your computers;
  • what you see on your mobile phone will be replicated on all connected computers.

Watch the video below to see how it works.

The making of

I used Adobe AIR and Flex 4.1 for creating the Android and desktop applications. In order to connect the Android application to the desktop apps I used Peer-to-Peer direct routing (the same approach used in my previous app). As I already explained, if your local subnet (for example your home Wi-Fi) supports broadcasting then you can create a NetConnection without using Stratus or a Flash Media Server (you connect the NetConnection to “rtmfp:”). This is one of the new features available in Flash Player 10.1 and Adobe AIR 2.

Once you have the clients connected, you can send messages from any one to all of them. And the cool thing about using this approach as opposed to Socket servers is that you don’t have to manually manage all the clients. Your program sends a message and the clients decide how to handle the message. You simply don’t care how many clients are connected. You can read more on my fellow evangelist Tom’s blog.

Because I wanted to use this approach for other apps, I created a simple library (you can get the library’s source code from here; unzip the archive and import the PeerToPeer.fxpl project in Flash Builder). You’ll find three ActionScript classes, and the magic happens inside of MultiCastingService class. The public interface of this service is:

  • isReady
  • neighborCount
  • userName
  • connect()
  • disconnect()
  • post()

The service throws these events:

  • ServiceEvent.CONNECTED
  • ServiceEvent.DISCONNECTED
  • ServiceEvent.PEER_CONNECT
  • ServiceEvent.PEER_DISCONNECT
  • ServiceEvent.RESULT

The simplest way to use this service would be:

    var service:MultiCastingService = new MultiCastingService();
    service.addEventListener(ServiceEvent.RESULT, onResult);
    service.addEventListener(ServiceEvent.CONNECTED, onStatusChange);
    service.addEventListener(ServiceEvent.PEER_CONNECT, onStatusChange);

    service.connect();

    private function onResult(e:ServiceEvent):void {
        if (e.what == "picture") {
            //do something with the bytes: e.body
        }
    }

    private function onStatusChange(e:ServiceEvent):void {
        if (e.type == ServiceEvent.PEER_CONNECT) {
            if (service.neighborCount > 0) {
                //others are connected; send a String message
                service.post("this is my message");
            }
        }
    }

For the Android app I had to tweak the Spark List in order to make it works with both touch and click events. For the picture interaction I used a library created by Tim Kukulski, a member of the Adobe XD team. This library makes it easy to interact with pictures by letting you use gestures like zoom, pan, or rotate.

The desktop application waits and responds to two kinds of messages: picture bytes and pictures transformations (rotation, zooming, or panning). Every time a picture is selected in the Android app, I grab its bytes and send them through the “wire”. When I transform a picture in the Android app, I grab the Matrix and send it to all the connected clients. The client applies the Matrix on the picture. And the rest is history :)

All in all it was pretty easy to put together these apps and I had a lot of fun while doing this. If I have the time, I will try to see if I can play the movies recorded with my Android by extending the current code.

Getting the apps and source-code

You can download the source code from here, install the desktop application from here, and the Android application from here. If you want to run the Android application, you need to install Adobe AIR on your Android (more info here).

If you have ideas for more applications that take advantage of having AIR running on Android phones and desktops please let me know. If you create something interesting, I’d love to hear about. I already have another cool idea, this time more complex and even more fun!

Have fun with the Flash Platform on multiple screens!

14 thoughts on “AIR apps for viewing Android pictures on desktops

  1. This seems pretty cool for phones that do not have a HDMI cable. I know that you have to use a cable for HDMI but hooking up the laptop to the TV needs a cable also.

    I feel more comfortable with uploading my pictures to Picasa and then using the laptop alone. However if I just want to show a few pictures and I don’t have them already uploaded your application is quite useful.

  2. Well, I hooked up the laptop to the TV for shooting the video. Usually I don’t do this. And because pretty soon Flash will be available on TVs, I will be able to “stream” pictures directly to the TV.

  3. Pingback: Android Romania | Articole

  4. Pingback: 有助于Flash平台开发提速的50个学习资源 « echo "RenYuan's Blog"

  5. Pingback: 有助于Flash平台开发提速的50个学习资源 – 新闻资讯 – 9RIA.com天地会 – 论坛 | 谱曲

  6. Hi Mihai,

    I will soon, promise.
    In fact, I am using some of your idea for a presentation I will give at at the FOTB conference next week. I will make sure to refer to this project :)

    Question:
    I am trying to send the bytes for the image and my connection closes every time. I have not tried compression yet and the image is pretty large on the Android. FYI I also transfer bytes for audio and that works perfectly. No recommendation besides the compression that you could think of?

  7. @Veronique Brossier

    I don’t think compression will help. JPEG is already a compressed format; maybe resizing the image and send a smaller version.

    It is strange that it works for audio but it doesn’t work for images :D

    Enjoy the FOTB!

    Mihai

  8. Hello,

    The issue was not compression or size but security. My bytes are there but are not allowed to be loaded!

    Why are you using LoaderContext and not JPEGLoaderContext? I noticed that you set the context both in Android and Desktop, is that necessary?

    If you could refer me to documentation on this particular topic, I would appreciate.

  9. Mihai,

    Me again.
    I fixed it. All working now.

    I would make sure to post again when the application is ready.

  10. Hi Mihai,

    I can’t connect the two apps. Can you give me some pointers ? Maybe I need to change something on my wireless network ? I need to mention that my local network supports broadcasting.

    Thanks.

    Andrei

  11. Pingback: Android Pictures and MP3 Remote Control Reloaded : Mihai Corlan

  12. Pingback: Android Pictures and MP3 Remote Control Reloaded (Adobe Flash Platform Blog)

Leave a Reply

Your email address will not be published. Required fields are marked *