# Usage in other resources

## Toggle Display

You can toggle display of whole HUD if you need this (ex. in clothing shop).

<pre class="language-lua"><code class="lang-lua"><strong>-- With export
</strong><strong>exports["17mov_Hud"]:ToggleDisplay(state)
</strong><strong>
</strong><strong>-- With client event
</strong><strong>TriggerEvent("17mov_Hud:ToggleDisplay", state)
</strong></code></pre>

<table><thead><tr><th>Argument</th><th>Type</th><th>Optional</th><th>Default Value</th><th>Explanation</th><th data-hidden>Type</th><th data-hidden>Explanation</th><th data-hidden>Optional</th><th data-hidden>Default</th></tr></thead><tbody><tr><td>state</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td><td>-</td><td>Is HUD should be displayied?</td><td>boolean</td><td>Should display or not?</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td><td></td></tr></tbody></table>

## Hide Radar

You can force rader to be hidden, no matter of player settings.

<pre class="language-lua"><code class="lang-lua"><strong>exports["17mov_Hud"]:HideRadar(state)
</strong></code></pre>

<table><thead><tr><th>Argument</th><th>Type</th><th>Optional</th><th>Default Value</th><th>Explanation</th><th data-hidden>Type</th><th data-hidden>Explanation</th><th data-hidden>Optional</th><th data-hidden>Default</th></tr></thead><tbody><tr><td>state</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td><td>-</td><td>Is radar should be hidden?</td><td>boolean</td><td>Should display or not?</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td><td></td></tr></tbody></table>

## Notification

It's showing new notification

```lua
-- With export
exports["17mov_Hud"]:ShowNotification(text, type, title, time)

-- With client event
TriggerEvent("17mov_Hud:ShowNotification", text, type, title, time)
```

<table><thead><tr><th>Argument</th><th>Type</th><th>Optional</th><th>Default Value</th><th>Explanation</th><th data-hidden>Type</th><th data-hidden>Explanation</th><th data-hidden>Default</th></tr></thead><tbody><tr><td>text</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td><td>-</td><td>Text of notification</td><td>string: any</td><td>The text of notification</td><td></td></tr><tr><td>type</td><td>"info" | "error" |  "success"</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td><td>"info"</td><td>Type of notification</td><td>string: "info" | "error" | "success"</td><td>Type of notification</td><td></td></tr><tr><td>title</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td><td>Config.Lang["DefaultNotification"]</td><td>Title of notification</td><td>string: any</td><td>The title of notification</td><td></td></tr><tr><td>time</td><td>number</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td><td>string.len(text) * 0.09 + 2000</td><td>Time of displaying notification (in miliseconds)</td><td></td><td></td><td></td></tr></tbody></table>

## Help Notification

It's start showing of Help Notification.

You can use controls like `~INPUT_CONTEXT~` and colors like `~g~`

{% hint style="warning" %}
**It should be used without any loop!**

Later you can need to hide it with `HideHelpNotification()`
{% endhint %}

```lua
-- With export
exports["17mov_Hud"]:ShowHelpNotification(text)

-- With client event
TriggerEvent("17mov_Hud:ShowHelpNotification", text)
```

| Argument | Type   | Optional | Default Value | Explanation               |
| -------- | ------ | -------- | ------------- | ------------------------- |
| text     | string | :x:      | -             | Text of help notification |

## Hide Help Notification

When you first use `ShowHelpNotification()` then you need to hide it with this function.

```lua
-- With export
exports["17mov_Hud"]:HideHelpNotification()

-- With client event
TriggerEvent("17mov_Hud:HideHelpNotification")
```

## Help Notification (while)

There is also avabile version of Help Notification to use into while loops. It's hiding automatically when stop hooking.

```lua
-- With export
exports["17mov_Hud"]:ShowHelpNotificationWhile(text)

-- With client event
TriggerEvent("17mov_Hud:ShowHelpNotificationWhile", text)
```

| Argument | Type   | Optional | Default Value | Explanation               |
| -------- | ------ | -------- | ------------- | ------------------------- |
| text     | string | :x:      | -             | Text of help notification |

## Progress Bar

Starting new progress bar

```lua
-- With export
exports["17mov_Hud"]:StartProgress(action, onStart, onTick, onFinish)

-- With client event
TriggerEvent("17mov_Hud:StartProgress", action, onStart, onTick, onFinish)
```

| Argument | Type     | Optional             | Default Value | Explanation                                                                                              |
| -------- | -------- | -------------------- | ------------- | -------------------------------------------------------------------------------------------------------- |
| action   | object   | :white\_check\_mark: | -             | Look bellow                                                                                              |
| onStart  | function | :white\_check\_mark: | -             | It will be hooked when progress is starting                                                              |
| onTick   | function | :white\_check\_mark: | -             | Hooked every frame of progress                                                                           |
| onFinish | function | :white\_check\_mark: | -             | Hooked when progress has been ended. Returns wasCanceled which are talking is progress has been canceled |

#### Argument action object with default values

