Acura ITX Front-End Design for RoadRunner

published by Andrew Hreschak, using 1835 words, 35540 views
published on 05/24/06 05:58:00 pm

EDIT: Acura ITX Roadrunner skin now available in green

I've been working on a skin/template design for the RoadRunner touchscreen front-end application, since I decided to use RoadRunner instead of Media Engine. Both applications are quite good, but I found RoadRunner to be a little more flexible for the specific applications/tools I plan to use in the CarPC project.

The Acura ITX skin has a built-in audio player, audio browser, on-the-fly playlist builder, movie browser, video player, embedded PowerDVD dvd player, embedded Microsoft Streets and Trips, embedded iGuidance, on-screen keyboard, equalizer and mixer, blind man's screen, external applications menu, and skin switcher.

Yes, I can build custom interface designs for your own car computer project. Get in touch by leaving a comment or contacting me through the email form.

Here are some preliminary designs of the touchscreen interface...
Each of these images is reduced from the 800x600 actual size:

1. The splash/loading screen... The Acura ITX system runs on a stripped down version of Windows Media Center (approx 250Mb) and is configured to bypass the login prompt. When the system boots, or resumes from hibernate mode, the user is immediately presented with this screen:

Acura ITX splash/loading screen for RoadRunner

2. The main menu screen, showing currently playing music, gps heading, # of satellites locked, altitude, time and date, etc... The lozenge buttons at the top represent (from left to right) Music Player, Music Browser, GPS, External Applications:

Acura ITX main screen for RoadRunner

