how to edit amigo skin - by freddysam, with chas521 big hel   

how to edit amigo skin - by freddysam, with chas521 big hel

Postby miomoshe » Sun May 23, 2010 8:35 pm

I know it's not the best copy but I didn't have a chance to clean up what I had. Wanted to get it to you right away. You may have to copy and paste any links directly into your browser rather than clicking on a link.


How to edit your skin:
This will be a quick and dirty guide on how to edit your skin for Amigo. Most of the guide applies to Igo8 skins as well.

Part 1:This section will do an overview of the Amigo skin and the basics to edit it.

A. What You Will Edit:

Your data.gro is your main skin file. If you apply additional skins on top of this skin, they will have the "gro" extension and will be found in the following folder: amigo\content\skin\Once we extract the files from the gro, we will be editing files with the extension "ui". These files contain the layout for all the buttons and text inside of Amigo.

B. Tools That You Need:

[color="red"]All Dead links removed--left the rest for information[/color]
HEX editorFile contents search tool - [Please Register or Login to download file]

C. Overview:

Your gro file actually is a little bit more than just a skin. It contains all of the scripts that perform all the functions inside of the skin. The Amigo exe merely provides the platform for the gro file. This makes the gro file very powerful, but it also means that a single mistake inside of your gro will cause your Amigo to stop working. The Amigo exe takes care of generating the maps while the gro file tells the exe what to display, when and how to display it. Using a properly formatted gro file, you could recreate almost any navigation program. Your gro can have multiple folders in its root:
audio - contains all of the wav files
config - contains a lot of minor settings
fonts - contains the secret to life
gfx - contains graphics files dealing with the navigation map
project_config - contains igo_easy.ini which serves the same function as sys.txt
ui_igo_easy - contains the skin and script filesFor the most part, we will be editing the contents inside of the "ui_igo_easy" folder. Inside the ui_igo_easy is:
xxx_xxx - contains the skin and graphic files for a certain resolution. The x's represent the resolution. Ex: 480_272 would be the files for 480x272
common - contains the script files and graphic files.
defaults - contains the default routes and favorites
icons - contains the icons that show up on your map for poi's

D. How to Edit Your Skin:

Step 1 -Convert your gro file to a zip file using the gro converter. The gro converter will automatically create a zip file with the exact same name as your gro in the same folder as your gro. If you already have a zip file by the same name in that folder, it will overwrite it without prompting you. Make a back up copy of your gro file in case your new gro file does not work.

Step 2 -Unzip the contents of the file. Keep the original zip file.

Step 3 -If you want to do a simple edit to the skin, go into the "ui_igo_easy\xxx_xxx\ui" folder. This folder contains all of the "ui" files that describe the interface. The file names usually describe exactly what the file is for. Ex. history_xxx_xxx.uiOpen the ui file you would like with notepad. Edit what you would like. One rule that you must follow is, DO NOT USE THE ENTER KEY TO MAKE A NEW LINE. That will cause your gro to fail. If you want a new line, copy and paste an already existing line and edit it to your liking. If you place an enter anywhere inside the ui, your Amigo will fail to load and it will be next to impossible to figure out what is wrong.In Part 2 of this guide, I will go into detail on how to find the correct ui file to edit.

Step 4 -When you are done editing the files that you want, open the original zip file with winrar. Add only the files you have changed, overwriting the original files. If you tried to create your own zip using all the extracted files, the resulting gro would fail. So once again, add your modded files to the original zip file you created from the gro.

Step 5 -Use gro converter to convert your modded zip file into a gro. This will overwrite gro file you have in that directory with the same name.

Step 6 -Place the gro file back where you found it and start Amigo.

Step 7 -Rinse and repeat. You will most likely not get the results you wanted the first time around. So get used to repeating the process starting with Step 3 until you get it right.


E. How to Edit Your ui Files:

