OSD Layouts

From Navit's Wiki
Revision as of 16:31, 27 January 2011 by Mineque (talk | contribs) (Enabled code collapsing for layouts)
Jump to: navigation, search

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.

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:

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.