Elements

JustHud allows you to create fully customized elements based on your needs

Basics

Icons

Sometimes you need to use icons in elements or other components, there are currently only one option for icons, you should pass string to script to parse the icon.

Iconsax

You can choose many icons from iconsax

-- NAME - Icon name
-- VARIANT - Icon variant (Bulk, Bold)
-- Both params are case sensitive
local icon = "iconsax:NAME:VARIANT"

local exampleIcon = "iconsax:Heart:Bulk"

Position

position is one of the options that is common to all elements, you can choose the default element position and enable the position editing option for this element in settings menu

{
    default = { -- Default position using % from points
        bottom = 0,
        top = 0,
        right = 0,
        left = 0
    },
    -- Note: Never use two parallel options together (top and bottom, left and right)
    is_editable = true -- Is element position editable
}

Visibility

using visibility option you can change default visibility, or add visibility option to settings menu

{
    default = true, -- Is it visible by default
    is_editable = true, -- Is visibility editable in settings
    settings_title = "Custom name", -- Visibility option settings name
    in_car = true, -- Is it visible in vehicle
    not_in_car = true, -- Is it visible outside of vehicle
}

Status Element

Status element is used to show a status percentage to user

{
    id = "hp", 
    type = "status", 
    show = {
        default = true,
        is_editable = true, 
        settings_title = "Show hp", 
        in_car = true, 
        not_in_car = true
    },
    position = { 
        default = { 
            bottom = 20,
            left = 1
        },
        is_editable = true 
    },
    data = "%health%",
    icon = "iconsax:Heart:Bulk" 
}

data - Should be a placeholder or a static value. read about placeholders on this page. icon - The icon at center of the element Note: In all elements, icon which is provided in icon field will be showed on settings page too.

Card Element

Card element is used to show title & subtitle in card along with icon.

{
    id = "wallet",
    type = "card",
    show = {
        default = true,
        is_editable = true,
        settings_title = "Show wallet",
        in_car = true,
        not_in_car = true,
    },
    position = {
        default = {
            top = 15,
            right = 1
        },
        is_editable = true,
    },
    icon = "iconsax:Wallet:Bold",
    title = "format(%cash%)$",
    subtitle = "WALLET"
}

icon - The icon in card and settings menu title - Title of card, showed at top subtitle - Subtitle of card, showed at bottom

Text Element

Text element is used to show title & subtitle along with one or two icons.

{
    id = "location",
    type = "text",
    show = {
        default = true,
        is_editable = true,
        settings_title = "Show location",
        in_car = true,
        not_in_car = true,
    },
    position = {
        default = {
            bottom = 30,
            right = 1
        },
        is_editable = true,
    },
    title = "%street%",
    subtitle = "%zone%",
    rightIcon = "iconsax:Gps:Bold",
}

icon - The icon in settings menu leftIcon - The icon which is showed on left of the text. rightIcon - The icon which is showed on right of the text. title - The title of text. subtitle - The subtitle of text.

Branding Element

Branding text with two colors, same as Text element without Icons.

{
    id = "logo-branding",
    type = "branding",
    show = {
        default = true,
        is_editable = true,
        settings_title = "Show servername",
        in_car = true,
        not_in_car = true,
    },
    position = {
        default = {
            top = 2,
            right = 1
        },
        is_editable = true,
    },
    title = "JustTest",
    subtitle = "Roleplay"
}

Icon Element

Just a simple icon from here.

{
    id = "seatbelt-icon",
    type = "icon",
    show = {
        default = true,
        is_editable = false,
        settings_title = "",
        in_car = true,
        not_in_car = false
    },
    position = {
        default = {
            bottom = 5,
            right = 5
        },
        is_editable = true,
    },
    icon = "internal:SeatbeltIcon",
    active = "%seatbelt%==true"
}

active - The icon is on danger color by default, for active you need to define a condition all logical conditions are usable (<,>,<=, ...). for instance, "%cash%>1000% The following icon would be active when player has more than 1000$ cash.

Image Element

With image element you can add custom image files (png,jpg,webp or even gif) to player HUD.

{
    id = "logo-image",
    type = "image",
    show = {
        default = true,
        is_editable = true,
        settings_title = "Show logo",
        in_car = true,
        not_in_car = true 
    },
    position = {
        default = {
            bottom = 5,
            right = 45
        },
        is_editable = true,
    },
    image = "images/image1.png",
    width = "auto",
    height = "5",
}

image - The image path in web/ folder or direct link to image. width - The image width in screen scale (1 would be 1% and 100 would be 100%) or auto for auto scaling with height. height- The image height in screen scale (1 would be 1% and 100 would be 100%) or auto for auto scaling with width. Note: if you set both width & height to auto, HUD will show the image on its original width and height, that may cause problems for players with different resolutions.

Static Elements

Some of the elements that are defined in default config are with static type, you should not change their ids, simply change what it is exist on their config already.