Basic Configuration

This section covers how to configure the basic settings of the HUD script. This includes setting up components, choosing what information to display, and adding your server logo.

Server logo

To set up your server logo, place your logo image inside the web/images/ folder. The logo file must be named logo.png for it to work correctly. Ensure that the logo dimensions are in a square format, such as 512x512, 1024x1024, and so on. The size does not matter as long as it is a square.

Notification sounds

You can customize the sound for each notification. These sounds are stored in the web/sounds/ directory. Please do not rename the sound files; each file must follow the notification_type.mp3 format (e.g., error.mp3, info.mp3, success.mp3). Changing the names will cause the HUD to malfunction.

If you are not using notifications or prefer not to use notification sounds, simply disable them in your config file. However, do not delete these sound files.

Management by players

manageHUD - if set to true players can open settings menu to choose by themselves what HUD components they want to see. If you want to disable this feauture - set it to false .

HUDCommand - command that opens HUD settings menu. If manageHUD is set to false this command will work as toggling HUD on and off. If you want to disable the command just leave it as empty string, like so '' .

Config.manageHUD = true
Config.HUDCommand = 'hud'

Components

Choose which components you want to be displayed to the player.

Please don't delete any of the variables, even if you're not using them, as it will cause the HUD to malfunction.

The basic variables

label and desc - are for settings menu.

enabled - is component globally enabled.

default - should component be visible to player by default when they enter the server for the first time.

Other variable explanation will be in a code comment form -- variable explanation

Config.HUDComponents = {
  hud = {
    label = "HUD",
    desc = "Enable or disable the HUD",
  },
  notifications = {
    -- enabled and default here stands for notification sounds
    enabled = true,
    default = true,
    label = "Notifications",
    desc = "Enable or disable the notifications sound",
    -- Notifications sound volume
    volume = 0.1,
     -- Change position of notifications holder
    -- Available positions: 'map-top' | 'left-center' | 'right-center' | 'bottom-center'
    -- If you're using position 'map-top' holder width will be map width
    -- When using other positions, you can set holder width in design.json file.
    pos = 'map-top',
    -- Notification icon by notification type icon
    -- Use https://fontawesome.com to find icon you want to use.
    icon = {
      error = "fas fa-triangle-exclamation",
      success = "fas fa-circle-check",
      info = "fas fa-circle-info",
    }
  },
  compass = {
    enabled = true,
    default = true,
    label = "Compass",
    desc = "Enable or disable the compass",
  },
  status = {
    enabled = true,
    default = true,
    label = "Status",
    desc = "Enable or disable the status indicators",
  },
  info = {
    enabled = true,
    default = true,
    label = "Info",
    desc = "Enable or disable the information bar at the top right of the HUD",
    -- Change position of info bar. Available ('top-center' | 'top-right' | 'top-left' | 'bottom-center')
    position = 'top-right',
    -- Use timestamp in the info HUD
    timestamp = true,
    -- What timestamp format to use.
    -- Refer to https://day.js.org/docs/en/display/format on how to choose format you want.
    timestampFormat = 'HH:mm YYYY.MM.DD',
    -- Should logo be displayed in the info hud.
    logo = true,
    -- Should logo be animated.
    -- Between 20 and 60 seconds, one of three spinning/sliding animations will occur.
    logoAnimation = true,
  },
  speedometer = {
    enabled = true,
    -- Should fuel be displayed
    fuel = true,
    -- Whether to use MPH or KMH
    useKMH = true,
    -- Should km/h or mph be displayed under the speed
    measurement = true
  },
  keybinds = {
    enabled = true,
    default = true,
    label = "Keybinds",
    desc = "Enable or disable the keybinds on the right of the HUD",
  }
}

Keep in mind if you disable components that you don't need, you don't have to configure them, just leave them as it is. BUT DO NOT DELETE THEM.

Status

An array of predefined statuses your players will see. Object fields that are required will have an asterisk (*) in front of them.

{

*name : string - the key of a status you're going to use to update status value. It has to be unique.

*icon : string - status icon, use FontAwesome to find icon you want to use.

*color : string - status color.

emptyColor : string - status empty color. Default rgba(255, 255, 255, 0.1) .

iconColor : string - status empty color. Default #FFF.

blinkFrom : number - when should the player be notified by blinking the status indicating they're low on something? If it's not needed, omit the variable from the object.

}