```lua
local action = {
    duration = 0, -- Type: number (Progress bar time (in ms))
    label = "", -- Type: string (Progress bar text)
    useWhileDead = false, -- Type: boolean (Can be used while player is dead?)
    canCancel = true, -- Type: boolean (Is can be canceled?)
    controlDisables = { -- If you want to disable some controls set it here
        disableMovement = false, -- Type: boolean (Disable movement controls?)
        disableCarMovement = false, -- Type: boolean (Disable car movement controls?)
        disableMouse = false, -- Type: boolean (Disable mouse controls?)
        disableCombat = false, -- Type: boolean (Disable combat controls?)
    },
    animation = { -- Here you can play some animation/scenario
        animDict = nil, -- Type: string (Animation dict)
        anim = nil, -- Type: string (Animation name)
        flags = 0, -- Type: number (Animation flags)
        task = nil, -- Type: string (Scenario name)
    },
    prop = { -- Spawning prop for progress bar
        model = nil, -- Type: number (Model hash)
        bone = nil, -- Type: string (Bone name)
        coords = vec3(0.0, 0.0, 0.0), -- Type: vector3 (Attachment offsets coords)
        rotation = vec3(0.0, 0.0, 0.0), -- Type: vector3 (Attachment rotation)
    },
    propTwo = { -- Spawning prop for progress bar if you need two props
        model = nil, -- Type: number (Model hash)
        bone = nil, -- Type: string (Bone name)
        coords = vec3(0.0, 0.0, 0.0), -- Type: vector3 (Attachment offsets coords)
        rotation = vec3(0.0, 0.0, 0.0), -- Type: vector3 (Attachment rotation)
    },
}
```

## Stop Progress

With this function you can stop progress bar in any moment. Then onFinish will return false.

```lua
-- With export
exports["17mov_Hud"]:StopProgress()

-- With client event
TriggerEvent("17mov_Hud:StopProgress")
```

## Open Settings

You can open HUD Settings using:

```lua
-- With export
exports["17mov_Hud"]:OpenSettings()

-- With client event
TriggerEvent("17mov_Hud:OpenSettings")
```

## Getting HUD colors

You can get current HUD colors as HEX codes to use them for ex. in chat to made everyting fits.

```lua
-- With export
exports["17mov_Hud"]:GetTheme(function(theme)
    -- local lightmode = theme['dark']
    -- print("Lightmode - Primary color:", lightmode['--color-primary'])
    -- print("Lightmode - Secondary color:", lightmode['--color-secondary'])
    -- print("Lightmode - Text Primary color:", lightmode['--color-text-primary'])
    -- print("Lightmode - Text Secondary color:", lightmode['--color-text-secondary'])
    -- print("Lightmode - Transparent color:", lightmode['--color-transparent'])
    -- local darkmode = theme['dark']
    -- print("Darkmode - Primary color:", darkmode['--color-primary'])
    -- print("Darkmode - Secondary color:", darkmode['--color-secondary'])
    -- print("Darkmode - Text Primary color:", darkmode['--color-text-primary'])
    -- print("Darkmode - Text Secondary color:", darkmode['--color-text-secondary'])
    -- print("Darkmode - Transparent color:", darkmode['--color-transparent'])
end)

-- With client event
TriggerEvent("17mov_Hud:GetTheme", function(theme)
    -- local lightmode = theme['dark']
    -- print("Lightmode - Primary color:", lightmode['--color-primary'])
    -- print("Lightmode - Secondary color:", lightmode['--color-secondary'])
    -- print("Lightmode - Text Primary color:", lightmode['--color-text-primary'])
    -- print("Lightmode - Text Secondary color:", lightmode['--color-text-secondary'])
    -- print("Lightmode - Transparent color:", lightmode['--color-transparent'])
    -- local darkmode = theme['dark']
    -- print("Darkmode - Primary color:", darkmode['--color-primary'])
    -- print("Darkmode - Secondary color:", darkmode['--color-secondary'])
    -- print("Darkmode - Text Primary color:", darkmode['--color-text-primary'])
    -- print("Darkmode - Text Secondary color:", darkmode['--color-text-secondary'])
    -- print("Darkmode - Transparent color:", darkmode['--color-transparent'])
end)
```

Or you can also obtain colors with every update from settings with:

```lua
RegisterNetEvent("17mov_Hud:UpdateTheme", function(theme)
--     local lightmode = theme['dark']
--     print("Lightmode - Primary color:", lightmode['--color-primary'])
--     print("Lightmode - Secondary color:", lightmode['--color-secondary'])
--     print("Lightmode - Text Primary color:", lightmode['--color-text-primary'])
--     print("Lightmode - Text Secondary color:", lightmode['--color-text-secondary'])
--     print("Lightmode - Transparent color:", lightmode['--color-transparent'])
--
--     local darkmode = theme['dark']
--     print("Darkmode - Primary color:", darkmode['--color-primary'])
--     print("Darkmode - Secondary color:", darkmode['--color-secondary'])
--     print("Darkmode - Text Primary color:", darkmode['--color-text-primary'])
--     print("Darkmode - Text Secondary color:", darkmode['--color-text-secondary'])
--     print("Darkmode - Transparent color:", darkmode['--color-transparent'])
end)
```

## Getting HUD settings

You can also get current HUD settings.

```lua
-- With export
exports["17mov_Hud"]:GetSettings(function(settings)
    -- print(settings)
end)

-- With client event
TriggerEvent("17mov_Hud:GetSettings", function(settings)
    -- print(settings)
end)
```

You can also obtain settings with every update:

```lua
RegisterNetEvent("17mov_Hud:UpdateSettings", function(settings)
    -- print(settings)
end)
```