> For the complete documentation index, see [llms.txt](https://arrayscripts.gitbook.io/arrayscripts/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://arrayscripts.gitbook.io/arrayscripts/products/array_hud/configuration.md).

# Configuration

{% hint style="danger" %} <mark style="color:$danger;">**Important:**</mark> After making changes to the configuration, restart the resource using:

`ensure array_hud`
{% endhint %}

## Config Files

{% tabs %}
{% tab title="config.lua" %}
{% code lineNumbers="true" expandable="true" %}

```lua
Array = {}

Array.Framework = "auto" -- auto, esx, qbcore or custom

Array.Voice = {
    type = "saltychat", -- pma-voice, saltychat or custom
    voicebars = {1.5, 3.0, 8.0, 15.0}, -- Specify here how many voice ranges you have and what they are.
    changevoicerange = {
        notify = {
            enabled = true, -- Would you like to send a notification when the voice range changes?
            locale = "en", -- de or en (Here you can select your language. If it is not yet available, you can either add it yourself or open a ticket on our Discord.)
            locales = {
                ["de"] = {
                    title = "Sprachreichweite",
                    message = "Die Sprachreichweite wurde auf %s Meter gestellt.",
                },
                ["en"] = {
                    title = "Voice Range",
                    message = "Voice range has been set to %s meters.",
                },
            }
        },
        marker = {
            enabled = true, -- Would you like to display a marker when the voice range changes?
            markercolor = {r = 136, g = 0, b = 255} -- Marker color
        }
    }
}

Array.Chat = {
    Command = "chat",
    Key = "t"
}

Array.SpeedHud = {
    OnlyDriverCanSee = true
}

Array.Team = {
    Teamchat = {
        enabled = true,
        commandname = "tc",
        groups = {
            ["admin"] = true
        }
    },
    EntryHud = {
        enabled = true,
        groups = {
            ["admin"] = true
        }
    },
    TeamAnnounce = {
        groups = {
            ["admin"] = true
        }
    }
}

Array.Sounds = {
    ["Notify"] = {
        enabled = true,
        type = "url", -- gta or url
        data = {
            url = "https://arrayscripts.com/Notification.mp3",
            gta = {
                audioName = "ATM_WINDOW",
                audioRef = "HUD_FRONTEND_DEFAULT_SOUNDSET"
            }
        }
    },
    ["Announce"] = {
        enabled = true,
        type = "gta", -- gta or url
        data = {
            url = "",
            gta = {
                audioName = "ATM_WINDOW",
                audioRef = "HUD_FRONTEND_DEFAULT_SOUNDSET"
            }
        }
    },
    ["TeamChatNotify"] = {
        enabled = true,
        type = "gta", -- gta or url
        data = {
            url = "",
            gta = {
                audioName = "ATM_WINDOW",
                audioRef = "HUD_FRONTEND_DEFAULT_SOUNDSET"
            }
        }
    }
}
```

{% endcode %}
{% endtab %}

{% tab title="s\_config.lua" %}
{% code lineNumbers="true" expandable="true" %}

```lua
ArrayServer = {}

ArrayServer.AnnounceCommands = {
    ["announce"] = {
        console = false,
        groups = {
            ["pl"] = true
        },
        Event = function(source, args)
            local text = table.concat(args, "")
            TriggerClientEvent("array_hud:announce", -1, "Announce", text, 7000)
        end
    },

    ["teamannounce"] = {
        console = true,
        groups = {
            ["pl"] = true
        },
        Event = function(source, args)
            local text = table.concat(args, "")
            TriggerClientEvent("array_hud:teamannounce", -1, "Team Announce", text, 7000)
        end
    },

    ["frakannounce"] = {
        console = true,
        groups = {
            ["pl"] = true
        },
        Event = function(source, args)
            local frak = args[1]
            table.remove(args, 1)
            local text = table.concat(args, "")
            TriggerClientEvent("array_hud:frakannounce", -1, frak, "Frak Announce", text, 7000)
        end
    }
}
```

{% endcode %}
{% endtab %}

{% tab title="config.js" %}
{% code lineNumbers="true" expandable="true" %}

```js
const ServerName = {
    server_name: "ARRAY",
    server_tag: "CITY",
};

const CFG = {

    Locale: "en",

    Settings: {
        ShowTime: true,
        ShowMoney: true,
        ShowWeapon: true,
        ShowNutrition: true,
        ShowJob: true,
        ShowLocation: true,
        ShowID: true,
        ShowVoice: true,
        ShowRadio: true,
        ShowServerName: true,
        ShowSpeedometer: true,
    },

    NotificationTypes: {
        info: { 
            Color: { // rgb(230, 227, 58)
                r: 230,
                g: 227,
                b: 58
            },
            Icon: "info.svg",
            Name: "Information"
        },
        success: {
            Color: { // rgb(92, 230, 58)
                r: 92,
                g: 230,
                b: 58
            },
            Icon: "success.svg",
            Name: "Success"
        },
        error: {
            Color: { // rgb(248, 113, 108)
                r: 248,
                g: 113,
                b: 108
            },
            Icon: "error.svg",
            Name: "Error"
        },
        lifeinvader: {
            Color: { // rgb(255, 0, 0)
                r: 255,
                g: 0,
                b: 0
            },
            Icon: "lifeinvader.svg",
            Name: "Lifeinvader"
        }
        //... Add more notification types here as needed
    }
}

const Locales = {
    en: {
        "Currency": "$",
        "Time": "H:mm AM/PM", // mm: 0-59, MM: 00-59, h: 0-12, H: 00-12, hh: 0-24, HH: 00-24, ss: 0-59, SS: 00-59, AM/PM: AM/PM
        "Date": "MM/DD/yy", // dd: 0-31, DD: 00-31, mm: 0-12, MM: 00-12, yy: 0-99, YY: 0000-9999
        "ProgressBarKey": "Press [key] to Cancel",
        "ChatPlaceholder": "Message...",

        Preview: {
            Notification: {
                "Message": "This is a notification",
                "Number": "063178",
                "Name": "John Doe",
            },

            Progressbar: {
                "Message": "Loading...",
                "Key": "ESC"
            },

            HelpNotification: {
                "Message": "Press E to Interact",
                "Key": "E"
            },

            Announcement: {
                Title: "Announcement",
                Message: "This is an announcement"
            },

            TeamChat: {
                "Message": "This is a team chat message",
            }

        },

        Settings: {
            "Reset": "Reset Hud Positions",
            "Close": "Close",

            "SpeedometerType": "Speedometer Type",
            "SpeedometerType-1": "Complex",
            "SpeedometerType-2": "Simple",

            "NutritionType": "Nutrition Type",
            "NutritionType-1": "Complex",
            "NutritionType-2": "Simple",

            "MoneyType": "Money Type",
            "MoneyType-1": "Bank",
            "MoneyType-2": "Black Money",

            "ShowMoney": "Show Money",
            "ShowWeapon": "Show Weapon",
            "ShowTime": "Show Time",
            "ShowNutrition": "Show Nutrition",
            "ShowJob": "Show Job",
            "ShowLocation": "Show Location",
            "ShowID": "Show ID",
            "ShowVoice": "Show Voice",
            "ShowRadio": "Show Radio",
            "ShowServerName": "Show Server Name",
            "ShowSpeedometer": "Show Speedometer",
        },

        "UserCount": "Players: [count]",
        "TeamCount": "Team: [count]",

        "MovingHint": "Drag to move | Wheel to Resize | Double click or R to reset",
        "MovingHintReset": "",
        "MovingHintResetAll": "",

        "Hunger": "Food",
        "Thirst": "Drink",
    },

    de: {
        "Currency": "$",
        "Time": "HH:MM", // mm: 0-59, MM: 00-59, h: 0-12, H: 00-12, hh: 0-24, HH: 00-24, ss: 0-59, SS: 00-59, AM/PM: AM/PM
        "Date": "DD.MM.YY", // dd: 0-31, DD: 00-31, mm: 0-12, MM: 00-12, yy: 0-99, YY: 0000-9999
        "ProgressBarKey": "Drücke [key] um abzubrechen",
        "ChatPlaceholder": "Nachricht...",

        Preview: {
            Notification: {
                "Message": "Das ist ein Notify",
                "Number": "063178",
                "Name": "Max Mustermann",
            },

            Progressbar: {
                "Message": "Laden...",
                "Key": "ESC"
            },

            HelpNotification: {
                "Message": "Drücke E um zu Interagieren",
                "Key": "E"
            },

            Announcement: {
                Title: "Ankündigung",
                Message: "Das ist eine Ankündigung"
            },

            TeamChat: {
                "Message": "Das ist ein Team Chat Notify",
            }
        },

        Settings: {
            "Reset": "Hud Positionen zurücksetzen",
            "Close": "Close",

            "SpeedometerType": "Tachometer Typ",
            "SpeedometerType-1": "Complex",
            "SpeedometerType-2": "Simple",

            "NutritionType": "Essen/Trinken Typ",
            "NutritionType-1": "Complex",
            "NutritionType-2": "Simple",

            "MoneyType": "Geld Typ",
            "MoneyType-1": "Bank",
            "MoneyType-2": "Schwarzgeld",

            "ShowMoney": "Geld",
            "ShowWeapon": "Waffe",
            "ShowTime": "Uhrzeit/Datum",
            "ShowNutrition": "Essen/Trinken",
            "ShowJob": "Job",
            "ShowLocation": "Straße/PLZ",
            "ShowID": "ID",
            "ShowVoice": "Mikrofon",
            "ShowRadio": "Funk",
            "ShowServerName": "Server Name",
            "ShowSpeedometer": "Tachometer",
        },

        "UserCount": "Spieler: [count]",
        "TeamCount": "Teamler: [count]",

        "MovingHint": "Ziehen zum Bewegen | Mausrad zum Vergrößern/Verkleinern | Doppelklick oder R zum Zurücksetzen",

        "Hunger": "Essen",
        "Thirst": "Trinken",
    }
}
```

{% endcode %}
{% endtab %}

{% tab title="color\_config.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --main_color: #893AE6;
    --main_Color_25: #893ae640;
    --main_Color_50: #893ae680;
    --main_Color_75: #893ae6bf;
    --title_div_color_2: #551D99;
    --Nutrition_Color_1: #F8C36C;
    --Nutrition_Color_1_BoxOutLine: #f8c26c00;
    --Nutrition_Color_2: #3A8AE6;
    --Nutrition_Color_2_BoxOutLine: #3a8ae600;

    --background_settings_bg: #0B0414;

    --Speed_Fill_Color: #893AE6;
    --Fuel_Fill_Color: #93FF6E;
    --Info_Box_Active_Color: #893AE6;

    --Talking_Color: #D7FF50;
    --Silence_Color: #F86F6C;
    --Muted_Color: #ff4b48;

    --Contrast: #ffffff54;

    --Chat_Background: rgba(137, 58, 230, 0.68);
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

## CSS THEMES

{% tabs %}
{% tab title="red.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --main_color: #E53935;
    --main_Color_25: #e5393540;
    --main_Color_50: #e5393580;
    --main_Color_75: #e53935bf;
    --title_div_color_2: #B71C1C;
    --Nutrition_Color_1: #FFB74D;
    --Nutrition_Color_1_BoxOutLine: #ffb74d00;
    --Nutrition_Color_2: #42A5F5;
    --Nutrition_Color_2_BoxOutLine: #42a5f500;

    --background_settings_bg: #140404;

    --Speed_Fill_Color: #E53935;
    --Fuel_Fill_Color: #7CFC6A;
    --Info_Box_Active_Color: #E53935;

    --Talking_Color: #D7FF50;
    --Silence_Color: #F86F6C;
    --Muted_Color: #ff4b48;

    --Contrast: #ffffff54;
}
```

{% endcode %}
{% endtab %}

{% tab title="blue.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --main_color: #2196F3;
    --main_Color_25: #2196f340;
    --main_Color_50: #2196f380;
    --main_Color_75: #2196f3bf;
    --title_div_color_2: #1565C0;
    --Nutrition_Color_1: #FFD54F;
    --Nutrition_Color_1_BoxOutLine: #ffd54f00;
    --Nutrition_Color_2: #42A5F5;
    --Nutrition_Color_2_BoxOutLine: #42a5f500;

    --background_settings_bg: #03111F;

    --Speed_Fill_Color: #2196F3;
    --Fuel_Fill_Color: #7CFC6A;
    --Info_Box_Active_Color: #2196F3;

    --Talking_Color: #D7FF50;
    --Silence_Color: #F86F6C;
    --Muted_Color: #ff4b48;

    --Contrast: #ffffff54;
}
```

{% endcode %}
{% endtab %}

{% tab title="yellow\.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --main_color: #FBC02D;
    --main_Color_25: #fbc02d40;
    --main_Color_50: #fbc02d80;
    --main_Color_75: #fbc02dbf;
    --title_div_color_2: #F57F17;
    --Nutrition_Color_1: #FFE082;
    --Nutrition_Color_1_BoxOutLine: #ffe08200;
    --Nutrition_Color_2: #42A5F5;
    --Nutrition_Color_2_BoxOutLine: #42a5f500;

    --background_settings_bg: #1A1605;

    --Speed_Fill_Color: #FBC02D;
    --Fuel_Fill_Color: #7CFC6A;
    --Info_Box_Active_Color: #FBC02D;

    --Talking_Color: #D7FF50;
    --Silence_Color: #F86F6C;
    --Muted_Color: #ff4b48;

    --Contrast: #ffffff54;
}
```

{% endcode %}
{% endtab %}

{% tab title="green.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --main_color: #4CAF50;
    --main_Color_25: #4caf5040;
    --main_Color_50: #4caf5080;
    --main_Color_75: #4caf50bf;
    --title_div_color_2: #2E7D32;
    --Nutrition_Color_1: #FFD54F;
    --Nutrition_Color_1_BoxOutLine: #ffd54f00;
    --Nutrition_Color_2: #42A5F5;
    --Nutrition_Color_2_BoxOutLine: #42a5f500;

    --background_settings_bg: #061208;

    --Speed_Fill_Color: #4CAF50;
    --Fuel_Fill_Color: #7CFC6A;
    --Info_Box_Active_Color: #4CAF50;

    --Talking_Color: #D7FF50;
    --Silence_Color: #F86F6C;
    --Muted_Color: #ff4b48;

    --Contrast: #ffffff54;
}
```

{% endcode %}
{% endtab %}

{% tab title="orange.css" %}
{% code lineNumbers="true" expandable="true" %}

```css
:root {
    --main_color: #FB8C00;
    --main_Color_25: #fb8c0040;
    --main_Color_50: #fb8c0080;
    --main_Color_75: #fb8c00bf;
    --title_div_color_2: #E65100;
    --Nutrition_Color_1: #FFD54F;
    --Nutrition_Color_1_BoxOutLine: #ffd54f00;
    --Nutrition_Color_2: #42A5F5;
    --Nutrition_Color_2_BoxOutLine: #42a5f500;

    --background_settings_bg: #160B02;

    --Speed_Fill_Color: #FB8C00;
    --Fuel_Fill_Color: #7CFC6A;
    --Info_Box_Active_Color: #FB8C00;

    --Talking_Color: #D7FF50;
    --Silence_Color: #F86F6C;
    --Muted_Color: #ff4b48;

    --Contrast: #ffffff54;
}
```

{% endcode %}
{% endtab %}
{% endtabs %}