Dashboard Custom In...
 
Notifications
Clear all

Dashboard Custom Input Screen


FlyLink
(@flylink)
Active Member
Joined: 2 months ago
Posts: 5
Topic starter  

I would like to know if in Dash Studio there is a possibility to create a custom input screen for each truck brand in the game Euro Truck or American Truck. Example: if the truck is from Scania, the entry screen image will be with the Scania logo. If the truck is from Volvo, the input screen image will be from Volvo and so on for the other brands. It is possible? Could this input screen be animated?

If possible, would you have an example of how to do it in Dash Studio?

Thank you!


Quote
FlyLink
(@flylink)
Active Member
Joined: 2 months ago
Posts: 5
Topic starter  

No response here, let alone by email 😢 


ReplyQuote
FlyLink
(@flylink)
Active Member
Joined: 2 months ago
Posts: 5
Topic starter  

Wotever can you answer me please?


ReplyQuote
NigeUK
(@nigeuk)
Active Member
Joined: 5 months ago
Posts: 7
 

@flylink Yes you can certainly get the dash to display the relevant image for the truck you're driving.
I'm not sure what you mean by animation, but one could fade in or out a logo with javascript.

Your best bet would be to look at a few examples of ETS2 or ATS dashes out there and learn from the techniques that are used. Additionally there are quite a few help videos for SimHub on YouTube.

In essence, you create an image 'box' in your dash, and then attach code to the 'Image' property.
The code would then choose the correct image based on a series of 'if' statements.
For example if the truck make is 'Man' them use the image 'Man' etc…
I'l post and example of the real properties tomorrow if you like, but you're best bet would be to work your way through some of the tutorials and build your experience. Knowing the code doesn't necessarily give you the understanding!


ReplyQuote
FlyLink
(@flylink)
Active Member
Joined: 2 months ago
Posts: 5
Topic starter  

@nigeuk I appreciate your answer because that's really what I was asking.

I found very little video or posts exemplifying how to use Java Script with SimHub. Do you have a video to show me or a link to the documentation that I can use as a reference to do Java Script programming with SimHub? Thank you very much!

This post was modified 2 weeks ago by FlyLink

ReplyQuote
NigeUK
(@nigeuk)
Active Member
Joined: 5 months ago
Posts: 7
 

@flylink Hi there,

I don't think there is any comprehensive documentation specifically for javascript within Simhub DashStudio. 
However, there is a huge amount of documentation on the web for javascript generally, so I tend to Google search for answers if I get stuck on a particular piece of code. I am fairly fluent with javascript, but rusty on the syntax, so I often need to look up a particular function.

Occasionally, one may find snippets of code which are specific to Simhub, which is great. In these cases I take the code and adapt it to suit my particular situation. An example is the code below. I found this (and can't find the link now!) on a forum or page about the Trucksimulator plugin by SDawson (very good plugin, I use it regularly). This code slowly fades out a solid rectangle during engine start (for example to emulate a screen slowly turning on. I adapted the code to bring up the display to 50% opacity when ignition is started, and then become fully transparent when the engine has started. I also adapted the code to fade in some text boxes. To use this code as is, you'd need to install TruckSimulator plugin: https://github.com/sjdawson/TruckSimulatorPlugin

Bear in mind that the learning curve can be quite steep for creating dashes. I first learned to write code (or to program as we called it then) in 1982 and I still haven't learned everything! I've also worked for 25 years with similar apps to simhub dash to design database frontends and web-based content. It take more time than you can imagine to create something and learn and debug all at the same time.

Anyway, here's the javascript I mention above. I also have an idea for some code to easily switch logos, but I need to try it out first. I shall post that when I've done. In the meantime, practice, search for code snippets, and enjoy!

 

if (root.opacity == null) {
    root.opacity = 100;
    root.targetOpacity = 100;
}

root.targetOpacity = $prop('DataCorePlugin.GameRawData.Drivetrain.EngineEnabled')
    ? 0 : $prop('TruckSimulatorPlugin.Engine.Starting') ? 50 : 100;

if (root.opacity != root.targetOpacity) {
    if (root.opacity > root.targetOpacity) {
        root.opacity = root.opacity - 5;
    }
    else
    {
        root.opacity = root.opacity + 5;
    }
}

return root.opacity;

ReplyQuote
NigeUK
(@nigeuk)
Active Member
Joined: 5 months ago
Posts: 7
 

So, just to recap, the code above goes into the code box for opacity (click the FX button to the left of the Opacity property of your image).

Here's one way by which you can change the relevant logo for each truck make:

1. Get your images ready for upload (no need to upload massive images to a dash!)
2. Name your images exactly to the name of the brand in game, for example, for a Mercedes-Benz truck, your image will be called mercedes.png (or mercedes.jpg).
3. Dashboard > Manage Images > Add Images > Select and add your images.
4. Create a new image in your dash.
5. In the list of properties for the image, click the Fx button to the left of the Image property.
6. Paste or type this code: format([GameRawData.TruckValues.ConstantsValues.BrandId],'##')
NB: This code is NCalc. so no need to click the Javascript button.
7. Save you dash and test.
8. To get the logo to fade in when the engine starts, either create a solid rectangle and use the script I pasted above (place the rectangle over the image placeholder).
OR - To get the logo to fade in on its own, use this script in the Opacity property:

 

if (root.opacity == null) {
root.opacity = 0;
root.targetOpacity = 0;
}

root.targetOpacity = $prop('DataCorePlugin.GameRawData.Drivetrain.EngineEnabled')
? 100 : $prop('TruckSimulatorPlugin.Engine.Starting') ? 50 : 0;

if (root.opacity != root.targetOpacity) {
if (root.opacity > root.targetOpacity) {
root.opacity = root.opacity - 5;
}
else
{
root.opacity = root.opacity + 5;
}
}

return root.opacity;

 

Have fun!

 

 


ReplyQuote
FlyLink
(@flylink)
Active Member
Joined: 2 months ago
Posts: 5
Topic starter  

@nigeuk thank you very much for your guidelines! I'll continue studying from your examples and I'll report back soon to let you know if I'm making progress.


NigeUK liked
ReplyQuote
NigeUK
(@nigeuk)
Active Member
Joined: 5 months ago
Posts: 7
 

@flylink Excellent. Just keep plugging away and you'll increase your knowledge. Much of coding and design is about trial and error. Making mistakes, although frustrating, is part of the process.

If I may make another suggestion - a decent image editing app is, imho, an essential tool for working with SimHub dashes. Personally I use an ancient version of Photoshop Elements, but something like GIMP would do as well. It's the ability to rescale large images, layer multiple images and create images with transparent backgrounds which are the most useful functions.

Good luck and enjoy!


ReplyQuote
Share: