[Release - NEW UPDATE v.1.1]-[Loading Screen]-[LoqScript] Material_Load

Loqrin · July 11, 2017, 4:00pm

Material_Load

Visit the Github Repository to download Material_Load & view the source code:

PRE-WARNING: IF YOU ARE TRYING TO OPEN THE index.html ON YOUR PC AND NOT THROUGH A WEB SERVER (which can be hosted locally on your pc, google about it), IT WILL NOT WORK DUE TO THE CONFIG FILE NOT BEING ABLE TO LOAD BECAUSE OF A POLICY VIOLATION (xmlhttprequest has been blocked by cors policy - google about it). THEREFORE, IF THE LOADING SCREEN DOES NOT LOOK LIKE IT’S WORKING IN YOUR BROWSER, CHECK IN-GAME FIRST!

Material_Load is a loading screen developed by Loqrin (Loqrin) · GitHub. The loading screen comes with a configurable JSON file, to configure the loading screen to the user’s liking. The JSON has configs such as:

Enable a solid, colour background and set the colour with RGB.
Enable a background image, ability to insert a path to the image.
Use a different colour for the text and set the colour with RGB.
Use bold for the text.
Set the server title.
Enable audio to be played in the background as well as supply a path to the audio and adjust the volume of it.
Ability to set what rules to display on the loading screen.
Ability to set what servers / other community things the user has on the loading screen.
Ability to set the content of what the server has, on the loading screen.

The loading screen is designed to have a material design feel. It is responsive on different resolutions. If you wish to view an example, you can visit the following YouTube link:
Preview of Material_Load

##How to Install
The installation is rather quite simple. If you have any loading screens installed, do uninstall them and remove them from your server.cfg.

Download the .zip (release) or clone the repository to your desktop.
Extract the .zip to your desktop.
Make sure the folder is named “loqscript-material_load-loadingscreen”.
Copy the folder to your server resources folder.
Open up your server.cfg and add the following:

start loqscript-material_load-loadingscreen

That’s it. It’s all installed and now it’s time to configure it.

##How to configure
The configuration is, again, rather quite simple. Open the folder “loqscript-material_load-loadingscreen”. Then head into the folder “LoadingScreen”. Within there, you’ll see a file called “config.json”.

Open the config.json file.
Once opened, you’ll be presented with options such as:
The following are the settings and their explanation:

