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

[piva]

Part 7. Alignments.

Most important part of dash mod is Alignments.
Here you must text align on left, right, center for some titles, warnings and so on

Horizontal aligns is "left", "right" and "center"
Vertical aligns is "top","bottom" and "center"
Align can include both horizontal and vertical align is one statement or it can be nested. But sometime "nested" aligns can perform some artifacts with completed image, so you must found proper ratio of simple or nested aligns.

Example of rect


For example. Drawing rectangle for "fuel bar"

text: "<color value=@@clr_sel@@>
<img src=/material/ui/white.mat xscale=stretch height=5><ret>
<align vstyle=bottom><img src=/material/ui/white.mat xscale=stretch height=5></align><ret>
<align hstyle=right><img src=/material/ui/white.mat yscale=stretch width=5></align><ret>
<img src=/material/ui/white.mat yscale=stretch width=5>"


/material/ui/white.mat - is special texture with small size to drawing painted primitives.
I explain it by each line:

<color value=@@clr_sel@@>
we set "orange" color for all drawing elements

<img src=/material/ui/white.mat xscale=stretch height=5><ret>
Drawing top line of rectangle because by default align is "top,left", so we don't need set align in this line.
Line is "stretching" on horizontal axle and have height = 5 pixels.
Last <ret> turn "drawing point" to start of drawing area, we define it by element coordinates

coords_l: 50
coords_r: 750
coords_t: 600
coords_b: 400


<align vstyle=bottom><img src=/material/ui/white.mat xscale=stretch height=5></align><ret>

Drawing bottom line, horizontal stretching, height 5 pixels and return "drawing point" at start

<align hstyle=right><img src=/material/ui/white.mat yscale=stretch width=5></align><ret>
Drawing right line from top to bottom with width 5 pixels and stretched vertically and return "drawing point" back again

<img src=/material/ui/white.mat yscale=stretch width=5>"
Drawing left vertical line with width 5 pixels, from top to bottom, and we do not need return "drawing point" back, because we stop drawing in this element. Please note, that we do not use align for this line, because we draw it on left side of our rectangle.

So now we have "rubber" rectangle, and we can setup template for it or just copy from one mod to another, just change element area only.
You can say, that you can draw rectangle as texture, yes, you can, but I don't like using additional textures if I can do without them.

Another one aspect for aligns - it is text align
My example
text: "<font face=/font/big.font xscale=4 yscale=4>%0 _%1</font>"

We can align right
text: "<align hstyle=right><font face=/font/big.font xscale=4 yscale=4>%0 _%1</font></align>"

Or we can create warning text, that can be aligned on display center
text: "<color value=@@clr_red@@><align hstyle=center vstyle=center><font face=/font/big.font xscale=4 yscale=4>VISIT SERVICE</font></align>"

So we can see red text "VISIT SERVICE" on center of element coordinates, not full dashboard, if we set
coords_l: 50
coords_r: 750
coords_t: 600
coords_b: 400

for this element.

Please be noticed that "<aling>" always must have close tag "</align>", even you use "nested" align blocks, each opened "<align>" must be closed by "</align>" tag, otherwise you get warnings on game log.

To be continued....

Next will be start of practice, so I need some more time for prepare screenshot and so on.

[piva]

Practice. Introduction.

When you start create dashboard, if you don't have own truck model, you will still use existing dashboard computer file located in
/ui/dashboard/ folder. But when you use textures for your dash, it will be good way to create your own folder in /material/ui/dashboard/ folder. Because many moders take existing SCS texture, update it and use in mod, but they do not think about other mods or other trucks that can use the same texture, and when you or other players change truck in game, they can see come artifacts with truck even if they think that they do not have mod for this model. So good practice when you create your own folder for your mod. It is not too hard to change texture location by ETS2 Studio TOBJ editor, so you can avoid mod conflict with other mods.

