[Guide] How to create on-board computer mod.

[piva]

Contents.

Part 1. Mod structure.
Part 2. Coordinates.
Part 3. Elements.
Part 4. Colors.
Part 5. Images.
Part 6. Fonts
Part 7. Alignments.

Practice
Practice. Introduction.
Practice. Planning.
Practice. Start working
Practice. Working on...
Practice. Using icons and layers.
Practice. Fuel bar...
Practice. Air bar special alignment.
Practice. Final.

Downloadable content

Download example

Alternate link

SCS Wiki page

https://modding.scssoft.com/wiki/Docume ... boards_IDs

Thanks to Max for notes, help and support.

[piva]

Not matter what text editor you use for create this mod, but it MUST support utf-8 format for some special characters like "°" (degree symbol)

Part 1 - Mod structure.

Mod structure folders
/ui/dashboard/<name of dashboard computer file>.sii && Here is main dashboard file
/ui/template/dashboard_text.<your unique mod identifier>.sii && Here is templates for frequency used items in dashboard computer file
/material/ui/dashboard/<your mod folder/ && Here is textures for your dashboard computer mod.

Main dashboard file have special structure. Id's 10,20 always must be in dashboard file, otherwise your game will crash. (id:950 removed from list. Thanks to Max for note)
Name of items not matter, but it must be in SCS name specification - 12 symbols length.
You can set comma "." before name of set "_nameless." before name of item- it not matter. Because dashboard computer files generated by SCS tool. But you can see names without "_nameless." in cargo define. Example "cargo_model_match : .scs_flat28"

ui::window .my_dash_mod && This is a main "local"internal name of your mod - root of your tree
my_children[]: .item.1 && first tree item
my_children[]: .item.2 && second tree item
my_children[]: .share.display && third tree item

coords_l: 0 && left position of virtual dashboard area
coords_r: 800 && right position of virtual dashboard area
coords_t: 800 && top position of virtual dashboard area
coords_b: 0 && bottom position of virtal dashboard area
area_l: 0
area_r: 800
area_t: 800
area_b: 0
id: 0 && id - always 0


ui::text .item.1
id: 10 && id 10 always must be in mod file
my_parent: .my_dash_mod


ui::text .item.2
id: 20 && id 20 always must be in mod file
my_parent: .my_dash_mod

ui::group : .share.display
coords_l: 0
coords_r: 800
coords_t: 800
coords_b: 0
id: 950 && id 950 always must be in mod file
my_parent: .my_dash_mod


Most important addition about names. All SCS info stored in game in "tree" structure, so you must always check pair "my_children/my_parent".
For "window" and "group" items - all "my_children" items must have name of "window"/"group" in "my_parent" property.
Of course you can set other parent for item, but in some cases you will see strange dashboard behavior or game will "freeze" when you set recursive pair of "child" and "parent", then game come to infinity loop.

I show color name of "ui::window .my_dash_mod" so all child items .item.1, .item.2 and .share.display have one "my_parent" name of "window".
Don't forget about this "child/parent" pair when you will try to create your own dashboard computer.


I don't have much time to complete this guide, so please stand by.

To be continued....

[cip]

Dear Piva, thank you a lot for your guide! we need such guides for all types of mods! for me it's still an alien territory but I learnt a bit how to make some crashing dashboards working again, and yesterday I managed after one hour of searching, to bring back the clear numbers on electronic speed on the Sisu truck that were blurred because of most probably another truck mod!

anyway creating a new one from scratch as you do is a true piece of art!

[piva]

Removed

[piva]

Part 2. Coordinates.

Many users ask me explain about numbers in this construction.

coords_l: 0
coords_r: 270
coords_t: 570
coords_b: 100

coords_l - is left position of item.
coords_r - right position
coords_t - top position
coords_b - bottom position

All coordinates start from left-bottom corner of dashboard computer uv-layout in truck interior model.
Of course you can put your element everywhere, but it can be outside of visible area of uv-layout.

Here I show uv-layout of Volvo FH 2012. I mark visible area by red square, so you can see how much free space in this layout.

[ external image ]

SCS use it for put dashboard icons in unused area by dashboard computer.
Knox_xss - use unused area to put video fragment file for his TV in Renault Magnum. But you must to know how to re-translate texture area into other part of truck model. You need to update interior truck model for this one.

In many cases you need to pinpoint the area for your icon or text, that you want to put in dashboard computer area.
If image or text can't fitting in this area - it is not shown, and you will think that it is a SCS bug.
Same for text, that can include "," (comma) or other country specific symbols like a "Ç" or "Ź" or something else.
Texts must have height enough to fil all symobols.
A saw some issue with fuel consumption for languages which is used "," as decimal point, so it not fit in character line.
Same for right position. But when line height enough to fit all text line, text can wrap. So you must know about this feature when you will create public dashboard. And don't forget that you custom fonts for dash may not include country specific glyph in this case player will see "??????" instead of your text.

area_l: 0
area_r: 800
area_t: 800
area_b: 0

I ask Max before and he confirm that parameters "area_" irrelevant for dashboard computer at this moment and can be used in any "modal" form in game. But maybe SCS will create "interactive dashboard" in future, so we can limit mouse area with this parameters.
I have not tried to remove this lines from dashboard computer file before, but I will try in some next mod.

To be continued...

[Max]

