Making an awesome graphical custom GUI animated adaptive to vehicle gear selector indicator shifter

Mark

Well-known member
Original boring title: Custom GUI dashboard - multiple links to input sources for a single ImageBox

I'm working on a custom dashboard. This kind: https://docs.rigsofrods.org/vehicle-creation/making-custom-hud/

I'm making a selected gear indicator.
It uses two ImageBoxes:

shifterBackground ImageBox
The background image changes if the vehicle has more than 5 forward gears.

5 gears:
5-gear.png

shifter-off.png

6+ gears:
6-gear.png

shifter-on.png


HTML:
<Widget type="ImageBox" skin="ImageBox" position="X Y Width Height" name="shifterBackground">
        <Property key="ImageTexture" value="shifter-off.png"/> //default background
        <UserString key="anim" value="lamp"/>
        <UserString key="texture" value="shifter"/>
        <UserString key="link" value="engine_num_gear&gt;6"/> //if vehicle has more than 6 gears, use shifter-on.png
</Widget>

shifterSelector ImageBox
This is overlayed on top of shifterBackground.
It looks at the selected gear (-1, 0, 1, 2, 3, 4, 5, 6...)
and shows the image corresponding to that gear (selector--1.png, selector-0.png, selector-1.png, selector-2.png...) for each one.


g-r.png

selector--1.png (reverse gear)

HTML:
<Widget type="ImageBox" skin="ImageBox" position="X Y Width Height" name="shifterSelector" layer="Overlapped" >
        <UserString key="anim" value="series"/>
        <UserString key="texture" value="selector"/> // selector--1.png, selector-0.png...
        <UserString key="link" value="engine_gear"/> // -1, 0, 1, 2, 3, 4, 5, 6...
</Widget>

It looks like this when working:
anim.gif


So what is the problem?
The reverse gear will be in a different place depending on the background.

What have you tried to solve this?
I tried having three separate ImageBoxes.
- one for gears N, 1, 2, 3, 4, 5, 6+
- one with R in left position
- one with R in right position
I can do this by only including the gears I want the ImageBox to show in its series.

I then tried to use a condition to only show the correct R gear ImageBox for the correct background. Just like I did with the background.

Why doesn't this work?
ImageBox only seems to accept a single link value, and I need it to be linked both to "engine_gear" and "engine_num_gear"
Code:
<UserString key="link" value="engine_num_gear&gt;6"/>
<UserString key="link" value="engine_gear"/>

I tried that ↑, but only the one specified last will work.
I also tried combining them in one line with different separators (, &) that did not work either.
Code:
<UserString key="link" value="engine_gear, engine_num_gear&gt;6"/>

These just aren't a feature.

So what now?
I don't know! you tell me ︎): help!!

Edit: Thanks for the likes and all but I need help for real 😭 if there's a workaround or somebody has any idea on how to accomplish this
 
Last edited:
Back
Top