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.

image.png


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 :

image.png

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

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

 

Changer la couleur de fond
.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 :


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

Attention, certaines icônes ne fonctionnent pas !


Changer la couleur de l'icône
.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)