Sign in to follow this  
Mayo93

Client-side GUI

Recommended Posts

Hello.

I have a problem to make  a GUI on client side, which will trigger a function in server side file. Can you explain me step by step how to make this on example: Write cmd "/gui" and in this moment on my screen will be displayed a simple window GUI with one button and when I click it, he trigger server side function with message line: console.log("It works").

It will be very helpful for me to understand how works rage mp triggering and gui design. Or if this is too much for you community, will be okay to tell me, which functions should I use to make this.

Greetings

Mayo

Share this post


Link to post
Share on other sites

to trigger client event from html use mp.trigger(event, args) inside you html file (use <script>) https://wiki.rage.mp/index.php?title=Trigger

to trigger server event from client use mp.events.callRemote(event, args) https://wiki.rage.mp/index.php?title=Events::callRemote

to trigger client event from server side use player.call (event, args) https://wiki.rage.mp/index.php?title=Player::call

to execute some code to your html file use browser.execute(code) on client https://wiki.rage.mp/index.php?title=Browser::execute

 

Reply if you need some examples.

Edited by Hanvod
  • Like 2

Share this post


Link to post
Share on other sites

Okay, thank you so much for your feedbacks. Hanvod, first I will try make something, but when I get a problems I will reply :)

 

edit. Everything works fine !

 

Edited by Mayo93

Share this post


Link to post
Share on other sites

First off sorry for the bump, but i didn't want to create a new topic for whats basically a step further in essentially the same question.

I've made a some events to let me request server data from client-side, i have confirmed (trough chat msg debugging) that i do indeed get that data (hostname etc) back and have it on the client-side, but now my problem is that the browser.execute function doesn't seem to actually be calling my html's javascript?
Below a run-down of the relevant code.

In my client-side code i have:

var scoreboardBrowser = mp.browsers.new('package://./sui_scoreboard/scoreboard.html');
...
mp.events.add({
    "getScoreboardInfo" : (player, hostname, gamemode, url, players) => {
        scoreboardBrowser.execute("updateScoreboardData("+hostname+", "+gamemode+", "+url+", "+players+");");
        mp.gui.chat.push('[client] got scoreboard infos! '+hostname);
    }
});

This gives me the chat message with a correct hostname, so data is definitely coming in (calling the getScoreboardInfo event from serverside) but said execute doesn't seem to work as i expected. In my HTML i have jquery and a custom javascript file included:

<html>
    <head>
        ...
        <script src="assets/js/jquery-3.3.1.min.js"></script>
        <script src="assets/js/ui_stuff.js"></script>
    </head>
    <body>

And in that custom javascript file (ui_stuffs.js) i have the following function definition:

//$( document ).ready(function() {
    function updateScoreboardData(hostname, gamemode, url, players) {
        alert("[client] [ui script] hmmm "+hostname);
        $('.hostname').text(hostname);
        var description = gamemode + ((url) ? ' - ' + url : '');
        $('.description').text(description);
    }
//});

(tried with and without document ready, although id like to use it if possible)

Does anybody see anything wrong with the above? for as far as i can tell this should work?
Thanks in advance for any input y'all have :)


EDIT:
With thanks too "KifKick" in the RageMP discord server, ive solved it by adding this constant too the clientside script for executing code inside CEF:

const executeCEF = (cef, arguments) => {
    if (cef) {
        // Check for the parameters
        let input = '';

        for (let i = 1; i < arguments.length; i++) {
            if (input.length > 0) {
                input += ', \'' + arguments[i] + '\'';
            } else {
                input = '\'' + arguments[i] + '\'';
            }
        }

        // Call the function with the parameters
        cef.execute(`${arguments[0]}(${input});`);
    }
}

Then use the below to call your custom js functions inside CEF:

executeCEF(browserVariable, ['functionName', arg1, arg2, ...]);

KifKick mentioned 'finding the above code on github a week ago', so im gonna assume the actual source of this is the freemode script found on github :)

Hope this helps somebody running into the same hurdle in the future ^^
 

Edited by suicidal_banana
Solved already wuu

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.