# FR

Le XelBob-tab est le produit de l'association entre Xelyos et Bob's&Co. Cette tablette utilisable sur Fivem vous permet d'afficher le contenu de sites internet directement sur votre serveur.

# Présentation

****XelBob-tab****<span style="white-space: pre-wrap;"> est un script conçu en collaboration avec </span>[****Bob's &amp; Co****](https://discord.gg/X36mxQTk5b), qui s'adresse aux propriétaires de serveurs FiveM. Ce script a pour objectif d'afficher des sites internet directement sur votre serveur. Vous avez la possibilité de configurer plusieurs sites web à afficher et de restreindre l'accès en fonction du métier du joueur, ajoutant ainsi une dimension réaliste à votre serveur.

<span style="white-space: pre-wrap;">De plus, </span>****XelBob-tab****<span style="white-space: pre-wrap;"> offre une fonctionnalité optionnelle : l'affichage en temps réel de la météo sur la tablette en jeu. Cette fonctionnalité est accessible uniquement si vous utilisez le script </span>[****easytime****](https://github.com/dsheedes/cd_easytime "Afficher la page du script").

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

# Installation

<span style="white-space: pre-wrap;">Pour télécharger le script, rendez-vous sur : </span>[Xelyos | Bobs&amp;Co | Tablet (tebex.io)](https://xelyos.fr/solution/xelbob-tab/invite "Accéder à la page de la ressource")

<span style="white-space: pre-wrap;">Dans votre répertoire </span>`<span class="editor-theme-code">ressources</span>`<span style="white-space: pre-wrap;">, glissez et déposez le fichier </span>`<span class="editor-theme-code">XelBob-tab</span>`.

<span style="white-space: pre-wrap;">Dans votre fichier </span>`<span class="editor-theme-code">server.cfg</span>`<span style="white-space: pre-wrap;">, activez la ressource en ajoutant la ligne : </span>

```ini
ensure XelBob-tab
```

<p class="callout warning">La modification du nom de la ressources provoquera un dysfonctionnement de la tablette</p>

<p class="callout success">Une fois que la tablette est correctement installée, lorsque vous lancez votre serveur, ceci devrait apparaître dans votre console :</p>

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

# Fichier de configuration

#### 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">Définissez la version ESX</p>

#####   


#####   


##### Définir le langage pour le temps

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

#####   


#####   


##### Lier une commande pour l'ouverture de la tablette

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

<p class="callout info"><span style="white-space: pre-wrap;">Vous pouvez définir une commande pour l'ouverture de la tablette. Si vous souhaitez désactiver l'ouverture par commande, mettez </span>`<span class="editor-theme-code">nil</span>`.</p>

#####   


##### Attacher un item à l'utilisation de la tablette

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

<p class="callout info"><span style="white-space: pre-wrap;">Vous pouvez rattacher l'ouverture de la tablette par l'utilisation d'un item, pour ne pas lié la tablette à un item, mettez </span>`<span class="editor-theme-code">nil</span>`.</p>

# Configuration des sites

### Ajouter un site

- <span style="white-space: pre-wrap;">Pour ajouter les sites, vous devez modifier le fichier </span>`<span class="editor-theme-code">nui/assets/config.js</span>`<span style="white-space: pre-wrap;"></span>
- <span style="white-space: pre-wrap;">Ajouter une ligne dans le tableau </span>`<span class="editor-theme-code">config.sites</span>`

<u>Format de la ligne :</u>

```lua
{
  name: "Nom affiché sur la tablette", 
  icon: "img/mon_image.png", 
  href: "nom_unique", 
  url: "url vers le site internet" 
}
```

<p class="callout warning"><span style="white-space: pre-wrap;">Attention, le </span>****href****<span style="white-space: pre-wrap;"> doit être unique et ne peut pas être mis sur un autre site !</span></p>

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

<u>Avant :</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>Nouveau site :</u>

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

<u>Après :</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;">L'image liée à votre site doit se situer dans le répertoire </span>`<span class="editor-theme-code">nui/img</span>`

##### Changer la couleur de fond

- <span style="white-space: pre-wrap;">Vous pouvez également changer la couleur de fond en ajoutant/modifiant le fichier </span>`<span class="editor-theme-code">nui/assets/color.css</span>`

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

### Limiter l'accès à un site pour un job

<span style="white-space: pre-wrap;">Pour restreindre l'accès à un site pour un job, vous devez modifier le fichier </span>`<span class="editor-theme-code">nui/assets/config.js</span>`.

<u>Format de la restriction :</u>

```lua
{
  job_name: "nom_du_job",
  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;">Attention, la ligne présente dans le tableau </span>****sites****<span style="white-space: pre-wrap;"> doit être identique à celle présente dans la variable </span>`<span class="editor-theme-code">config.sites</span>`<span style="white-space: pre-wrap;"> !</span></p>

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

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

<u>Variable avec tous les 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 avec la 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>Avec cette configuration :</u>

- <span style="white-space: pre-wrap;">Le site </span>****Intranet Xelyos****<span style="white-space: pre-wrap;"> sera accessible par les jobs police et ambulance</span>
- <span style="white-space: pre-wrap;">Le site </span>****Cop App****<span style="white-space: pre-wrap;"> sera uniquement accessible par le job police</span>
- <span style="white-space: pre-wrap;">Le site </span>****Secours App****<span style="white-space: pre-wrap;"> sera uniquement accessible par le job ambulance</span>

</details>

# Configurer l'affichage de la météo easytime

La tablette permet d'afficher sur sa page d'accueil la météo actuelle.

<span style="white-space: pre-wrap;">Pour utiliser cette fonctionnalité, vous devez utiliser le script : </span>[****cd\_easytime****](https://github.com/dsheedes/cd_easytime "Accéder à la page du script")

### Configurer la fonctionnalité

#####   


##### Activer ou désactiver l'affichage

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

<p class="callout info"><span style="white-space: pre-wrap;">Vous pouvez décider d'utiliser ou non cette fonctionnalité. En mettant </span>****false****, l'affichage ne se fera pas !</p>

##### Changer l'icone

```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;">Les icônes que nous utilisons sont ceux de </span>[****Font Awesome****](https://fontawesome.com/icons).
- <span style="white-space: pre-wrap;">Pour remplacer une icône, changer le texte après </span>`<span class="editor-theme-code">weather-icon</span>`<span style="white-space: pre-wrap;"> avec la nouvelle icône</span>

<p class="callout warning">Attention, certaines icônes ne fonctionnent pas !</p>

##### Changer la couleur de l'icône

- <span style="white-space: pre-wrap;">Pour modifier la couleur d'une icône, rendez-vous dans : </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; /* Ajoute un contour noir de 2 pixels autour de l'icône */
}
```

##### Changer le gif en 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;">Vous pouvez changer le gif présent en background en fonction du temps. Pour cela, il vous suffit de remplacer l'URL présent dans </span>`<span class="editor-theme-code">url()</span>`.

<span style="white-space: pre-wrap;">Lien vers des gifs disponibles : </span>[****Looping Storm gif (stormandsky.com)****](https://stormandsky.com/gifs)