Thread: Interface Images

This is the Main (or "home") window of the interface, using the DefaultSkin.

There are 9 buttons to accommodate Browsing Media, CurrentPlaylist, Visualizations, GPS Info, Embedded Programs, Camera View, OBD Info, DrivingStats, and Exit.

The image on the right is a "Personalization Image". It has no function. It is purely cosmetic. In the default skin, clicking the logo toggles the visibility of the analog speedometer.

At the bottom of the screen is the "NavBar", which contains the PREV and NEXT buttons, as well as the current track, Time of day, speed/bearing if available. The icons at the bottom indicate GPS fix, OBD connection, PlayState, Internet Connection, BlueTooth Connection, and CPU usage. Clicking anywhere on the NavBar always brings up this main "Home" window. If any OBD codes are detected, the OBD icon will change to a CheckEngine icon. Note that it is possible to have a code stored in your engine without setting the CheckEngine light. This program displays the CheckEngine if any codes are detected.

When clicked, the Prev and Next buttons function as they would on a CD player.

All of the images are external files, so they can be replaced or modified. Also, the font and color settings are specified in the Skin XML files so they can be modified as well. The button borders are customizable as well.






This is the Tools window (or Media window, for lack of a better name).

The 12 icons here represent ImageSlideShow, Emulators, Import Folder, Eject Drive, Config, Dimmer, BlueTooth, Weather, Maps, Lyrics, Pandora, and WebBrowser.







This is the Add Media window.

Choose the type of media you want to add to the current playlist. Audio Files, Video Files, Audio CDs, or Video DVDs.







This is the BrowseAudio window.

Whether browsing for music, video, or images, or alerts, this is the basic layout. A folder tree for navigating, and a file list on the bottom which, when clicked, will add the selected item to the current playlist.

Clicking the magnifying glass will bring up an OnScreenKeyboard for the user to search for media. A special 'Search Results' folder is added to the folder tree, and the results are listed there.

The root folders and file-types for browsing are specified in the Settings.XML file.

As mentioned earlier, click on the StatusText at the bottom to return to the Main window.

Again, all of the images are external, and all fonts are controlled through the Skin XML files, so customize as you like. I think the cyan on black has good visibility. I use Arial Narrow personally. As for the images, I made them all squares, 200x200, and everything seemed to work out pretty well. The program can compensate for vertical image-scrunching.

Any of the arrow buttons can be held down for faster scrolling.






This is the Browse Audio CDs window.

Choose a drive to add the audio CD to the current playlist.







This is the Eject window.

Choose a drive to eject.







This is the Browse Audio window with the OSK visible for searching.

Enter in a string to search for and the results will be listed in a Search Results folder.







This is the Import Window.

From this window, a folder (or just the folder contents) can be copied to another folder.








This is the Weather Forecast window.

The current weather is displayed, as well as a 3-day forecast.






This is the BlueTooth Phone window.






This is the WebBrowser window.






This is the WebMaps window.




This is the Playlist window.

The current playlist is displayed. The user can add tracks/folders, remove tracks, and jump to a track by double-clicking it.

Also on this screen are the Shuffle and Repeat buttons.

Clicking on the Disk Icon will brink up the OSK for the user to save their current playlist into a special MyPlaylists folder.








This is the Visualization (or Now Playing) window.

If any artwork is available (embedded or in the same folder), the artwork will be displayed on the left. Click on the album art to cycle through all artwork. Click the progress bar to skip to any position in the file.

Click the volume bar to adjust volume, or click the speaker icon to toggle mute.

Double-clicking the visualization (or video) will toggle between full-screen and showing the NavBar. This way, the user can watch full-screen DVDs and still be able to single-click the DVD menus.








This is the GPS Info window.

This just lists information retrieved from the GPS receiver, such as Latitude and Longitude, Bearing, Speed, etc.

Also, the PC clock will be synchronized with GPS time once per day (or if the program is restarted).







This is the GPS Trail window.

This displays a trail of where you've been. The program records your GPS location every few seconds, and draws a path connecting all of the points. The blue triangular arrow is your current position and bearing. The color changes with speed, from magenta to red to yellow to green to white to cyan.

Click the Reset button to clear the current trail.







This is SlideShow window.

The user can build an image slideshow, add or remove images, and cycle through them.

Toggle full-screen by double-clicking on the image.








This is the Apps window.

Through the Settings.XML, different programs can be embedded into the FrontEnd. By default, the program's icon is used to create an icon in the FrontEnd. However, a different image may be specified.

Up to 18 programs can be embedded.

When one of these icons is clicked, the associated program is executed, and then the program is embedded into the FrontEnd by making the FrontEnd the parent of the program. Also, the program can send key commands to the embedded program upon loading it. This is also specified in the Settings.XML file.

Every embedded program can be configured to take control of the GPS unit and OBD unit.

This is still under development. It works with most programs. The catch is that a program cannot be embedded if a previous instance of the program is running when it is launched from within the FrontEnd.






Solitaire, running as an embedded app within this FrontEnd.
This is especially useful while waiting for a pizza.






MS Streets and Trips, running as an embedded app within this FrontEnd.
Notice the status icon on the bottom indicates no GPS fix. This is because the Settings.XML file is set up to disconnect the GPS when this app is launched.






This is the CameraView window.

The idea is that you have a webcam or other capture device connected (probably to see behind you), and that you can activate that view by clicking the appropriate icon on the Main window.

The program only supports having one capture device specified at the moment. This could easily be expanded upon to support multiple cameras.

My new plan is to add some additional functionality for a front-mounted "dash-cam" which will record constantly and keep only the last few minutes of video.








This is the Vehicle Info window, page 1.

This lists information retrieved from the OBD system of the vehicle, such as RPMs, Manifold Pressure, Fuel Trims, etc.







This is the Vehicle Info window, page 2.

This lists information retrieved from the OBD system of the vehicle, such as Coolant Temp, Intake Air Temp, Engine Load, Check-Engine, Fuel System Status, etc.








This is the Driving Stats window.

This lists driving statistics derived from the OBD or GPS unit. Some commercial GPS units list this information, such as average speed and time moving. This also lists your acceleration time (launch), your peak speed, and your total distance traveled.








This is the Lyrics window.

The program attempts to download the lyrics to the current media, if an internet connection is available.








This is the Config window. It was designed to allow the user to set as many settings as possible without requiring a keyboard or mouse. Options are on the top, values are on the bottom.

You can toggle the dimmer manually. You can also choose a time for the dimmer to turn on and to turn off.

For Unit of Speed, you may choose Miles Per Hour, Kilometers Per Hour, or Knots.

Other settings include HideTaskbar, HideCursor, WideScreen, ButtonBorderColor.








This is the Exit window.

From here you can Minimize the program, Exit the program, or Shutdown the PC.







This is a screenshot from the DriveLine_Settings.XML file.





Included Logos.




Images showing the different color-schemes (all using the same images, just different skin settings).

Orange color-scheme.


Green color-scheme.



Wordy skin.









Metropolis skin.