f-log

Menus in Android applications all have the same GUI look & feel via some very handy APIs.
/* Creates the menu items */
public boolean onCreateOptionsMenu(Menu menu) {
    menu.add(0, MENU_SECS, 0, "Seconds").setIcon(R.drawable.android_icon_seconds);
    menu.add(0, MENU_TEXT, 0, "Calculations").setIcon(R.drawable.android_icon_calculations);
    menu.add(0, MENU_INFO, 0, "About").setIcon(android.R.drawable.ic_menu_info_details);
    return true;
}

/* Handles item selections */
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case MENU_SECS:
        ToggleSecondsDisplay();
        return true;
        case MENU_TEXT:
    ToggleText();
    return true;
    case MENU_INFO:
    AboutDialog();
    return true;
    }
    return false;
}
Does not get much simpler than that.
There are some nice tutorials and google have lots of details on the icon requirement.
The same is true of application icons but in the end I just scaled a screen shot of the application to 32x32.

It was all working so perfectly in the emulator and after a few minutes reading signing documentation I realised that eclipse would do everything for me an created an .APK file.
Copied it to the phone and used AndroZip to install.
Default Android icon appeared and I tapped it to start ... oh dear!
All the LED's were in the wrong place and the composited image was scaled badly!
What had gone wrong ?
I had assumed that due to the date I received my phone that it would be running Android version 1.6 and so had set the emulator up as 1.6.
The DEXT is currently running 1.5 (update expected Q2 2010) and appears to do screen scaling slightly differently.
Android version history
After I configured the emulator to run Android 1.5 it clearly showed the issues seen on the phone so I rejigged my layout from relative to absolute.
Now that works I need a few extras:
Menu - turn the seconds and calculation on and off and an 'About' screen.
Icons - for the menu
Icon - for the application
Rotation - rework the layout when the phone is in landscape vs portrait mode.

Imported the composited image back into eclipse and my work was done (after I shifted the LEDs to fit).
But I wanted more, why show just the hours and minutes when the code could be called to generate just one more line of six LEDs and show the seconds ?
Added the few lines to add the LEDs and then calculate the correct value and ... I hit a road block.
There are plenty of examples using the TICK code but that only fires once a minute.
Out of a number of solutions I decided on the simplest to implemented.
RepeatTimer SecondTimer;
SecondTimer = new RepeatTimer(1000,200);
SecondTimer.start();

The 1000 is the total number of milliseconds that the CountDownTimer is due to run and the 200 is the number of ms before an event is fired.
I use the event to update the seconds, if it was once a second then the display may not update.
When the count down is completed simply restart it.

public class RepeatTimer extends CountDownTimer {

    public RepeatTimer(long millisInFuture, long countDownInterval) {
        super(millisInFuture, countDownInterval);
    }

    @Override
    public void onFinish() {
        this.start();
    }

    @Override
    public void onTick(long millisUntilFinished) {
        Time time = new Time();
        time.setToNow();
            UpdateLEDS(LLSeconds,DecToBin( time.second,6));
            if (LLTextForm.getVisibility()==View.VISIBLE) {
                TVSeconds.setText(DecToCalcString( time.second,6));
            }
    }
}


Although the initial renderings looked good they still needed the face added and to be 'dirtied up'.
I remember seeing a interview regarding the original Toy story and how the most time was spent 'dirtying-up' all the sets. It is easy to render a perfect ball but, it takes a lot of work to make that ball appear photo realistic due to the imperfect nature of actual 'things'.
I also noted that the rendered watch case looked good with a main light source at the top but it appeared harsh and 'false'. Re-rendered the image with the light at the bottom but layered the two renders together. the result is a huge improvement(see the side by side images below).
After applying the dirt I also added very simple detail to the circuit board entities, some text of the ICs and shading for the resistors.

One of the key objectives of this project was not to create a duplicate of the samuimoon binary watch but, to recreate it.
Hence the watch case strap connectors are not 'square' and the face is different.
I did not look at the watch while creating the face, I just concentrated on the fact that the face was a circuit board and that it was not very prominent.
The next open source tool I used was inkscape. I created two layers one for the track, which was just a collection of lines with terminating circles and 45(ish) degree bends.
The second layer was for the resistors and ICs, very simple and then duplicated to appear at the end of common tracks.
The vector nature of inkscape allowed me to tweak this basic idea until I exported it to gimp for the final composite.

It was time to start making it look pretty.
Using blender was quick and relatively painless. A quick curve (2D shape) that represented the outline of a cross section of the watch case was rotated (as a mesh) to create the circular component. Then another curve extruded created the strap attachments and finally the strap itself is created in the same way.
The end pieces were further refined and hole 'dug' out for the strap to attach.
The black leather is lumpy (normals) noise and the metal has subtle amounts of noise to give it a slightly 'brushed' look.
I almost forgot the buttons which are just cylinders with smoothed ends.

First steps where to create an image of a circle, a lit LED and an unlit LED.
Gimp made short work of those and the eclipse Layout manager allowed me to mock up the layout.
Now I had the watch (as a circle set as the background) and code that set the LEDs to either on or off.
Found the android SDK alarm clock code and it is really easy to hook into the system TICK event/notification/intent.
IntentFilter filter = new IntentFilter();
filter.addAction(Intent.ACTION_TIME_TICK);
getBaseContext().registerReceiver(mIntentReceiver, filter, null, mHandler);
        
/*
* Event handler, time_tick etc
* replicated from AnalogClock.java
*/
private final BroadcastReceiver mIntentReceiver = new BroadcastReceiver() {
@Override
    public void onReceive(Context context, Intent intent) {
        onTimeChanged();
    };
    onTimeChanged(); does some simple bit shifting to identify which LEDs should be on and off.

So what am I up against?
The SamuiMoon binary watch from 01theone.com has changed over the years.
There were a number of main components I wanted to retain for my Android app.
One: four blue lights to determine the hour and six to define the minutes.
Two: a circuit board back drop.
Three: Metal case and black leather strap.
Four: Some easy way of calculating the time from the display. the real one has tiny numbers under each LED.

Android is the new *shiny* for me and as such I have felt compelled to create a simple application for my new phone.
It falls squarely into the "sloth is the mother of invention" category. A binary watch simulator with additional calculations and seconds.
This way when someone asks me about my watch I can just show them my phone instead of trying to explain why reading binary is OK.
It was quite a journey, so I hope to entertain you as I recount it.