Difference between revisions of "OSD Layouts"

From Navit's Wiki
Jump to: navigation, search
(10.2" netbook layout)
(10.2" netbook layout)
Line 554: Line 554:
<br />
<br />
Available speed cam symbols:
Available speed cam symbols:
[[File:Speedcam_mobile.png| 50px ]] [[File:Speedcam_102.png| 50px ]]
[[File:Speedcam_mobile.png| 70px ]] [[File:Speedcam_102.png| 70px ]]
<br />
<br />
[[File:bar2.png| 600px ]]
[[File:bar2.png| 600px ]]

Revision as of 13:38, 31 March 2011

This page is intended for users to display the OSD layouts that they have designed and provide a way to share those layouts to other users. Feel free to add your own completed layout to this page. As the number of layouts expands this page will be broken into several sub sections for each device.

Note: For an explanation of how to modify the OSD layouts reference OSD section. Many of the layouts on this page were borrowed from the examples on that page.


  • If you would like instructions on how to modify OSD layouts you can refer to the OSD page .
  • If you would like to share your own layout please contact us on the IRC Freenode Channel #navit and let us know. You can also try the web-based chat


To make configuring Navit simpler it is recommended that you copy the navit.xml from "/usr/share/navit" to your home directory "/home/user/.navit" where "user" is the username you log into your computer with. Then to make changing OSD layouts, you can replace the OSD entries in navit.xml with:

<xi:include href="/home/user/.navit/navitOSD.xml"/>

Then create a new file navitOSD.xml in which you place all the OSD items. This means you can create and share layouts by providing just the navitOSD.xml file and people can drop them into place without having to hand edit their navit.xml files. The same trick will work for any subset part of the navit.xml file. Remember to begin your file with <xml> and end it with </xml>, otherwise Navit won't be able to parse it properly.

This trick was contributed by Daniel Would on the NSeries wiki page.

Layout scaler for different screen sizes

This is a small perl script scale.pl that makes use of imagemagick (convert) to quickly convert any OSD layout for a different screen resolution. It is tested for nibbler01 and Mineque003 and assumes to be run against a specific skin and not against the navit.xml (might work too...)

Known issues:

  • svg images are displayed in fixed size by navit (might be fixed soon)
  • some elements don't scale that nicely, you might want to edit the resulting xml for one or two fontsizes.
  • no proper xml parsing, just regexp stuff


  • converts xml and png in one go
  • does not touch original files

Usage: Create scaled layout with:

./scale.pl <desired scale in percent> <path>
./scale.pl 50 ~/.navit/nibbler01/

then include the -scaled-XX xml file instead of the original.

get it here

Nokia NSeries Tablets

For tips and advice on Nokia layouts please reference the NSeries specific page.

NSeries Layout 1


NSeries Layout 2


NSeries Layout 3


Neo FreeRunner

FreeRunner Layout 1


FreeRunner Layout 2


FreeRunner Layout 3


FreeRunner Layout 4

PC Layouts

Mineque's PC layouts

Thoose skins fits only screens with 800px width.

Create dir ".navit/skins/" in your home dir and unpack there skin.
For enabling it you have to edit xml file from the archive in two places:

      <osd enabled="yes" type="button" x="0" y="-120" w="800" h="120" command="" 
src="/home/mineque/.navit/skins/Mineque_003/M_003_01.png" />
      <osd enabled="yes" type="button" x="0" y="0" w="800" h="35" command="" 
src="/home/mineque/.navit/skins/Mineque_003/M_003_02.png" />  

You have to change path after src="..." to one will fits your user dirname.
And last thing edit navit.xml. You have to comment everything between:

   <gui type="internal" />


   <vehicle ...

After that paste:

   <xi:include href="/home/mineque/.navit/skins/Mineque_001/Mineque_001.xml" />


   <gui type="internal" />

with corrected path of your user dirname and choosen skin.

Mineque's OSD 001 Layout

Mineque OSD Layout 02.jpg

Note! The following package contains two images required for this layout:

Mineque's OSD 003 Layout

Mineque 003.jpg

Note! The following package contains two images required for this layout:

Nibblers OSD Layouts

All these OSDs are developed for and tested with navit 0.2.0

nibbler01 v0.2 for Netbook & widescreen

This OSD fits well for my netbook @1024x576. It is optimized for widescreen Displays, so putting all Info on the sides, and should scale well with any resolution bigger than 500x500 or something. The screenshot was taken with ubuntu netbook remix which saves a lot of precious screen space. The sound mute/unmute is untested and the fullscreen does not work, at least for me, no clue why. I'm using gtk interface, no idea how this might or might not interfere with OSDs... I, <chr>, had the same experience with the internal gui on an N810 handheld. Changing 'command="gui.fullscreen=()"' to 'command="gui.fullscreen=1"' solved the problem. Actually I do use now 'command="gui.fullscreen=!gui.fullscreen"' which toggles the screen.


To install just add

<xi:include href="/home/sven/.navit/skins/nibbler01/nibbler01.xml" />

to your navit.xml (just where all the default/deactivated osd elements are) and fix the paths to the pics within nibbler01.xml and your navit.xml.

From version 0.2 on: For the buttons to work, you need to copy the empty.svg to your image directory (/usr/share/navit/xpm/ in my case) or fix the path to them in the nibbler01.xml.

The .cxf files are now included in the download, so feel free to alter them under the terms of CC-SA.

LCARS v0.1 (Startrek TNG)

This OSD does not scale so well, so use the resizer if you need to. It also makes use of empty.svg which it expects in the default image location of navit (included in lcars directory of the tar)

Version 0.2 makes use of the newly introduced <osd type="image">, as the huge transparent button was avoiding users to actually click/drag the map.


To install just add

<xi:include href="/home/sven/.navit/skins/lcars/lcars.xml" />

to your navit.xml (just where all the default/deactivated osd elements are) and fix the paths to the pics within lcars.xml and your navit.xml.

For an appropriate vehicle include the cursor:

<xi:include href="/home/sven/.navit/skins/lcars/ussnavit.xml" />

Korrosa's Netbook Layout

The following OSD layout has been optimised for netbooks with screen resolutions of 1024x600 pixels. It uses some features which are only available when using the latest SVN snapshot of Navit. Of course, this skin can still be used without these features. There are specific icons used in this layout which I did not make so I won't upload here for licensing issues - I'm going to presume that you can type the correct words into Google Images to find the icons you want. The extra icons are:

  • Navit icon - guess where you can find that one...!
  • Information icon.
  • 1px x 1px transparent rectangle, used so that a keybinding can be applied to a command without having an icon clutter up the OSD. That rectangle was actually made by me, so here it is:
    Error creating thumbnail: Unable to save thumbnail to destination


The first screenshot shows Navit in tracking mode - i.e. there is no route defined, so Navit just follows the driver around, displaying current road names, speeds and distances to speed cameras. The second screenshot shows Navit in the more familiar routing or navigating mode, with a destination set, and the current and next road names displayed, and navigations manoeuvres and distances shown. The map is rendered using the OSM Mapnik layout style.

Korrosa osd tracking.png

Korrosa osd navigating.png

Tracking Mode

Tracking mode is the default mode when Navit opens. It has the following features:

  • Top right:
  • Bottom left:
    • Compass OSD, displaying bearing and Northing arrow relative to current direction of travel (OSD#compass)
    • Current altitude of the vehicle, using OSD#text's vehicle.position_height
  • Bottom centre:
    • Current road name and/or reference number (if available) using OSD#text's tracking.item.street_name and tracking.item.street_name_systematic
    • Maximum allowable speed on the road using OSD#speed_warner
  • Bottom right:
    • Current vehicle speed using OSD#text's vehicle.position_speed
  • Right (icons, top to bottom):
    • Fullscreen
    • Zoom in
    • Zoom out
    • View full route
    • Navit icon - toggle between:
      • Bird's eye, north oriented view at 200 zoom
      • 3D view pitched at 20 degrees, zoomed in at level 15 and oriented in the direction of vehicle travel
    • Information icon - toggle between:
      • Tracking mode
      • Navigating mode

Navigating Mode

Navigating mode has all the same OSD elements as tracking mode, plus the following:

  • Top right:
    • Total distance remaining to destination using OSD#text's navigation.item.destination_length[named]
  • Top left:
  • Top centre:
    • Next road name and/or number (if available) to turn onto during the next maneouvre. Uses OSD#text's navigation.item[1].street_name and navigation.item[1].street_name_systematic


This layout uses OSD#Keybindings to bind keys to specific OSD elements. This is currently only available using the latest SVN builds of Navit. The following are defined:

  • Key: =
    • Bound to the zoom in OSD element. Press this key to zoom in.
  • Key: -
    • Bound to the zoom out OSD element. Press this key to zoom out.
  • Key: f
    • Bound to the fullscreen OSD element. Press this key to toggle between fullscreen and windowed mode.
    • Bound to the Navit icon. Press this key to toggle between birds-eye and 3D view (as explained above)
  • Key: i
    • Bound to the Information icon. Press this key to toggle between tracking and navigating modes.
  • Key: s
    • Bound to an invisible 1px x 1px rectangle. Press this key to toggle speech on/off.


To use, copy and paste the following markup to Navit.xml. Don't forget to disable any other OSD items which may have been there before! NOTE: There are some hard-coded paths in the markup, especially to the 'special icons'. These will obviously have to be changed.

10.2" netbook layout


Available speed cam symbols:

Error creating thumbnail: Unable to save thumbnail to destination
Error creating thumbnail: Unable to save thumbnail to destination


Windows Mobile OSD Layouts

All these OSDs are developed for and tested with navit 0.2.0

Windows Mobile VGA 1

This OSD fits well for @480x640. The are still some minor issues beeing corrected soon.

WM VGA1 screen.png

To install just add include the xml content into your navit.xml (just where all the default/deactivated osd elements are) and fix the paths to the pics. On HTC Touch Pro with WM 6.5 the screen resolution with daily build 3540, the resolution is 240x320. You have to apply the patch mentioned in http://trac.navit-project.org/ticket/554 or can download a svn build (2010-09-05) with patch included to run Navit with 480x640 pixels.

Dirk205's layout for landscape WVGA

This skin looks good on WVGA (800x480) devices (i.e. HTC HD2) in landscape mode. Portrait mode is not supported!

3D Skin Dirk205.png

My settings: 3D and full screen are active. Moreover, I added <vehicle name= ... follow="1"> to fix the car position on the screen. To install just add include the xml fragment into your navit.xml (replace all the default osd elements there) and extract the skin bitmaps with folder into folder $NAVIT_SHAREDIR/xpm/skins .

The shown 3D view has a view angle of 24 degrees, i.e. you need to patch your navit.xml at a appropriate menu position:

<img cond='navit.pitch==0' src='gui_map' onclick='navit.pitch=24; redraw_map();back_to_map()'> <text>3D</text> </img>

<img cond='navit.pitch!=0' src='gui_map' onclick='navit.pitch=0; redraw_map();back_to_map()'> <text>2D</text> </img>

3 remarks:

a) To enable landscape mode on a HTC HD2 you need a tool, can be done with the "BsB Tweaks"!

b) You need to have 64x64 sized navigation bitmaps (*wh_64_64.png) present in your xpm folder.

c) Scaler can work for 2D view only.

