Jump to content

Client-side GUI

Mayo93

By Mayo93
in Scripting

 Share

Recommended Posts

Mayo93 Newbie

Mayo93

Posted
Posted

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

  • Like 1
Link to comment
Share on other sites
Hanvod Newbie

Hanvod

Posted
Posted (edited)

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 3
Link to comment
Share on other sites
Mayo93 Newbie

Mayo93

Posted
  • Author
Posted (edited)

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
Link to comment
Share on other sites
  • 1 month later...
suicidal_banana Newbie

suicidal_banana

Posted
Posted (edited)

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
  • Like 1
Link to comment
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...