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

Forum rules
SCS as a company do not wish to have paid mods on this forum. While we understand that not all paid mods use the Intellectual Property of other companies/people, it is very hard to moderate what is and isn't acceptable when money is involved. There are also concerns that it could look unfavorable to potential work partners going forward if SCS allow mods that may potentially use unlicensed branding.
Posting in the Mods forum (ATS and ETS2) is restricted to sharing free-to-the-public mods and providing support for mods. For more details, please check the Forum Rules.
edsor
Posts: 122
Joined: 05 Dec 2017 20:13

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

#31 Post by edsor » 27 Aug 2019 15:40

Piva, I don't think you understand me. I didn't place dashboard elements in the gps display. That's impossible, the game doesn't allow it. I have converted the gps display into the on-board computer display, eliminating the inside gps. Do you understand now?
edsor
Posts: 122
Joined: 05 Dec 2017 20:13

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

#32 Post by edsor » 27 Aug 2019 15:48

In other words, I now have an on-board computer but I don't have a gps inside the vehicle
User avatar
piva
Posts: 2435
Joined: 29 Oct 2014 16:41

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

#33 Post by piva » 28 Aug 2019 04:57

I still don't know how to help you. :roll:
User avatar
piva
Posts: 2435
Joined: 29 Oct 2014 16:41

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

#34 Post by piva » 28 Aug 2019 05:58

Practice. Using icons and layers.

Now I will show, how to use "group" for group of elements, using icons and how use layers.

I want show "inactive" and when cruise is activated - show bright icon and cruise speed. So we have 2 elements activated at once.
If you look in /material/ui/dashboard/iveco_stralis/pict.dds file, you can see that "cruise control" icon is third on second row.
left position start at 0.5 width of texture area, top 0.5 of height, so bottom is 1 and right 0.75, set dark gray color for icon.
This element always shown on display, and not action, so it have id:0

ui::text : .cruise.inactive {
text: "<img src=/material/ui/dashboard/iveco_stralis/pict.mat left=0.5 right=0.75 top=0.5 bottom=1.0 xscale=stretch yscale=stretch color=FF606060>"
coords_l: 600
coords_r: 664
coords_t: 610
coords_b: 546
id: 0
layer: 1
my_parent: .share.display
}

Next we drawing cruise control group, if you look in Wiki, you can see
1240 - cruise control icon, can be ui::group or ui::text or any other element that could show/hide. Cruise control speed ( 1100) explicitly CAN be child of this group.
Group use all window area, have ID:1240, and have 2 child element: active icon and cruise speed.
ui::group : .cruise.control {
my_children[]: .cruise.icon
my_children[]: .cruise.speed
coords_l: 0
coords_r: 800
coords_t: 800
coords_b: 0
id: 1240
layer: -1
my_parent: .share.display
}


I want that "active" icon hide "inactive", so it must be upon "inactive" icon. I set layer:2 for "active" icon.
And please note, that my_parent looks on our "group" name ".cruise.control"

ui::text : .cruise.icon {
text: "<img src=/material/ui/dashboard/iveco_stralis/pict.mat left=0.5 right=0.75 top=0.5 bottom=1.0 xscale=stretch yscale=stretch color=FFFFFFFF>"
coords_l: 600
coords_r: 664
coords_t: 610
coords_b: 546
id: 0
layer: 2
my_parent: .cruise.control
}


And cruise speed. Is can have "basic' layer:1 , id:1100 and my_parent for group name.
Also I don't want measurement unit for cruise speed, so template for it.
PS. I adjust bit font size for compass and cruise speed.

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


ui::text_common : .cruise.speed {
value: "80|kmh"
look_template: example.cruise
text: ""
coords_l: 500
coords_r: 790
coords_t: 620
coords_b: 400
id: 1100
layer: 1
my_parent: .cruise.control
}


I found existing icon for "engine brake" in MAN TGX E6 dashboard, just search "1230" in SCS dashboard files, and take icon definition :lol:
Adjust position on left-bottom corner and set color.

