EN

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

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)