London Studios Documentation
Our StoreSupport PanelYouTube Channel
  • General
    • Documentation
    • Resource Support
    • Downloading Resources
    • Installing Resources
    • Resource Transfers
    • Common Errors
    • Translating Resources
    • Inventory Icons
    • Resource Ideas
    • Integration Requests
  • Vehicles
    • American Rearmount Ladder
      • Setting up
      • Anticheat Issues
    • Advanced Recovery Truck
      • Setting up
      • Anticheat Issues
    • SWAT Vehicle
      • Setting up
      • Anticheat Issues
    • Police Water Cannon
      • Setting up
      • Anticheat Issues
    • British Ladder Truck
      • Setting up
      • Anticheat Issues
    • Tiller Ladder Truck
      • Setting up
      • Anticheat Issues
    • Scissor Lift
      • Setting up
      • Anticheat Issues
    • Car Transporter
      • Setting up
      • Anticheat Issues
    • Water Carrier & Command Unit
      • Setting up
      • Anticheat Issues
    • Water Spray Unit
      • Setting up
      • Anticheat Issues
    • Snow Loader Pack
      • Setting up
      • Anticheat Issues
  • Resources
    • Bike Hire
      • Using the resource
      • Configuring the resource
      • Configuring locations
    • Bomb Disposal Robot (EOD)
      • EOD - How to use
      • EOD - Permissions Check
      • OX_Inventory Integration
      • Other Integrations
    • Car Sale Sign
      • Installation Video
      • Using the resource
      • Configuring the resource
      • Configuring permissions
      • Item Support
    • Congestion Charge
      • Configuring the resource
      • Modifying Zones & Adding Cameras
    • Custom Vinewood Sign
      • Installation Video
      • Sign Setup
    • Decontamination Tent
      • Using the resource
      • Configuring the resource
      • OX_Inventory Integration
      • Other Integrations
    • Directional Spikes
      • Using the resource
      • Configuring the resource
    • Emergency Call Points
      • Using the resource
      • Configuring the resource
    • Fire Supply Line [v2]
      • Using the resource
      • Configuring Fire Supply Line
    • Fire Tools [v2]
      • Using the resource
      • Configuration
      • Permissions, Notifications and Items
      • Item Support
    • Helicopter Rescue
      • Using the resource
      • Configuring the resource
      • Configuring the permissions
      • Configuring locations
    • Mobile Spike
      • Setting up vehicles
      • Misc Configuration Values
      • Permission Checks
      • OX_Inventory Integration
      • Other Integrations
    • Police Grappler
      • Setting up vehicles
      • Misc Configuration Values
      • Permissions, Notifications & Items
      • Item Support
    • Police Shields
      • Using the resource
      • Permissions, Notifications & Items
      • Item Support
    • Rope Rescue Tripod & Basket
      • Using the resource
      • Configuring the resource
      • OX_Inventory Integration
      • Other Integrations
    • Rescue Cushion
      • Using the resource
      • Permissions, Notifications & Items
      • Other Integrations
    • Smart Speed Signs
      • Configuring the resource
      • Adding new locations
    • Smart Airbags
      • Using this resource
      • Permissions & Notifications
    • Smart Bollards
      • Installation Video
      • Configuring the resource
      • Setting up a new set
    • Smart Clamp
      • Permissions, Notifications and Items
      • Item Support
      • Exports and Events
    • Smart Defib
      • Using the resource
      • Defib locations
      • Framework support
      • Setting up blips
      • Chance of success
      • Sound settings
      • Keybind configuration
      • Automatic reset
      • Custom Death Scripts
      • OX_Inventory Integration
      • Other Integrations
    • Smart Drone
      • Using the resource
      • Permission Checks, Notifications & Items
      • Keybinds
      • Item Support
      • Other Integrations
    • Smart Fires
      • Installation Video
      • Putting out fires
      • Fire Alerts
      • Remove Fires Automatically
      • Custom Notifications
      • Automatic Fires
        • Enabling automatic fires
        • Job / Permission Check
        • Adding locations
        • Automatic Fire Chances
        • Other automatic fire settings
      • Commands
      • Command permission checks
      • Editing fire types
      • Editing smoke types
      • Misc configuration values
      • Setting up weapons
      • Area of patrol settings
      • Clock on system
      • Lighter Item & Command
      • Server exports and events
      • Discord logging
      • Society Payments
    • Smart Hose [v2]
      • Using the resource
      • Configuring Smart Hose
    • Smart Matrix
      • Install & Configuration Video
      • OX_Inventory Integration
      • Other Integrations
    • Smart Motorways
      • Using the resource
      • Configuring the resource
    • Smart Signs
      • Configuring the resource
      • Configuring the permissions
    • Smart Speed Cameras
      • Configuring the resource
      • Adding new cameras
    • Smart Taser
      • Using the resource
      • Configuration
      • OX_Inventory Integration
      • Other Integrations
    • Smart Vehicle
      • Compatible Vehicles
      • Free Developer Copy
      • Permission Checks
      • Using a Smart Vehicle
      • Informations for Developers
      • Vehicle Control Menus
    • Police Tracker
      • Setting up vehicles
      • Resource Configuration & Usage
      • Item Support
    • Throw Bag
      • Resource Usage
      • OX_Inventory Integration
      • Other Integrations
    • Vehicle Rescue
      • Using the Resource
      • Permissions, Notifications & Items
      • Copy of Item Support
    • Water Monitor
      • Using the resource
      • Copy of Permissions, Notifications & Items
      • Copy of Item Support
    • Weapon Lanyard
      • Setting up weapons
      • Using the resource
      • Setting up clothing / EUP