ui::text : .engbrake {
text: "<img src=/material/ui/dashboard/man_tgx/pict.mat left=0 right=0.41 top=0.05 bottom=0.33 xscale=stretch yscale=stretch color=FFFFFFFF>"
coords_l: 5
coords_r: 140
coords_t: 155
coords_b: 55
id: 1230
layer: 1
my_parent: .share.display
}


Don't forget set "my_children" for share display

my_children[]: .cruise.inactive
my_children[]: .cruise.control
my_children[]: .engbrake


Result. Engine brake icon is invisible when Cruise is activated.

[ external image ]
User avatar
piva
Posts: 2435
Joined: 29 Oct 2014 16:41

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

#35 Post by piva » 28 Aug 2019 06:49

Practice. Fuel bar...

Now we ready to create first virtual display.
Each virtual display is a group of elements, just have special id 100,200,300,400,500,600,700 and 800.
my_parent of virtual display must be window name ".example.stralis"

ui::group : .display1 {

my_children[]: .fuel.rect
my_children[]: .fuel.bar
my_children[]: .fuel.bar_data

my_children[]: .fuel.tank
my_children[]: .fuel.range

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


I show before, "rubber" rectangle, so now I want to show, how put it into templates, is you will use more than 1 time.
Parameters passed to template are indicated in "value" parameter, delimited with symbol "|".
In template fisrt parameter is "%0", second "%1" and so on. I create 2 parameters, drawing color and frame width/height

ui::text_template : example.rectangle {
text: "<color value=%0>
<img src=/material/ui/white.mat xscale=stretch height=%1><ret>
<align vstyle=bottom><img src=/material/ui/white.mat xscale=stretch height=%1></align><ret>
<align hstyle=right><img src=/material/ui/white.mat yscale=stretch width=%1></align><ret>
<img src=/material/ui/white.mat yscale=stretch width=%1>"
}


In this case draw rectangle with frame 5 pixels. We need just define area coordinates, color and frame width.
This is just a frame for fuel bar.

ui::text_common : .fuel.rect {
value: "FF808080|5"
look_template: example.rectangle
text: ""
coords_l: 50
coords_r: 750
coords_t: 500
coords_b: 440
id: 0
layer: 1
my_parent: .display1
}


Fuel bar and any bars in game defined with 2 element one show, how is look, next - direction and worked area
I want draw solid white rectangle.
"H~~0~~1" - show that this is "Horizontal" bar with min value 0 and maximum value is "1"
I adjust fuel bar area on rectangle height. Increase left and bottom coordinates on frame width and decrease right and top coordinates too.


ui::text : .fuel.bar {
text: "<img src=/material/ui/white.mat xscale=stretch yscale=stretch color=FFFFFFFF>"
coords_l: 55
coords_r: 745
coords_t: 495
coords_b: 445
id: 1070
layer: 1
my_parent: .display1
}

ui::text : .fuel.bar_data {
text: "H~~0~~1"
coords_l: 55
coords_r: 745
coords_t: 495
coords_b: 445
id: 1075
layer: 1
my_parent: .display1
}


And then I will add info about fuel level and operating range, defined by current fuel consumption.
You must remember, how I told about "right" alignment and shift value from right side. Now You can see how it look on the dash

ui::text_common : .fuel.tank {
value: "1200|l"
look_template: example.value
text: ""
coords_l: 0
coords_r: 700
coords_t: 400
coords_b: 200
id: 1060
layer: 1
my_parent: .display1
}

ui::text_common : .fuel.range {
value: "1200|l"
look_template: example.value
text: ""
coords_l: 0
coords_r: 700
coords_t: 300
coords_b: 200
id: 1080
layer: 1
my_parent: .display1
}


and don't forget to add ".display1" element for window children.

ui::window : .example.stralis {
window_handler: null
my_children[]: .back.unlite
my_children[]: .back.lite
my_children[]: .share.display
my_children[]: .display1


[ external image ]
User avatar
piva
Posts: 2435
Joined: 29 Oct 2014 16:41

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

#36 Post by piva » 28 Aug 2019 06:54

Damn, I'm already tired, it's time to finish ...
I will show air bar with special align and stop.
User avatar
piva
Posts: 2435
Joined: 29 Oct 2014 16:41

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

#37 Post by piva » 28 Aug 2019 07:46

Practice. Air bar special alignment.

I want to show, how you can use alignments with bars.
We have 2 air circle (for example) but we have only one id, how to show it twice?
SCS create one big overlay put it above painted bars and ... if you have background texture (logo for example) you will see dark rectangle instead of texture.

How I create second virtual display.

ui::group : .display2 {

my_children[]: .air.overlay
my_children[]: .air.bar
my_children[]: .air.bar_data

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


Overlay must have bigger level than drawing color or texture.
I take texture from Iveco Hi-Way, because I'm lazy to draw this texture.
I take texture, stretch it horizontally and set height 60 pixels - twice.
This Increase element area to fit both textures. and set align TOP and BOTTOM for both air contour.
This is passive element (I'm sorry it have blue color)

ui::text : .air.overlay {
text: "<align vstyle=top><img src=/material/ui/dashboard/iveco_hiway/bars.mat left=p2 right=p163 top=p2 bottom=p14 xscale=stretch height=60></align><ret>
<align vstyle=bottom><img src=/material/ui/dashboard/iveco_hiway/bars.mat left=p2 right=p163 top=p2 bottom=p14 xscale=stretch height=60></align>"

coords_l: 50
coords_r: 750
coords_t: 500
coords_b: 200
id: 0
layer: 2
my_parent: .display2
}


Then I will define drawing bars. Bit adjust area, so that "white" color do not shown on texture transparent area.

ui::text : .air.bar {
text: "<color value=FFFFFFFF>
<align vstyle=top><img src=/material/ui/white.mat xscale=stretch height=56></align><ret>
<align vstyle=bottom><img src=/material/ui/white.mat xscale=stretch height=56></align>"

coords_l: 52
coords_r: 748
coords_t: 498
coords_b: 202
id: 1120
layer: 1
my_parent: .display2
}


and define work area for this "air" control. "H~~0~~12" - horizontal, from 0 to 12 bar pressure. with the same area size for drawing color

ui::text : .air.bar_data {
text: "H~~0~~12"
coords_l: 52
coords_r: 748
coords_t: 498
coords_b: 202
id: 1125
layer: 1
my_parent: .display2
}


[ external image ]
User avatar
piva
Posts: 2435
Joined: 29 Oct 2014 16:41

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

#38 Post by piva » 28 Aug 2019 07:49

Practice. Final.

Also I add big digital speedometer

[ external image ]

You can see how I made it in tutorial example content mod. Link will be in first post.

That's all. Thanks for patience.
edsor
Posts: 122
Joined: 05 Dec 2017 20:13

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

#39 Post by edsor » 28 Aug 2019 10:26

piva wrote: 28 Aug 2019 04:57 I still don't know how to help you. :roll:
Do not worry. I just wanted you to know the way I managed to solve my problem. My mod will be perfect when ets 2 allows the transfer of elements between the gps and the dashboard.
By the way, I guess in recent months no new elements have been added to the dasboard. I would like scs to add the average speed as a new element of the on-board computer.
User avatar
galimim
Posts: 2886
Joined: 26 Jan 2013 22:11
Location: Slovenija
Contact:

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

#40 Post by galimim » 05 Sep 2019 15:06

Question for our resident computer master. Can you tell me how to use caps lock for part of info. Specifically if I want to make speed unit to be shown in caps lock, what is the command used?
ETS2:
Real Tires Mod
Search for Drivetrain Revision mods!
Truck fix doctor
ATS:
Real Tires Mod
Search for Drivetrain Revision mods!
Truck fix doctor
Post Reply

Return to “Modding Guides”

Who is online

Users browsing this forum: No registered users and 5 guests