Asus Mypal A696 - QVGA 240x320

Windows Mobile 6.0 Classic, Display 3.5 inch QVGA 240x320. Layout is design for Landscape (horizontal) display orientation. This layout working well with 2D and 3D mode.

Error creating thumbnail: Unable to save thumbnail to destination
Error creating thumbnail: Unable to save thumbnail to destination


In - distance to next turn, onto - next street name/number of road, eta - estimated time of arrival, tr - time remaining until destination is reached, t - vehicle position time, d - direction angle, on - currently on road name/number of road, alt - altitude, dr - route distance remaining, top left - scaller, bottom right - number of satellites used / number of satellites available,

add this to your navit.xml file:

Treo 750 QVGA Square (240x240) (German)

This Layout I use on a Treo 750 with Windows Mobile 6 and a resolution of 240x240 pixel. The design is inspired from the Palm Pre Layout by Nexave user AndrejDelany. http://www.nexave.de/forum/p395877-navit-fuer-den-pre/.html#post395877
I adapted this Layout to my lower resolution and did some own graphics. Thanks for the great work, Andrej  :)

(This Layout also fits 240x320 portrait, but not 320x240 landscape mode)

The following XML-Code (click "show" for "Layout XML for Treo 750 QVGA Square" at the bottom) is part of my file "navit.xml". I did some comments (in German) to seperate the file into logical parts.

