# EN

# Presentation

****XelBob-tab****<span style="white-space: pre-wrap;"> is a script designed in collaboration with </span>[****Bob's &amp; Co****](https://discord.gg/X36mxQTk5b), aimed at FiveM server owners. The purpose of this script is to display websites directly on your server. You have the possibility to configure multiple websites to be displayed and restrict access based on the player's job, adding a realistic dimension to your server.

<span style="white-space: pre-wrap;">Furthermore, </span>****XelBob-tab****<span style="white-space: pre-wrap;"> offers an optional feature: real-time weather display on the in-game tablet. This feature is accessible only if you use the </span>[****easytime****](https://github.com/dsheedes/cd_easytime "Show script page")<span style="white-space: pre-wrap;"> script.</span>

[![image.png](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/scaled-1680-/6Htimage.png)](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/6Htimage.png)

# Installation

<span style="white-space: pre-wrap;">To download the script, go to: </span>[Xelyos | Bobs&amp;Co | Tablet (tebex.io)](https://xelyos.fr/solution/xelbob-tab/invite "Access the resource page")

<span style="white-space: pre-wrap;">In your </span>`<span class="editor-theme-code">resources</span>`<span style="white-space: pre-wrap;"> directory, drag and drop the </span>`<span class="editor-theme-code">XelBob-tab</span>`<span style="white-space: pre-wrap;"> file.</span>

<span style="white-space: pre-wrap;">In your </span>`<span class="editor-theme-code">server.cfg</span>`<span style="white-space: pre-wrap;"> file, activate the resource by adding the line: </span>

```ini
ensure XelBob-tab
```

<p class="callout warning">Modifying the resource name will cause the tablet to malfunction</p>

<p class="callout success">Once the tablet is correctly installed, when you start your server, this should appear in your console:</p>

[![image.png](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/scaled-1680-/B3pimage.png)](https://xelyos-wiki.s3.amazonaws.com/uploads/images/gallery/2025-04/B3pimage.png)

# Configuration file

#### ESX Version

```lua
-- ESX Version
Config.versionESX = 'new' --[[
    'old' (Esx 1.1).
    'new' (Esx 1.2, v1 final, legacy or extendedmode).
]]
```

<p class="callout info">Set the ESX version</p>

#####   


#####   


##### Set the language for time

```lua
Config.Locale = 'en' -- en/fr
```

#####   


#####   


##### Bind a command for tablet opening

```lua
Config.Command = 'tablet' -- Set nil to disabled command!
Config.CommandDescription = 'Open tablet'
```

<p class="callout info"><span style="white-space: pre-wrap;">You can set a command for tablet opening. If you want to disable the command opening, set it to </span>`<span class="editor-theme-code">nil</span>`.</p>

#####   


##### Attach an item to tablet usage

```lua
Config.Item = 'xelyos_bob_tablet' -- Set nil to disabled item!
```

<p class="callout info"><span style="white-space: pre-wrap;">You can attach tablet opening to the usage of an item. To not bind the tablet to an item, set it to </span>`<span class="editor-theme-code">nil</span>`.</p>

# Web site configuration

### Add a Site

- <span style="white-space: pre-wrap;">To add sites, you need to modify the file </span>`<span class="editor-theme-code">nui/assets/config.js</span>`
- <span style="white-space: pre-wrap;">Add a line in the </span>`<span class="editor-theme-code">config.sites</span>`<span style="white-space: pre-wrap;"> array</span>

<u>Line Format:</u>

```lua
{
  name: "Name displayed on the tablet",
  icon: "img/your_image.png",
  href: "unique_name",
  url: "website_url"
}
```

<p class="callout warning"><span style="white-space: pre-wrap;">Warning, the </span>****href****<span style="white-space: pre-wrap;"> must be unique and cannot be used on another site!</span></p>

<details id="bkmrk-exemple-avant-%3A-cons"><summary>Example</summary>

<u>Before:</u>

```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
    ]
};
```

<u>New Site:</u>

```lua
{
  name: "Intranet Xelyos",
  icon: "img/intranet.png",
  href: "intranetxelyos",
  url: "http://intranet-rp.com"
}
```

<u>After:</u>

#####   


```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
        { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
    ]
};
```

<span style="white-space: pre-wrap;"></span>

</details>- <span style="white-space: pre-wrap;">The image linked to your site must be located in the </span>`<span class="editor-theme-code">nui/img</span>`<span style="white-space: pre-wrap;"> directory</span>

##### Change the Background Color

- <span style="white-space: pre-wrap;">You can also change the background color by adding/modifying the </span>`<span class="editor-theme-code">nui/assets/color.css</span>`<span style="white-space: pre-wrap;"> file</span>

```css
.application > #unique_number {
    background: #37517e;
    background: linear-gradient(to right, #37517e, #142747);
}
```

### Limit Access to a Site for a Job

<span style="white-space: pre-wrap;">To restrict access to a site for a job, you need to modify the file </span>`<span class="editor-theme-code">nui/assets/config.js</span>`.

<u>Restriction Format:</u>

```lua
{
  job_name: "job_name",
  sites: [
    { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" }
  ]
}
```

<p class="callout warning"><span style="white-space: pre-wrap;">Warning, the line in the </span>****sites****<span style="white-space: pre-wrap;"> array must be identical to the one in the </span>`<span class="editor-theme-code">config.sites</span>`<span style="white-space: pre-wrap;"> variable!</span></p>

<details id="bkmrk-exemple-variable-ave"><summary>Example</summary>

<span style="white-space: pre-wrap;"></span>

<u>Variable with all sites:</u>

```javascript
const config = {
    sites : [
        { name: 'Xelyos', icon: 'img/xelyos.png', href: 'xelyosapp', url: "https://xelyos.fr" },
        { name: 'Mail RP', icon: 'img/mailrp.png', href: 'mailrpapp', url: "https://mail-rp.com" },
        { name: 'Top Serveur', icon: 'img/top-serveur.png', href: 'topserveurapp', url: "https://top-serveurs.net" },
        { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
        { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
        { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
    ]
};
```

<u>Variable with the restriction:</u>

```javascript
const jobSites = [
    {
        job_name: "police",
        sites: [
            { name: 'COP app', icon: 'img/lspd.png', href: 'copapp', url: "https://intranet-lspd.xelyos.fr" },
            { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
        ]
    },
    {
        job_name: "ambulance",
        sites: [
            { name: 'SECOURS app', icon: 'img/samu.png', href: 'secoursapp', url: "https://intranet-ems.xelyos.fr" },
            { name: "Intranet Xelyos", icon: "img/intranet.png", href: "intranetxelyos", url: "http://intranet-rp.com" },
        ]
    }
];
```

#####   


<u>With this configuration:</u>

- <span style="white-space: pre-wrap;">The site </span>****Intranet Xelyos****<span style="white-space: pre-wrap;"> will be accessible for the police and ambulance jobs</span>
- <span style="white-space: pre-wrap;">The site </span>****COP App****<span style="white-space: pre-wrap;"> will only be accessible for the police job</span>
- <span style="white-space: pre-wrap;">The site </span>****Secours App****<span style="white-space: pre-wrap;"> will only be accessible for the ambulance job</span>

</details>

# Configure the easytime weather display

The tablet allows displaying the current weather on its home page.

<span style="white-space: pre-wrap;">To use this feature, you need to use the script: </span>[****cd\_easytime****](https://github.com/dsheedes/cd_easytime "Accéder à la page du script")

### Configure the Feature

#####   


##### Enable or Disable Display

```lua
Config.easytime = true  -- true/false
```

<p class="callout info"><span style="white-space: pre-wrap;">You can decide whether to use this feature or not. By setting it to </span>****false****, the display will not occur!</p>

##### Change the Icon

```lua
Config.weatherIcons = {
    CLOUDS = 'weather-icon fas fa-cloud-sun',
    RAIN = 'weather-icon fas fa-cloud-rain',
    CLEAR = 'weather-icon fas fa-sun',
    OVERCAST = 'weather-icon fas fa-cloud-sun',
    EXTRASUNNY = 'weather-icon fas fa-sun',
    CLEARING = 'weather-icon fas fa-sun',
    NEUTRAL = 'weather-icon fas fa-sun',
    THUNDER = 'weather-icon fas fa-bolt',
    SMOG = 'weather-icon fas fa-smog',
    FOGGY = 'weather-icon fas fa-smog',
    SNOWLIGHT = 'weather-icon fas fa-snowflake',
    SNOW = 'weather-icon fas fa-snowflake',
    BLIZZARD = 'weather-icon fas fa-snowflake',
    XMAS = 'weather-icon fas fa-snowflake',
    HALLOWEEN = 'weather-icon fas fa-cloud-moon',
}
```

- <span style="white-space: pre-wrap;">The icons we use are from </span>[****Font Awesome****](https://fontawesome.com/icons).
- <span style="white-space: pre-wrap;">To replace an icon, change the text after </span>`<span class="editor-theme-code">weather-icon</span>`<span style="white-space: pre-wrap;"> with the new icon.</span>

<p class="callout warning">Warning, some icons do not work!</p>

##### Change the Icon Color

- <span style="white-space: pre-wrap;">To change the color of an icon, go to: </span>`<span class="editor-theme-code">nui/assets/color.css</span>`

```css
.icon-name, .icon-2-name {
    color:rgb(85, 85, 85);
    text-shadow: 0 0 10px black; /* Add a 2-pixel black outline to the icon */
}
```

##### Change the GIF in the Background

```lua
Config.weatherGif = {
    CLOUDS = "background: url('https://i.gifer.com/1427.gif') center/cover;",
    RAIN = "background: url('https://i.gifer.com/73j4.gif') center/cover;",
    CLEAR = "background: url('https://i.gifer.com/Lx0q.gif') center/cover;",
    OVERCAST = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    EXTRASUNNY = "background: url('https://stormandsky.com/gif/15.gif') center/cover;",
    CLEARING = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    NEUTRAL = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    THUNDER = "background: url('https://i.gifer.com/DMI.gif') center/cover;",
    SMOG = "background: url('https://i.gifer.com/7JyC.gif') center/cover;",
    FOGGY = "background: url('https://i.gifer.com/IJNu.gif') center/cover;",
    SNOWLIGHT = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    SNOW = "background: url(' https://i.gifer.com/3g5.gif') center/cover;",
    BLIZZARD = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    XMAS = "background: url('https://stormandsky.com/gif/11.gif') center/cover;",
    HALLOWEEN = "background: url('https://i.gifer.com/AdL.gif') center/cover;",
}
```

<span style="white-space: pre-wrap;">You can change the GIF in the background according to the weather. To do this, simply replace the URL in </span>`<span class="editor-theme-code">url()</span>`.

<span style="white-space: pre-wrap;">Link to available GIFs: </span>[****Looping Storm GIFs (stormandsky.com)****](https://stormandsky.com/gifs)