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
Installation
Fichier de configuration
Configuration des sites
Configurer l'affichage de la météo easytime

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)