Mobile UI Experiences

Augmented Reality - I

raimon — Sun, 25 Jul 2010 23:43:05 +0000

Since I had my first android phone I got curiosity into augmented reality. I have to say, compared to j2me, android is a lot more powerful and you get surprised about how easy is to achieve some things than in j2me are near impossible or rather complicated. Also seems that AR is some kind of teenager fashion, now it’s really cool to do things in AR instead of just showing a map with POIs. Let’s have the POIs floating around the user, even if it’s more confusing than showing a map, but, hey! it’s cooler.

Anyway, I had to try it by myself, otherwise I couldn’t apply the cliché of having an android phone and did some AR tests. I’ll introduce the engine I developed with different articles, explaining few parts of it, and if anyone is interested I can provide access to the svn server where the code is stored (send me an email to raimon.rafols [a] gmail.com). You can use this code for any non-commercial project you want but you need the written permission of the author for commercial usage.

One of the basic parts needed for an AR engine is to know the exact location and orientation of the device. Otherwise it won’t be possible to show the correct POIs and in the correct position in the screen. Here is a code snippet of the orientation provider.

package com.fuzzion.argine.hal.android;
 
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
 
import android.app.Activity;
import android.content.Context;
import android.hardware.Sensor;
import android.hardware.SensorEvent;
import android.hardware.SensorEventListener;
import android.hardware.SensorManager;
import android.util.Log;
 
import com.fuzzion.argine.engine.OrientationListener;
import com.fuzzion.argine.hal.OrientationProvider;
 
public class AndroidOrientationProvider implements OrientationProvider, SensorEventListener {
        private SensorManager sManager;
        private List<OrientationListener> listeners;
        
        public AndroidOrientationProvider() {
                listeners = Collections.synchronizedList(new ArrayList<OrientationListener>());
        }
        
        @Override
        public void onAccuracyChanged(Sensor sensor, int accuracy) {}
 
        @Override
        public void onSensorChanged(SensorEvent event) {
                float values[] = event.values;
                
                switch(event.sensor.getType()) {
                case Sensor.TYPE_ACCELEROMETER:
                        break;
                
                case Sensor.TYPE_ORIENTATION:
                        for(OrientationListener listener : listeners) {
                                listener.directionChanged(values);
                        }               
                        break;
                }               
        }
        
        @Override
        public void registerOrientationListener(OrientationListener listener) {
                listeners.add(listener);
        }
 
        @Override
        public void removeOrientationListener(OrientationListener listener) {
                listeners.remove(listener);
        }
        
        
        public void start() {
                Activity act = AndroidPlatform.getActivity();
                
                sManager = (SensorManager) act.getSystemService(Context.SENSOR_SERVICE);
                sManager.registerListener(this, sManager.getDefaultSensor(Sensor.TYPE_ORIENTATION), SensorManager.SENSOR_DELAY_FASTEST);
        }
        
        public void stop() {
                if(sManager != null) {
                        sManager.unregisterListener(this);
                }
        }
}

In the next entry I’ll explain the integration of all the parts (camera, orientation and position). Meanwhile you can check the code in svn.

Service2Media is hiring!

raimon — Mon, 26 Apr 2010 19:12:11 +0000

Service2Media is looking for experienced developers to extend our development team in Enschede

These are the positions currently available:

Senior Java Developers
- Candidates must have expertise in web server technology, in-depth Java knowledge on Linux platforms
- Speaks and writes English fluently
- Have a BSc or MSc degree in computer science or a related subject
- Experienced in J2ME, J2EE, Glassfish, JMX, SQL and XML
- Experience with Linux, Tomcat, Apache and memcached
- Experience with SVN, TRAC, Mantis and Eclipse.
- Experience with Google protocol buffers
- Have at least 3 years of relevant programming experience
- Focused on end to end experience.

Windows Mobile Developers
- Candidates must have expertise in developing native applictions on WM 6.x
- Speaks and writes English fluently.
- Have a BSc or MSc degree in computer science or a related subject.
- Experienced in Windows Mobile 6.x, SQL and XML.
- Experience with SVN, TRAC, Mantis and Eclipse.
- Experience with Google protocol buffers
- Have at least 3 years of relevant programming experience
- Focused on end to end experience.