Here is a more in depth guide to editing your ui files:
Rule #1 Never use the enter key to make a new line. Always copy and paste from another part of the ui. LayersYour skin ui files are broken up into various layers. When you go to a new page inside of the interface, you are going to a new "state". Each "state" loads certain layers from the ui files. More about "states" in Part 2. A layer will be visible if the "state" calls it. This is true if the visibility conditions for that layer are satisfied. Ex:<layer ui_EasyNav_Main z=40 visiblemodel="!ui.vDragMode">The layer name is ui_EasyNav_Main. "z" represents the ordering among the other layers (the higher one is on top). "visiblemodel" sets the conditions for visibility. In this case, the layer is visible when the interface variable vDragMode is set to 0 because of the "!" which means "not". If it were visiblemodel="ui.vDragMode" without the "!" then the layer would be visible when the variable vDragMode is set to anything but 0. If visiblemodel is not set, it will be assumed that the layer is visible. This is true unless somewhere in the script you run the command ui_EasyNav_Main.hideButtons, text and sprite? Oh my!Within the layers are various items that show up on the screen:<BUTTON xxx ><TEXT xxx ><SPRITE xxx >The first two are obvious. SPRITE we will just consider to be an image that is not a button. This is not exactly true but will do for now. The xxx is used when the item does not have a name. You could name an item anything you want as long as no other item has the same name. Naming is handy when you want the script to disable a button or change the visibility of an item. Here is an example button:<BUTTON btn_info x=118 y=229 z=35 w=245 h=15 bmp="e_btn_C_info1.bmp#3" visiblemodel="sound.os_muted">"x" represents the distance in pixels from the left of the screen to place the item. "y" represents the distance in pixels from the top of the screen to place the item. "z" represents the order within the layer to order the items. "w" represents the with in pixels of the item. "h" represents the height of the item in pixels. "bmp" represents the bmp file to use as the background for the button. The top left point of the bmp file will always be placed at the x, y location specified. The "#3" is used to because the button bmp actually is made up of three different images representing "rest", "pressed", and "released" states of the button. The visiblemodel for the example uses a system variable instead of a user interface (ui) variable (notice how it is different from the previous example). The name of the button is btn_info. I wanted to force the button to disappear. I could call the command btn_info.hide. I could also make it appear with btn_info.show. This is same with text, sprite, and entire layers.TemplatesWithin an item, you can use a template. Templates are defined separately, usually inside of templates_xxx_xxx.ui but they can be defined almost anywhere. This allows many items to use the same template and be changed simultaneously. Template definitions can also call other templates in their definition. Usually there is a redundancy with templates. As in, a button might define x=2 but call a template that defines x=10. In this case, the button will be placed at x=2. So the order in which parameters are set determines which parameters are used. This comes in handy when you want to use the same exact item, but you want to move it over a bit or have it have different text. Ex.<TEMPLATE CNavinfobtn x=0 w=102 font="tahoma" text="I am the same" align="CENTER" fontsize=12 valign="CENTER">...<BUTTON xxx template=CNavinfobtn y=25 bmp="e_btn_C_info1.bmp#3"><BUTTON xxx template=CNavinfobtn y=125 bmp="e_btn_C_info1.bmp#3"><BUTTON xxx template=CNavinfobtn x=100 y=125 bmp="e_btn_C_info1.bmp#3" text="I am different">The first two buttons will be at x=0 and will say "I am the same". The third button will be at x=100 and y=125 and will say "I am different"With this information you should be able to edit the majority of your Amigo skin.

In Part 2 of this guide, I will cover how to edit image and script files and how to find the exact state\layer\button\text\sprite you want to edit. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Part 2:This section will cover more advanced skin editing and scripting.


A. What You Will Edit:

Your data.gro is your main skin file. If you apply additional skins on top of this skin, they will have the "gro" extension and will be found in the following folder: amigo\content\skin\Once we extract the files from the gro, we will be editing files with the extension "ui". These files contain the layout for all the buttons and text inside of Amigo.

B. Tools That You Need:


[color="red"]All Dead links removed--left the rest for information[/color]
HEX editorFile contents search tool - [Please Register or Login to download file]

C. Overview:

