1. Create New Dashboard
Click "New," enter the name of the dashboard, and you can create a blank dashboard.
2.Upload the dashboard
After editing the dashboard in MOZA Dash Studio, you need to click "Upload Dashboard" to upload the dashboard to the device.
3.Introduction to UI Controls
Seven types of UI controls are supported: Text, Rectangle, Ellipse, Image, Dial Gauge, Linear Gauge, and Map. By selecting and clicking the control icon in the top left corner of the interface, the corresponding UI control will appear on the canvas. UI controls will be continuously updated to support more types in the future.
4. TEXT
The properties panel on the right allows you to edit the attributes of text.
General:
General properties edit the display box style of the UI control. You can edit the coordinates, width, height, background color, border color, and other attributes.
Text:
Text: Click to edit the content displayed by the text control. Clicking the "fx" icon will display a pop-up window for telemetry binding. Click "Telemetry" and choose the telemetry data you want to bind and display. In the drop-down list of the result format, you can select the desired data format to display. Once confirmed, the telemetry binding is successful. Font Size, Font, Font Weight, Font Color, Alignment: These attributes allow you to edit the display style of the text, including font size, font type, font weight, font color, and text alignment.
5.Rectangle
The rectangle allows you to edit general and effect attributes.
General:
General properties edit the display box style of the UI control. You can edit the coordinates, width, height, background color, border color, and other attributes.
Effects:
You can edit the display effects of the control, such as blinking, opacity, and rotation.
6.Ellipse
The circular control allows you to edit general, effect, and ellipse attributes.
General:
General properties edit the display box style of the UI control. You can edit the coordinates, width, height, background color, border color, and other attributes.
Effects:
You can edit the display effects of the control, such as blinking, opacity, and rotation.
Ellipse:
You can edit the border color, border thickness, and background color of the ellipse.
7.Image
The image control supports uploading images in the formats JPEG, JPG, PNG, BMP, and GIF. Click "Select Image" to open the system file browser, then choose the desired image to upload.
8.Dial Gauge
Dial:
You can edit the background color of the dial, as well as the styles of the outer and inner stroke.
Values:
You can edit the properties of the values, including setting the maximum and minimum values for the gauge. After binding the values to telemetry data, the corresponding game data will be displayed in the game.
Scale:
You can edit the starting angle of the gauge's minimum value and the angle between the minimum and maximum values.
Major Ticks:
You can edit the style properties of the major tick marks.
Minor Ticks:
You can edit the style properties of the minor tick marks.
Needle:
You can edit the style properties of the pointer and upload a custom pointer image.
Scale Labels:
You can edit the style properties of the tick label numbers.
Radial Gauge
You can edit the color, radius, thickness, and other style properties of the scale bar.
Optimal Range:
You can set background colors for different ranges of the gauge. For example, if you set the optimal range to be between 5 and 8, you can assign different colors to different scale ranges: green for below the optimal range, orange for within the optimal range, and red for above the optimal range. The gauge will display the corresponding colors accordingly.
9.Linear Gauge:
You can edit the properties of the linear gauge, including the background image, scale bar image, scale bar color, alignment, and direction. The value represents the progress bar's value. After binding the value to telemetry data, the corresponding game data will be displayed in the game.
10.Map
The map allows you to edit attributes such as track color and width. The track control does not require telemetry binding to obtain the game's track data. However, the track UI will only display on the dashboard after the player completes a valid lap in the game. Currently, the map control only supports ACC, but it will support other games in the future.
11.Function Binding
Common Telemetry Bindings:
Text:
Select the content and bind the telemetry data you wish to display.
Dial Gauge:
Select the value and bind the telemetry data you wish to display.
Linear Gauge:
Select the value and bind the telemetry data you wish to display.
More Complex Animation Effects:
MOZA Dashstudio supports JavaScript function expressions, allowing for more complex animations.
Ternary Operator:
A condition followed by a question mark (?). If the condition is true, the expression before the colon (:) is executed; if the condition is false, the expression after the colon is executed.
Example: n == 1 ? "Red" : "Blue" returns "Red" when n equals 1, otherwise it returns "Blue". Here, n can be telemetry data, and "Red" and "Blue" are the results based on the condition.
For example, if we want the background color of the RPM value to change according to the telemetry data:
If the RPM is less than or equal to 7000, the background color should be gray.
If the RPM is greater than 7000, the background color should be red.
1.Inserting RPM Telemetry Data
2.Colors need to be entered as Hex color values, which can be viewed in the color editor.
3.Complete JavaScript expression：
Telemetry.get('v1/gameData/Rpm').value > 7000 ? '#FF0000':'#808080'