Config.Status = {
  {
    name = 'health',
    icon = 'fas fa-heart',
    color = '#CFFE6C',
    blinkFrom = 10,
  },
  {
    name = 'armor',
    icon = 'fas fa-shield-alt',
    color = '#CFFE6C',
    iconColor = "#FFF",
    emptyColor = 'rgba(255, 255, 255, 0.1)',
  },
  {
    name = 'hunger',
    icon = 'fas fa-utensils',
    color = '#CFFE6C',
    blinkFrom = 15,
  },
  {
    name = 'thirst',
    icon = 'fas fa-tint',
    color = '#CFFE6C',
    blinkFrom = 15,
  },
}

Info

An array of predefined info hud options. All the object fields are required.

{

name : string - the key value of info you're going to use to update info values. The key has to be unique.

icon : string - info icon, use FontAwesome to find icon you want to use.

default : string - default value. If your information is static (you will not update it) you can use it to define the value you want to show. If you will change the value it doesn't really matter if you set it, it could be left as empty string (''). BUT DO NOT DELETE IT.

}

Config.Info = {
  {
    name = 'id',
    icon = 'fas fa-id-card',
    default = '1',
  },
  {
    name = 'players',
    icon = 'fas fa-users',
    default = '0/128'
  }
}

Keybinds

An object where the keys represent keyboard keys and their corresponding values indicate their functionality.

Config.Keybinds = {
  ['F1'] = "Toggle HUD",
  ['F2'] = "Toggle Compass",
  ['F3'] = "Toggle Status",
  ['F4'] = "Toggle Info",
  ['F5'] = "Toggle Speedometer"
}

Default Config

Here's default config that comes with the script when you buy it. Just in case you did something wrong and you need to start over.

Config = {} -- Don't delete this.

Config.manageHUD = true
Config.HUDCommand = 'hud'

Config.HUDComponents = {
  hud = {
    label = "HUD",
    desc = "Enable or disable the HUD",
  },
  notifications = {
    enabled = true,
    default = true,
    label = "Notifications",
    desc = "Enable or disable the notifications sound",
    volume = 0.1,
    pos = 'map-top',
    icon = {
      error = "fas fa-triangle-exclamation",
      success = "fas fa-circle-check",
      info = "fas fa-circle-info",
    }
  },
  compass = {
    enabled = true,
    default = true,
    label = "Compass",
    desc = "Enable or disable the compass",
  },
  status = {
    enabled = true,
    default = true,
    label = "Status",
    desc = "Enable or disable the status indicators",
  },
  info = {
    enabled = true,
    default = true,
    label = "Info",
    desc = "Enable or disable the information bar at the top right of the HUD",
    position = 'top-right',
    timestamp = true,
    timestampFormat = 'HH:mm YYYY.MM.DD',
    logo = true,
    logoAnimation = true,
  },
  speedometer = {
    enabled = true,
    fuel = true,
    useKMH = true,
    measurement = true
  },
  keybinds = {
    enabled = true,
    default = true,
    label = "Keybinds",
    desc = "Enable or disable the keybinds on the right of the HUD",
  }
}

Config.Status = {
  {
    name = 'health',
    icon = 'fas fa-heart',
    color = '#CFFE6C',
    blinkFrom = 10,
  },
  {
    name = 'armor',
    icon = 'fas fa-shield-alt',
    color = '#CFFE6C',
    iconColor = "#FFF",
    emptyColor = 'rgba(255, 255, 255, 0.1)',
  },
  {
    name = 'hunger',
    icon = 'fas fa-utensils',
    color = '#CFFE6C',
    blinkFrom = 15,
  },
  {
    name = 'thirst',
    icon = 'fas fa-tint',
    color = '#CFFE6C',
    blinkFrom = 15,
  },
}

Config.Info = {
  {
    name = 'id',
    icon = 'fas fa-id-card',
    default = '1',
  },
  {
    name = 'players',
    icon = 'fas fa-users',
    default = '0/128'
  }
}

Config.Keybinds = {
  ['F1'] = "Toggle HUD",
  ['F2'] = "Toggle Compass",
  ['F3'] = "Toggle Status",
  ['F4'] = "Toggle Info",
  ['F5'] = "Toggle Speedometer"
}