The mioscripting blog

The objective of this tuto is to learn how to create new button and how to make switch button in order to access from the same button two different functions.

First let’s remove the original menu button and replace it with a new one of our own taste.

Open the mapnavigate_320_240.ui and find the line:

<layer ui_navigate_static_head >

<PUSHBUTTON btn_st_navigate_menu bmp="btn_cockpit_menu.bmp#2" align="center" valign="center+5" text="Menu" x=0 y=205 z=30 fonttype=buttonlabel_menu2 onselect='btn_tepsi.phase 0, run open_navigate_quickmenu, ui_cockpit_find.show, run close_navigate_scrollbar' ondeselect='vAutoGo.Set 0, run close_navigate_quickmenu' rawkey=65>

As you can see this is a PUSHBUTTON witch have two states: onselect action and ondeselect action. Replace the bmp property with the name of our new button:

bmp=’navigate_menu_btn.bmp’ but where do we have to upload the new button image? Remember that the menu button colour change when you are in daylight or in night mode. So logically we have to upload the button image in the daylight directory.

Let’s do the change and see what’s happen:

Too easy, No? Try to switch to the night mode and you’ll get an error: Failed to open ui_night/navigate_menu_btn.bmp.

If you want to create a menu button that looks different in night mode then you have to copy it in the night directory. For my skin, I don’t use two different menu buttons and to avoid to waste place and copy the same image in the daylight and night directory, I only upload the menu image in the ui_mio directory and change accordingly the bmp property:

bmp=’ui_mio/navigate_menu_btn.bmp’

Do the same with the navigate_top.bmp image. Copy it in the ui_mio directory and change the bmp property as follow:

<SPRITE nav_spr_top1 x=0 y=0 z=1 bmp="ui_mio/navigate_top.bmp">

Let’s see if it works?

Yes, now our new cockpit works either in day or night mode.

The menu button font doesn’t really look great; Tahoma font isn’t my favourite font. Why not change that default font with another one. Procedure is quite simple; just upload your favourite font that reside on your desktop (windowsfonts) to the My Flash DiskmiomapMioMap directory of your device. For my skin, I choose to upload the comic.ttf font. Now just add the font=’comic’ and fontsize=18 properties for the PUSHBUTTON:

<PUSHBUTTON btn_st_navigate_menu bmp="ui_mio/navigate_menu_btn.bmp" align="center" valign="center+5" text="Menu" x=0 y=205 z=30 fonttype=buttonlabel_menu2 font="comic" fontsize=18 onselect='btn_tepsi.phase 0, run open_navigate_quickmenu, ui_cockpit_find.show, run close_navigate_scrollbar' ondeselect='vAutoGo.Set 0, run close_navigate_quickmenu' rawkey=65>

It looks better.

Now, let’s do the necessary changes to show the actual speed in our new cockpit. If you read my previous tuto, you know already how to do it.

To setup the actual speed, open the mapcockpit_320_240.ui and look for the

<layer ui_cockpit_actualspeed>.

For my skin, I decided to modify the fonttype called (1) FONTTYPE=font_speedlimit_above and (2) FONTTYPE=font_speedlimit_below in the /daylight/main_320_240_scheme.ui file.

For (1) & (2) I choose de following setup:

<FONTTYPE font_speedlimit_below color=#04defe font="tahoma" fontsize=36 >

<FONTTYPE font_speedlimit_above color=#ed1e24 font="tahomabd" fontsize=36>

For the ui_cockpit_actualspeed layer I choose the following setup:

<TEXT txt_navmain_info_speed x=5 y=158 w=40 z=11 align="RIGHT" FONTTYPE=font_speedlimit_below text="" glowsize=2>

<TEXT txt_navmain_info_speedmetric x=45 y=165 w=22 h=12 z=11 L2R=1 align="RIGHT" text="km/h" font="tahomabd" fontsize=7 color=#04defe >

<TEXT txt_navmain_info_speed_red x=5 y=158 w=40 h=22 z=11 L2R=1 align="RIGHT" FONTTYPE=font_speedlimit_above text="" glowsize=2 hide>

<TEXT txt_navmain_info_speedmetric_red x=45 y=165 w=22 h=12 z=11 L2R=1 align="RIGHT" text="km/h" font="tahomabd" fontsize=6 color=#ed1e24 hide>

What is new here is the glowsize property which is very useful to accentuate the contrast and have a better view of the speed in the cockpit.

Next thing to do is to adjust the layer position (as we did for the time). Open the main_320_240.ui file, look for:

<layer ui_cockpit_actualspeed type="vector" x=0 y=103 z=9000 w=65 h=20>

And change that line as follow (if you don’t know why….read my previous tuto)

<layer ui_cockpit_actualspeed type="vector" x=0 y=0 z=9000 w=70 h=240>

The txt_navmain_info_speed is a variable which needs to be frequently refreshed (of course…). The scripts that do the job (as for the time, see my previous tuto) are located in the advsettings_mio.ui file under <script sc_cockpit_field_update_nav_default> and <script sc_cockpit_field_update_no_nav_default>.

You can see that the ui_cockpit_actualspeed is hidden by default: ui_cockpit_actualspeed.hide

The “hide” property is only changed to “show” when speed is selected to be shown in one of the tree navigation fields. But we want the speed to be shown permanently……

Firstly, change the hide property (ui_cockpit_actualspeed.hide) to ui_cockpit_actualspeed.show in the sc_cockpit_field_update_nav_default.

Then, in the section “sc_cockpit_field_update_no_nav_default” (this script is used when no route is defined), you’ll see that the “ui_cockpit_actualspeed” positions’ layer is changed accordingly to vCockpitX1 and vCockpitY1 (when no route is defined, speed is show by default in the second navigation field)

Comment the two lines as follow (this is another way to kill the command that modify the field position):

; ui_cockpit_speed_limit.x vCockpitX2

; ui_cockpit_speed_limit.y vCockpitY2

Let’s save and upload to try our new modifications. To see the speed in the cockpit, just define a route and start fly over process:

Ok, the speed is correctly positioned but there is still a lot of works to do. Indeed, the direction distance and the three navigation fields still need to be adapted to our new cockpit.

Now, it’s up to you, you know how to do it………here is the final result:

Some tips:

1/ to remove the speed limit that appears on the map, just comment all lines related to the

<LAYER ui_speed_limit_on_map> in the mapnavigate_ file and use the definition layer in the mapcockpit_ file (uncomment the command lines)

2/ to center the directions arrow look for: <uselayer directions_arrow/>

and to correctly position distance to next manoeuvre look for: txt_direction_distance.