> For the complete documentation index, see [llms.txt](https://rex-studio.gitbook.io/rex-studio-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rex-studio.gitbook.io/rex-studio-docs/fivem-low-cost/guidebook.md). # GUIDEBOOK
### 📋 Description GUIDE is a comprehensive interactive guide system for FiveM servers that provides players with an intuitive interface to access essential game information, server guides, keyboard shortcuts, and important locations. The script features a modern UI with real-time player data, customizable guides, interactive keyboard map, and GPS point system. ### ✨ Features #### 📊 Player Information Display * **Real-time Stats**: Hunger, thirst, and session time tracking * **Financial Overview**: Wallet, bank, and dirty money balances * **Character Details**: Age, height, job, and player ID * **Server Information**: Ping monitoring and server status #### 📚 Interactive Guide System * **Comprehensive Guides**: Inventory, phone, clothes, jobs, properties, etc. * **Rich Content**: Support for HTML formatting, images, and structured content * **Customizable Sections**: Fully configurable guide entries * **User-Friendly Navigation**: Tab-based interface for easy access #### ⌨️ Virtual Keyboard System * **Interactive Keyboard**: Visual QWERTY/AZERTY keyboard layout * **Key Descriptions**: Hover functionality with key explanations * **Customizable Layout**: Support for different keyboard layouts * **Educational Tool**: Helps new players learn game controls #### 🗺️ GPS & Map Integration * **Strategic Locations**: Police stations, hospitals, dealerships, etc. * **One-Click Navigation**: Set waypoints directly from the interface * **Custom Icons**: FontAwesome icons for different location types * **Color Coding**: Visual distinction between location categories #### 🎨 Modern UI/UX * **Responsive Design**: Optimized for different screen sizes * **Smooth Animations**: Modern CSS transitions and effects * **Custom Branding**: Server logo and name integration * **Dark Theme**: Professional dark interface design ### 🔧 Installation #### Prerequisites * ESX or QB-Core Framework * MySQL Database (oxmysql recommended) * Working NUI system #### Step-by-Step Installation 1. **Download the script from the CFX Portal** 2. **Place the folder** `guide` in your `resources` directory 3. **Add to server.cfg**: ``` ensure guide ``` 4. **Database Setup** (if using additional features): * Ensure your MySQL connection is properly configured * The script uses oxmysql by default ### ⚙️ Configuration #### Main Configuration File: `shared/_main.lua` ```lua Config = {} -- Framework Selection Config.Core = "ESX" -- "ESX" / "QB-Core" Config.CoreExport = function() return exports['es_extended']:getSharedObject() -- return exports['qb-core']:GetCoreObject() end -- Server Configuration Config.Quit = "Thanks for playing on Redstart RP, see you soon" Config.PingAdress = "https://www.google.com" -- Server ping check URL -- Currency Settings Config.Currency = "USD" -- EUR, GBP, USD... Config.Format = "en-US" -- fr-FR, en-GB, es-ES... -- Money Account Types Config.BlackMoney = "black_money" -- ESX account type Config.BankMoney = "bank" -- ESX account type -- Notification System Config.Notifications = { customNotificationClient = function() if Config.Core == "ESX" then ESX.ShowNotification("A new gps point has been added to your map.") elseif Config.Core == "QB-Core" then QBCore.Functions.Notify("A new gps point has been added to your map.") end end } ``` #### UI Configuration File: `ui/js/config.js` ```javascript // Server Branding serverName = "YOUR SERVER NAME"; logoName = "images/logo.jpg"; // Logo path (square recommended) // Navigation Labels home = "Home"; guide = "Guide"; keyboard = "Keyboard"; map = "Map"; // Job Categories publicJob = "Public Service"; compagnyJob = "Company"; // External Links discord = "Discord"; discordLink = "https://discord.gg/YOUR_DISCORD"; store = "Store"; storeLink = "https://your-store.tebex.io/"; // Player Stats Labels age = "Age"; size = "Height"; wallet = "Wallet"; bank = "Bank"; dirtyMoney = "Black Money"; id = "ID"; gameSession = "Game Session"; ping = "Ping"; job = "Job"; // Action Buttons shortcut = "Shortcut"; map = "Map"; keyboardSettings = "Keyboard"; settings = "Settings"; exit = "Exit Game"; // Status Bars characterStars = "Character Stars"; hunger = "Hunger"; thirst = "Thirst"; ``` #### Guide Content Configuration ```javascript // Guide Sections var guideTable = [ { name: "Inventory", description: `

Welcome to Our Guide

Complete guide content with HTML support...

Guide Image
` }, { name: "Phone", description: `Phone usage instructions...` }, // Add more guide sections... ]; ``` #### Keyboard Configuration ```javascript // Key Descriptions var highlightedKeys = { 'E': 'Interact with objects', 'F1': 'Open phone', 'F2': 'Open inventory', 'W': 'Move forward', 'Z': 'Move forward (AZERTY)', // Add more key descriptions... }; ``` #### Map Locations Configuration ```javascript // GPS Points var mapTable = [ { name: "POLICE", description: "Central command for police operations.", coord: { x: -557.92, y: -427.15 }, blipcolor: "#ff9900", icon: "fa-location-dot" }, { name: "EMS", description: "Emergency medical services.", coord: { x: -1870.04, y: -357.16 }, blipcolor: "#ff0000", icon: "fa-plus" }, // Add more locations... ]; // Job Categories var publicWork = [ {name: "N.S.P.D", status: "green"}, {name: "E.M.S", status: "red"}, // Add more public jobs... ]; var compagnyWork = [ {name: "Bennys", status: "green"}, {name: "LsCustom", status: "green"}, // Add more company jobs... ]; ``` ### 🎮 Usage #### For Players 1. **Open Guide**: Use the configured command (default: not specified, check with server admin) 2. **Navigate Interface**: Use tabs to access different sections 3. **View Information**: Check your stats, money, and character details 4. **Access Guides**: Read server-specific guides and tutorials 5. **Use Keyboard**: Learn game controls with interactive keyboard 6. **Set GPS Points**: Click on map locations to set waypoints 7. **Quick Actions**: Access settings, map, and other game menus #### Interface Sections **🏠 Home/Dashboard** * **Player Statistics**: Real-time hunger, thirst, and session time * **Financial Summary**: Wallet, bank, and dirty money balances * **Character Info**: Age, height, job, and server ID * **Quick Actions**: Direct access to settings and menus **📖 Guide** * **Server Information**: Rules, tutorials, and game mechanics * **Interactive Content**: HTML-formatted guides with images * **Category Organization**: Logical grouping of information * **Search Functionality**: Easy navigation through topics **⌨️ Keyboard** * **Visual Layout**: Full keyboard representation * **Key Descriptions**: Hover over keys for explanations * **Layout Support**: QWERTY and AZERTY compatibility * **Learning Tool**: Perfect for new players **🗺️ Map** * **Location Database**: Pre-configured important locations * **GPS Integration**: One-click waypoint setting * **Category Filtering**: Public services, companies, etc. * **Custom Icons**: Visual identification of location types ### 🛠️ Commands * **Open Guide**: Configurable command (contact server admin for details) * **Close Guide**: ESC key or close button * **Quick Settings**: Direct access to game settings * **Exit Game**: Clean logout with confirmation ### 🎨 Customization #### Visual Customization **CSS Styling: `ui/css/style.css`** * **Color Schemes**: Modify color variables for branding * **Layout Adjustments**: Customize spacing and sizing * **Animations**: Modify transition effects * **Responsive Design**: Adapt for different screen sizes **Logo Integration** * **Square Format**: Recommended for best display * **File Location**: `ui/images/logo.jpg` * **Size Optimization**: Keep file size reasonable for performance #### Content Customization **Adding Guide Sections** ```javascript { name: "New Section", description: `

Your Custom Content

Add your HTML content here...

Custom Image
` } ``` **Adding Map Locations** ```javascript { name: "CUSTOM_LOCATION", description: "Your location description", coord: { x: 123.45, y: 678.90 }, blipcolor: "#your-color", icon: "fa-custom-icon" } ``` ### 🔧 Framework Support #### ESX Compatibility * **Player Data**: Full support for ESX player information * **Money Systems**: Wallet, bank, and black money integration * **Job System**: Complete job and grade information * **Status System**: Hunger and thirst monitoring #### QB-Core Compatibility * **Player Metadata**: Support for QB-Core player data structure * **Money Types**: Cash, bank, and dirty money handling * **Job Integration**: Job and grade label support * **Needs System**: Hunger and thirst tracking ### 📊 Features Overview | Feature | ESX | QB-Core | Description | | ------------------- | --- | ------- | ---------------------------- | | Player Stats | ✅ | ✅ | Real-time player information | | Financial Data | ✅ | ✅ | Money balance display | | Job Information | ✅ | ✅ | Job and grade details | | Interactive Guide | ✅ | ✅ | Customizable content system | | Virtual Keyboard | ✅ | ✅ | Key description system | | GPS Integration | ✅ | ✅ | Waypoint setting | | Discord Integration | ✅ | ✅ | Server links | | Session Tracking | ✅ | ✅ | Play time monitoring | ### 🔒 Security Features * **Client-Side Validation**: Input sanitization and validation * **Server-Side Verification**: All data requests validated server-side * **Anti-Injection**: Protected against script injection attacks * **Rate Limiting**: Prevents spam and abuse * **Session Management**: Secure session handling ### 🐛 Troubleshooting #### Common Issues **Guide not opening:** * Check command configuration * Verify NUI focus permissions * Check for JavaScript errors in console **Player data not updating:** * Verify framework compatibility * Check database connections * Ensure proper ESX/QB-Core exports **Images not loading:** * Verify file paths in config.js * Check image file formats (PNG/JPG) * Ensure proper file permissions **GPS points not setting:** * Verify coordinate formats * Check blip creation permissions * Ensure proper vector3 formatting ### 📈 Performance * **Optimized Rendering**: Efficient NUI updates * **Memory Management**: Automatic cleanup on close * **Network Efficient**: Minimal server-client communication * **Resource Friendly**: Low CPU and memory usage