Symbian Developers
- Candidates must have expertise in developing native Symbian applications
- Speaks and writes English fluently
- Have a BSc or MSc degree in computer science or a related subject
- Experienced in Symbian C++ development, SQL and XML
- Experience with SVN, TRAC, Mantis and Eclipse
- Experience with Google protocol buffers
- Have at least 3 years of relevant programming experience
- Focused on end to end experience.

Are you the person who combines an open mind with accurate work? Who understands that life at the cutting edge is exciting, demanding and rewarding? Then we’ll be looking forward to meeting you.

Send your résumé to raimon [at] service2media.com if you think you are up to the challenge.

Image Rotation in j2me

raimon — Tue, 25 Aug 2009 23:49:13 +0000

Lately I’ve been creating some low level image functions for Java ME just to see if low level bitmap manipulation was way too slow for doing it on real time on Java ME or it was, at least, usable. I’ll publish more functions but I’ll start with Image Rotation.

In Java ME is easy to rotate images if you want to rotate by an angle multiple of 90° but it doesn’t provide any mechanism to rotate it by an arbitrary angle (yes, ok… you could do the same using the Mobile 3D API)

I created a small function that fills that gap and allows image rotation by any angle. The resulting image will have the same size as the original (watch out for the corners..)

public static void rotateImage(Image src, float angle, Graphics g) {
    int sw = src.getWidth();
    int sh = src.getHeight();
    int[] srcData = new int[sw * sh];
 
    src.getRGB(srcData, 0, sw, 0, 0, sw, sh);
    int[] dstData = new int[sw * sh];
 
    double rads = angle * Math.PI / 180.f;
    float sa = (float) Math.sin(rads);
    float ca = (float) Math.cos(rads);
    int isa = (int) (256 * sa);
    int ica = (int) (256 * ca);
 
    int my = - (sh >> 1);
    for(int i = 0; i < sh; i++) {
        int mx = - (sw  >> 1);
        for(int j = 0; j < sw; j++) {
            int srcx = ( mx * ica + my * isa) >> 8;
            int srcy = (-mx * isa + my * ica) >> 8;
 
            srcx += sw >> 1;
            srcy += sh >> 1;
 
            if(srcx < 0) srcx = 0;
            if(srcy < 0) srcy = 0;
            if(srcx > sw - 1) srcx = sw - 1;
            if(srcy > sh - 1) srcy = sh - 1;
 
            dstData[j + i * sw] = srcData[srcx + srcy * sw];
 
            mx++;
        }
        my++;
    }
 
    g.drawRGB(dstData, 0, sw, 0, 0, sw, sh, true);
}

If we move all the calculations that doesn’t need to be done in the inner loop to the external loop we will have a speed improvement:

public static void rotateImage(Image src, float angle, Graphics g) {
    int sw = src.getWidth();
    int sh = src.getHeight();
    int[] srcData = new int[sw * sh];
 
    src.getRGB(srcData, 0, sw, 0, 0, sw, sh);
    int[] dstData = new int[sw * sh];
 
    double rads = angle * Math.PI / 180.f;
    float sa = (float) Math.sin(rads);
    float ca = (float) Math.cos(rads);
    int isa = (int) (256 * sa);
    int ica = (int) (256 * ca);
 
    int my = - (sh >> 1);
    for(int i = 0; i < sh; i++) {
        int wpos = i * sw;
 
        int xacc = my * isa - (sw >> 1) * ica + ((sw >> 1) << 8);
        int yacc = my * ica + (sw >> 1) * isa + ((sh >> 1) << 8);
 
        for(int j = 0; j < sw; j++) {
            int srcx = (xacc >> 8);
            int srcy = (yacc >> 8);
 
            if(srcx < 0) srcx = 0;
            if(srcy < 0) srcy = 0;
            if(srcx > sw - 1) srcx = sw - 1;
            if(srcy > sh - 1) srcy = sh - 1;
 
            dstData[wpos++] = srcData[srcx + srcy * sw];
 
            xacc += ica;
            yacc -= isa;
        }
        my++;
    }
 
    g.drawRGB(dstData, 0, sw, 0, 0, sw, sh, true);
}

And if we know beforehand the size of the image we want to rotate we could do some extra tricks (for example, here assumes the source image will be 256×256 pixels and will only work with that resolution):