In many cases each truck have own uv-layout and you need investigate how that uv-layout is looking for mod. Maybe just ETS2 Volvo 2009 and ATS Volvo VNL have identical (I don't say that it equal) uv-layouts.
You can look in folder /material/ui/dashboard/<truck name>/ folder, but here no special texture name that can be used for dash mod.
The exception is Next Gen Scania 2016. In that folder you can see just only textures for icons and some of dash parts. I don't have uv-layout for NextGen Scania right now, but this is very complex layout for dash. I don't know, why SCS made is so complex, and what they want to show.

[piva]

Practice. Planning.

When you decide to create dashboard to specific truck, you must to know uv-layout, so that you know what area you have to place your elements for dash. And what element you will use in this dash. Of course here is some game limitation.
You can see before, functional information available on SCS Wiki [url=https://modding.scssoft.com/wiki/Docume ... boards_IDs][Page/url].
So you can't add info about liftable axle or some other info at this moment. I don't know what SCS will add or change in future.

I select Inveco Stralis dashboard for example. Because here not so elementary dash and you can see that information on the dash can be located on different area.

On pic I place dashboard in truck and uv-layout (real uv-layout in truck interior model looks a bit different)



I show with arrows where located info on truck dash and on uv-layout. So you can planning where and what you will use on your dash.

Here is uv-layout resize for virtual window size of dash, so you can calculate position and desired size of dash elements.



I planning use virtual window size as 800x800 pixels. And image is resized to this dimension.
Dash zero point is on left-bottom corner, so you need OS calculator for calculate position and size.

For example, element which will be placed on left-top red rectangle can have coordinates

coords_l: 20 // or 25 offset of left edge of image texture
coords_r:
coords_t: 550 // from left-bottom corner
coords_b:


I don't show right and bottom coordinate, because I don't say what element will be placed here.

Ok. Let's continue planning.
I want show out temperature and clock on bottom part of dashboard with LCD font like Liquid crystal watch.
Current gear will place on top of big display part.
Cruise ... let it be on top-right corners
I don't know what to place on left-top corner, so let it be compass
On bottom-right coroner I will place trip length, because it more informative for me than odometer, odometer I will show on some other screens. Left-bottom corner will show me "engine brake". Low air and retarder indicators still exist on dashboard panel of the truck

cut from animation.sui file or truck interior
indicator_low_air_pressure: "/vehicle/truck/iveco_stralis/interior/psi_s.pma"
indicator_retarder: "/vehicle/truck/iveco_stralis/interior/ret_s.pma"

All this info I can see all the time, so I need share display (id: 950)





To be continued....

[piva]

Practice. Start working

NOTE. Please be patient. All files will be available later for download, I don't know, how finally it look.

Now I know what I will to show and how. So I start working.
I create file "/ui/dashboard/iveco_stralis.sii", and create empty dash with new elements

Code: Select all

SiiNunit
{
ui::window : .example.stralis {
 window_handler: null
 my_children[]: .back.unlite
 my_children[]: .back.lite
 my_children[]: .share.display
 coords_l: 0
 coords_r: 800
 coords_t: 800
 coords_b: 0
 id: 0
 layer: 0
 my_parent: null
}

ui::text : .back.unlite {
 text: "<img src=/material/ui/white.mat xscale=stretch yscale=stretch color=ff000000>"
 coords_l: 0
 coords_r: 800
 coords_t: 800
 coords_b: 0
 id: 10
 layer: -1
 my_parent: .example.stralis
}

ui::text : .back.lite {
 text: "<img src=/material/ui/white.mat xscale=stretch yscale=stretc color=FF000000>"
 coords_l: 0
 coords_r: 800
 coords_t: 800
 coords_b: 0
 id: 20
 layer: -1
 my_parent: .example.stralis
}

ui::group : .share.display {
 fitting: false
 coords_l: 0
 coords_r: 800
 coords_t: 800
 coords_b: 0
 id: 950
 layer: -1
 my_parent: .example.stralis
}

Now I need to setup my "bottom" part of dash. I must create background color like on liquid crystal watches.
I need color, but you now that color format is "AABBGGRR", but all color picker will give you color in "RRGGBB", how to convert it?



So I have color "C4FFA5", I can perform it like "C4FFA5"
And in dash it will be "FFA5FFC4"

We can calculate position of bottom background. Set Layer to 0, because out items with id:10 and id:20 have layer=-1

ui::text : .bottom.background {
text: "<img src=/material/ui/white.mat xscale=stretch yscale=stretch color=FFA5FFC4>"
coords_l: 0
coords_r: 800
coords_t: 800
coords_b: 645
id: 0
layer: 0
my_parent: .share.display
}


On uv-layout texture I calculate position of out temperature and clock position.
Set id for out temp 1000 and for clock 1050, and don't forget about layer, I want that my info placed up on background texture, so I set Layer=1

ui::text_common : .outtemp {
value: "50|F"
look_template: example.outtemp
text: ""
coords_l: 0
coords_r: 310
coords_t: 765
coords_b: 600
id: 1000
layer: 1
my_parent: .share.display
}

ui::text_common : .clock {
value: "12:24"
look_template: example.clock
text: ""
coords_l: 0
coords_r: 765
coords_t: 765
coords_b: 600
id: 1050
layer: 1
my_parent: .share.display
}


Don't forget for set "child" elements to it's parent element

ui::group : .share.display {

my_children[]: .bottom.background
my_children[]: .outtemp
my_children[]: .clock

coords_l: 0
coords_r: 800
coords_t: 800
coords_b: 0
id: 950
layer: -1
my_parent: .example.stralis
}


in out template file in "/ui/template/dashboard_text.example.sii" I add 2 new templates for outtemp and clock

ui::text_template : example.outtemp {
text: "<color value=FF000000><align hstyle=right><font face=/font/lcd_number.font xscale=2 yscale=2>%0^%1</font></align>"
}

ui::text_template : example.clock {
text: "<color value=FF000000><align hstyle=right><font face=/font/lcd_number.font xscale=2 yscale=2>%0</font></align>"
}


Right alignment, black color.
lcd_number.font have
vert_span:40 # max difference between lowest and highest pixel in any two glyphs

so my font with size 80 pixels must have scale=2

NOTE FOR SCS. When I use 1000 and 1050 with
ui::text: .outtemp {
text: "<color value=FF000000><align hstyle=right><font face=/font/lcd_number.font xscale=2 yscale=2>%0^%1</font></align>"
coords_l: 0
coords_r: 310
coords_t: 765
coords_b: 600
id: 1000
layer: 1
my_parent: .share.display
}
Game crashed without any error in log.

Finally I see that


Seems like my backgound color is too bright, and it must be fixed.

To be continued ...

[Milan1NL]

Thanks for your information and mod guide. I am not a modder, but thanks for your time

[piva]

I am not a modder

Maybe now you will became a dashboard modder? Here just a text file only. Photoshop tutorial you add to bookmark

[Milan1NL]

[piva]

Practice. Working on..

So, continue.
Also I want trip length, current gear, compass and cruise control speed. And I need fix background color of bottom part of dash.
I don't want change color, but I need it a bit darker. In this case I can make it a bit transparency, because below background texture we have pure black texture for id 10 and 20.
Finally my color value will be 88A5FFC4, I made it a bit transparent.
With selection marker I calculate position of trip length

ui::text_common : .trip {
value: "1000|km"
look_template: example.value
text: ""
coords_l: 0
coords_r: 780
coords_t: 150
coords_b: 0
id: 1210
layer: 1
my_parent: .share.display
}

Select "modern lcd" font from NextGen scania, but measurement unit I will show with "big" font, because it support all languages in game.
template, that I can use for other elements.

ui::text_template : example.value {
text: "<color value=FFFFFFFF><align hstyle=right right=-100><font face=/font/lcd_number_modern.font xscale=2 yscale=2>%0</font></align><color value=FF808080><font face=/font/big.font xscale=3 yscale=3><offset vshift=30> %1</font>"
}


I set right alignment and set additional shift from right side to left, on this place I set measurement unit with gray color and "big" font.
In this case if you set two or more value one under one, numbers will be aligned identically, but measurement unit with different length will have left align from right side of numbers

Gear I want see in center of big top display, so I create template for it, aligned at center
ui::text_template : example.gear {
text: "<color value=FFFFFFFF><align hstyle=center><font face=/font/lcd_number_modern.font xscale=2.5 yscale=2.5>%0</font></align>"
}


Gear element

ui::text_common : .gear {
value: "12"
look_template: example.gear
text: ""
coords_l: 0
coords_r: 800
coords_t: 615
coords_b: 400
id: 1300
layer: 1
my_parent: .share.display
}


Please note, that "top" of big display begin from 620 pixel
Same for compass

ui::text_common : .compass {
value: "NW"
look_template: example.compass
text: ""
coords_l: 20
coords_r: 300
coords_t: 620
coords_b: 400
id: 1220
layer: 1
my_parent: .share.display
}


Left aligned template and let it be not so white...

ui::text_template : example.compass {
text: "<color value=FFAAAAAA><align hstyle=left><font face=/font/big.font xscale=3 yscale=5>%0</font></align>"
}


Cruise control, I want to show with "inactive" and "active icon + speed", so I will show it later.
Finally dash look that.



Small notes about coordinates.
With align "right" critical coordinate for FONTS is right coordinate, left is does not matter, but must a fit full element length, same for top alignment, bottom coordinate can be below required height or element, because height of font we set with yscale.
With "left" align critical is left position and right does not matter, but fit element length or more.

[edsor]

Yes, it's a good guide. In the end, I didn't learn how to create a space inside the vehicle to place the on-board computer. But instead I was able to use the gps screen as a screen for the on-board computer (really, I don't need the inside gps. Now we have gps by voice and then there is the gps of the game). So this information will come in handy. Thank you.

[piva]

No. Without update interior model, you can't place dashboard elements in gps display, because each display have own "conext", and you can't use ETA time in GPS screen too (for example).