Documentation

Table of Contents

• Repositories
• Configuration
• Actions
• Progress
• Notifications
• About Us

Repositories

• User Interface (Angular Framework)
• Script (Lua)

You are encouraged to make contributions in the above repositories

Configuration

More configurations can be added depending upon your choice of colors and positioning of UI elements. Some default configs are already added, which can be used as a base to create a configuration of your choice

There are three sections inside Config

• Action
• Notification
• ProgressBar

Config = {}

Config.Styles = {
    Action = {
        ["Default"] = {
            LabelColor = "#e3e3e3",
            BackgroundColor = "#2ea6d1",
            Position = "LEFT_MIDDLE",    --  LEFT_TOP // LEFT_MIDDLE // LEFT_BOTTOM // CENTER_TOP // CENTER_BOTTOM // RIGHT_TOP // RIGHT_MIDDLE // RIGHT_BOTTOM

            ShowKey = true,
            Key = "E",
            KeyColor = "#e8e8e8"
        },

        ["Key E"] = {
            LabelColor = "#e3e3e3",
            BackgroundColor = "#2ea6d1",
            Position = "LEFT_MIDDLE",

            ShowKey = true,
            Key = "E",
            KeyColor = "#e8e8e8"
        },

        ["Key F"] = {
            LabelColor = "#e3e3e3",
            BackgroundColor = "#2ea6d1",
            Position = "LEFT_MIDDLE",

            ShowKey = true,
            Key = "F",
            KeyColor = "#e8e8e8"
        }
    },

    Notification = {
        ["Default"] = {
            LabelColor = "#e3e3e3",
            BackgroundColor = "#db9927",
            Position = "RIGHT_TOP",    --  LEFT_TOP // LEFT_MIDDLE // LEFT_BOTTOM // CENTER_TOP // CENTER_BOTTOM // RIGHT_TOP // RIGHT_MIDDLE // RIGHT_BOTTOM

            Time = 5,
            Clear = false
        },

        ["Success"] = {
            LabelColor = "#e3e3e3",
            BackgroundColor = "#18c96e",
            Position = "RIGHT_TOP",

            Time = 5,
            Clear = false
        },

        ["Inform"] = {
            LabelColor = "#e3e3e3",
            BackgroundColor = "#db9927",
            Position = "RIGHT_TOP",

            Time = 5,
            Clear = false
        },

        ["Error"] = {
            LabelColor = "#e3e3e3",
            BackgroundColor = "#db4b27",
            Position = "RIGHT_TOP",

            Time = 5,
            Clear = false
        }
    },

    ProgressBar = {
        ["Default"] = {
            LabelColor = "#e3e3e3",
            BackgroundColor = "#b8b8b8",
            FillColor = "#18c96e",
            Position = "CENTER_BOTTOM",     --  CENTER_TOP // CENTER_BOTTOM

            Striped = false,
            Animated = false
        },

        ["Regular"] = {
            LabelColor = "#e3e3e3",
            BackgroundColor = "#b8b8b8",
            FillColor = "#18c96e",
            Position = "CENTER_BOTTOM",     --  CENTER_TOP // CENTER_BOTTOM

            Striped = false,
            Animated = false
        },

        ["Striped"] = {
            LabelColor = "#e3e3e3",
            BackgroundColor = "#b8b8b8",
            FillColor = "#18c96e",
            Position = "CENTER_BOTTOM",

            Striped = true,
            Animated = false
        },

        ["Animated Striped"] = {
            LabelColor = "#e3e3e3",
            BackgroundColor = "#b8b8b8",
            FillColor = "#18c96e",
            Position = "CENTER_BOTTOM",

            Striped = true,
            Animated = true
        }
    },

    ProgressCancelled = {
        Label = "Cancelled",
        LabelColor = "#e3e3e3",
        BackgroundColor = "#db4b27",
        Position = "CENTER_BOTTOM",     --  CENTER_TOP // CENTER_BOTTOM

        Time = 2.5,
        Striped = false,
        Animated = false
    }
}

Actions

How to trigger

TriggerEvent('CX-Utility:ShowAction', Label, Style (Optional))

TriggerEvent('CX-Utility:HideAction')

Example

Key E should be present in Configuration

TriggerEvent('CX-Utility:ShowAction', 'Access Garage', 'Key E')

TriggerEvent('CX-Utility:HideAction')

Citizen.CreateThread(function()
    local ZoneEntered = false
    while true do
        local ped = PlayerPedId()
        local InArea = false
        local distance = #(GetEntityCoords(ped)-vector3(0,0,0))
        if distance <= 5.0 then
            InArea  = true
        end
        
        if InArea and not ZoneEntered then
            ZoneEntered = true
            TriggerEvent('CX-Utility:ShowAction', 'Access Garage', 'Key E')
        end

        if not InArea and ZoneEntered then
            ZoneEntered = false
            TriggerEvent('CX-Utility:HideAction')
        end

        Citizen.Wait(50)
    end
end)

Positions

• LEFT_TOP
• LEFT_MIDDLE
• LEFT_BOTTOM
• CENTER_TOP
• CENTER_BOTTOM
• RIGHT_TOP
• RIGHT_MIDDLE
• RIGHT_BOTTOM

Images

Notifications

How to trigger

TriggerEvent('CX-Utility:ShowNotification', Label, Style (Optional))

Example

Success should be present in Configuration

TriggerEvent('CX-Utility:ShowNotification', 'Message Sent', 'Success')

Positions

• LEFT_TOP
• LEFT_MIDDLE
• LEFT_BOTTOM
• CENTER_TOP
• CENTER_BOTTOM
• RIGHT_TOP
• RIGHT_MIDDLE
• RIGHT_BOTTOM

Images

Progress

There are two types of the progress bar

• Progress Bar Loader
• When the progress bar is cancelled

Progress Bar Loader

How to trigger

TriggerEvent('CX-Utility:ShowProgress', Callback, Label, LabelOnComplete, Time, Style)

Example

TriggerEvent('CX-Utility:ShowProgress', function(IsCancelled)
        if IsCancelled then
            return
        end

        -- Run your code

end, 'Farming Weed', 'Weed Farmed', 5, 'Striped')

Positions

• CENTER_TOP
• CENTER_BOTTOM

Images

Cancelled Progress Bar

How to trigger

This is automatically triggered if there is an ongoing progress and the user presses "X". You can change the look n feel of the "Cancelled Bar" by editing ProgressCancelled part in the configuration

Positions

• CENTER_TOP
• CENTER_BOTTOM

Images

About Us

https://discord.com/invite/pKPsqW38xw