Difference between revisions of "OSD"

From Navit's Wiki
Jump to: navigation, search
(Cleaning page after creating OSD_Layout page)
(Massive changes, as there were some errors on the original page (re. osd types). Changed the structure to take the user through the flow of an osd item, implementing additional attributes each time.)
Line 1: Line 1:
The On Screen Display (OSD) provides status information and controls blended directly onto the map.
+
The On Screen Display (OSD) provides status information and controls blended directly onto the map. These can be implemented using the <osd ... /> tag inside [[Configuring_Navit#A_deeper_look_at_the_XML_file|navit.xml]]. Example layouts can be found at [[OSD_Layouts|OSD_Layouts]].
  
Current OSD types:
+
=Enable/Disable=
 +
An osd item can be enabled/disabled using the following:
  
* "compass"
+
    <osd enabled="yes" />
* "navigation_next_turn"
+
    <osd enabled="no" />
* "text"
+
 
* "speed_warner"
+
=Position=
* "toogle_announcer"
+
The position of an element is specified in x and y pixels from the top-left hand corner of the screen. Negative values will position the element with respect to the bottom-right hand corner of the screen.
* "gps_status"
+
 
* "volume"
+
For example:
* "position_speed"
 
* "position_coord_geo"
 
* "position_direction"
 
* "position_height"
 
* "button" - with possible commands to use:
 
**gui.fullscreen()
 
**gui.menu()
 
**gui.get_data()
 
**zoom_in()
 
**zoom_out()
 
**speech.active
 
  
 +
    <osd enabled="yes" x="0"  y="0"  />
 +
    <osd enabled="yes" x="10"  y="10"  />
 +
    <osd enabled="yes" x="-10" y="-10" />
 +
    <osd enabled="yes" x="10"  y="-10" />
  
 +
* The first osd item is placed in the top left hand corner of the screen.
 +
* The second osd item is placed 10 pixels right from the left-hand-side of the screen and 10 pixels down from the top of the screen (i.e. top left of the screen).
 +
* The third osd item is placed 10 pixels left from the right-hand-side of the screen and 10 pixels up from the bottom of the screen (i.e. bottom right of the screen).
 +
* The fourth osd item is placed 10 pixels right from the left-hand-side of the screen and 10 pixels up from the bottom of the screen (i.e. bottom left of the screen).
  
The button type can be used to provide zoom in/zoom out functionality with [[Gui_internal|gui_internal]] (which does not itself draw any controls onto the map view).
+
=Size=
Example [[Configuring_NavIt#A_deeper_look_at_the_XML_file|navit.xml]] contents:
+
The sizes of each item can be explicitly set in pixels using the 'w[idth]' and 'h[eight]' attributes.
  
    <osd type="button" x="48"  y="48"  command="gui.fullscreen()" src="toggle_fullscreen.xpm" />
+
For example:
    <osd type="button" x="-96" y="48"  command="gui.menu()"      src="menu.xpm" />
 
    <osd type="button" x="-96" y="-96" command="zoom_in()"        src="zoom_in.xpm" />
 
    <osd type="button" x="48"  y="-96" command="zoom_out()"      src="zoom_out.xpm" />
 
  
The x and y coordinates depend on your screen resolution and the size of your bitmaps. The origin is at the upper lefthand corner of the screen. Use negative values to position the buttons relative to the right resp. bottom edge of the screen. Besides zoom, the commands include gui_internal_menu and gui_internal_fullscreen.
+
    <osd enabled="yes" x="0" y="0" w="100" h="50" />
  
You can determine the supported xml options for each OSD type by reading [http://navit.svn.sourceforge.net/viewvc/navit/trunk/navit/navit/osd/core/ navit/osd/core/osd_core.c], searching for "attr_xxx" inside
+
This will create an item of width 100 and height 50 pixels from the top-left corner of the item. The top-left corner of the item is also the point which is used when positioning the item using the 'x' and 'y' attributes.
the osd_xxx_new() functions. Most types have at least an "x" and "y" option that determine the location of their OSD.
 
  
===Align===
+
=Alignment=
 +
Certain osd items may be aligned. For example, text may be aligned centrally within an item. Alignment is specified using:
  
It is possible to set item alignment. Align attribute accept several values:
+
    <osd enabled="yes" x="0" y="0" w="100" h="50" align="ALIGN_NUMBER"/>
  
 +
Where the alignment number can be any of the following:
 
* "1": Align to the top
 
* "1": Align to the top
 
* "2": Align to the bottom
 
* "2": Align to the bottom
Line 48: Line 44:
 
* "0" or "12": Align to the center (horizontal)
 
* "0" or "12": Align to the center (horizontal)
  
To get combination of alignment you have to sum vertical and horizontal alignment, so align="5" would give top left alignment
+
To get a combination of alignment you have to sum vertical and horizontal alignment, so align="5" would give top left alignment.
 +
 
 +
=Background Color=
 +
The osd item's background color can be changed using the 'background_color' attribute. For example:
 +
 
 +
    <osd enabled="yes" x="0" y="0" w="100" h="50" align="0" background_color="#000000c8" />
 +
 
 +
The color is specified in standard 6-figure hexadecimal, with the last two figures specifying amount of transparency/opacity (FF = fully transparent, 99 = fully opaque). The above color is a translucent black.
 +
 
 +
As can be seen, the previous attributes can be combined to create a filled box of particular dimensions and in a particular position. However, a box is useless without content, which is where the 'type' attribute comes in.
 +
 
 +
=Types=
 +
An osd type is implemented using:
 +
 
 +
    <osd enabled="yes" x="10" y="10" type="OSD_TYPE" />
  
 +
 +
Current OSD types (from [http://navit.svn.sourceforge.net/viewvc/navit/trunk/navit/navit/osd/core/ navit/osd/core/osd_core.c]):
 +
* "compass"
 +
* "[[#navigation_next_turn|navigation_next_turn]]"
 +
* "[[#button|button]]"
 +
* "toggle_announcer"
 +
* "speed_warner"
 +
* "[[#text|text]]"
 +
* "gps_status"
 +
* "volume"
 +
 +
For example:
 +
 +
    <osd enabled="yes" x="10" y="10" type="compass" />
 +
    <osd enabled="yes" x="10" y="10" type="gps_status" />
 +
    <osd enabled="yes" x="10" y="10" type="text" />
 +
 +
You can determine the supported xml options for each OSD type by reading [http://navit.svn.sourceforge.net/viewvc/navit/trunk/navit/navit/osd/core/ navit/osd/core/osd_core.c], searching for "attr_xxx" inside
 +
the osd_xxx_new() functions. Most types have at least an "x" and "y" option that determine the location of their OSD.
 +
 +
==navigation_next_turn==
 +
This osd item displays an image of the next turn which the vehicle will have to undertake. Nothing is displayed if routing is not on (i.e when just using navit for GPS instead of sat-nav).
 +
 +
An example use is:
 +
 +
    <osd enabled="yes" type="navigation_next_turn" x="0" y="-75" />
 +
 +
==button==
 +
The button type creates a placeholder in which a specified image is clickable and toggles one of the following options:
 +
*gui.fullscreen()
 +
*gui.menu()
 +
*gui.get_data()
 +
*zoom_in()
 +
*zoom_out()
 +
*speech.active
 +
 +
Example [[Configuring_NavIt#A_deeper_look_at_the_XML_file|navit.xml]] contents:
 +
 +
    <osd enabled="yes" type="button" x="48"  y="48"  command="gui.fullscreen()" src="toggle_fullscreen.xpm" />
 +
    <osd enabled="yes" type="button" x="-96" y="48"  command="gui.menu()"      src="menu.xpm" />
 +
    <osd enabled="yes" type="button" x="-96" y="-96" command="zoom_in()"        src="zoom_in.xpm" />
 +
    <osd enabled="yes" type="button" x="48"  y="-96" command="zoom_out()"      src="zoom_out.xpm" />
 +
 +
 +
The button type is useful when using [[Gui_internal|gui_internal]], as it could provide zoom in/out functionality. [[Gui_internal|gui_internal]] does not draw any controls onto the map view, so unless you have a scroll wheel the zoom in/out functionality will be missing.
 +
 +
==text==
 +
The text type is useful for displaying current GPS data on the map view (viewable in the status bar in GTK mode).
 +
This is implemented in the following manner:
 +
 +
    <osd enabled="yes" type="text" label="${GPS_OR_ROUTE_DATA}" x="-200" y="0" />
 +
 +
Some options include:
 +
 +
    <nowiki><!-- ALWAYS AVAILABLE (if GPS connected) --></nowiki>
 +
    <nowiki><!-- Current Speed (integer in km/h) --></nowiki>
 +
    <osd enabled="yes" type="text" label="${vehicle.position_speed}" x="-200" y="0" />
 +
    <nowiki><!-- Current Coordinate Position --></nowiki>
 +
    <osd enabled="yes" type="text" label="${vehicle.position_coord_geo}" x="-200" y="0" />
 +
    <nowiki><!-- Current Direction of Travel (integer from<!-- 0-360) --></nowiki>
 +
    <osd enabled="yes" type="text" label="${vehicle.position_direction}" x="-60" y="-80" /
 +
    <nowiki><!-- Number of Satellites Used / Number of Satellites Available --></nowiki>
 +
    <osd enabled="yes" type="text" label="${vehicle.position_sats_used}/${vehicle.position_qual}" x="-50"
 +
  y="40" />
 +
 +
    <nowiki><!-- ONLY AVAILABLE WHEN ROUTING (i.e in Sat-Nav mode) --></nowiki>
 +
    <nowiki><!-- Currently on ROADNAME --></nowiki>
 +
    <osd enabled="yes" type="text" label="Currently on ${navigation.item.street_name_systematic}" x="0" y="0" />
 +
    <nowiki><!-- Distance to next turn (in metres) --></nowiki>
 +
    <osd enabled="yes" type="text" label="${navigation.item[1].length[named]}" x="0" y="-105" />
 +
    <nowiki><!-- Next turn is onto ROADNAME --></nowiki>
 +
    <osd enabled="yes" type="text" label="Turn onto ${navigation.item[1].street_name_systematic}" x="0" y="-105" />
 +
    <nowiki><!-- Estimated time of arrival (HH:mm) --></nowiki>
 +
    <osd enabled="yes" type="text" label="ETA ${navigation.item.destination_time[arrival]}" x="-150" y="-30" />
 +
    <nowiki><!-- Entire route distance remaining (in km) --></nowiki>
 +
    <osd enabled="yes" type="text" label="DR ${navigation.item.destination_length[named]}" x="-85" y="-60" />
 +
    <nowiki><!-- Time remaining until destination is reached (HH:mm) --></nowiki>
 +
    <osd enabled="yes" type="text" label="TR ${navigation.item.destination_time[remaining]}" x="-85" y="-90" />
 +
 +
When using the text type, it is useful to set the width and height of each item, in addition to aligning the text using the 'align' attribute.
  
 
The OSD layer is still under development.
 
The OSD layer is still under development.
  
===Example===
+
=Example=
 +
An example implementation is shown below.
 +
 
 
[[Image:Navit-internal-osd-fon.png|500px]]
 
[[Image:Navit-internal-osd-fon.png|500px]]
  
=== Icon source setting for OSD ===
+
*Top left is type="compass"
 +
*Bottom left is type="navigation_next_turn"
 +
*Top right is type="text" with label="${navigation.item.destination_time[arrival]}" and label="${navigation.item.destination_length[named]}"
 +
 
 +
More osd layouts can be found at [[OSD_Layouts|OSD_Layouts]].
 +
 
 +
= Icon source setting for OSD =
  
 
The N8x0 platform (and possibly others) is not very supportive of .svg image files. Navit on the other hand relies heavily on svg. The result is often missing images from your display. In the examples above you may need to replace the .svg with .png. The solution for Next Turn is to use the following config addition:
 
The N8x0 platform (and possibly others) is not very supportive of .svg image files. Navit on the other hand relies heavily on svg. The result is often missing images from your display. In the examples above you may need to replace the .svg with .png. The solution for Next Turn is to use the following config addition:
Line 69: Line 167:
 
  $ cd $NAVIT_SHAREDIR/xpm
 
  $ cd $NAVIT_SHAREDIR/xpm
 
  $ for f in *wh.svg; do convert -background none -resize 48x48 $f `basename $f .svg`_48_48.png; done
 
  $ for f in *wh.svg; do convert -background none -resize 48x48 $f `basename $f .svg`_48_48.png; done
 +
[http://www.example.com link title]

Revision as of 18:28, 11 July 2009

The On Screen Display (OSD) provides status information and controls blended directly onto the map. These can be implemented using the <osd ... /> tag inside navit.xml. Example layouts can be found at OSD_Layouts.

Enable/Disable

An osd item can be enabled/disabled using the following:

   <osd enabled="yes" />
   <osd enabled="no"  />

Position

The position of an element is specified in x and y pixels from the top-left hand corner of the screen. Negative values will position the element with respect to the bottom-right hand corner of the screen.

For example:

   <osd enabled="yes" x="0"   y="0"   />
   <osd enabled="yes" x="10"  y="10"  />
   <osd enabled="yes" x="-10" y="-10" />
   <osd enabled="yes" x="10"  y="-10" />
  • The first osd item is placed in the top left hand corner of the screen.
  • The second osd item is placed 10 pixels right from the left-hand-side of the screen and 10 pixels down from the top of the screen (i.e. top left of the screen).
  • The third osd item is placed 10 pixels left from the right-hand-side of the screen and 10 pixels up from the bottom of the screen (i.e. bottom right of the screen).
  • The fourth osd item is placed 10 pixels right from the left-hand-side of the screen and 10 pixels up from the bottom of the screen (i.e. bottom left of the screen).

Size

The sizes of each item can be explicitly set in pixels using the 'w[idth]' and 'h[eight]' attributes.

For example:

   <osd enabled="yes" x="0" y="0" w="100" h="50" />

This will create an item of width 100 and height 50 pixels from the top-left corner of the item. The top-left corner of the item is also the point which is used when positioning the item using the 'x' and 'y' attributes.

Alignment

Certain osd items may be aligned. For example, text may be aligned centrally within an item. Alignment is specified using:

   <osd enabled="yes" x="0" y="0" w="100" h="50" align="ALIGN_NUMBER"/>

Where the alignment number can be any of the following:

  • "1": Align to the top
  • "2": Align to the bottom
  • "0" or "3": Align to the center (vertical)
  • "4": Align to the left
  • "8": Align to the right
  • "0" or "12": Align to the center (horizontal)

To get a combination of alignment you have to sum vertical and horizontal alignment, so align="5" would give top left alignment.

Background Color

The osd item's background color can be changed using the 'background_color' attribute. For example:

   <osd enabled="yes" x="0" y="0" w="100" h="50" align="0" background_color="#000000c8" />

The color is specified in standard 6-figure hexadecimal, with the last two figures specifying amount of transparency/opacity (FF = fully transparent, 99 = fully opaque). The above color is a translucent black.

As can be seen, the previous attributes can be combined to create a filled box of particular dimensions and in a particular position. However, a box is useless without content, which is where the 'type' attribute comes in.

Types

An osd type is implemented using:

   <osd enabled="yes" x="10" y="10" type="OSD_TYPE" />


Current OSD types (from navit/osd/core/osd_core.c):

For example:

   <osd enabled="yes" x="10" y="10" type="compass" />
   <osd enabled="yes" x="10" y="10" type="gps_status" />
   <osd enabled="yes" x="10" y="10" type="text" />

You can determine the supported xml options for each OSD type by reading navit/osd/core/osd_core.c, searching for "attr_xxx" inside the osd_xxx_new() functions. Most types have at least an "x" and "y" option that determine the location of their OSD.

navigation_next_turn

This osd item displays an image of the next turn which the vehicle will have to undertake. Nothing is displayed if routing is not on (i.e when just using navit for GPS instead of sat-nav).

An example use is:

   <osd enabled="yes" type="navigation_next_turn" x="0" y="-75" />

button

The button type creates a placeholder in which a specified image is clickable and toggles one of the following options:

  • gui.fullscreen()
  • gui.menu()
  • gui.get_data()
  • zoom_in()
  • zoom_out()
  • speech.active

Example navit.xml contents:

   <osd enabled="yes" type="button" x="48"  y="48"  command="gui.fullscreen()" src="toggle_fullscreen.xpm" />
   <osd enabled="yes" type="button" x="-96" y="48"  command="gui.menu()"       src="menu.xpm" />
   <osd enabled="yes" type="button" x="-96" y="-96" command="zoom_in()"        src="zoom_in.xpm" />
   <osd enabled="yes" type="button" x="48"  y="-96" command="zoom_out()"       src="zoom_out.xpm" />


The button type is useful when using gui_internal, as it could provide zoom in/out functionality. gui_internal does not draw any controls onto the map view, so unless you have a scroll wheel the zoom in/out functionality will be missing.

text

The text type is useful for displaying current GPS data on the map view (viewable in the status bar in GTK mode). This is implemented in the following manner:

   <osd enabled="yes" type="text" label="${GPS_OR_ROUTE_DATA}" x="-200" y="0" />

Some options include:

   <!-- ALWAYS AVAILABLE (if GPS connected) -->
   <!-- Current Speed (integer in km/h) -->
   <osd enabled="yes" type="text" label="${vehicle.position_speed}" x="-200" y="0" />
   <!-- Current Coordinate Position -->
   <osd enabled="yes" type="text" label="${vehicle.position_coord_geo}" x="-200" y="0" />
   <!-- Current Direction of Travel (integer from<!-- 0-360) -->
   <osd enabled="yes" type="text" label="${vehicle.position_direction}" x="-60" y="-80" /
   <!-- Number of Satellites Used / Number of Satellites Available -->
   <osd enabled="yes" type="text" label="${vehicle.position_sats_used}/${vehicle.position_qual}" x="-50"
  y="40" />
   <!-- ONLY AVAILABLE WHEN ROUTING (i.e in Sat-Nav mode) -->
   <!-- Currently on ROADNAME -->
   <osd enabled="yes" type="text" label="Currently on ${navigation.item.street_name_systematic}" x="0" y="0" />
   <!-- Distance to next turn (in metres) -->
   <osd enabled="yes" type="text" label="${navigation.item[1].length[named]}" x="0" y="-105" />
   <!-- Next turn is onto ROADNAME -->
   <osd enabled="yes" type="text" label="Turn onto ${navigation.item[1].street_name_systematic}" x="0" y="-105" />
   <!-- Estimated time of arrival (HH:mm) -->
   <osd enabled="yes" type="text" label="ETA ${navigation.item.destination_time[arrival]}" x="-150" y="-30" />
   <!-- Entire route distance remaining (in km) -->
   <osd enabled="yes" type="text" label="DR ${navigation.item.destination_length[named]}" x="-85" y="-60" />
   <!-- Time remaining until destination is reached (HH:mm) -->
   <osd enabled="yes" type="text" label="TR ${navigation.item.destination_time[remaining]}" x="-85" y="-90" />

When using the text type, it is useful to set the width and height of each item, in addition to aligning the text using the 'align' attribute.

The OSD layer is still under development.

Example

An example implementation is shown below.

Navit-internal-osd-fon.png

  • Top left is type="compass"
  • Bottom left is type="navigation_next_turn"
  • Top right is type="text" with label="${navigation.item.destination_time[arrival]}" and label="${navigation.item.destination_length[named]}"

More osd layouts can be found at OSD_Layouts.

Icon source setting for OSD

The N8x0 platform (and possibly others) is not very supportive of .svg image files. Navit on the other hand relies heavily on svg. The result is often missing images from your display. In the examples above you may need to replace the .svg with .png. The solution for Next Turn is to use the following config addition:

<osd enabled="yes" type="navigation_next_turn" x="325" y="-135" w="150" h="100" align="15"
   background_color="#a60c0f00" icon_src="$NAVIT_SHAREDIR/xpm/%s_wh_48_48.png" />

Note the icon_src parameter specifies the template for the image file names. This should work for all OSD items.

If you don't have the .png files already, you can create them this way:

$ cd $NAVIT_SHAREDIR/xpm
$ for f in *wh.svg; do convert -background none -resize 48x48 $f `basename $f .svg`_48_48.png; done

link title