📺Custom Indicators

Our HUD allows you to easily extend its functionality by registering your own components, such as a stamina bar, a job label, or even a cryptocurrency tracker.

1. RegisterComponent

Use this export to initialize a new element on the HUD. You can choose between a status type (circle near health, armour etc.) or a card type (for text and labels by default in top right).

exports["17mov_Hud"]:RegisterComponent(componentName, componentData)

Parameters:

• componentName (string): A unique identifier for your component.

• componentData (table): A configuration table containing:

  • type: The style of the component ("status" or "card").

  • label: The text displayed on the component.

  • icon: A table containing type ("svg" or "image") and the data (SVG string or file path).

  • position: A table with x and y coordinates (from 0.0 to 1.0).

2. UpdateComponentValue

This export is used to dynamically update the data or progress of an existing component.

exports["17mov_Hud"]:UpdateComponentValue(name, value)

Parameters:

• name (string): The unique name of the component you wish to update.

• value (any): The new value.

  • For status types, this is typically a float between 0.0 and 1.0.

  • For card types, this can be any string or number value

3. ToggleComponentVisibility

Allows you to show or hide a specific component based on game events (e.g., hiding the stamina bar when the player is in a vehicle).

exports["17mov_Hud"]:ToggleComponentVisibility(name, value)

Parameters:

• name (string): The unique name of the component.

• value (boolean): Set to true to show the component, or false to hide it.

4. Integration Examples

Below you can find a professional implementation of a Stamina status bar and a Job Information card.

CreateThread(function()
    -- Registration: Stamina Component (Status Type)
    -- Displays a circular progress for the player's stamina
    exports["17mov_Hud"]:RegisterComponent("stamina", {
        type = "status",
        icon = {
            type = "svg",
            data = [[<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 22V16.9612C14 16.3537 13.7238 15.7791 13.2494 15.3995L11.5 14M11.5 14L13 7.5M11.5 14L10 13M13 7.5L11 7M13 7.5L15.0426 10.7681C15.3345 11.2352 15.8062 11.5612 16.3463 11.6693L18 12M10 13L11 7M10 13L9.40011 16.2994C9.18673 17.473 8.00015 18.2 6.85767 17.8573L4 17M11 7L8.10557 8.44721C7.428 8.786 7 9.47852 7 10.2361V12M14.5 3.5C14.5 4.05228 14.0523 4.5 13.5 4.5C12.9477 4.5 12.5 4.05228 12.5 3.5C12.5 2.94772 12.9477 2.5 13.5 2.5C14.0523 2.5 14.5 2.94772 14.5 3.5Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>]],
        },
    })

    -- Registration: Job Component (Card Type)
    -- Displays a static or dynamic label for the player's current occupation
    exports["17mov_Hud"]:RegisterComponent("job_info", {
        type = "card",
        label = "Current Job",
        icon = {
            type = "svg",
            data = [[<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 8V6C7 4.34315 8.34315 3 10 3H14C15.6569 3 17 4.34315 17 6V8M7 8H3V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V8H17M7 8H17M10 12H14" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>]],
        },
        position = { x = 0.5, y = 0.5 },
    })

    exports["17mov_Hud"]:UpdateComponentValue("job_info", "Unemployed")

    while true do
        Wait(500)
        local exhaustionPercent = GetPlayerSprintStaminaRemaining(PlayerId())
        local remainingStamina = (100.0 - exhaustionPercent) / 100.0
        
        exports["17mov_Hud"]:UpdateComponentValue("stamina", remainingStamina)
    end
end)