“useBackgroundColour” : set this value to true or false if you want to use a solid, background colour.
“backgroundColour” : set this value to the format of “0,0,0” where the numbers are the RGB values for the colour of the background.
“useBackgroundImage” : set this value to true or false if you want to use a background image instead of a colour.
“backgroundImagePath” : set this value to the path of your image. It can be anywhere but preferbly put it in the images folder.
“useTextColour” : set this value to true or false if you want to use a custom colour for the text.
“textColour” : set this value to the format of “0,0,0” where the numbers are the RGB values for the colour of the text.
“useBoldText” : set this value to true or false if you want to use bold text.
“serverTitle” : set this value to the name of your server.
“playAudioInBackground” : set this value to true or false if you want to play audio in the background when someone is joining.
“YTVideoID” : set this value to the ID of a YouTube video. Eg: (https://www.youtube.com/watch?v=HPc8QMycGno) ID = HPc8QMycGno.
“videoVolume” : set this value between 0 and 100 to change the volume of the video that is playing.
“rule1” : set this value to whatever you want the rules to be. Same applies to rule2 to rule7.
“servers1” : set this value to whatever you want the rules to be. Same applies to servers2 to servers7.
“content1” : set this value to whatever you want the rules to be. Same applies to content2 to content7.

ALL YOU HAVE TO DO IS INSERT THE CONTENT INBETWEEN THE QUOTATION (“”) MARKS! DO NOT ADD ANY EXTRA QUOTATION (“”) MARKS! DO NOT CHANGE ANYTHING ELSE SUCH AS COMMAS OR TRY TO ADD MORE RULES, SERVERS OR CONTENT SETTINGS! IT WILL BREAK AND NOT WORK! WORK WITH WHAT IS SUPPLIED!

If you do use a background image, do not forget to include it in the “__resource.lua” file.

If it’s a background: insert it under the heading “–Loading Image Files–” inside ‘’. Inside the ‘’ is the path to your background.

If you have any bugs to report, please post them in this thread and this thread only. Do not message me on any other social media platforms or any other ways to communicate with me - I will simply ignore and/or block. I do ask that you do not remove the credits on the loading screen (it is small and out of the way). This is work done for free, in my free time. All I request is some credits.

That’s it. Not much to it. Thank you for using my loading screen.

Havoc · July 11, 2017, 4:17pm

First off, pleas read the ToS as it says that you shouldn’t make profit off of FiveM, since you’re not hosting a server and don’t have any running costs that need to be covered with donation, you shouldn’t ask for them (it breaks the ToS).

Also, for your config file, couldn’t you make it simpler to use on your side. Instead of having an array of objects, could you just have an object with properties that are arrays?

E.g.

{
   "usebackground": true,

    "Rules" : [ 
        "Rule 1 here",
        "Rule 2 here"
    ]
}

I say this would be easier to use as you could do config["Rules"][0] instead of assuming that the rules are at index 1 and doing config[1][0]

Loqrin · July 11, 2017, 4:29pm

First off, pleas read the ToS as it says that you shouldn’t make profit off of FiveM, since you’re not hosting a server and don’t have any running costs that need to be covered with donation, you shouldn’t ask for them (it breaks the ToS).

I do apologize for this. It was a copy and paste from my Github repository README.mb. I did intend on removing it when I posted it on FiveM however I simply forgot. Saw your edit on the post when I decided to do it, hence why I sent you a PM. I am well aware of the ToS for FiveM. I simply inserted it on my Github page as people, in the past, have asked for a way of donation in the past with my projects. Again, I do apologize for my mistake.

Havoc:

Also, for your config file, couldn’t you make it simpler to use on your side. Instead of having an array of objects, could you just have an object with properties that are arrays?

E.g.

{
“usebackground”: true,
"Rules" : [ 
    "Rule 1 here",
    "Rule 2 here"
]
}

I say this would be easier to use as you could do config[“Rules”][0] instead of assuming that the rules are at index 1 and doing config[1][0]

Well hey, you learn something new everyday. I’m not the best when it comes to JSON, and to be honest this was my first time using JSONs for configuration. And thank you, this is why I love to share open source projects with communities etc - receiving feedback is great. I’ll grasp what you’ve said, and try to implement it in an update.

Pixinc · August 17, 2017, 6:32am

Hey Do you know if it is up to date on FX server ?
Thanks

Naberius_eSports · August 17, 2017, 9:07pm

Yea upon install into resources the .ogg file will not play and i need help with that

AWITTING22 · August 19, 2017, 3:08am

im having problems with ogg file too

Loqrin · August 20, 2017, 12:54pm

Can you guys be more specific with the problem?

I haven’t checked up in awhile though I’ll see what is going on and attempt to fix whatever problem there is.

actionman · August 29, 2017, 9:56pm

hi i have not been able to get the background screen working if there is any help it would be apresiated
thanks

dracuslayer · August 31, 2017, 4:45pm

try replacing “backgroundImagePath” : "images’, with “backgroundImagePath” : “images/backgroundImg1.jpg”,

Viktor_Olausson · September 12, 2017, 1:17pm

Any1 Help?

BrassMonkey · October 8, 2017, 7:01am

How do you change the loading bar thats red and yellow to different rgb?

Acentrix · October 26, 2017, 7:37pm

is it broken or something text dont appear

rwhat · November 5, 2017, 8:59pm

what was the fix for this?

Loqrin · November 6, 2017, 3:47pm

No fix was made. It runs perfectly to date. Simply follow the instructions as given and it’ll work flawlessly. Just had a mate install it on his server and he got it working without any problems and was able to edit all the options that I’ve made available.

rwhat · November 6, 2017, 9:47pm

I followed it, but its blank…like the picture…i will look again lol

Loqrin · November 6, 2017, 10:03pm

Post a pic of your JSON config.

rwhat · November 6, 2017, 10:18pm

{
	"useBackgroundColour" : "true",
	"backgroundColour" : "255,255,255",
	"useBackgroundImage" : "false",
	"backgroundImagePath" : "images/backgroundImg7.jpg",
	"useTextColour" : "true",
	"textColour" : "100,149,237",
	"useBoldText" : "false",
	"serverTitle" : "North American Department Of Justice Role-Play (Read Below!)",
	"playAudioInBackground" : "false",
	"audioPath" : "audio/gtavthemesong.ogg",
	"audioVolume" : "0.3"
},
{
	"rule1" : "Do Not RDM Or VDM",
	"rule2" : "Do NOT Get In The Way Of Admin Situations",
	"rule3" : "Super/Hyper Cars Not Allowed",
	"rule4" : "Do Not Use Cheats",
	"rule5" : "This Is A Roleplay Server Not GTA Online",
	"rule6" : "No Cop Baiting (Just Use Common Sense)",
	"rule7" : "For all of the rules do /rules in game"
},
{
	"servers1" : "Discord: "",
	"servers2" : "Website: https://www.nadojrp.com/",
	"servers3" : "",
	"servers4" : "",
	"servers5" : "",
	"servers6" : "",
	"servers7" : ""
},
{
	"content1" : "/me -text- ex, /me buys pack of gum.",
	"content2" : "/report -Players id-",
	"content3" : "Website up soon",
	"content4" : "/Text -Players id- -msg-",
	"content5" : "We will send out invites in game for discord",
	"content6" : "/911 -msg-",
	"content7" : "For any other help please contact admin."

rwhat · November 6, 2017, 10:19pm

i would like to use this loading screen…is it possible?

Loqrin · November 6, 2017, 11:08pm

Yes but you can’t use that one with mine. You’d have to make your own. The config seems to be correctly formatted except for the missing } } at the end but I presume that’s just a copy and paste error. Are you placing them in their correct directories? Have you just tried downloading it again and placing it without changing anything?

rwhat · November 8, 2017, 9:00pm