Difference between revisions of "OSD Layouts"

From Navit's Wiki
Jump to: navigation, search
(10.2" netbook layout)
(10.2" glossy netbook layout)
Line 714: Line 714:
 
<br />
 
<br />
 
===10.2" glossy netbook layout===
 
===10.2" glossy netbook layout===
 
+
<center>
 
[[File:glossy.png| 350px]]
 
[[File:glossy.png| 350px]]
 
&nbsp;
 
&nbsp;
Line 744: Line 744:
  
 
[[File:Up2.png| 70px ]][[File:Set1.png| 70px ]][[File:Calculate3.png| 70px ]][[File:No_destination1.png| 70px ]][[File:Def.png| 70px ]][[File:Route2.png| 70px ]][[File:Design2.png| 70px ]]
 
[[File:Up2.png| 70px ]][[File:Set1.png| 70px ]][[File:Calculate3.png| 70px ]][[File:No_destination1.png| 70px ]][[File:Def.png| 70px ]][[File:Route2.png| 70px ]][[File:Design2.png| 70px ]]
 
+
</center>
 
{| width="100%" class="collapsible collapsed wikitable"
 
{| width="100%" class="collapsible collapsed wikitable"
 
|-
 
|-

Revision as of 11:52, 28 May 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.

Notes

  • 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

Tip

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

Features:

  • 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

Screenshot-2009-02-06-21-59-28.png


NSeries Layout 2

Osd2.png


NSeries Layout 3

OSDSimple.png



Neo FreeRunner

FreeRunner Layout 1

FR-3D-OSD2.png


FreeRunner Layout 2

Navit-FR-OSD-POI-Firenze.png


FreeRunner Layout 3

Navit-FR-OSD-POI-Firenze2.png


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" />

and

   <vehicle ...

After that paste:

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

under

   <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.

Nibbler01-0.2.png

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.

Lcars-0.1.png

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" />


Netbook Layout 1

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: Transparent rectangle.png.


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

Keybindings

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.
  • Key: SPACEBAR
    • 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.

XML

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.



Netbook Layout 2

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. The map layout in the following screenshots can be found at OSM Mapnik layout style.

The following screenshots show the two main OSD modes. The left layout is during tracking mode (i.e. no destination set), whilst the right layout shows the OSD layout during routing. The OSD items are almost exactly the same as Netbook Layout 1, with the exception of the removal of the speed_cam OSD and the compass OSD.

Netbook Layout 2 tracking.png   Netbook Layout 2 routing.png

Special Features

  • The layouts swap between tracking and routing mode automatically, depending upon whether a route has been calculated or not.
  • The three icons in the lower right:
    • 2D/3D Button: Toggles to 2D when 3D mode is active, and vice-versa. Toggle between the two modes by clicking this button, or using the SPACEBAR keybinding.
    • Speaker button: Toggles to show the state of speech in Navit. Toggle between speech on/off by clicking this button or using the 's' keybinding.
    • Car icon: this icon is not a button, but shows the state of routing.

To use the icons, download the following. Note that on my setup (Ubuntu) I first have to convert these png's to xpm files, otherwise the icons have a blue border around them (see On_Screen_Display#Transparent_Icons_and_Overlays for more information).
2D.png 3D.png Speech on.png Speech off.png No destination.png Destination set.png Calculating route.png Routing.pngNo route.png

Keybindings

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.
  • Key: SPACEBAR
    • Bound to the 3D/2D icon. Press this key to toggle between birds-eye and 3D view
  • Key: s
    • Bound to the speaker icon. Press this key to toggle speech on/off.

XML

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! The special icons in this xml point to the xpm versions. If you keep using the png versions, make sure you change the path.




10.2" glossy netbook layout

Glossy.png   Glossy2.png
DESCRIPTION:

KEYS:
x = zoom in
y = zoom out
c = northing on/off
space = show whole route ( only in navigation mode, else move to the current position)
a = autozoom on/off
s = sound on/off
. = fullscreen on/off
tab = 3d mode ( northing off, 18 degree pitch, special zoom ) and 2d mode ( northing on, no pitch and different zoom level)


SCREEN:
top:
- arrow above the distance until turn
- middle: the street following, so you can look for street signs, if navigation is not comprehensible

- right: GPS time, time, signal strengh and altitude above sea level



bottom from left to right:
- routing status, distance left and travel time left
- speedwarner, current and average speed in km/h

Up2.pngSet1.pngCalculate3.pngNo destination1.pngDef.pngRoute2.pngDesign2.png



10.2" netbook layout

Green.png   Green1.png

DESCRIPTION:

KEYS:
x = zoom in
y = zoom out
c = northing on/off
space = show whole route ( only in navigation mode, else move to the current position)
a = autozoom on/off
s = sound on/off
f = fullscreen on/off
tab = 3d mode ( northing off, 18 degree pitch, special zoom ) and 2d mode ( northing on, no pitch and different zoom level)


SCREEN:
top:
- left: the navit icon is linked to 3d mode ( same function as the tab key )
- middle: the street following, so you can look for street signs, if navigation is not comprehensible

- right: GPS time and height above sea level bottom from left to right:
- gps status and number of sats used
- distance left above the travel time left
- arrow above the distance until turn
- current speed in km/h above distance to next speed cam ( turns red, when you come near to one )
- speedwarner ( turns red, if driving too fast)

I really recommend the mbrola voices like used in the given xml. They sound way more naturally than the espeak voice. An attention-grabbing beep tone is played prior to every acoustic output of espeak. Give me your email if you want it.

CAR:
-if you stop moving, back lights become bigger and a stop light appears on top of the car. So it looks like you apply the brakes

speedwarner color is hard coded and normally grey in idle mode.


Available speed cam symbols: Speedcam mobile.png Speedcam.pngRedlight.png3d.png2d.pngRoute.pngNorth.pngNorth2.pngAutozoom.pngAutozoom2.pngUp.pngZoom in.pngZoom out.pngSet.pngCalculate.pngCalculate2.pngNo destination2.png
Bar2.png
Bar.png



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.

Navit0.2.0.png

Navit0.2.0-2.png

Navit0.2.0 6.1.png

explanatory

Glossary:

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 - compass (direction, distance), bottom right corner - number of satellites used / number of satellites available, bottom left corner - actual speed, bottom left corner (top) - speed warning, bottom in the middle (top) - gps status, longitude latitude,

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.


navit GUI routing

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.


navit GUI routing too fast


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.


navit GUI routing Menu

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.


navit GUI routing Indicator

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.
<br

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


navit GUI driving

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:
http://rapidshare.com/files/451095464/navit-xpm-additional-QVGA-240x240.zip
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:
http://wiki.navit-project.org/index.php/Internal_GUI/Menu_configurations#QVGA_Square_.28240x240.29_Configuration_1_.28German.29


Yakumo Delta 5 X

  • fits for resolution 320x240 and 240x320

Yakumo Delta 5 X horizontal

Yakumo Delta 5 X vertical


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

NavitScreenshot.jpg

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



Android

Android layout 800x480

NavitArch1.png

NavitArch2.png NavitArch3.png

Android layout designed for Archos 5 IT. It can be used in portrait and landscape mode. Files for layout are available here http://depositfiles.com/files/6y0mpbv2p [1] Place all files in /navit folder on your internal /sdcard

The item showing current speed (left-bottom) is clickable. It changes osd configuration.

Carspeed.png Compas.png Down.png Minus2.png Next.png Odom.png Plus2.png Poioff.png Trid.png Upp.png

An other android layout 800x480

AndroidLayout800x480 H.png AndroidLayout800x480 V.png

An android layout for 800x480 device. It can be used in portrait and landscape mode

Description :

  • On top, distance to destination and arrival time
  • On left bottom, next direction
  • On bottom : next street
  • On right bottom : speed en speed limit (with speed warning)
  • The radar warning appears on the left of speed (!!! UNTESTED !!!)

Download :