public static void rotateImage(Image src, float angle, Graphics g) {
    int sw = src.getWidth();
    int sh = src.getHeight();
    int[] srcData = new int[sw * sh];
 
    src.getRGB(srcData, 0, sw, 0, 0, sw, sh);
    int[] dstData = new int[sw * sh];
 
    double rads = angle * Math.PI / 180.f;
    float sa = (float) Math.sin(rads);
    float ca = (float) Math.cos(rads);
    int isa = (int) (256 * sa);
    int ica = (int) (256 * ca);
 
    int my = - (sh >> 1);
    for(int i = 0; i < sh; i++) {
        int wpos = i * sw;
 
        int xacc = my * isa - (sw >> 1) * ica + ((sw >> 1) << 8);
        int yacc = my * ica + (sw >> 1) * isa + ((sh >> 1) << 8);
 
        for(int j = 0; j < sw; j++) {
            int srcx = (xacc >> 8) & 0xff;
            int srcy = yacc & 0xff00;
 
            dstData[wpos++] = srcData[srcx + srcy];
 
            xacc += ica;
            yacc -= isa;
        }
        my++;
    }
 
    g.drawRGB(dstData, 0, sw, 0, 0, sw, sh, true);
}

These functions paints the rotated image in a Graphics object directly, but doing some minor changes it could generate a new Image with the content:
* Change the function declaration to:

public static Image rotateImage_img(Image src, float angle) {

* Replace the drawRGB call with:

return Image.createRGBImage(dstData, sw, sh, true);

Feel free to use it for whatever you want but it would be nice if you drop me a line and put me somewhere in the credits

‘Realtime’ raytracing on j2me

raimon — Mon, 15 Jun 2009 23:40:41 +0000

I have been playing a bit this afternoon with my old raytracer and decided to wrote a a small implementation in j2me.. yes.. it sounds completely useless but it was quite fun to remember the old days.
It’s a very basic raytracer, it only supports spheres and planes and then some hard shadows and reflections. I haven’t done any optimitzation, for example checks if the camera ray intersects all objects for every single pixel and, obviously, it runs pretty slow on the real device (even on the emulator..)

Just three screenshots of the ‘realtime’ (ehem..) raytracing:

Service2Media is hiring…

raimon — Fri, 16 Jan 2009 00:53:08 +0000

Interested in coming to the Netherlands?
Go to the jobs section of Service2Media.

A long time ago..

raimon — Wed, 14 Jan 2009 01:49:11 +0000

Yes.. it has been a long time since last post.. I have been a bit busy (ok.. not the whole 8 months) moving to the Netherlands. Since June-08 I’m living and working in Enschede, a nice city in the east border of the Netherlands.

Some images of the recent snows (november):

As a bonus I’ll include video captures of some applications I did for FuturLink:

Soon I will publish some videos / shots of my work here at Service2Media

After the NFC competition…

raimon — Thu, 08 May 2008 00:05:08 +0000

Unfortunately we didn’t win anything at the NFC Competition… It was a pity after all the effort but what usually happens in a competition is that not everyone wins.

Here is a video capture of the application:

NFC Competition

raimon — Fri, 25 Apr 2008 23:53:38 +0000

My company has been selected finalist for the NFC Forum Global Competition - Touching the Future with another nine world-wide companies in the “The Best NFC Service of the Year 2008″. The winners will be announced next tuesday (April 29).
I designed and developed the J2ME client for Nokia 6131 NFC which allows you to interact with one of our Touch Screens (B200TS) via NFC and Bluetooth. I will wait until the competition is over to post more details and some screenshots and a video of the application.

Move along, nothing to see here..

raimon — Thu, 24 Apr 2008 18:40:36 +0000

In this blog I’ll post the experiences of working developing J2ME applications. It will be mainly focused on the graphical part and how the user may interact with them although there will be non-interactive applications like the one I’m introducing below.
This was my first attempt to do a 4k intro with J2ME. I’m not proud of the result, but it was made only in one afternoon to increase dramatically the number of compo entries (from 1 to 2). The binary application requires a J2ME Phone with MMAPI + JSR 184 support. In order to install the application you have to send the mtro.jar file to your phone through bluetooth / cable / irda.

Binary