Powered by GitBook
On this page
  • Adding vehicle menus
  • Example Menu
  • First step, create your menu
  • Export 1: getPressedKey
  • Export 2: openMenu
  • Closing the Menu
  • Setting up the menu in the data file

Was this helpful?

  1. Resources
  2. Smart Vehicle

Vehicle Control Menus

Smart Vehicle supports custom vehicle control menus and we've included one with our Recovery Truck resource by default.

PreviousInformations for DevelopersNextPolice Tracker

Last updated 4 months ago

Was this helpful?

Adding vehicle menus

This guide will show you how to enable Smart Vehicle to work with a custom menu you may wish to create (or just modify our recovery truck one). This guide does not show you how to design or code a custom menu, with this requiring knowledge of CSS, HTML and JS.

Example Menu

We've made an example menu available for download below. Feel free to use this as a template for your own Smart Vehicle menus as these files will make it pretty simple to add this to your own vehicles, with just needing to change the controls and button positioning on the menu.

First step, create your menu

Firstly, design and create your menu which should be in a third party resource separate to Smart Vehicle. For our Recovery Truck vehicle, we've included the menu within the resource files of the recoverytruck folder and therefore defined the HTML file as an nui reference in the manifest.

Once you have created the menu, you'll need to create a couple of exports from a lua file.

Export 1: getPressedKey

function getPressedKey()
    if not controlPressed then return 0 end
    return control
end

exports("getPressedKey", getPressedKey);

You should have an export named getPressedKey which allows Smart Vehicle to constantly check which key is being pressed by the user. This is how we are doing it for our Recovery Truck resource, however there are many different ways of doing it:

main.js file:

document.querySelectorAll(".movement-button").forEach(function(button) {
        button.addEventListener("mousedown", function() {
    
            fetch(`https://${GetParentResourceName()}/submitButtonPress`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                body: JSON.stringify({
                    control: button.dataset.control,
                })
            }).then(resp => resp.json()).then(resp => console.log(resp));
        });

        button.addEventListener("mouseup", function() {
    
            fetch(`https://${GetParentResourceName()}/submitButtonRelease`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8',
                },
                body: JSON.stringify({
                    control: button.dataset.control,
                })
            }).then(resp => resp.json()).then(resp => console.log(resp));
        });
    });

client.lua file:

RegisterNuiCallback('submitButtonPress', function(data, cb)
    control = data.control

    controlPressed = true

    cb({})
end)

RegisterNuiCallback('submitButtonRelease', function(data, cb)
    control = 0

    controlPressed = false

    cb({})
end)

This shows a js file constantly sending a message back to the lua file every time a player presses the button. We are using mouseup and mousedown events for this so that a player is able to hold down the button, rather than continously press it. These events pass the data to the lua file which then allows Smart Vehicle to find out which key is being pressed using the getPressedKey export.

Export 2: openMenu

You will need to add another export named openMenu which allows us to open the menu from the Smart Vehicle resource, either when a player starts controlling the vehicle or when they press a defined key, which we will configure later. This is how we've setup this export for our menu:

In this openMenu function, it is important that you use the SetNuiFocus native to allow a player to click on the buttons (if you wish), as seen below.

client.lua file

function openMenu()
    SendNUIMessage({
        type = 'openMenu'
    })
    SetNuiFocus(true, true)
end

exports("openMenu", openMenu);

main.js file

window.addEventListener('message', (event) => {
    if (event.data.type === 'openMenu') {
        openMenu();
    }
});

Closing the Menu

Smart Vehicle only opens the menu for you and will not close it for the user. Therefore, you'll need to add some functionality for closing the menu yourself. For example, we've added a button called Close Menu on our Recovery Truck menu, which looks like this:

main.js

document.getElementById("close-menu-button").addEventListener("click", function() {
        document.querySelectorAll("#control-panel")[0].style.display = "none";
        fetch(`https://${GetParentResourceName()}/closeMenu`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json; charset=UTF-8',
            },
            body: JSON.stringify({
            })
        }).then(resp => resp.json()).then(resp => console.log(resp));
    });

client.lua

RegisterNuiCallback('closeMenu', function(data, cb)
    SendNUIMessage({
        type = 'closeMenu'
    })
    SetNuiFocus(false, false) 
    cb({})
end)

It is important that you fetch back to the lua file to enable the SetNuiFocus native to run, rather than just setting the display to none on the menu.

Setting up the menu in the data file

Next, you'll need to open the vehicle data file, such as the recovery.lua file and add a new section called menu, as seen below:

Code:

menu = { 
        enabled = true,
        resourceName = "recoverytruck",
        menuControls = {
            openAuto = false,
            openMenuKey = 311,
            -- Export to open menu should be named openMenu()
        }
    },

After setting enabled to true, you'll need to set the resource name of the third party resource where the menu is hosted, such as recoverytruck in our case.

Next, you'll need to configure the menuControls section. By setting openAuto to true, SmartVehicle will call the openMenu() export on your resource every time a player starts controlling.

Next, you'll need to set the openMenuKey which will be handled by Smart Vehicle, which will open the menu whenever a player presses this key whilst controlling.

Smart Vehicle Menu Example.zipGoogle Docs
Logo
An example of our Recovery Truck menu, allowing you to control all parts of the truck
The file directory of our recovery truck resource