3. The same main screen with optional visualization running, in this case a spectrum analyzer (using Nullsoft's Sexy Attached Analyzer) which has been matched to the blue color of the Acura ITX skin:

Acura ITX main screen with visualization

4. The secondary menu screen (accessed by touching either LEFT or RIGHT arrow buttons in the top menu). The lozenge buttons at the top represent (from left to right) Movies, Phone Control, Games, OBD Diagnostics:

Acura ITX Secondary Menu screen for RoadRunner

5. The Audio Player screen, which displays the currently loaded music playlist on the right side, and shows the artist, album title, track/song title, and album art on the left side. The horizontal bar across the top displays the currently-playing artist and track name, and scrolls from right to left when the information exceeds the width of the display area. The vertical navigation menu allows easy scrolling through the currently loaded tracks:

Acura ITX Audio Player screen for RoadRunner

6. The Audio Browser screen gives access to the music library loaded on the car computer, and provides the ability to build playlists by navigating through the library. Clicking the "System List" or "Playlist" text switches the navigation cross to control that particular list. The alphabet across the top is a quicksearch to jump through the list:

Acura ITX Audio Browser screen for RoadRunner

7. The next three screens contain changes made during my recent system software updates, during which I added the option for building on-the-fly playlists in the Roadrunner front-end. One of the other changes I made was to move the 'Movies' button to the main menu and the Applications button to the secondary menu screen. When clicking, from the main menu, the 'Movies' button, the user is presented with the following submenu, which provides the option of watching video files (MPG, AVI, WMV, etc), or watching a DVD movie which has either been inserted in the DVD-ROM drive or mounted, from an .ISO file, in one of the virtual DVD-ROM drives configured within Alcohol 120%.

Video menu for RoadRunner

8. Selecting the 'Video' button in the screen above brings the user to the Video Player screen and this Video Browser screen. This screen gives access to the video files (MPG, AVI, WMV, etc) stored on the system, and provides viewing controls via RoadRunner's built-in video player.

Video browsing and selection menu for RoadRunner

9. Selecting the middle button in screen #7 brings the user to the following screen, which contains a copy of Cyberlink's PowerDVD software embedded into the Acura ITX interface for RoadRunner. Access to PowerDVD's menus and control options is achieved via the SENDKEY functionality in RoadRunner, and allows control over such things as PLAY, STOP, SKIP, CUE, and access to the Root Menu of the DVD.

Cyberlink PowerDVD embedded into the Acura ITX skin for RoadRunner

10. The OSK (On Screen Keyboard), which is accessed from any screen by clicking the 'ITX' text in the banner at the top of the screen. This comes in handy for entering text into the embedded copy of notepad for taking quick notes, or for entering destination or routing information into the embedded copy of Microsoft Streets and Trips:

Acura ITX On-Screen Keyboard for RoadRunner

11. The Equalizer allows fine-tuning the audio settings on the carputer, showing a traditional equalizer layout, along with access to the various output lines on the car computer's sound card. (The Acura ITC mobile computer uses the onboard sound card of the EIPA MII-12000). Additionally, access to master volume, system volume, and bass and treble settings are available from the equalizer screen. Across the bottom of the menu, buttons Pre 1 to Pre 4 allow for saving customized equalizer settings based on user preference. The preferences are automatically stored as Winamp presets in the RoadRunner directory:

Acura ITX Audio Equalizer screen for RoadRunner

12. Clicking the GPS lozenge in the main screen brings up this menu, which gives access to a choice of MS Streets & Trips or iGuidance GPS navigation software packages:

Acura ITX GPS Menu screen for RoadRunner

13. S&T '06 integrated into the skin. The buttons in the submenu control such functions as the Guidance Pane, POI, Route Planner, Re-Routing, map zoom in and out, cycling through 4 different text sizes by repeated presses of the 'TEXT SIZE" button, cycling through the different map views (Road, Terrain, Political, Night) by repeated presses of the "MAP STYLE" button, etc.

Notice the S&T map has no borders on the left and right sides, but instead extends right to the edge of the skin/screen.

Acura ITX embedded Microsoft Streets & Trips screen for RoadRunner

14. Clicking the "FUNCTIONS" button in the previous screen overlays the following menu, which gives access to starting the tracking function, arranging and centering the map, rotating the map in the direction you're heading, and creating the GPS trail. Clicking the "FUNCTIONS" button again closes the GPS FUNCTIONS menu and restores the menu in the previous screen:

Acura ITX GPS Functions screen for RoadRunner

15. With not a lot of space in a 7" screen, I still wanted to be able to have access to artist/title info, since with several thousand tracks on my car system, I won't always know what I'm listening to. Clicking the "MUSIC" button brings this popup menu, which gives access to basic functions like play/pause, stop, FF, RW, artist, track title, elapsed time, total time, etc. Clicking the "MUSIC" button again closes the music popup menu:

Acura ITX GPS Music screen for RoadRunner

16. The following screen shows the iGuidance GPS mapping software (iGuidance 4) embedded into the RoadRunner skin. I was able to configure iGuidance to run in native mode within RoadRunner, which allows for the added functionality of leaving the GPS mapping screens (to go to other screens within the skin) and for RoadRunner to automatically return to the GPS map to display an upcoming turn when a route has been programmed into iGuidance.

I've built this screen to take advantage of as many of the keyboard shortcuts built into iGuidance as possible. The menu across the bottom of the screen allows access to such features as adjusting of the views from normal map view to guidance assisted mode, setting a destination via the "Go To" button, and shortcuts to display and routing options. Additionally, the top level of the menu gives access to saving of current location, information about the current location, map orientation (Heading up vs North up), and toggling between 2D and 3D mode.

This screen shows a customized color-scheme which I hacked, being dissatisfied with the stock color-schemes which come preinstalled in RoadRunner. This color-scheme has been hacked to display terrain in an earthy brown shade. Additionally, I have adjusted the color of bodies of water to display in a darker shade of blue then the stock color-scheme, among other changes.

iGuidance embedded GPS mapping software

17. This screen shows iGuidance running in 3D perspective mode, at a significant amount of zoom. For normal driving the zoom would be closer to allow for more legibility of the roads and Points of Interest on the map.

This screen reflects the current state of the iGuidance screen after pressing the "Function" button in the screen above. The bottom row of the menu is identical to the previous screen, but the top row gives access to less frequently used functions, such as adjusting the "GPS VOL" of the voice prompts, toggling Points of Interest (POIs) on and off, fog warning for low-visibility situations, and the speed warning which sounds an alert when driving at a speed higher than configured for the warning.

iGuidance embedded GPS software functions menu

18. This screen shows the state of the iGuidance screens after pressing the MUSIC button in the top row. It again displays the same series of buttons in the bottom row. The top row, however, is replaced with quick access to music functions, such as PREV, NEXT, PLAY/PAUSE, and STOP. There is a "PLAYER" button which allows one-press access to the audio player screen shown in image #5 above.

Additionally, and similarly to the MS Streets and Trips screens, this screen shows a scrolling display of the currently playing track title and artist information, as well as the total and elapsed time.

This screen is shown in the night-time view, the color-scheme of which I hacked to suit my own preferences. I configured the background terrain to display in black for greater contrast at night. Roads are displayed in 5 shades of green; local and back roads in a darker green, and highways and freeways in a brighter shade of green.

iGuidance GPS mapping software music screen

19. Clicking the ACURA text in the banner in any screen brings up what I call the "Blind Man's Screen" (aka Boss Key, Kill Switch, etc). When driving in areas where law enforcement doesn't take kindly to video screens on the dashboard, and law enforcement happens to pull out right behind you, hitting the ACURA text will bring up this screen, which attempts to be as dark as possible while maintaining a certain sense of humor ;) Clicking anywhere on that screen will restore whatever screen was being displayed prior to entering it:

Acura ITX blind man's screen for RoadRunner

20. The EXIT MENU screen. The options are (or should be) pretty self-explanatory:

Acura ITX exit screen for RoadRunner

21. The APPLICATIONS MENU screen gives access to embedded applications configured to operate within RoadRunner:

Acura ITX applications menu screen for RoadRunner

22. The SKIN SWITCHER screen allows switching among any front-end skins loaded on the system:

Acura ITX skin switcher screen for RoadRunner

To-DO List (not in any particular order, and will be updated as I remember things, and as I begin work on them):

  • embed customized iGuidance screens (done)
  • movie browser and movie player (done)
  • DVD player screen (done)
  • games menu and games screen
  • applications menu and screens (done)
  • skin switcher screen (done)
  • not sure if I'm going to bother with the phoco screen since I personally won't be using it
  • OBD screens, though I haven't even started playing with OBD yet so I don't know how that will go
  • continue working on OSK because it's flaky. Might opt to go with uboard since it works pretty well
  • ability to build on-the-fly playlists (done)
  • build Acura ITX Roadrunner skin in green for night-time driving (done)

edited 24 May 2006
edited 31 May 2006
edited 12 Sept 2007
edited 28 Oct 2007
edited 20 Nov 2007

Contemporaneous Auditory Narcotics:
or, What my speakers are currently pumping...
Man With No Name - Vavoom

Creative Commons LicenseThis post is the creative work of Yours Truly and is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

Andrew Hreschak is a graphic designer based in central New Jersey. He works on the web, in print, and digital media. His current project is a business startup developing graphic designs and material textures for architectural renderings, video games, and virtual worlds. He has over 16 years experience in visual, web, and promotional design.

24 comments

Comment from: H2Joe [Visitor]
H2Joe

That skin is HOT! Is it finished? Any chance of you customizing one for the Hummer H2? I could swing some cash your way to fund your efforts.
-Joe

05/02/06 @ 19:36
Comment from: Andrew Hreschak [Member]  

Not finished yet. Been concentrating most of my time on the hardware installation in the car, running the wires, fabrication, etc. It’ll be a couple weeks before I can find the time to finish it, but I can do a customized design for your H2 once I’m done.

05/06/06 @ 08:38
Comment from: Marko [Visitor]
Marko

Very very nice. Does the Streets n Trips integration really work or are they just mockups for things you’re going to implement. I’m asking because I notice there isn’t actually a GPS icon anywhere on the map in the screencaps you posted. But overall I like it, very professional. Could you do a version in green?

Marko

05/30/06 @ 07:35
Comment from: Andrew Hreschak [Member]  

Yeah the S&T integration is pretty much complete and functions rather well. The reason there’s no icon in the caps is because they were done off my laptop on my balcony, so I wasn’t actually moving/driving at the time.

Thanks for the compliment. I’ll definitely be releasing a green version. I’ll post a capture of it in the next day or two to give you an idea of what it will look like so check back with this post. I’ll probably release a debranded version of the skin in 4 or 5 different colors once it’s complete.

05/30/06 @ 09:08
Comment from: Dan [Visitor]
Dan

Was wondering if you were going to release this to the public, or if there is a download link somewhere..
I have an Acura RSX.. and this looks really good…

09/15/06 @ 16:30
Comment from: Moe [Visitor]
Moe

Hey, the front-end design looks great! Are you going to release it?

04/16/07 @ 22:42
Comment from: tom [Visitor]
tom

where can download this skin?

05/10/07 @ 20:59
Comment from: Elias [Visitor]  
Elias

Really nice skin.. Great job.. Unfortunately I’m not that talented =( However I’m building my car so I can participate in Swedens biggest carmeet and I’ve been looking all over for the best-looking skin there is for RR and I fell for yours right away.. But all the threads seem dead and it’s been 99% complete since -05 according to mp3car.com. I’m just wondering how’s it going and if you’re able to make one for my Nissan 200sx s14a (240sx).. It would really mean the world to me… This is actually the only skin worth paying for..
Would really appreciate an answer..

Thanks
/Elias

10/18/07 @ 16:07
Comment from: Andrew Hreschak [Member]  

Thanks for the compliments. Yeah, it says 99% complete because we’re always finding that one little thing that we could’ve done better with our carPC projects, or one more thing we’d like to add… 99% leaves me the room I need to say, ‘Yeah, I planned that all along.’

Anyway, I’m sending you an email to get some more info from you, and we’ll go from there, yeah?

10/19/07 @ 02:46
Comment from: kevin lopez [Visitor]  
kevin lopez

the skin is sick, and i was wondering when you were going to release it
plus if u would be able to make one for my 2005 acura rsx
im looking forward in hearing from you

-kevin

12/10/07 @ 21:04
Comment from: Oswald [Visitor]  
Oswald

This is an exellent skin and I want install in may carputer,
How can make those ?

Thanks,
Oswald

12/12/07 @ 18:04
Comment from: Andrew Hreschak [Member]  

Hi Kevin and Oswald,

The ITX Skin isn’t available for download, but I do design custom variations on a client by client basis. If you’d like a vehicle-specific variant designed for your car and your car’s dashboard lighting/color scheme, let me know and we can discuss it. The ITX skin has been designed for at-a-glance ease of use while driving, and it’s a non-flash skin, so it runs super-fast on just about any processor.

Hope to hear from you.

12/12/07 @ 22:58
Comment from: Stephen Peery [Visitor]  
Stephen Peery

Your skin is amazing. I would really be interested in you making one for me. I need one for a chevy cobalt ss with a red tint to it. Drop me an e-mail and we can talk more about it.

Thanks, Stephen

12/24/07 @ 23:00
Comment from: Toba [Visitor]  
Toba

Please is there a way you can make me a subaru themed skin…i am willing to be of whichever help you may need. I have a lil bit of background in graphics design. so please hit me up and lets brainstorm please

01/16/08 @ 03:43
Comment from: Andrew Hreschak [Member]  

Stephen and Toba, I’ve replied to each of you individually by email… Sorry for the delay in some of these replies but I’ve been away from the computer for a while and just getting back to the small pile of email waiting for me…

01/18/08 @ 18:17
Comment from: Craig [Visitor]  
Craig

Hey, I love the skin. I’m possibly interested in an Acura skin similiar to yours, but perhaps a black/grey/red theme (I have an RSX) and a blank or Acura logo in the back. Email me and let me know the details!
Thanks, Craig

01/24/08 @ 06:52
Comment from: Bradley [Visitor]  
Bradley

I love the skin. What will it take to get one done for me? I need it for my dodge dakota, but the color is great how it is.

05/28/08 @ 09:56
Comment from: Bradley [Visitor]  
Bradley

Hi, this skin is amazing, and I’d love to get a copy of it or one made for me. Any chance you could do that?

05/28/08 @ 20:29
Comment from: Ronnie [Visitor]  
Ronnie

Your skin looks awesome!!I would love to talk to you more about creating a skin for my G35. Keep up the great work.

07/30/08 @ 03:43
Comment from: Shaun [Visitor]
Shaun

Hi, Love the skin.. looks like a load of work has gone into it. A friend is building a car pc which, he has asked me to sort out the front end for him, I’m happy with customisation, would really like to just get my hands on a download of your skin.

09/30/08 @ 06:32
Comment from: Andrew Hreschak [Member]  

Hi Shaun, I don’t offer a download of the Acura ITX front-end for RoadRunner but I do develop custom front-end designs based on the ITX skin on a client by client basis. If you’re interested, please get in touch, or have your friend get in touch with me directly. Thanks.

09/30/08 @ 21:36
Comment from: Jim [Visitor]  
Jim

Hi, I love the skin its some really great work. I’m working on a car pc for a 96 mustang and would love to talk to you more about getting a skin for my mustang. Thanks.

04/12/09 @ 23:02
Comment from: Arnaud [Visitor]  
Arnaud

Hello, I speak french. I love the skin. where can download this skin?

please

06/10/09 @ 08:40
Comment from: bksr [Visitor]  
bksr

Hi, I speak China. I love the skin So. Can I download this skin?

Thanks

08/30/09 @ 11:00
blog engine