If you want to try, use or modify this layout, you have to insert this code in your file "navit.xml".

This design provides a clear display with great functionality.

Error creating thumbnail: Unable to save thumbnail to destination

While routing:
In the top part of the display you will see (from left to right):
Distance to target - time to target - estimated time of arrival

At the right side you can see:

  • The actual speed (above)
  • and below the maximum allowed speed at the street you are actually on.

If you are driving "slow enough" it will be colored green.
If you are driving too fast, it will be colored red.

Error creating thumbnail: Unable to save thumbnail to destination

When there is an explizit tag "max_speed", navit will display this allowed speed.
When there is no explizit tag, navit will "guess" the maximum allowed speed from the Highway type. In this case you will see a "~" in front of the speed..
(Don´t wonder: Sometimes it will be a little bit funny e.g. to be allowed to drive 100 km/h inside a village.)

In the bottom of the display you will see:
Next action (as an arrow) with distance to next action below and the name of the street, you have to go to.
In small letters there is the name and/or reference of the street you´re actually on.

Error creating thumbnail: Unable to save thumbnail to destination

Selecting "time delay"
Sometimes when scrolling on the map, the focus jumps back to GPS-position too fast.
Therefor I put in a small menu, where you can select the time, after which the focus jumps back.

Please tap on the "arrow-icon" in the upper right corner to bring up the menu.

  • tap on "5" to select a time-delay of about 5 seconds. => thats the default value, good for driving
  • tap on "30" to select a time-delay of about 30 seconds => thats good for scrolling on the map while navigating and looking e.g. for some adresses.

