XelBob-tab

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.

XelBob-tab is the result of the partnership between Xelyos and Bob's&Co. This tablet, usable on FiveM, allows you to display the content of websites directly on your server.

Présentation
Installation
Fichier de configuration
Configuration des sites
Configurer l'affichage de la météo easytime

Presentation
Installation
Configuration file
Web site configuration
Configure the easytime weather display

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 est un script conçu en collaboration avec Bob's & Co, 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.

De plus, XelBob-tab 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 easytime.

Installation

Pour télécharger le script, rendez-vous sur : Xelyos | Bobs&Co | Tablet (tebex.io)

Dans votre répertoire ressources, glissez et déposez le fichier XelBob-tab.

Dans votre fichier server.cfg, activez la ressource en ajoutant la ligne :

ensure XelBob-tab

La modification du nom de la ressources provoquera un dysfonctionnement de la tablette

Une fois que la tablette est correctement installée, lorsque vous lancez votre serveur, ceci devrait apparaître dans votre console :

Fichier de configuration

ESX Version

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

Définissez la version ESX

Définir le langage pour le temps

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

Lier une commande pour l'ouverture de la tablette

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

Vous pouvez définir une commande pour l'ouverture de la tablette. Si vous souhaitez désactiver l'ouverture par commande, mettez nil.

Attacher un item à l'utilisation de la tablette

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

Vous pouvez rattacher l'ouverture de la tablette par l'utilisation d'un item, pour ne pas lié la tablette à un item, mettez nil.

Configuration des sites

Ajouter un site

Pour ajouter les sites, vous devez modifier le fichier nui/assets/config.js
Ajouter une ligne dans le tableau config.sites

Format de la ligne :

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

Attention, le href doit être unique et ne peut pas être mis sur un autre site !

Exemple

Avant :

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" },
    ]
};

Nouveau site :

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

Après :

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" },
    ]
};

L'image liée à votre site doit se situer dans le répertoire nui/img

Changer la couleur de fond

Vous pouvez également changer la couleur de fond en ajoutant/modifiant le fichier nui/assets/color.css

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

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

Pour restreindre l'accès à un site pour un job, vous devez modifier le fichier nui/assets/config.js.

Format de la restriction :

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

Attention, la ligne présente dans le tableau sites doit être identique à celle présente dans la variable config.sites !

Exemple

Variable avec tous les sites :

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" },
    ]
};

Variable avec la restriction :

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" },
        ]
    }
];

Avec cette configuration :

Le site Intranet Xelyos sera accessible par les jobs police et ambulance
Le site Cop App sera uniquement accessible par le job police
Le site Secours App sera uniquement accessible par le job ambulance

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

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

Pour utiliser cette fonctionnalité, vous devez utiliser le script : cd_easytime

Configurer la fonctionnalité

Activer ou désactiver l'affichage

Config.easytime = true  -- true/false

Vous pouvez décider d'utiliser ou non cette fonctionnalité. En mettant false, l'affichage ne se fera pas !

Changer l'icone

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',
}

Les icônes que nous utilisons sont ceux de Font Awesome.
Pour remplacer une icône, changer le texte après weather-icon avec la nouvelle icône

Attention, certaines icônes ne fonctionnent pas !

Changer la couleur de l'icône

Pour modifier la couleur d'une icône, rendez-vous dans : nui/assets/color.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

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;",
}

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 url().

Lien vers des gifs disponibles : Looping Storm gif (stormandsky.com)

EN

Presentation

XelBob-tab is a script designed in collaboration with Bob's & Co, 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.

Furthermore, XelBob-tab offers an optional feature: real-time weather display on the in-game tablet. This feature is accessible only if you use the easytime script.

Installation

To download the script, go to: Xelyos | Bobs&Co | Tablet (tebex.io)

In your resources directory, drag and drop the XelBob-tab file.

In your server.cfg file, activate the resource by adding the line:

ensure XelBob-tab

Modifying the resource name will cause the tablet to malfunction

Once the tablet is correctly installed, when you start your server, this should appear in your console:

Configuration file

ESX Version

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

Set the ESX version

Set the language for time

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

Bind a command for tablet opening

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

You can set a command for tablet opening. If you want to disable the command opening, set it to nil.

Attach an item to tablet usage

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

You can attach tablet opening to the usage of an item. To not bind the tablet to an item, set it to nil.

Web site configuration

Add a Site

To add sites, you need to modify the file nui/assets/config.js
Add a line in the config.sites array

Line Format:

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

Warning, the href must be unique and cannot be used on another site!

Example

Before:

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" },
    ]
};

New Site:

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

After:

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" },
    ]
};

The image linked to your site must be located in the nui/img directory

Change the Background Color

You can also change the background color by adding/modifying the nui/assets/color.css file

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

Limit Access to a Site for a Job

To restrict access to a site for a job, you need to modify the file nui/assets/config.js.

Restriction Format:

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

Warning, the line in the sites array must be identical to the one in the config.sites variable!

Example

Variable with all sites:

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" },
    ]
};

Variable with the restriction:

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" },
        ]
    }
];

With this configuration:

The site Intranet Xelyos will be accessible for the police and ambulance jobs
The site COP App will only be accessible for the police job
The site Secours App will only be accessible for the ambulance job

Configure the easytime weather display

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

To use this feature, you need to use the script: cd_easytime

Configure the Feature

Enable or Disable Display

Config.easytime = true  -- true/false

You can decide whether to use this feature or not. By setting it to false, the display will not occur!

Change the Icon

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',
}

The icons we use are from Font Awesome.
To replace an icon, change the text after weather-icon with the new icon.

Warning, some icons do not work!

Change the Icon Color

To change the color of an icon, go to: nui/assets/color.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

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;",
}

You can change the GIF in the background according to the weather. To do this, simply replace the URL in url().

Link to available GIFs: Looping Storm GIFs (stormandsky.com)