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)