💾X_HUD_TextUI

🌟 Overview

X_HUD_TextUI is designed to enhance the visual and interactive elements of your FiveM server by providing a modern TextUI system. It supports customizable animations, glass blur effects, and sound notifications, making it perfect for roleplay servers, interactive scenarios, and any server looking to improve player engagement.

---

✨ Features

• Interactive UI Notifications: Display customizable messages with keys for player interaction.

• Modern Glass Effect: Utilizes WebGL for a sleek, modern look with glass blur effects.

• Customizable Shine/Reflection Effects: Add visual flair with adjustable shine settings.

• Built-in Sound Support: Play sounds when the UI opens or closes.

• Easy-to-Use API: Simple client and server exports for seamless integration.

• Fully Configurable: Customize appearance, behavior, animations, and more.

---

🛠️ Installation

Step-by-Step Guide

1. Download the Resource:

   • Download the X_HUD_TextUI resource from the Tebex Store or GitHub.

2. Extract the Folder:

   • Extract the downloaded folder to your FiveM server's resources directory.

3. Update server.cfg:

   • Add the following line to your server.cfg file to ensure the resource starts automatically:ensure X_HUD_TextUI

4. Restart Your Server:

   • Restart your server to apply the changes and load the new resource.

---

📖 Usage

Client-side

-- Show TextUI with a key and text
exports['X_HUD_TextUI']:Show('E', 'Press to interact')

-- Hide TextUI
exports['X_HUD_TextUI']:Hide()

-- Using events
TriggerEvent('X_HUD_TextUI:show', 'E', 'Press to interact')
TriggerEvent('X_HUD_TextUI:hide')

Server-side

-- Show TextUI to a specific player
exports['X_HUD_TextUI']:ShowForPlayer(playerId, 'E', 'Press to interact')

-- Hide TextUI for a specific player
exports['X_HUD_TextUI']:HideForPlayer(playerId)

-- Using events
TriggerClientEvent('X_HUD_TextUI:show', playerId, 'E', 'Press to interact')
TriggerClientEvent('X_HUD_TextUI:hide', playerId)

---

⚙️ Configuration

Customizing Appearance and Behavior

Edit the config.js file to customize the appearance and behavior of the TextUI:

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)

    // Animation Settings
    Animation: {
        enabled: true,
        type: 'slide', // Options: 'fade', 'slide', 'scale'
        direction: 'up', // Options: 'up', 'down', 'left', 'right' (only for slide animation)
        duration: 300, // Duration in milliseconds
        easing: 'ease-out' // CSS easing function
    },
    
    // Pulse Effect
    PulseEffect: {
        enabled: false,
        intensity: 1.1, // Max scale during pulse
        speed: 1000, // Duration of one pulse cycle in milliseconds
    },
    
    // Shine Effect (Reflection)
    ShineEffect: {
        enabled: true,
        duration: 1250, // Duration of one shine cycle in milliseconds
        angle: 45, // Angle of the shine in degrees
        opacity: 0.2, // Opacity of the shine effect (0.0 to 1.0)
        size: 5, // Size of the shine in % (100 = full element width)
        travel: 2500, // How far the shine travels in % (higher value = longer travel distance)
        cooldown: 5000 // Time to wait between shine effects (milliseconds)
    },
    
    // Sound Settings
    Sound: {
        enabled: true, // Play sound when UI opens
        file: 'sound1.mp3', // Options: sound1.mp3, sound2.mp3, sound3.mp3, sound4.mp3, sound5.mp3
        volume: 0.5, // Volume level (0.0 to 1.0)
        playOnClose: true, // Play sound when UI closes
        closeFile: 'sound3.mp3' // Sound file to play when closing UI
    },

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

---

🔄 Framework Integration

ESX Framework Integration

Add this to your client script to use X_HUD_TextUI as the default notification system:

-- In your ESX client script (e.g.: es_extended/client/functions.lua)
function ESX.TextUI(message, type)
    exports['X_HUD_TextUI']:Show(Config.DefaultKey or 'E', message)
end

function ESX.HideUI()
    exports['X_HUD_TextUI']:Hide()
end

Example of usage in your ESX scripts:

-- Show TextUI
ESX.TextUI('Press E to interact')

-- Hide TextUI
ESX.HideUI()

QBCore Framework Integration

Add this to your client script to use X_HUD_TextUI as the default notification system:

-- In your QBCore client script (e.g.: qb-core/client/functions.lua)
function QBCore.Functions.DrawText(text)
    exports['X_HUD_TextUI']:Show(Config.DefaultKey or 'E', text)
end

function QBCore.Functions.HideText()
    exports['X_HUD_TextUI']:Hide()
end

Example of usage in your QBCore scripts:

-- Show TextUI
QBCore.Functions.DrawText('Press E to interact')

-- Hide TextUI
QBCore.Functions.HideText()

---

📝 Examples

Basic Usage

-- Show TextUI
exports['X_HUD_TextUI']:Show('E', 'Press to interact')

-- Hide TextUI
exports['X_HUD_TextUI']:Hide()

Event Usage

-- Show TextUI using an event
TriggerEvent('X_HUD_TextUI:show', 'E', 'Press to interact')

-- Hide TextUI using an event
TriggerEvent('X_HUD_TextUI:hide')

Server-side Usage

-- Show TextUI to a specific player
exports['X_HUD_TextUI']:ShowForPlayer(playerId, 'E', 'Press to interact')

-- Hide TextUI for a specific player
exports['X_HUD_TextUI']:HideForPlayer(playerId)