Last changed: Jun 01, 2009 16:54 by
Juha Lindfors
As I was working towards our Amsterdam event next week, I put together some customized iPhone console screens with the new OpenRemote 1.0 Milestone 2 software (a sneak preview, release coming soon!).
They turned out better than what I had expected, so worth sharing and describing some of the new features.
Multiple Screens, Activities And Button Images
One of the things we've added in M2 is the ability to use your own images on the iPhone layout. The next few screenshots demonstrate this quite heavily. The other major change to the iPhone console is the ability to create multiple screens which you can change with the usual finger-swipe gesture. The latter is obviously necessary for 1.0 release as most people will have multiple remotes, lights, shutters and so on to control. Finally, there's an "Activities" screen where you can group screens depending on where or what you are doing. Each activity can hold multiple screens which you can switch to quickly with a finger swipe.
For our Amsterdam event I decided to add a welcome screen on the first page. Basically just a single image that gives the company logo and some information. As a vendor you could use this as a welcome screen with your own logo, some application use information, maybe a promotion at an event you are organizing or participating in. Imagine your customers walking into location, they have the OpenRemote application installed on their iPhone and connect to your ORB at the site. It is a nice way to welcome and share some information with them.
|
|
 |  |
| Activity View | Welcome Screen |
| (Click for larger image) | (Click for larger image) |
|
Icons and Images
Using icons and images is straight-forward with M2. You can choose your own images you've created (GIF, JPG, PNG formats supported), or you can choose icon images from a pre-defined set of icons that we offer in our User Interface Composer.
The screenshot on the right shows the use of pre-defined icon buttons from the UI composer. It is a default set of buttons we currently deploy with round shape and dark-blueish colors. As you choose an image for your button, it will be placed on the remote button instead of its usual text label.
The other feature you can see on the screenshot is the use of images in the layout in general. I've added an image of the actual physical remote these buttons are mapped to, making it easier to remember what's going to happen as I press them. This particular screen is mapped to the Apple Remote that comes with a MacBook. You could also use the images of the target device if that is a more natural way for you to remember what or where the device being controlled is.
As for the default buttons themselves, we only have one theme right now. We'd be happy to hear from community members with graphic design skills if they'd be willing to develop more button themes for us. With the LIRC codes in Beehive, we can very easily find the most common infrared commands ("play", "stop", "1..9", etc.) and map those buttons to default images.
|
|
 |
| Icon Images |
| (Click for larger image) |
|
Images As Buttons
This next shot shows a similar screen to the previous one for another remote control (infrared remote for a TV set). It contains a mix of elements in the layout. The original remote control is shown at the top of the screen with a short title describing it as the TV in the living room. The number buttons are the default buttons with titles rather than images. While the default buttons are not the most attractive, they'll do ok in a pinch if you don't have cool images or button pictures handy, or you are still working on what buttons you want in your layout exactly and how to place them.
On the left side of the screen are two images that are actually active buttons themselves with "BBC" and "CNN" TV station logos. They respond to press like regular buttons and can be mapped to a infrared macro that automatically sends the remote commands to change to the corresponding channel.
Finally at the bottom there are sketches for a different button style for "Power" and "Menu" buttons, replacing the default button look completely.
|
|
 |
| Image Buttons, Macro Buttons, Default Buttons Mixed |
| (Click for larger image) |
|
Backgrounds For Moods
The final shot of the day is what I've dubbed the "Mood Remote"(tm). It demonstrates the use of a background image on the iPhone Console. It has couple of buttons at the bottom for "Play", "Volume Up" and "Volume Down". As an example, the "Play" could be a scene macro to set your colored lights to a nice sunset hue, start a relaxing music or maybe some ocean waves audio. Something relaxing.
Mmm... I'm ready for a vacation....
Coming Up
Next week we will all be in Amsterdam for our first public event. Also you can expect Milestone 2 to appear in the next few days.
'til next time, take care!
– Juha
|
|
 |
| Mood Remote |
| (Click for larger image) |
|