The time-delay starts after your last scrolling-action on the map.

Error creating thumbnail: Unable to save thumbnail to destination

Time delay indicator
The small indicator shows you the selected value for the time-delay.

You can always switch between these to time-delays. Even while navigating.

You can clear the screen by tapping on the "next-action-arrow" in the bottom left corner.

Error creating thumbnail: Unable to save thumbnail to destination

While driving without routing:
You will only see in small letters the name and/or reference of the street you´re actually on.
...and for sure: your actual speed and the maximum speed allowed.

The required images-files are zipped to "navit-xpm-additional-QVGA-240x240.zip" and for download:
please unzip these files and copy them into the folder "xpm" in your navit-path.
In the zip-file there are not only the "design"-files, but also the corrected "png"-files for "next direction".
So, if you don´t have any problems with the graphic "next direction" (= arrows), leave them out and just use the "design"-files.

An additional Menu-Configuration optimized for 240x240 Display will be found here:

Yakumo Delta 5 X

  • fits for resolution 320x240 and 240x320
Error creating thumbnail: Unable to save thumbnail to destination
Error creating thumbnail: Unable to save thumbnail to destination

This configuration contains 2 layouts. One for horizontal view and one for vertical view. In order to only show one of them, you have to set up osd_configuration within tag "navit":

  • to 15 (vertical)
  • or 3840 (horizontal)

<navit center="[your start location]" [other attribites] pitch="30" osd_configuration="3840">

To switch between horizontal and vertical view when running navit, you can modify internal gui like example in Menu XML. After this you can navigate to Menu/Settings/Display/OSD and switch between horizontal and vertical mode. You can choose between 4 different OSD modes (OSD off, OSD Min, OSD Min+ and OSD full).

  • this example menu doesn't need any additional pictures
  • disabling "speeed_cam" and "scale" will not work by now

Of course you can delete one layout if you only need one. Changing of menu and to init osd_configuration is not necessary in this case.

Note when editing: negatives (such as x="-10", y=-10") seems not to work well on this device. I only use absolute coordinates.

Palm Pre Layout

This is the current layout as it is used on the Palm Pre


You can always find the current version of the skin files here: http://git.webos-internals.org/?p=preware/cross-compile.git;a=tree;f=packages/apps/navit/files/PreNav

To get the car cursor you need to replace the existing cursor definition in all layouts in your navit.xml with the 2D car alternate cursor.

480x800 Portrait

My OSD layout was originally created on my Neo Freerunner but it works just as good on my Samsung Galaxy S running Android:

Tapping on the header switches between routing an information display. Use osd_configuration="4" in the main navit tag for the initial display.

OSD 480x800 portrait.png