💾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 or GitHub.

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

-- 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

-- 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

-- 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)

-- 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)

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

• Discord Support: Join Discord