In Part 1, we covered the structure of the gro files and how to do basic edits to layers. I will now cover how to do more advanced edits. Script FilesE. StatesF. SyntaxG. BMP'sH. Tips and TricksD. Script Files:As we discussed before, there are two types of ui files. The ui files located inside of the folder "ui_igo_easy\xxx_xxx\ui" contain the skin files that contain the layouts for every page. The ui files located inside of the folder "ui_igo_easy\common\ui" contain the script files that perform all of the gps functions. In this section, we will examine the different parts of the script files.UI Variables:UI Variables are generally defined in three locations. variable_def.uimodel_variables.uiand inside of the headers of the various script files. A variable definition looks like the following:<var VMorton=0 registermodel permanent><var vEasy=1 registermodel><var VFav>In this example, the variable VMorton has a value of "0" and will be stored when Amigo is turned off. If the value of VMorton is changed, that new value will be stored at shutdown and used when the program is launched again. The variable vEasy has a value of 1. If the value of vEasy is changed, it will stay that way until the unit is reset, in which case vEasy will go back to a value of 1. The variable VFav has no value assigned to it yet. It can be used after it is defined in a script, but if a different script calls it, it will not retain the value that was assigned to it from the previous script. This is because it does not have the "registermodel" tag which tells the program to keep track of its value. All variables assign as "permanent" are stored in the save folder in a file named "PERMANENT_V1.sav". UI variables are created by and used by the skin. System variables, on the other hand, are created by and used by the Amigo exe. We can use and save system variables to UI variables, but they are implemented slightly differently as will be discussed in the syntax section.Header:Most but not all of the script files start with a header. Inside of the header, you can define variables that can be used within the script file you are using or other script files. Scripts:Here is an example script definition:<script sc_SelectHistoryAndGo>my.map.select_history %mydata.history.list.indexrun sc_routeto_show_route</script>This script is called sc_SelectHistoryAndGo. It can be used inside of another script or run directly from inside of a layer with a button. This script grabs the system variable "mydata.history.list.index" and assigns its value to "my.map.select_history". It then runs another script named sc_routeto_show_route and then ends. What you can place inside of a script will be covered in the syntax section.E. States:Here is an example state:<state st_XMLLegalScreen><uselayer ui_XMLLegalScreen/><uselayer ui_Panel_Easy/><uselayer ui_EULAxhtml/><uselayer ui_ScrollButtons/><script init>GETSYSENTRY "eula_accept" "debug" 0 vTmp;runifnot vTmp 0 'vEulaCanAccept.SET 1' ;else_run 'obs_EulaCanAccept.START'vQuickMasterVolMax.set 175run sc_ScrollingLayerInit "ui_EULAxhtml"ui.ui_EULAxhtml.autoscroll 5</script><script done>run sc_ScrollOff </script></state> This state is named st_XMLLegalScreen. It calls to the screen four layers, the first being ui_XMLLegalScreen. This layer must exist and must be defined somewhere in the skin ui files. The state contains two scripts named init and done. The init script is run when the state is first loaded. The done script is run when leaving the state. In the syntax section we will cover how to call a state and transition between them. This can be done with in a script or through a button. F. Syntax:Here we will go over most of the useful commands and how to phrase them.CommentingEverything to the right of a semicolon is considered commenting unless it appears inside of quatation marks.RunThe "run" command is used to run scripts that have been defined:run [script name]The following perform the same task as the run command but only if the conditions are met:runif [statement 1] [statement 2] '[run these commands]'Example:runif VFav 3 'run sc_demo'If VFav=3, then run the script sc_demo. Another example:runif VFav>3 'run sc_demo, run sc_back'If VFav is greater than 3, then run sc_demo and run sc_back. Notice how the comma is used to add more commands to run. else_run '[command to run]'This can be used after a runif command. Example:runif VFav 3 'run sc_demo'else_run 'run sc_demo, run sc_back'In this case, if VFav doesn't equal 3. the else_run commands are executed. else_runif [statement 1] [statement 2] '[run these commands]'This is the same as a runif command but is used when a series of conditions want to be checked. Example:runif VFav 3 'run sc_demo'else_runif VFav 2 'run sc_back'else_run 'run sc_demo, run sc_back'In this example, if VFav = 3 then sc_demo is run and the other two lines are ignored. If VFav = 2 then the first line is ignored, sc_back is run and the third line is skipped. If VFav doesn't equal 3 or 2 then the commands of the third line are run. If you want only one of many choices to run, you would use one runif, followed by as many else_runif commands, and then capped off with an else_run if so desired. The first if condition that is met will be used, and the res will be skipped. Example:runif VFav 3 'run sc_demo'runif VFav>2 'run sc_back'In this example, if VFav is 3, then sc_demo is run and then sc_back is run. If VFav is 4, only sc_back is run.Example:runif VFav 3 'run sc_demo'else_runif VFav>2 'run sc_back'In this example, if VFav is 3, then only sc_demo is run. If VFav is 4, only sc_back is run.If a system variable is used in a runif statement, then it must be used the following way:runif %[system variable] [statement] '[command to run]'Example:runif %route.vehicle_type 5 '.map.primary.center_posy 70'Setting Values to VariablesTo set a value to a UI Variable, you use the following syntax:[variable name].SET [value]Example:VFav.SET 3This sets the value of VFav to 3. You can also use existing variables to assign a value.Example:VFav.SET vTmpHere, we set VFav to whatever value vTmp has. Example:VFav.SET %gps.validHere we set VFav to the value of the system variable gps.valid. The % is used on system variables when we want to call its value, UI variables don't need this.To change the value of a system variable we use the following syntax:.[system variable] [value]or[system variable] [value]Example:.map.breadcrumbs 1orgps.valid VFavHere we set map.breadcrumbs to 1 and save it to system.ini in our save folder. In the second example we set gps.valid to the value contained inside of VFav, but this is not saved to system.ini.This syntax works flawlessly when dealing with numbers. When dealing with with str wstr and other values, it is a little more complicated. I still don't fully understand the syntax involved. Your best bet is to looking at an example of working code and copy it. If any can explain it, please post it. Here is a useful example to draw from:runif %wstr:navigation.distance_to_destination.unit_text L"ft" 'run sc_demo'Here, if the unit on the distance to destination is equal to ft (which stands for feet), then sc_demo is run. Calling ScriptsSo far, we have called scripts using the run command, but we have not discussed the ability to pass values onto that scriptrun [script name] [value 1] [value 2] [value 3] ...When a script is called in this way, we eliminate the need to use temporary variables to pass on key values. This is also handy when we want to use a script for multiple jobs. These values can be called upon in the definition of the script with $1, $2, $3 ...Example:run sc_comparethese 7 VFav...<script sc_comparethese>runif $1>$2 'sc_demo'</script>Here, the script sc_comparethese is run with the values 7 and VFav being sent to it. Inside the script, 7 is compared to see it it is greater than VFav. If 7 is great, sc_demo is run.Calling a StateTo change states, you can simply run the commands:uieffect.grabNEXTSTATE [state] [transition] [direction] [parameters]An easier way to do this is by using a predefine set of scripts and variables that setup your transitions. Example:<script sc_NextStateAnim>uieffect.grabNEXTSTATE $1 $2 $3 $4</script>...<var trMM_mapNoMSND="0:x=26;y=91;width=201;height=115|1 00:x=0;y=0;width=480;height=272">...run sc_NextStateAnim st_EasyNav "3d" 0 "trMM_mapNoMSND"This is a fairly complex transitions that has the screen pan from this portion of the screen:x=26;y=91;width=201;height=115to the next state which takes up the whole screen:x=0;y=0;width=480;height=272You could do much easier transition by calling:run sc_NextStateAnim st_EasyNav "horz_scroll" 1 ""Which would just scroll to the right. Look through existing skins for more ideas.Hiding and Disabling ItemsIn Part 1 I talked about how to set conditions for visiblemodel such that buttons, text, layers...etc would appear and disappear from the screen:visiblemodel="[variable or condition]"Example:visiblemodel="interface.show_exit"or visiblemodel="ui.VFav"If the value inside of the "" is 0 then the item is invisible, otherwise it is visible. ! (not) can be used to reverse this condition such that anthing but zero will make the item invisible but zero will make it visible:visiblemodel="!ui.VFav"You can also set conditons:visiblemodel="ui.VFav=1"If VFav = 1, then the item will be visible, otherwise it will not. You can also combine statements with & (and) and | (or):visiblemodel="ui.VFav&interface.show_exit"Bot h must be non-zero for the item to show.visiblemodel="ui.VFav | interface.show_exit"One of the two need to be non-zero for the item to show.enabledmodel works with the same syntax but only makes a button disabled instead of making it disappear. You can accomplish the same thing from within a script by using the name of the item (button, text, layer, or sprite), by using HIDE, SHOW, DISABLE, ENABLE.Example:txt_longnamedest.HIDEbtn_safe.DISAB LEspt_isfeet.SHOWbtn_unsafe.ENABLEui_santa.HIDEDel ayed CommandsYou can delay the execution of any command by adding a number behind it. The number is the delay in units of (I have no clue what they are). On my device 475 is the same as 14-15 seconds. It may vary from device to device and how busy the processor is.Example:20 run sc_backThis will wait 20 units and then run sc_back.Example:runif vTmp 1 ' 200 run sc_demo'This will wait 200 units to run sc_demo if vTmp is 1.200 runif vTmp 1 'run sc_demo'This will wait 200 units and then check to see if vTmp equals 1. If it does, it will then run sc_demo.ZoomYou can add zoom to a spirit to make it larger or smaller. I don't understand the units of zoom either but I assume 1000 is the same as 100%. Example:<SPRITE xxx x=4 y=99 z=30 iconmodel="navigation.secondary_direction_icon" iconindex=1 visiblemodel="!ui.vRouteCalculation&ui.vseconddire ction=2&navigation.secondary_direction_icon.valid& ui.vIsValidRoute" zoom=742>I use this sprite to create a secondary direction icon that is smaller so that text can fit above it to show the distance until that turn. The zoom being less than 1000 makes it smaller than normal. This might work on buttons, but I've never tried.G. BMP:The image files that are shown on screen are almost always compressed bmp files. The bmp files are located in the common and xxx_xxx folders. If an image bmp is called, it will first be looked for in the xxx_xxx folder. If it can't be found there, it will be searched for in the common folder. It always look in that order. When Amigo is put into night mode, it will look for images inside of xxx_xxx\skin_night first. If it can't find it, it will look in xxx_xxx, then it will look in common\skin_night, and then lastly common. If you would like to edit an image, extract it. Use the bitmap tool to decompress the bmp. Once it is decompressed, you can edit it in any image editor, but make sure to save over the original file and not to create a new file. Also, try not to use excessive amounts of shading and colors as this might prevent the compression of the file. Also, take note of the alpha layer if it does exist. the alpha layer determines the areas and intensities of transparency. Once you are done editing the image file, compress it using the same tool and replace the file in the data.zip. Some images won't decompress using this tool. You can try using the Igo8 editor to load the layer containing the bmp file. Then select the image, and choose save BMP. If you decompress the bmp in this way, you will lose all of the alpha layer information. It has a batch decompress and compress feature that is handy if you are changing resolutions.H. Tips and Tricks:Up until this point we have been looking at the details of editing the skin. Now I will show you how to do things in a practical manor. Searching for an ItemYou often just want to change a small item: a piece of text, the placement of a button, the title of a section. The problem comes in that you have no idea which ui file to look at. The first step is to find something unique about the state that contains the layer that you want to alter. This could be the text on a button "Cancel Route", or the header "Places". Next, extract all of the files of the zip into a folder. Use a tool that can search inside the contents of files (XSearch) to find the unique item. For example, I might search for:text="CancelThis would turn up very few hits, of which I could figure out the correct one. I know the text=" is necessary for defining the text of a button, so I include it to exclude all the random places cancel might be written. You must be careful not to over define your search. The "Cancel Route" example above is actually written as "Cancel\nRoute" in the skin but you would never know that by looking at it. The \n makes it into two lines, but the same can be achieved in other ways. When you find the unique item, take note of the layer it is in. You will not use XSearch or the equivalent program to search for all the states that use that layer. Once you have the correct state, you can figure out all the layers that it uses, and find the item you want to change. Often times, you'll realize the item that needs to be changed is a template inside of template_xxx_xxx.ui. Make sure to search with XSearch to see all the items that will be effected by changing the template. You might be better off just changing that one item. INI FilesBesides ui files, ini files are important for setting up items for Amigo. Here are some and what they do:laneinfo.ini - defines the lines, spacing and image files used for the lane info that apears at the bottom of the screen.laneinfo_signpost.ini - defines the lines, spacing and image files used for the freeway signs that show at the top pf the screen.keyboard.ini - defines the possible keyboard layouts available to you.*color.ini - you can take a wild guess. igo_easy.ini - is you secondary sys.txt. If the skin is just for your device and you never plan on changing you sys.txt, you can incorporate the settings into this file.units.ini - defines the values of all the units used relative to one anotherNotable Filesmain_scheme.ui - Defines the font templatesstartlang_scheme.ui - Defines more font templatesmain.ui - defines which ui files to use.*.spr - always have matching .bmp files. these are animated items such as buttons and the spr is used to define the parameters of the bmp.*.vpr - defines a vector that is most commonly used as compasses in Amigo.Changing Resolutions The Igo Skin Wizard can be used to convert one resolution to another resolution, but it has its limitations.
a. It won't convert the state animation parameters defined in the headers.
b. The images it converts are usually unusable.
c. It has a rounding error and most items will have to be nudged into the proper location.

