1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. GTA Network forum is now in archive mode.

CEF in GTA:N / GTANET

Discussion in 'Tutorials/Documentations' started by Hansrutger, Mar 9, 2017.

  1. Hansrutger

    Hansrutger Well-Known Member Donator

    Messages:
    114
    Likes Received:
    36
    Joined:
    Mar 4, 2017
    CEF in GTA:N / GTANET


    Introduction
    Goal of document
    The aim of this document is clarify as much as possible regarding CEF in GTA Network (will be shortened from now on to “GTA:N”) modification of GTA V. Seeing as the wiki pages provided by GTA:N for most things are at the moment (March 2017) slightly vague, it is up to community members to improve that by writing our own tutorials and documentations, perhaps edit the wiki-page ourselves. It is strongly recommended that we, at least during the beta, as community members of GTA:N share as much knowledge in-between each other and put silly “win” mentalities aside at least until GTA:N has grown bigger and can actually afford internal competition. As stated before, the goal with this is to explain as much as possible about CEF and how it can be used in GTA:N.

    Furthermore, I created this tutorial because I believe it is something that I needed when I started with CEF (a few hours ago) which would have made me know things a lot faster. Also this guide was written for my own purpose of learning, mainly also expressing different program-terms as well as coding. It was fun and I hope you, whoever goes through reading 4500 words, gets to learn at least something!


    Limitations
    This guide, tutorial and documentation will be limited in terms of explanations due to too much having to be covered if everything was explained. Simple programming language syntax will therefore not be explained, but may sometimes be explained depending on situations (for instance when something unobvious is being scripted). This document will not only explain CEF but also how to get started with linking different files, but please keep in mind that CEF is the “end-product” that we want to have explained in this document. This document will not display how to install any editor neither how to download the GTA:N server package.


    Requirements from your end
    To completely follow this guide, you will most likely need Visual Studio. You can use other editors but it is highly recommended to use Visual Studio.


    Sources
    Nothing in this document will be referenced in terms of where the information was found or how it was acknowledged as that would be a waste of time for most readers. Instead I will place a few links or a few names that might be recognizable:

    GTA:N Wikipedia page

    Jingles’ The Godfather solution

    TakeiT’s Simple CEF Tutorial


    While none of these projects, threads or documents were directly copied, they did have at some point some sort of influence on what has been written and therefore I want to give my sincere gratitude to the people behind the creation of these documents and projects.


    PDF
    I highly recommend downloading it as GitHub seems to have weird font rendering. Thanks in advance for reading!
    https://github.com/Hansrutger/GTA-Network/blob/master/CEF Example/CEF in GTA.pdf

    Download PDF (or below): https://github.com/Hansrutger/GTA-Network/raw/master/CEF in GTA.pdf
     

    Attached Files:

    Last edited: Apr 19, 2017
    Toro, Gonzov, StreetGT and 4 others like this.
  2. Josh

    Josh Member Tester

    Messages:
    23
    Likes Received:
    3
    Joined:
    Aug 6, 2016
    Thanks for the resource, always great to see people contributing awesome information!
     
  3. Hansrutger

    Hansrutger Well-Known Member Donator

    Messages:
    114
    Likes Received:
    36
    Joined:
    Mar 4, 2017
    Indeed let's hope more people create more tutorials/documents so we can refer to them!
     
  4. Jake Rhoads

    Jake Rhoads Member

    Messages:
    10
    Likes Received:
    4
    Joined:
    Mar 4, 2017
    Always great to have another resource... the wiki is lacking quite a bit of basic tutorials like SA-MP had...
     
    Eazy and Hansrutger like this.
  5. Dench

    Dench New Member

    Messages:
    2
    Likes Received:
    0
    Joined:
    Apr 17, 2017
    Hey I am kinda new to programming and I can't get it to run. Could you tell me whats wrong, because I get an Javascript Error "unexpected Token"?

    Code:
    API.onServerEventTrigger.connect(function (eventName, args) {    
        switch (eventName) {        
            case 'login':            
                   startLogin();      
                break;    
        }
    });
    
    var loginscreen = null; //Die Variable ist auf "null" gesetzt, weil der Browser erst noch erstellt werden muss und wir ja auch keine leere Variable haben dürfen
    
    function startLogin()
    {
        var res = API.getScreenResolution();
        loginscreen = API.createCefBrowser(600, 300); //Hier wird der Browser erstellt
        API.waitUntilCefBrowserInit(loginscreen); //Das hier stoppt das Script bis der Browser fertig initialisiert ist
        API.setCefBrowserPosition(loginscreen, (res.Width / 2) - (600 / 2), (res.Height / 2) - (300 / 2)); //Loginfenster wird in der Mitte platziert
        API.loadPageCefBrowser(loginscreen, "login-screen/main.html"); //HTML wird geladen
        API.setCefBrowserHeadless(loginscreen, true); //Scrollbars werden entfernt
        API.showCursor(true); //Das hier zeigt den Mauscursor
        API.setCanOpenChat(false);  //Chat wird hier deaktiviert
    });
    
    function loginBtnClicked() {
        API.showCursor(false); //Curseranzeige wird gestoppt
        API.destroyCefBrowser(loginscreen); //CEF Browser wird terminiert
        API.setCanOpenChat(true); //Chateingabe wird wieder aktiviert
       
        API.triggerServerEvent("startPlaying");
    }

    Code:
    public class cefCommands : Script
        {
            public void loginFunction(Client player)
            {
                API.triggerClientEvent(player, "login");
            }
    
            public cefCommands()
            {
                API.onClientEventTrigger += OnClientTriggered;
            }
    
            public void OnClientTriggered(Client player, string eventName, params object[] arguments) {
                switch (eventName) {
                    case "startPlaying": API.sendNotificationToPlayer(player, "Willkommen zu SUSMEX-RP!");
                        break;
                }
            }
    
          
        }
    }

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>GTA 5 SUSMEX - LOGIN SCREEN</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    
    <style>
       .main {
           width: 600px;
           height: 300px;
           background-color: white;
       }
      
       img {
           margin-top: 10px;
           align-content: center;
       }
      
       p {
           text-align: center;
       }
      
       form {
           text-align: center;
       }
      
       input {
           height: 35px;
           width: 300px;
           margin-bottom: 14px;
           }
      
       button {
           width: 200px;
           height: 50px;
           border:hidden;
           color: white;
           background-color: #CD9A21;
       }
       </style>
    
    <body>
       <div class="main">
           <p>
           <img src="login-logo.png">
           </p>
          
           <form>
           <input type="text" id="username" placeholder="Benutzername" required>
           <input type="password" id="password" placeholder="Passwort" required><br>
           <button id="loginBtn">LOGIN</button>
           </form>
    </div>
    
    </body>
    </html>
    
    <script>
       document.getElementById("loginBtn").onclick = function ()  //onClick wird hier aufgerufen
       {
           resourceCall("loginBtnClicked", username, password); //Die Funktion "login" wird aufgerufen
       };
    
    </script>
    
    
     
  6. Hansrutger

    Hansrutger Well-Known Member Donator

    Messages:
    114
    Likes Received:
    36
    Joined:
    Mar 4, 2017
    Solved on discord, if anyone else gets the same error and wonders what the heck happened, look into your javascript file. In this case there was a syntax fault: "});" instead of just "}" in login.js.
     
  7. PsychOrange

    PsychOrange Member

    Messages:
    7
    Likes Received:
    1
    Joined:
    Apr 14, 2017
    Hey man! First of all thanks for your guide! it looks like you've put quite some effort into it ;-)

    But it seems like i am not able to get it to run somehow :=P, i'm getting 5 errors when trying to build it ( i have just tried to replicate what you did in your guide just to find out how it works, so i used the same function names, file names and so on)

    Is there any chance you could upload your working project (which you made for / in the Tutorial) so i can compare and see where i have messed it up ?


    The errors i get are:
    1. Method must have a return type it's linked to this "public CEFCommands()"
    2. A namespace cannot directly contain members such as fields or methods it's linked to "
    public void OnClientTriggered(Client player, string eventName, params object[] arguments)"
    3. The name "OnClientTriggered" does not exist in the current context

    and missing object reference for "API.onClientEventTrigger" & "API.sendNotificationToPlayer"


    I've tried it twice but always end up with the same error, it's quite late right here so i'll look into it again after i've gotten some sleep!

    Thanks in advance :=)
     
  8. Dench

    Dench New Member

    Messages:
    2
    Likes Received:
    0
    Joined:
    Apr 17, 2017
    1. The Method has to have the same name as the file
    and did you put the Namespaces (using GTANetworkBLABLA) on top of your BLA.cs File?
     
  9. PsychOrange

    PsychOrange Member

    Messages:
    7
    Likes Received:
    1
    Joined:
    Apr 14, 2017
    I did both of these, my method "public CEFCommands()" is in the file "CEFCommands.cs"

    and the top of that file is like:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using GTANetworkServer;
    using GTANetworkShared;
    ceferror.png
     
  10. Hansrutger

    Hansrutger Well-Known Member Donator

    Messages:
    114
    Likes Received:
    36
    Joined:
    Mar 4, 2017
    They are all supposed to be inside your CEFCommands class. In C# you need to have all functions inside classes as it's a very strict object-oriented language. I added all the files in CEF Example folder: https://github.com/Hansrutger/GTA-Network
     
    PsychOrange likes this.
  11. PsychOrange

    PsychOrange Member

    Messages:
    7
    Likes Received:
    1
    Joined:
    Apr 14, 2017
    Thanks Hansrutger! =) I'll try to find my way with the Examples you've provided!
     
    Hansrutger likes this.
  12. Float

    Float Member

    Messages:
    29
    Likes Received:
    2
    Joined:
    Dec 2, 2016
    I completed the tutorial , no errors no warning ,but when i write /test nothing happens no pop up just disables control making me fc the GTA V.
     
  13. Meinhof

    Meinhof Member

    Messages:
    5
    Likes Received:
    1
    Joined:
    May 11, 2017
    add API.setCefDrawState(true); to function TestHandler()
     
    Float likes this.
  14. Float

    Float Member

    Messages:
    29
    Likes Received:
    2
    Joined:
    Dec 2, 2016
    Thank you.
     

Share This Page