just note to unit naming:
name is composed from up to 10 tokens (token = 12-char small "string"). the name is used for fast search (token is in fact 64bit integer and we hash by them, you can imagine it as folder system). in some situation you need only link between units instead of whole full name for search, that is place where nameless unit are used - such "name" is used only for loading and construction of data structure and then discarded (switched for pointer only). such name starts with "_nameless" token or simply by "." (empty token), so both "_nameless.aaa" and ".aaa" are nameless units (maybe even the same one, not sure). the dot is shortcut in fact ..
anonymous names that look like "_nameless.25EA.12B0" are engine-generated - it is basically memory address.

if i do not need search, i prefer short names, ideally single token. less memory.

[piva]

Thanks Max for note. I always try to use "short" names, but sometime use more than one "token" for readability.
But, I saw some errors with dashboard mod, when debug. Names like a ".clock" in errors message looks like "_nameless.25EA.12B0" in result game code, so, (how I understand) name with multiply tokens in file, still convert in game to something like "_nameless.xxxx.xxxx" and somewhere inside the game you have "name table" where you matching name "_nameless.clock" with "_nameless.xxxx.xxxx", so, in my opinion, length of few tokens do not matter. Of course I can be wrong, you know game code better. But "names table" is a good practice in programming languages with compile to P-code.

[cip]

Thanks Max, good explanation on "_nameless". I had some questions about the goal of this structure, now it's clear (as clear can be for one who does not know coding)
I have only few questions about what's coming after it, that random combination of numbers and letters is automatically generated at every game load or it's stays as defined initially? then are any rules about the length of the text . I see often 2 groups of 4 characters separated by a dot, sometimes 3 groups of 3 characters.
and yet the game do not accept duplicates as I was hoping, I multiplied one file once with _nameless and the game couldn't load it because of conflict with the original. the problem I had was that I could not use mass edit and I had to modify manually about 50 lines

[piva]

Part 3. Elements.

Main mod element is "ui::window"
Child elements may be
- "ui::group" - Here may be virtual displays or group of elements included in one group, for example few elements of cruise control with cruise control icon and cruise control speed.

- ""ui::text" - Typically used for show icons, drawing elements with unique characteristics

- "ui::text_common" - Typically used for show elements with identical design, - color, font, font size, alignment and so on.

"window" and "group" can contain "my_children" array with child element, all this elements muse have "my_parent" property set with name it parent element - "window" or "group". Of course some of "group" element may not have child elements, for example - blanks display, if you set some info for "shared display".

"group" example (from dashboard computer for kenworth FLD truck)

ui::group : .share.display {
fitting: false

my_children[]: .clock && link to child elements. Here is ".clock", you can writhe "_nameless.clock", but in this case element name must have the same name
my_children[]: .outtemp
my_children[]: .average
my_children[]: .gear
my_children[]: .cruise.control
my_children[]: .engine.brake
my_children[]: .retarder

// Coordinates of "display" - typically size of "window" element
coords_l: 0
coords_r: 800
coords_t: 800
coords_b: 0

id: 950 && "shared display" ID
layer: -1 && drawing layer for rendering
my_parent: .fld && name of "window" element
}


"text" example

ui::text : .back.unlite { && name of child element of "window"
text: "<img src=/material/ui/white.mat xscale=stretch yscale=stretch color=ff101010>" && texture with dark texture not a pure black. About color I will say later

// size of texture
coords_l: 0
coords_r: 800
coords_t: 800
coords_b: 0

// special id:10 for drawing when truck electricity is off
id: 10
layer: -5 && drawing layer
my_parent: .fld && name of parent "window" element, because id:10 typically used for "window" element
}


"text_common" example

ui::text_common : .clock { && name of child element of group ".share.display"
// value that will show in dashboard computer if "ID" is set to 0 or this "ID" is not available in "dashboard" context
value: "55:55"

// name of design element defined in /ui/template/dashboard_text.<your_id>.sii file
look_template: dot.flb.text.right
text: ""
// position and size of element ".clock" - depends of design parameters defined in "dot.flb.text.right"
coords_l: 0
coords_r: 270
coords_t: 570
coords_b: 100

// id of current time. All Id values you can see Here
id: 1050
// drawing layer
layer: 1
my_parent: .share.display && name of parent element ".share.display"
}


to be continued...

[piva]

Part 4. Colors.

Color system for dashboard and other user interface very strange, but ...
Colors format if

AABBGGRR

Where:
AA - is alpha channel transparency
BB - blue color
GG - green color
RR - red color
all this pair written in HEX format from 00 to FF

So if you want set warning text with red color you muse use FF3030FF - here bit brighter than pure red color
same for Blue FFFF2020 or Green - FF20FF20.
Of course you can write:
red - FF0000FF
green - FF00FF00
blue - FFFF0000
orange - FF2080FF

Also here can be used SCS predefined colors like
"@@clr_sel@@" - this is "orange" color of SCS interface
"@@clr_txt@@" - not bright white color
"@@clr_white@@" - pure white color
"@@clr_wotr_blue@@" - color of WoTr job info
"@@clr_help@@" - "help" tutorial color look like light green
and some of pure colors
"@@clr_red@@"
"@@clr_blue@@"
"@@clr_green@@"

I don't have unpacked "locale.scs", so I can't show all colors now.

for example

Code: Select all

"<img src=/material/ui/white.mat xscale=stretch yscale=stretch color=ff3030ff>" 

or

Code: Select all

 "<img src=/material/ui/white.mat xscale=stretch yscale=stretch color=@@clr_red@@>" 

EDIT. At the end of tutorial I will show "practice" - where I will show step-by-step how to create dashboard computer from scratch. Of course will be "our" complete mod available for download, so you can start testing and checking it in the game.