# X\_HUD\_HelpNotify

### 🌟 Overview

`X_HUD_HelpNotification` provides a modern, clean UI for displaying help notifications with a glass effect. It’s designed to be context-aware, meaning notifications will automatically disappear when the context is lost. This makes it ideal for proximity-based interactions, roleplay scenarios, and guiding players through specific actions.

***

### ✨ Features

* **Modern UI**: Clean design with glass effect, animations, and customizable styling.
* **Context-Aware**: Notifications disappear when context is lost, ensuring they only appear when relevant.
* **Position Flexibility**: 9 position presets for flexible placement on the screen.
* **Developer-Friendly**: Simple export and event system for easy integration.
* **Performance Optimized**: Minimal resource usage ensures smooth performance.
* **Test Point**: Built-in test point for quick setup verification.

***

### 🛠️ Installation

1. **Download the Script**:
   * Download the script from the [Tebex Store](https://kimi.ai/chat/d00d4m46toidmmfar160#) or [GitHub](https://kimi.ai/chat/d00d4m46toidmmfar160#).
2. **Extract the Folder**:
   * Extract the downloaded folder to your FiveM `resources` directory.
3. **Update `server.cfg`**:
   * Add `ensure X_HUD_HelpNotification` to your `server.cfg` file.
4. **Restart Your Server**:
   * Restart your server to load the new resource.

***

### 📖 Usage

#### Basic Usage

The notification system requires continuous triggering to remain visible. This makes it perfect for proximity-based notifications or hints that should only appear in specific contexts.**Important**: This script MUST be triggered in a loop with a wait time of `0` to display properly. It’s designed to be refreshed every frame.

#### Example Code

```lua
-- Example of using the notification in a loop
Citizen.CreateThread(function()
    while true do
        local playerCoords = GetEntityCoords(PlayerPedId())
        local distance = #(playerCoords - vector3(-269.4, -955.3, 30.2))
        
        if distance < 3.5 then
            exports['X_HUD_HelpNotification']:ShowHelpNotification('E', 'Press to interact')
        end
        
        Citizen.Wait(0)
    end
end)
```

#### Exports

```lua
-- Show a help notification with a key and text
exports['X_HUD_HelpNotification']:ShowHelpNotification(key, text)

-- Example:
exports['X_HUD_HelpNotification']:ShowHelpNotification('E', 'Press to interact')
```

#### Events

```lua
-- Trigger the notification event with a key and text
TriggerEvent('helpnotify', key, text)

-- Example:
TriggerEvent('helpnotify', 'E', 'Press to interact')

-- Alternative event name
TriggerEvent('X_HUD_HelpNotification:showHelpNotification', key, text)
```

***

### ⚙️ Configuration

#### Server-Side Configuration (`config.lua`)

```lua
-- Default Key
Config.DefaultKey = 'E' -- Default key to show in notifications if none specified

-- Test Point (You can toggle this to test the notification system)
Config.EnableTestPoint = true -- Set to false to disable the test point
Config.TestPoint = {
    coords = vector3(-269.4, -955.3, 30.2),
    distance = 3.5,
    helpText = "Press to interact",
    marker = {
        type = 1,
        size = vector3(3.0, 3.0, 0.5),
        color = {r = 0, g = 255, b = 0, a = 25},
        bobUpAndDown = false,
        faceCamera = false,
        rotate = false
    }
}
```

#### UI Configuration (`html/config.js`)

```javascript
const Config = {
    // Notification Settings
    DefaultPosition: 'bottom-middle', // Position options: top-left, top-middle, top-right, middle-left, center, middle-right, bottom-left, bottom-middle, bottom-right
    PositionPercentages: {
        top: 20, // % from top (when using top positions)
        bottom: 7, // % from bottom (when using bottom positions)
        left: 5, // % from left (when using left positions)
        right: 5, // % from right (when using right positions)
    },
    DefaultScale: 1.0, // Scale of the notification (1.0 is default)

    // Appearance
    BackgroundColor: {r: 0, g: 0, b: 0, a: 0.4}, // Background color with opacity (RGBA format)
    TextColor: {r: 255, g: 255, b: 255, a: 1.0}, // Text color (RGBA format)
    ButtonColor: {r: 0, g: 255, b: 0, a: 0.1}, // Bright green button color with transparency (RGBA format)
    BorderRadius: '8px', // Rounded corners
    FontFamily: 'Poppins, sans-serif', // Font family
    
    // Button Size
    ButtonSize: {
        width: 50, // Width in pixels
        height: 50, // Height in pixels
        fontSize: 26 // Font size in pixels
    },
    
    // Glass Effect
    GlassEffect: true, // Enable/disable glass effect
    GlassBlur: 4, // Blur amount in px
    GlassOpacity: 0.6, // Opacity of the glass effect
    
    // Glow Effect
    GlowEffect: true, // Enable/disable glow effect
    GlowColor: {r: 0, g: 255, b: 0, a: 0.7}, // Bright green glow color with intensity (RGBA format)
    GlowSpread: '10px', // Glow spread
}
```

***

### 🎨 UI Customization

#### Notification Position

You can customize the position of the notification using the `DefaultPosition` setting in `html/config.js`. Available options include:

* `top-left`
* `top-middle`
* `top-right`
* `middle-left`
* `center`
* `middle-right`
* `bottom-left`
* `bottom-middle`
* `bottom-right`

#### Colors and Effects

Adjust the appearance of the notification by modifying the following settings in `html/config.js`:

* `BackgroundColor`: Background color with opacity (RGBA format)
* `TextColor`: Text color (RGBA format)
* `ButtonColor`: Button color with transparency (RGBA format)
* `GlowEffect`: Enable or disable the glow effect
* `GlowColor`: Color of the glow effect (RGBA format)

#### Glass Effect

The glass effect can be customized using:

* `GlassEffect`: Enable or disable the glass effect
* `GlassBlur`: Strength of the blur effect
* `GlassOpacity`: Opacity of the glass effect

***

### 🔄 Troubleshooting

#### Common Issues

* **Notification Not Appearing**:
  * Ensure the script is properly loaded and enabled in `server.cfg`.
  * Check for typos in the export or event names.
  * Verify that the script is being triggered in a loop with `Citizen.Wait(0)`.
* **Styling Issues**:
  * Ensure the `html/config.js` file is correctly configured.
  * Check for browser console errors in the FiveM debug menu.
* **Test Point Not Working**:
  * Ensure `Config.EnableTestPoint` is set to `true` in `config.lua`.
  * Verify that the test point coordinates are correct.

***

### 📥 Download & Support

* **Tebex Store**: [Download Link](https://kimi.ai/chat/d00d4m46toidmmfar160#)
* **Discord Support**: [Join Discord](https://kimi.ai/chat/d00d4m46toidmmfar160#)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://fiveworld.gitbook.io/fiveworld-docs/x_hud_helpnotify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.