Here is how to use the tool with an Amigo skin:
1. Convert the gro to a zip using the gro converter.
2. Run the skin wizard and select you .zip file for the item "Skin file name". Click next.
3. Select ui_igo_easy for "UI Directory". Hit UnZip. When finished, click next.
4. Select the Output resolution you want and the Input resolution you want to convert.
5. Change the rules if you would like, hit process to convert the ui files. When finished, click next.
6. Change the settings to your liking and processes the image files. When finished, click next.
7. Pick a name and location to save your new skin. Then click next.
8. Hit Zip. Hit no when it asks you if you want to assign an external image converter. When finished, click next.
9. Click process and it'll show you sys.txt settings you might need to make your skin work. Do not use the "skin" value. It will cause your skin to not load.
10. Hit Exit.

Since the images files usually look bad using this converter, I usually take the original resolution and unzip it into a folder. I then use the bitmap tool and batch decompress the images. I then use photoshop's batch tools to resize all the images. I then use the bitmap tool compress the images again, and over write the images in my converted .zip file from the skin wizard. Using the Igo8 EditorThe Igo8 editor was not design for Amigo. So it has its limitations:a. It does not always display text in the correct location.b. It does not show the transparencies of image files.c. It will often times crash.The best way to use the editor is to look at an individual layer and see if the items are positioned correctly relative to one another. It can also be used to save image files that the bitmap tool can't decompress.The editor has two modes. The first tries to load the entire and skin and simulate Amigo/Igo. To use this mode, select open skin. Navigate to the xxx_xxx directory of your unzipped skin and click ok. If the editor doesn't crash, you can select layers and even states that you want to see. The second mode allows you to load individual ui files. Select open file. Navigate to your ui file and select open. make sure that your ui file is in the correct directory relative to all of the other files. In this mode, you can only see individual layers but not states.
__________________
If it ain't broke don't fix it!

Help us to help you. Make sure your opening post contains your device's name and software. Also a very good idea to include your device's name in the title of your question.
miomoshe offline


Junior Member



 
Joined: Tue May 18, 2010 11:04 am
Posts: 99
Has thanked: 2 times
Been thanked: 1 time

Return to General Discussions about iGO core

 


  • Related topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 4 guests