# Player HUD

[**Buy Here**](https://codesign.pro/product/4184067)

[**FiveM Forums Post**](https://forum.cfx.re/t/release-paid-smartwatch-player-hud/1878537)

[**YouTube Showcase Video**](https://youtu.be/NmixlPnuTuk)

This resource can be purchased as part of a bundle for a discount [here](https://codesign.pro/package/4286694).

#### Translate

* [Click here to translate this page.](https://docs-codesign-pro.translate.goog/paid-scripts/player-hud-smart-watch?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=en-GB&_x_tr_pto=nui)
* [How do I change language?](https://gyazo.com/38606313ac9a7c290dc2c72b6793bde6)

## INSTALLATION GUIDE

### Step 0 - First Steps

{% hint style="warning" %}
**1.** Download your resource from [FiveM’s Keymaster](https://keymaster.fivem.net/asset-grants). &#x20;

**2.** Unzip the `cd_playerhud.zip` folder and place this folder in your server's resource folder.

**3.** Add the resource to your server start config (server.cfg): `ensure cd_playerhud`. If you are using a framework, it must be placed anywhere below your framework resource e.g., es\_extended, not above.

```
ensure es_extended
ensure cd_playerhud
```

{% endhint %}

### Step 1 - Fxmanifest

{% hint style="warning" %}
Depending on your framework and dependencies, you may need to make some changes inside the **`[cd_playerhud/fxmanifest.lua]`**. We have made this easier by [commenting ](https://i.imgur.com/bbb0dam.png)on the lines you possibly need to change.
{% endhint %}

### Step 2 - Configure Resource

{% hint style="warning" %}
You **MUST** read all configurable options inside the **`[cd_playerhud/configs/config.lua]`** file and configure them to suit your server's needs. Please read the [”commented out help text”](https://i.imgur.com/QCja8UZ.png) at the end of each line so you can understand what each config option does.

**The most important sections are the options under the** [**Framework** ](https://i.imgur.com/4ukCTZr.png)**and** [**Important** ](https://i.imgur.com/IVm7E8l.png)**sections at the top of the `config.lua`. Everything else is optional.**
{% endhint %}

### **Step 3 -** SQL Database

{% hint style="warning" %}
You **MUST** import the SQL file to your database. This SQL file is located inside th&#x65;**`READ_ME_AFTER_PURCHASING`** folder; the file is named **`SQL_main.sql`**. Watch this video if you are unsure how to do this [HeidiSQL ](https://youtu.be/s3tqlHV3yb0)/ [PHPMyAdmin](https://youtu.be/NXqmYn7bbMM).
{% endhint %}

### Step 4 - Configure Key Binds

{% hint style="warning" %}
Before starting this resource on your main/live server, we highly advise configuring your key binds because this resource uses [Fivem's Key Mapping](https://docs.codesign.pro/helpful-guides/register-key-mapping).

**Where can I configure my key binds?**

You can configure key binds in the [Keys and Commands](https://i.imgur.com/bTvuXLZ.png) section near the bottom of the **`[cd_playerhud/configs/config.lua]`**.

> **Why do I need to do this?**
>
> Well long story short;- once a player has joined your server with this resource running you can no longer force change their key binds for this resource through the config.lua, only they can change it in the in-game [pause menu settings](https://imgur.com/GRWKelR). Although it will change for the players who join after you have changed it.
>
> The benefit of this system is that it's much more optimised and players can easily change their key binds on keyboards or controllers. You can also check out the [Default Keybinds](#default-keybinds) for this resource.
> {% endhint %}

### Step 4 - Basic Needs & Status

{% tabs %}
{% tab title="ESX" %}
{% hint style="danger" %}
**Note:** In version 3.1.0+ esx\_basicneeds and esx\_status are **not compatible**. You must remove these resources as everything you need is built into cd\_playerhud.
{% endhint %}

## **Basic Needs**

### **Do you want to use the built-in basic needs system (hunger & thirst)?**

**No?** Then set the `Config.BasicNeeds.ENABLE` in the config.lua to **false.**

**Yes?** Then set the `Config.BasicNeeds.ENABLE` in the config.lua to **true** and configure the Config.BasicNeeds config options. You must also add your usable food & drink items to the `Config.BasicNeeds.Items` config table.

### **Do you want to save hunger & thirst in the database?**

**No?** Then set the `Config.BasicNeeds.save_in_database` in the config.lua to **false.**

**Yes?** Then set the `Config.BasicNeeds.save_in_database` in the config.lua to **true** and import the SQL file which is located inside the`READ_ME_AFTER_PURCHASING` folder, the file is named **`SQL_main.sql`**. Watch this video if you are unsure how to do this [HeidiSQL ](https://youtu.be/s3tqlHV3yb0)/ [PHPMyAdmin](https://youtu.be/NXqmYn7bbMM).

## **Stress**

### **Do you want to use the built-in stress system?**

**No?** Then set the `Config.Stress.ENABLE` in the config.lua to **false.**

**Yes?** Then set the `Config.Stress.ENABLE` in the config.lua to **true** and configure the Config.Stress config options.

### **Do you want to save stress in the database?**

**No?** Then set the `Config.Stress.save_in_database` in the config.lua to **false.**

**Yes?** Then set the `Config.Stress.save_in_database` in the config.lua to **true** and import the SQL file which is located inside the`READ_ME_AFTER_PURCHASING` folder, the file is named **`SQL_main.sql`**. Watch this video if you are unsure how to do this [HeidiSQL ](https://youtu.be/s3tqlHV3yb0)/ [PHPMyAdmin](https://youtu.be/NXqmYn7bbMM).
{% endtab %}

{% tab title="QBCore" %}

## **Basic Needs**

{% hint style="warning" %}
We **DO NOT** recommend you use the built-in basic needs (hunger & thirst) system in cd\_playerhud. Instead, we **recommend you use the basic needs (hunger & thirst) system** built into the QBCore base.&#x20;

**Note:** Yes, you can remove the default QBCore hud script, as we don't need that; the framework handles the basic needs system, not the hud script.
{% endhint %}

So set the **`Config.BasicNeeds.ENABLE`** in the config.lua to **false**. You **do not need** to make any additional changes; it comes pre-configured to use the QBCore basic needs (hunger & thirst) metadata.

## **Stress**

### **Do you want to use the built-in stress system?**

**No?** Then set the `Config.Stress.ENABLE` in the config.lua to **false.**

**Yes?** Then set the `Config.Stress.ENABLE` in the config.lua to **true** and configure the Config.Stress config options.

### **Do you want to save stress in the database?**

{% hint style="warning" %}
We recommend enabling this option as this comes pre-configured to save the data to the QBCore metadata.
{% endhint %}

So set the `Config.Stress.save_in_database` in the config.lua to **true.**

{% hint style="info" %}
**Disclaimer:** When we recommend something, this does not mean these things are impossible; we say this as we recommend the easiest installation method. If you have the knowledge you can do almost anything with this resource as it is highly versatile.
{% endhint %}
{% endtab %}

{% tab title="vRP" %}

## **Basic Needs**

{% hint style="warning" %}
We **DO NOT** recommend you use the built-in basic needs (hunger & thirst) system in cd\_playerhud. Instead. We recommend you use the basic needs (hunger & thirst) system built into the vRP base.
{% endhint %}

So set the **`Config.BasicNeeds.ENABLE`** in the config.lua to **false**. You **do not need** to make any additional changes; it comes pre-configured to use the vRP basic needs (hunger & thirst) system.

## **Stress**

### **Do you want to use the built-in stress system?**

**No?** Then set the `Config.Stress.ENABLE` in the config.lua to **false.**

**Yes?** Then set the `Config.Stress.ENABLE` in the config.lua to **true** and configure the Config.Stress config options.

### **Do you want to save stress in the database?**

{% hint style="warning" %}
We **DO NOT** recommend saving the stress in the database from cd\_playerhud.
{% endhint %}

So make sure the `Config.Stress.save_in_database` in the config.lua to **false.** This is because as far as we know vRP does not by default support saving stress to the database.

{% hint style="info" %}
**Disclaimer:** When we recommend something, this does not mean these things are impossible; we say this as we recommend the easiest installation method. If you have the knowledge you can do almost anything with this resource as it is highly versatile.
{% endhint %}
{% endtab %}

{% tab title="No-framework" %}

## **Basic Needs**

{% hint style="warning" %}
We **DO NOT** recommend you use the built-in basic needs system for cd\_playerhud.
{% endhint %}

So make sure **`Config.BasicNeeds.ENABLE`** is set to **false**. This is because you would need a framework to have usable food & drink items.

## **Stress**

### **Do you want to use the built-in stress system?**

**No?** Then set the `Config.Stress.ENABLE` in the config.lua to **false.**

**Yes?** Then set the `Config.Stress.ENABLE` in the config.lua to **true** and configure the Config.Stress config options.

### **Do you want to save stress in the database?**

{% hint style="warning" %}
We **DO NOT** recommend saving the stress in the database from cd\_playerhud.
{% endhint %}

So make sure the `Config.Stress.save_in_database` in the config.lua to **false.** This is because you would need a database to save data to the database.
{% endtab %}

{% tab title="Other (custom framework)" %}
{% hint style="danger" %}
We **CAN NOT** offer installation support when implanting this resource into your custom framework. But all of the code required to convert this resource into other frameworks is open source to you.
{% endhint %}
{% endtab %}
{% endtabs %}

### Create your own apps

**Tips for creating Your own app screens**

The position in the screens.list array determines the order of displaying the screens. Do not change screens.current unless you want a different screen to display first (screens.current goes from 0 to screens.list.length-1)

Currently, the screens.list.name value has no use; however, it is reserved for future use, such as setting options for certain apps. // The screens.list.id is the id of the element containing the app screen. It will be displayed once it is cycled.

To make your app functional you would either need to create another JavaScript file and include it through the HTML or add inline JavaScript to the index.html file itself.

To place the screen in the correct position, use the .app-screen class on your HTML element.

The existing apps are not editable; however, you can change their order if you wish.

##

## INFORMATION

### Default Key Binds

These keys can be modified and/or disabled in the [Keys and Commands](https://i.imgur.com/bTvuXLZ.png) section of the `[configs/config.lua]`.

Please make sure you understand how [Key Mapping](https://docs.codesign.pro/coding-information/register-key-mapping) works.

| **Key**                   | **Description**            |
| ------------------------- | -------------------------- |
| **`I`**                   | Toggle the watch UI.       |
| **`K`**                   | Toggle move mode.          |
| **`Right Click`**         | Disable move mode.         |
| **`Left / Right Arrows`** | Cycle through the screens. |

### Chat Commands

These chat commands can be renamed and/or disabled in the [Keys and Commands](https://i.imgur.com/bTvuXLZ.png) section of the `[configs/config.lua]`.

The exact usage for each command will be displayed in the chat suggestions when using the commands in-game.

| **Command**        | **Description**                                                         |
| ------------------ | ----------------------------------------------------------------------- |
| **`/watchhud`**    | Toggle the watch UI.                                                    |
| **`/resetstatus`** | (Staff Only) Reset a player's hunger, thirst, stress, and oxygen stats. |

### Events

These events are completely optional; you can use them if needed.**Here is some information about this event.**

{% tabs %}
{% tab title="Add Status" %}

| **Event Name**                                                       | **Description**                         | **Event Type** |
| -------------------------------------------------------------------- | --------------------------------------- | -------------- |
| TriggerEvent('cd\_playerhud:status:add', **Status\_Type, Amount`)`** | <p></p><p>Add a status to a player.</p> | client         |

**What does `Status_Type` and `Amount` mean?**

| **Status\_Type (string)** | **Amount  (number)**                                                                                                                                                                                   |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 'hunger'                  | 0 - 100 (0 is empty and 100 is full)                                                                                                                                                                   |
| 'thirst'                  | 0 - 100 (0 is empty and 100 is full)                                                                                                                                                                   |
| 'stress                   | 0 - 100 (0 is empty and 100 is full)                                                                                                                                                                   |
| 'oxygen'                  | 0 - ∞ (You can add any amount, this is to support the use of diving gear, etc. But be sure to set a player's oxygen back to the maximum default value of **30** when the diving gear has been removed) |

**Do you need an example?**

The example below will add 20 'hunger' to a player when being triggered from the **client-side to the client-side.**

```lua
TriggerEvent('cd_playerhud:status:add', 'hunger', 20)
```

The example below will add 20 'hunger' to a player when being triggered from the **server-side to the client-side.**

```lua
TriggerClientEvent('cd_playerhud:status:add', source, 'hunger', 20)
```

{% endtab %}

{% tab title="Remove Status" %}
**Here is some information about this event.**

| **Event Name**                                                        | **Description**                              | **Event Type** |
| --------------------------------------------------------------------- | -------------------------------------------- | -------------- |
| TriggerEvent('cd\_playerhud:status:remove', **Status\_Type, Amount)** | <p></p><p>Remove a status from a player.</p> | client         |

**What does `Status_Type` and `Amount` mean?**

| **Status\_Type (string)** | **Amount  (number)**                                                                                                   |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| 'hunger'                  | 0 - 100 (0 is empty and 100 is full)                                                                                   |
| 'thirst'                  | 0 - 100 (0 is empty and 100 is full)                                                                                   |
| 'stress                   | 0 - 100 (0 is empty and 100 is full)                                                                                   |
| 'oxygen'                  | 0 - ∞ (You can remove any amount, this is to support the use of diving gear, etc. The maximum default value is **30**) |

**Do you need an example?**

The example below will remove 20 'stress' from a player when being triggered from the **client-side to the client-side.**

```lua
TriggerEvent('cd_playerhud:status:remove', 'stress', 40)
```

The example below will remove 20 'stress' from a player when being triggered from the **server-side to the client-side.**

```lua
TriggerClientEvent('cd_playerhud:status:remove', source, 'stress', 40)
```

{% endtab %}

{% tab title="Set Status" %}
**Here is some information about this event.**

| **Event Name**                                                     | **Description**                      | **Event Type** |
| ------------------------------------------------------------------ | ------------------------------------ | -------------- |
| TriggerEvent('cd\_playerhud:status:set', **Status\_Type, Amount)** | <p></p><p>Set a player's status.</p> | client         |

**What does `Status_Type` and `Amount` mean?**

| **Status\_Type (string)** | **Amount  (number)**                                                                                                                                                                                   |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 'hunger'                  | 0 - 100 (0 is empty and 100 is full)                                                                                                                                                                   |
| 'thirst'                  | 0 - 100 (0 is empty and 100 is full)                                                                                                                                                                   |
| 'stress                   | 0 - 100 (0 is empty and 100 is full)                                                                                                                                                                   |
| 'oxygen'                  | 0 - ∞ (You can set any amount, this is to support the use of diving gear, etc. But be sure to set a player's oxygen back to the maximum default value of **30** when the diving gear has been removed) |

**Do you need an example?**

The example below will set a player's 'oxygen' to 30 when being triggered from the **client-side to the client-side.**

```lua
TriggerEvent('cd_playerhud:status:set', 'oxygen', 30)
```

The example below will set a player's 'oxygen' to 30 when being triggered from the **server-side to the client-side.**

```lua
TriggerClientEvent('cd_playerhud:status:set', source, 'oxygen', 30)
```

{% endtab %}

{% tab title="Reset Status" %}
**Here is some information about this event.**

| **Event Name**                                  | **Description**                                             | **Event Type** |
| ----------------------------------------------- | ----------------------------------------------------------- | -------------- |
| TriggerServerEvent('cd\_playerhud:ResetStatus') | <p></p><p>Reset a player's status to the default values</p> | server         |

**Do you need an example?**

The example below reset a player's statuses to the default values when being triggered from the **client-side to the server-side.**

```lua
TriggerServerEvent('cd_playerhud:ResetStatus')
```

{% endtab %}

{% tab title="Toggle Watch UI" %}
**Here is some information about this event.**

| **Event Name**                                        | **Description**                                              | **Event Type** |
| ----------------------------------------------------- | ------------------------------------------------------------ | -------------- |
| TriggerEvent('cd\_playerhud:OpenWatchUI', **Action)** | <p></p><p>Open or close the watch UI from other scripts.</p> | client         |

**What does `Action` mean?**

| **Action** | **Description**                                      |
| ---------- | ---------------------------------------------------- |
| 'open'     | Open the watch UI.                                   |
| 'close'    | Close the watch UI.                                  |
| nil        | If the Action is nil, this will toggle the watch UI. |

**Do you need an example?**

The example below will show a players watch when being triggered from the **client-side to the client-side.**

```lua
TriggerEvent('cd_playerhud:OpenWatchUI', 'open')
```

The example below will show a players watch when being triggered from the **server-side to the client-side.**

```lua
TriggerClientEvent('cd_playerhud:OpenWatchUI', source, 'open')
```

{% endtab %}
{% endtabs %}

### Exports

These exports are completely optional; you can use them if needed.

{% tabs %}
{% tab title="client-side exports" %}
**Get Status**

{% code title="Returns the hunger, thirst, stress, and oxygen stats (table)." %}

```lua
exports['cd_playerhud']:GetStatus()
```

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

##

## COMMON ISSUES

Please check out our [**Troubleshooting Guide**](https://docs.codesign.pro/coding-information/self-debugging#troubleshooting) before contacting our support.

🔔 <mark style="color:red;">**Folder Name**</mark> Make sure the name of the folder is `cd_playerhud`.

🔔 <mark style="color:red;">**Encrypted Files**</mark> Do not edit the encrypted files in any way.

> <mark style="color:red;">**Money/Hunger etc is not being updated on the UI?**</mark>
>
> eg., if certain things like your hunger/thirst/stress/money are not **being updat**ed, that most likely means your framework has renamed the events.
>
> {% code overflow="wrap" %}
>
> ```
> ✔️ We can not directly offer support with this, we create compatibility for default versions of frameworks. But what you need to do is change the event names in the client_customise_me.lua to the ones that currently work for your framework.
> ```
>
> {% endcode %}

## ERROR CODES

If you see an error code not listed below, please open a script support ticket in the [Codesign Discord](https://discord.gg/codesign).

{% tabs %}
{% tab title="Server" %}
N/A
{% endtab %}

{% tab title="Client" %} <mark style="color:red;">**8846**</mark> - You are sending the wrong data in the `cd_playerhud:status:set` event. The first argument should be the status and the 2nd argument should be a number, refer to this for how this event should be formatted [#Events](#events).
{% endtab %}
{% endtabs %}

## CHANGELOG

> **Files Changed**
>
> Not every update requires you to replace the whole folder. We do this because we understand it's a pain to redo the configs for every update.

* **All Files -** This means you should delete your old `cd_playerhud` folder, download and add in the latest version, reconfigure the configs folder and restart your server.
* **All Files Except config.lua -** This means you should do all of the above (in the All Files section) but additionally **make a backup of the `config.lua`** file and replace the new config.lua file with the one you made a backup of.
* **Specific Files -** This means you can copy and paste the **SPECIFIC** new files over the old ones and restart the server.

> **Update Type**
>
> On rare occasions, you are forced to update to the latest version. Mostly due to authentication updates where the old versions will no longer work.

* **Mandatory -** This means you MUST update to this new version, or the old versions will no longer work.
* **Optional -** This means it's completely your choice whether you wish to update to the latest version. But we do not offer support for old versions for obvious reasons; they are old.

{% hint style="warning" %}
**Skipping Updates**

If you are attempting to update to the latest version but have skipped previous updates, you should update all files just to be safe. For example., let's say you are currently on v4.0.1, you did not update when v4.0.2 was released, and now v4.0.3 is released, and you want to update; you should always use the “All Files” update method.
{% endhint %}

{% tabs %}
{% tab title="v3.0.0" %}

### 26/12/2020 - 10/08/2021

v3.0.0 - v3.1.1

**Files Changed:**&#x20;

* [x] All Files
* [ ] All Files Except config.lua
* [ ] Specific Files

**Update Type:**

* [x] Mandatory
* [ ] Optional

**Changelog:**

{% hint style="success" %}
Add

* Added config options for framework version.
* Added the ability to rename all esx events such as the setjob and playerloaded events.
* Added drag-and-drop compatibility for QBCore.
* Added 2 new files (stress and underwater\_oxygen) to make them open-source and editable.
* Added a new config option to save the hunger/thirst/stress to the database without needing to use esx\_status. This is more optimized than how esx\_status saves to the database as now this data is only saved when a player exits the server or switches character.
* Added a new config option so you can choose the effect when a player's hunger/thirst is empty. By default, you can choose between slowly losing health or blurring the screen.
* Added a new system where if the usable food/drink items are spammed, they will get added to a queue and the animations will execute one at a time
* Added a staff command to reset a players status.
* Added the ability to set the under water oxygen from other scripts to support diving gear etc.
* Added support for cd\_multicharacter when switching characters in game to reset the cached client side status data and re cache the new characters status data since you are able to save a characters data in the database now.
* Added the ability for customers to make their own apps.
  {% endhint %}

{% hint style="info" %}
Edit

* Changed disable move mode to right click instead of K.
* Updated the codesign error handlers.
* Allowed the stress value to be changed even tho config.stress is disabled.
* Added the oxygen (in water) to the GetStatus() export.
* Re-wrote and updated parts of the code.
* Reworked the logic behind getting a players money to be **far** more optimized so it does not need to get the data from the server-side anymore.
  {% endhint %}

{% hint style="warning" %}
Fix

* Fixed having to re-configure the hunger/thirst alert every time you relog.
* Fixed random server error on server start.
* Minor bug fixes.
* Fixed the scale locale on the UI.
* Temporary fix for the canary issue until the new Tebex FiveM license system is ready to launch, when this is released we will be fully switching over to the new system.
* Fixed a typo which caused removing a status to only remove 1.
  {% endhint %}
  {% endtab %}

{% tab title="4.0.0" %}

### 05/11/2021

**Files Changed:**&#x20;

* [x] All Files
* [ ] All Files Except config.lua
* [ ] Specific Files

**Update Type:**

* [x] Mandatory
* [ ] Optional

**Changelog:**

{% hint style="danger" %}
**Authentication**

* **We are now using the official Authentication System provided by FiveM. The old auth system will be taken offline 1 week from now (give or take a few days if needed).**
  {% endhint %}

{% hint style="success" %}
**Add**

* Added compatibility for oxmysq
  {% endhint %}
  {% endtab %}

{% tab title="v4.0.1" %}

### 08/11/2021

**Files Changed:**&#x20;

* [ ] All Files
* [ ] All Files Except config.lua
* [x] Specific Files

```lua
fxmanifest.lua - (IMPORTANT)
server/main/server.lua - (IMPORTANT)
client/main/client.lua - (IMPORTANT)
html (FULL FOLDER) - (IMPORTANT)
```

**Update Type:**

* [x] Mandatory
* [ ] Optional

**Changelog:**

{% hint style="danger" %}
**Authentication**

* **Small authentication update to ensure stability**.
  {% endhint %}
  {% endtab %}

{% tab title="v4.0.2" %}

### 14/06/2022

**Files Changed:**&#x20;

* [x] All Files
* [ ] All Files Except config.lua
* [ ] Specific Files

**Update Type:**

* [ ] Mandatory
* [x] Optional

**Changelog:**

{% hint style="success" %}
**Add**

* Added compatibility with new oxmysql version.
* Added compatibility with new qbcore permission changes.
  {% endhint %}

{% hint style="info" %}
**Edit**

* Added some extra checks to make sure important config options have been set correctly.
  {% endhint %}

{% hint style="warning" %}
Fix

* Fixed issue with blurred screen not resetting when setting or adding hunger/thirst using the /resetstatus command and other similar issues.
  {% endhint %}
  {% endtab %}
  {% endtabs %}
