Jump to content
RAGE Multiplayer Community

Search the Community

Showing results for tags 'CEF'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • RAGE Multiplayer
    • Announcements
    • Discussion
    • Suggestions
    • RDR2 Multiplayer
  • Scripting
    • Scripting
    • Resources
  • Community
    • Support
    • Servers
    • Media Gallery
  • Non-English
    • Русский - Russian
    • Français - French
    • Deutsch - German
    • Espanol - Spanish
    • Română - Romanian
    • Portuguesa - Portuguese
    • Polski - Polish


  • Scripts
  • Gamemodes
  • Libraries
  • Plugins
  • Maps
  • Tools

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me






  1. Introduction Hello, So I have decided I should make this tutorial about how to use CEF alongside RAGEMP to make interactable UI because I have spent some time understanding it from examples without a clear tutorial, I am going to explain how to interact between the CEF browsers and RAGEMP client, and how to send/receive information from and to server. This tutorial is targeting new comers in RAGEMP but who have background in scripting and know how to run and connect their server locally. So the main points will be: 1-What is CEF 2-Sending information from CEF to RAGEMP client (and vice versa) 3-Sending information from RAGEMP to The Server (and vice versa) (I will be using C# Bridge API for working with the serverside scripting) Before we start you are going to need the following to better understand the tutorial: Basic knowledge in HTML, CSS and JavaScript (Optional – Nice to have) Bootstrap and JQuery Let’s start! What is CEF CEF is abbreviation to Chromium Embedded Framework an open source framework that allow the ability to embed HTML webpages into applications. RAGEMP already integrates the CEF so you don’t have to download anything externally to begin using it. CEF and RAGEMP Client So now we are going to learn how to create a browser inside the RAGEMP client and interact with it. I am going to teach by giving example, it is going to be a basic login/register system. First download or or create your own webpage design, If you don't know how to create a webpage just use my sample (Attached to this thread) and follow the tutorial. Start by going to RAGEMP/server-files/client_packages folder and create a new folder name it “Login” then inside the Login folder we’ve just created place the HTML,CSS and JS files that is related to the webpage inside and then create the (clientside) script we will call it “Main.js” that will be the main connecting point between the CEF browser, client and the server. NOTE: In the Login folder you are going to place the webpage files and all dependences such as Bootstrap or JQuery libraries. So to this point you should’ve something similar to this Dependences folder contains the minified JQuery and Bootstrap libraries, Links below: https://getbootstrap.com/docs/3.3/getting-started/ https://code.jquery.com/jquery-3.3.1.min.js/ So I have pre-made this simple page for the sake of this tutorial, I will link download to all of the files that I have used at the bottom of this thread. But you can go with any page design you like. Disclaimer: I am new to web development so it may not look that good but it does the job. Now we need to interact with this page, Inside the Login.html (assuming you already have made/imported a page) find the main components that you want to interact with and give them the ‘id’ attribute, in my case I need the buttons and text input elements, image below for more understanding Also notice how we referenced the “Login.js” script. We are going to use these inside our “Login.js” file, so Open the Login.js file and write the following: (Code is written using JQuery) $('#loginButton').click(() => { mp.trigger('loginInformationToServer', $('#loginUsernameText').val(), $('#loginPasswordText').val()); }); $('#registerButton').click(() => { mp.trigger('registerInformationToServer', $('#registerUsernameText').val(), $('#registerPasswordText').val()); }); So what this basically does is once the loginButton/registerButton is clicked is going to trigger (mp.trigger) an event with the given name and pass the values inside the text fields as arguments, that later we are going to catch that in our “Main.js” script. (This point is where we send information from CEF Browser to RAGEMP Client). Now that we have send the information and they are waiting to be caught, But before we do that we are going to show the browser window when a player connect to our server. Open “Main.js” and use mp.browsers.new(‘package://path’); In our case: we have the html page inside our Login folder. var loginBrowser = mp.browsers.new('package://Login/Login.html'); Now at this point when the player connects to our server this will show him our page that we’ve just made, it is still not functional yet until we catch the information that we’ve sent before. Let’s catch them now, inside the “Main.js” add the following: mp.events.add('loginInformationToServer', (username, password) => { mp.events.callRemote('OnPlayerLoginAttempt', username, password); }); mp.events.add('registerInformationToServer', (username, password) => { mp.events.callRemote('OnPlayerRegisterAttempt', username, password); }); I am not going to go into much details here on the syntax but what we are doing is catching the 'loginInformationToServer' and 'registerInformationToServer' events (like you’d do in any other client event in ragemp) and sending them directly to the server to verify the information passed. But before we forget go back to the client_packages folder and create or open the file ‘index.js’ and place require('./Login/Main.js'); to let the server know that this file contains JavaScript codes that related to RAGEMP client (mp.events.add, mp.events.callRemote and mp.browsers.new), a complete list found on ragemp wiki https://wiki.rage.mp/index.php?title=Client-side_functions RAGEMP Client and RAGEMP Server Now that we have sent the information from the CEF client to the RAGEMP client, and then to the RAGEMP server via (mp.events.callRemote) we didn’t catch the event on the server yet, so let’s go ahead and do that. It can be done in same ways but different syntax depending on which programming language you are using, I am going to be using C# because I am more familiar with but it can be easily done with JS serverside once you are familiar with scripting in it. So go ahead and inside any resource file that you are using type the following: [RemoteEvent("OnPlayerLoginAttempt")] public void OnPlayerLoginAttempt(Client player, string username, string password) { NAPI.Util.ConsoleOutput($"[Login Attempt] Username {username} | Password: {password}"); if(username == "Max" && password == "123") { player.TriggerEvent("LoginResult", 1); } else player.TriggerEvent("LoginResult", 0); } So The above code catch the event that is triggered when player sends the information to the server so we validate them then send back a response to the client with either success or fail depending on the player data, in ideal case we should check the information from a database but that’s out of the scope for this tutorial so I am just checking if his username is Max and password is 123 then we send information back to the client with result 1 (success) else we send the result of 0 (incorrect username/password) Same thing apply for the register event handle. Now you can notice a pattern here is that whenever we send an event from one place to another we need to catch it, so back to the “Main.js” and let’s handle the response sent from the server, Add the following: mp.events.add('LoginResult', (result) => { if (result == 1) { //Success we destroy the loginBrowser as we don't need it anymore loginBrowser.destroy(); mp.gui.cursor.show(false, false); mp.gui.chat.push("You have successfully logged in."); } else { //Failed we just send a message to the player saying he provided incorrect info //Here you can be creative and handle it visually in your webpage by using the (browser).execute or loginBrowser.execute in our case to execute a js code in your webpage mp.gui.chat.push('Incorrect password or username.'); } }); Similar to what we did when we caught function from CEF we did for catching from server and we checked if the value passed is 1 then the player succeeds in logging in else he fails. Now you can just run your server and connect with your client and you should see the login page appear, enter anything and hit login - it should message Then try using the combinations of Max and 123 and you should see and the window should disappear. Same practice apply to the register I will leave it for you to practice and try to implement that by yourself! Good luck! Summary Important things to remember: - From CEF browser to RAGEMP client => mp.trigger caught by mp.events.add - From RAGEMP client to RAGEMP server (C#) => mp.events.callRemote caught by [RemoteEvent()] flag and a function Now the other way around: - From RAGEMP server (C#) to RAGEMP client => (Client).TriggerEvent caught by mp.events.add - From RAGEMP client to CEF browser => (Browser).execute For more information about the syntax for these you can check the ragemp wiki NOTE: Sometimes you don’t need to send anything to the server, For example a browser that contains information about your server, you just need to contact between CEF and RAGEMP client. NOTE: Similarly if you want to use JavaScript for serverside scripting you can find the equivalent to my functions used and do the same, however everything done in clientside scripts (Main.js) should remain the same for both languages!! The End And here you’ve just completed the tutorial! Thanks for taking your time to read and if you have faced any problems or any question post a comment below and I will do my best to answer it. Also feel free to correct me if there is any suggestions or any syntax/logical errors. Happy coding! Files used in this tutorial: https://www.solidfiles.com/v/nYR8xn43j57jv
  2. trolovecro


    Hello guys. am I wrong or CEF is just working on 30fps. Example is speedometer. You can see like its lagging?
  3. I have put together a example repository on how to use React with Redux and Typescript as UI (CEF). I was looking for something like this and the guides I could find felt outdated, not using current Rage APIs etc. https://github.com/Raademar/rage-react-starter Sending data from the Client to the UI (CEF) this.browser = mp.browsers.new("package://cef/index.html#"); this.browser.execute( `window.store.dispatch({type: "ADD", payload: ${data}})`) In order for the Redux store to be in the window scope we assign it like this in our root index.tsx import store from "./store" window["store"] = store After this point we're on "normal" React roads again. import { useAppSelector, useAppDispatch } from "../../store/hooks" const texts = useAppSelector(state => state.text.texts) const dispatch = useAppDispatch() const handleSubmit = () => { dispatch({ type: "ADD", payload: "Cool input here" }) } <div> {texts.map((text, index) => ( <p key={index}>{text}</p> ))} </div> Sending data from the UI to the Client and Server // React const handleSubmit = () => { mp.trigger("CallServerEvent", "Login", JSON.stringify(loginInfo)) } <form onSubmit={handleSubmit}> ... </form> // Client mp.events.add({ "CallServerEvent": (event: string, data: string) => { mp.events.callRemote(event, data); }, ... )} // Server mp.events.add({ "Login": (player: PlayerMp, data: string) => { ... Handle login }, }) Handling routing On the UI side we use React-Router with the HashRouter import { HashRouter, Route, Switch } from "react-router-dom" import { LoginScreen, CharacterSelection } from "./pages" const Routes = () => { return ( <HashRouter> <Switch> <Route path="/" exact component={HUD} /> <Route path="/login" component={LoginScreen} /> <Route path="/characterselection" component={CharacterSelection} /> </Switch> </HashRouter> ) } The routing is controlled from the Server/Client side const path = `location.hash = "#${url}"`; this.browser.execute(path); Building and bundling This example uses Tailwind for styling (Login page) and included are the minimum required setup to use Tailwind with React. This is not needed and can be replaced with any other styling solution. Craco can also be removed if Tailwind is not used. Craco The react-scripts for start, build and test are replaced by craco to allow for postcss handling. "start": "craco start", "build": "craco build", "test": "craco test", Gulp This example uses Gulp to bundle the built Javascript files to inline Javascript located in the build/index.html Example on how I handle bundling and then moving the build folder to the right location. // package.json in RAGE.mp server-files root "gulp": "cd app/react-cef && npx gulp", "move-cef": "cp -r app/react-cef/build client_packages/cef/"
  4. Version 1.0.0


    From me to the community Maybe will be useful for someone, it's written in Vue 💓
  5. Inside your server folder, open config.json and add the following line "allow-cef-debugging": true Now head to your registry (Windows Key + R ) and type regedit and hit enter. Head to the following path: Once you're there, right click and Go New > String Value and put "launch.cefPort" as the name and Hit Enter, then right click and hit Modify and set the data to the port you'd like to use (9222 for example) and it should look the same as below Now head to your browser using the following: http://localhost:9222/ or whatever port you had entered to enable it. You'll need to quit Rage and open it back up if you enabled this while in game, and make sure you restart your server when you change the setting. Credits to @kemperrr as I used his post on Discord to make this up.
  6. Я пишу свой проект на TS и использую для интерфейсов VueCLI, что мне позволяет делать очень функциональные и реактивные UI. Я настроил там VueRouter для маршрутизации своих страниц. Например что бы показать планшет LSPD, я указываю следующий адрес package://cef/index.html#/faction/lspd/tablet. Если хочу показать страницу авторизации, то - package://cef/index.html#/auth/login. Как вы могли заметить, я работаю только с одним интерфейсом и одним экземпляром браузера, в котором много разных интерфейсов, для различных игровых процессов. Если я хочу показывать какие то интерфейсы, которые будут доступны из любой страницы, например чат и спидометр, то я такие компоненты размещаю в корневом компоненте Vue (App.vue). Что я видел в на форумах и в слитых игровых проектах с исходным кодом... Там обычно все пишется всё на классическом JS без каких либо препроцессоров или фреймворков, в интерфейсах встречает библиотека JQuery, кто-то конечно использовал React, что не может, не радовать. Везде каждый интерфейс в свой папке и нет никакой маршрутизации, поскольку она там не нужна. Если по какой то логике нужно показать другой интерфейс, то в существующем браузере меняю адрес, либо же, например для чата создают отдельный экземпляр и там уже отображают чат. В последних версиях RageMp вовсе сделали для браузера функцию makeAsChat, которая позволяет подменить чат сервера на ваш. Собственно со зависимые вопросы: 1. Правильное решение использовать несколько экземпляров BrowserMp для отображения различных интересов, в своём браузере? 2. Или может быть в действительности достаточно одного браузера, который откроет полноценный сайт с маршрутизацией по страницам и будет показывать нам чат, спидометр, меню игрок и другие вещи? English (interpreter)
  7. Hello everyone! Who can tell, I created a view using a react, assembled my project and inserted the assembly into the client package folder, then I registered a new browser in the file index and the path to my index.html and run server, but the cef does not want to be displayed. What am I doing wrong? And if I run a local web server when developing a react, then I can turn to it by specifying the path of the localhost:3000, but in all the assemblies that I saw there they indicated the path using the package:// .. I don’t understand why I can’t do also This is what my catalog looks like: File index.js require('./gamemode/index.js') File gamemode/index.js mp.events.add('guiReady', () => { mp.gui.chat.push("Hello world!") browser = mp.browsers.new('package://CEF/build/index.html') }) Folder CEF/build:
  8. Kasimir


    Version 0.3.0


    To access the console press F11 ingame. Motivation RAGE console is designed to be a simple and universal logging library with support for client-side, including CEF and server-side. The server-side currently logs all the logs into separate daily files. Installation Installation is extremely simple Copy "packages" folder inside your server "packages" folder, except config.json if you have edited it Copy "client_packages" folder inside your "client_packages" folder Edit your "client_packages" -> index.js to include the rage-console with: require('_rage-console'); (remember to paste this on line 1) Config The config exists inside your 'packages/_rage-console/config.json'. You can freely edit these, if no data is provided it will default to default settings. These options are accepted by the config: zippedArchive: A boolean to define whether or not to gzip archived log files. (default 'false') name: Filename to be used to log to. This filename can include the date placeholder which will include the formatted. (default: 'YYYY-MM-DD') maxSize: Maximum size of the file after which it will rotate. This can be a number of bytes, or units of kb, mb, and gb. If using the units, add 'k', 'm', or 'g' as the suffix. The units need to directly follow the number. (default: '30m') maxFiles: Maximum number of logs to keep. If not set, no logs will be removed. This can be a number of files or number of days. If using days, add 'd' as the suffix. (default: '30d') { "logs": { "name": "YYYY-MM-DD", "maxSize": '30m', "maxFiles": '30d', "zippedArchive": false } } Upgrading Upgrading is extremely simple Copy "packages" folder inside your server "packages" folder Copy "client_packages" folder inside your "client_packages" folder Usage Can be used on server-side or client-side. You do not need to require the file as these are available globally. Writes an info log to the console. console.log('Hey! Log something?'); Writes an info log to the console. console.info('Hey! Log something?'); Writes an warning log to the console. console.warn('Hey! Log something?'); Writes an error log to the console. console.error('Hey! Log something?'); Usage with CEF (Browser) To use with CEF you need to add the following line to your HTML <head> element, put this to the top of all your script files. <script src="package://_rage-console/CEF/debugger.js" crossorigin="anonymous"></script> Build in commands help — provides all the commands available clear — clears all the logs API Enable or disable access to console [client-side] terminal.active = true/false; Add command handler [client-side] terminal.commands.add('pos', { description: 'Gets the position of the player' }, function(...arguments) { return ` X: ${user.position.x.toFixed(2)}, Y: ${user.position.y.toFixed(2)}, Z: ${user.position.z.toFixed(2)} - R: ${user.getHeading(true).toFixed(2)}`; }); Todo Add options to disable and enable server-side log files Add options to custom style the console, mainly due to accessibility Run proper tests and clean the logic Add ability to see which file the log is coming from Add ability to be used with C bridge Bugs/Feedback Bugs should be reported currently in RAGE Discord channel to the username @Porn on private message, I appreciate any bugs being reported. If you have a feature request please do the same as mentioned above. This is currently in BETA and some stuff is still unpolished.
  9. Version 1.0.1


    Hey all! Included in the package are the following files: 1) packages/mugshot.js - include this from within your packages/index.js file such as require("mugshot"); 2) client_packages/mugshot.js - include this in your client_packages/index.js such as require("./mugshot.js"); 3) client_packages/mugshot (Folder) - upload this directly to your client_packages folder To take a screen simply call the event: prepareScreenshot Server side: player.call("prepareScreenshot"); Client side: mp.events.call("prepareScreenshot"); The process of taking a screenshot: Request the player headshot Wait 2 seconds for it to load (best result thanks to GTA Forums reference) Get the Pedheadshot TXD String for Sprite and set Variable to true to display sprite in Render event Sprite is shown on screen for 1 frame! On the next call of Render - it will take a screenshot, which takes a screenshot of the previous frame. It will then stop processing the render event, unregister the pedheadshot and notify that a Headshot has been taken Client side will now trigger a HTML window to open ready to accept an event The event will trigger when the domReady is recieved and this event will contain the URL of the screenshot taken and the resolution of the game The HTML will then take the image, crop out only the mugshot and then convert it to base64 - roughly 50kb per mugshot The CEF will then notify Client Side to upload the data to the Server The server will recieve the Mugshot as a Base64 Image string (which can be decoded manually for testing at: https://base64.guru/converter/decode/image) It will then upload the Image currently to imgur with anonymous setting and provide you back the URL uploaded in console. To use IMGUR Go to https://api.imgur.com/oauth2/addclient - Log into your Imgur account and create an Application Set the type to Anonymous Set the callback URL to: https://www.getpostman.com/oauth2/callback Give it a name, email and description Click submit and you will get your Client ID - add this to packages/mugshot.js NOTICE: You will see the mugshot appear on screen for a brief 1-2 frames however this is unavoidable no matter what I have tried as this is how the Screenshot tool takes the screenshot in the first place.
  10. If someone can tell me why this isn't working, all the other CEFs work, just this one doesn't. It all compiles withour error and when i use /testnotif it sends me a message but does not show CEF. Im using this resource: Clientside: class Notification : Events.Script { RAGE.Ui.HtmlWindow NotificationCEF = null; public Notification() { NotificationCEF = new RAGE.Ui.HtmlWindow("package://cs_packages/CEF/popup/popup.html"); Events.Add("Show_Notif_CEF", ShowNotificationPopup); ShowCEF(false); } public void ShowNotificationPopup(object[] args) { ShowCEF((bool)args[0], (string)args[1]); } public void ShowCEF(bool show, string text = "") { if(show) { NotificationCEF.ExecuteJs($"ProvideInfo({text})"); } NotificationCEF.Active = show; } } Test command: [Command("testnotif")] public void CMD_testnotif(Player player) { NAPI.ClientEvent.TriggerClientEvent(player, "Show_Notif_CEF", true, "Test"); player.SendChatMessage("Notification test"); }
  11. Hey there. I started developing a client-side user interface, and I had problems with custom fonts. I included my custom fonts in the CSS file: @font-face { font-family: Gabriela; src: url(../Fonts/Gabriela-Regular.ttf); } @font-face { font-family: FontAwesome; src: url(../Fonts/fontawesome-webfont.ttf); } * { font-family: Gabriela; } .dws-input::before { font-family: FontAwesome; content: "\f007"; position: absolute; font-size: 30px; padding: 25px 0 0 0px; color: white; } In the browser, all the fonts look great, but when I started the game, all the fonts changed to standard ones. What have I done wrong? Maybe I incorrectly connected fonts? Thanks in advance
  12. Version 1.0.0


    Hi, my realization voice chat on cef in the RAGE:MP Voice working by distance position (noice control), activation F8 (push and talk) Installing 1. Read all .js comments and put code in your gamemode 2. Prepare security Web Server and start peer js server, generate crt files and put with server in one folder 3. Change all urls my web project on yours For peerjs server, use next package install: npm install fs peer P.s, i dont know would be new version that scripts, but if you want himself update and i can upload its here Date Build: 22 feb 2018
  13. Sehr geehrte RageMP Community, ich habe folgendes Problem: 1. Sobald ich Ingame ein Schreibfeld benutzen möchte welche durch eine eingebaute externe Webseite ist, habe ich nicht mehr die Möglichkeit überhaupt in das Vorgesehene Feld zu schreiben. Wenn ich jedoch diese Webseite im normalen Browser öffne und denn selben Vorgang widerholle funktioniert es ohne Probleme. 2. Ein ähnliches Problem habe ich mit dem Handy. Sobald ich auf die Kontakte zugreifen will erscheinen diese nicht, genau so wie SMS. Beide oben angeführten Punkte funktionieren bei anderen Spielern ohne Problem. Meine Frage an die Community wäre: Wie man dieses Problem lösen könnte? Ich habe folgendes schon versucht: - Neu installation von GTA 5 und RageMP - Laden 1 zu 1 selben Recource Ordners wie bei anderen Spielern . Setzten des Spieles sowie von RageMP als Ausnahme in meinen Antiviren Programmes (Kaspersky) - Java Update auf Jaca 8 Update 251 Version 8.0.2510.8 - Neuste Version des Windows (Windows 10 Pro Version: 10.0.18363 Build 18363) Ebenfalls habe ich ein Video aufgenommen damit ich es besser Veranschaulichen kann wo das Problem liegt. Dieses befindet sich im Anhang. Ich hoffe mir kann jemand bei diesem Problem helfen für Rückfragen zwecks Hardware bzw. Software kann ich natürlich Auskunft geben. Grüße KillshotDPB Anhang Video: https://youtu.be/NDOf159la7M
  14. Hey guys, I am currently working on GUI for my server. I am using ReactJS and for drag and drop i am using SortableJS. The issue i have is that drag and drop does not seem to work even though it works in the browser. I tried to debug events and it seems that onDragStart doesn't run on clicking div container. While writing this i wanted to be sure that it isn't something that i did in react so i created almost blank html page with one div in it: After it loads it only fires onclick event, dragging is ignored (It works in chrome). I don't really know what to do... Do i have to insert some flag somewhere or do something to enable drag and drop? Or do i have to do some hacky ways to get drag and drop?
  15. Hello everyone. I had a question how to transfer data from input fields, which I display in CEF, into C # code
  16. Hey everyone, now i publish my register login ui developed for an roleplay Server that i was make but never be finished and i dont want to finish .. This is a simple login or register ui with "wished" tabs animation with tilt plugin for jquery. the items of register content its dynamic and javascript functions must not need to be changed. Login View: https://streamable.com/fackq Register View: https://streamable.com/o0x8h // example for a big text on the left side: (the white box goes to the right side) <div class="item left big"> <h6>Charakternamen Richtlinien</h6> <p> [any text here] <br /> <strong>Beispiel von nutzbaren Namen: <span class="green-text">Max Mustermann</span></strong> <br /> [any text here] </p> </div> // example for small text to the right side: (the white box goes automaticly to the left side) <div class="item right big"> <h6>User Werben User</h6> <p> [any text here ...]<br/><br/> <strong>Charaktername des Spielers:</strong> <input id="recruit_name" type="text" class="white-text" value="Max Mustermann"> </p> </div> use cef.execute to call the javascript function: show(0, "usernamehere"); // for login view show(1, "usernamehere"); // for register view Javascript Library's and CSS Frameworks i used: jquery (jquery.color-2.1.2) materialize tilt.jquery noty use it, change if you like and do anything you want with it. Download: https://mega.nz/#!VdFkFISK Kryptokey: FLkKpmP3nQbK48Tl4fW4mDxb2FwJGbpzW2NcNfnGVGE Greetz, Concil
  17. Son1Q

    Angular 8 CEF

    I downloaded npm package 'ragemp-c', but when i try call functions from 'mp' object i received error 'ERROR ReferenceError: mp is not defined'. import { Component } from '@angular/core'; declare var mp: any; @Component({ selector: 'app-counter-component', templateUrl: './counter.component.html' }) export class CounterComponent { public currentCount = 0; public incrementCounter() { this.currentCount++; console.log(mp); mp.trigger('test'); } } What could be the problem?
  18. On 'client_packages/index.js': var loadingBrowser = mp.browsers.new("package://loading.html"); mp.gui.cursor.show(true, true); Based on my analysis, this should show the HTML content to the client as it enters the server, however, nothing happens.
  19. hey guys, I tried to post this a few times and it didnt work somehow now I am trying it on a desktop pc. I hope there wont be multiple posts with the same content. I started programming a server with javascript only and have build a login browser when a player joins. Atm. - it just sends the given information to the server - server prints out the name and password (just for testing puposes - Server calls client side event with value 1 - when value is 1 client destroys browser And my problem is, that sometimes my game freezes when the browser is destoyed. Sometimes it works just fine, sometimes the game freezes after sending message to chat and sometimes it freezes even before sending any message.. Does anyone know what the problem could be? The console does not show any errors This is my Client-sided Script index.js and this is the server-sided one I hope someone can help me with this. EDIT: I tried out a few things and found out.. the Server events does not crash the game when there is no browser created. The game only crashes when I add loginBrowser.destroy() to the code. But I dont know how to hide it otherways.
  20. Hi everyone, I am playing with C# for RageMP I unfortunately I don't get one thing with CEF. I'm keep learning how to use some events and this time I have to create some UI to use them. UI based on Javascript works great (e.g. https://rage.mp/forums/topic/1896-cef-tutorial-interact-with-browser-pages-in-ragemp-client-and-server/) however when I write my own code in C# - it does not show at all. I am using Stuyk tutorial from https://www.youtube.com/watch?v=NJsktWiY5W8 and it is not working. Even tried to copy everything 1:1 and script literally does not respond. Recent code (based on Stuyk tutorial): using System; using RAGE; using RAGE.Elements; using RAGE.Ui; namespace hello { public class Main : Events.Script { RAGE.Ui.HtmlWindow CustomWindow = null; public Main() { LoadCEF("package://html/index.html"); } public void LoadCEF(string uri) { CustomWindow = new HtmlWindow(uri) { Active = true }; } } } html file contains proper template with HTML5 encoding and body bg color set for black only. Works with local browsers such as Firefox and Chrome. Cleared cache memory several times to make sure it's overwriting the new one. Some suggestions? Thank you in advance VasiDe
  21. Got a quick question regarding CEF, why can't I create a webgl context? I used the chrome debugger to create a canvas node and then tried to create a webgl context but it didn't work.
  22. Hello, I am starting with ragemp scripting and I want to try to do something with html/css/js and i have some issue when creating a browser to execute html with code : let browser = mp.browsers.new("package://[my folder where is html file]/index.html"); // Get from rage wiki and the console log to me something like: Cannot read property 'new' of undefined Mayby I am doing something wrong. I will be very thankful for any help. This is also my first post on the forum so if something is wrong I am really sorry .
  23. Version 1.0.1


    Internet radio over colshapes using CEF. Scope of application: custom clubs, interiors. Default location is the Galileo Observatory (behind the monument). Default radio station - Wacken Radio (DE). Installation: I. Put server files to: server-files\packages\yourGameMode II. Add require('./rStreamColshapes'); to your server's index.js III. Put client files to: client_packages then edit your client's index.js and add require('./rStream'); To change radio stream url, edit index.html here: client_packages\cef\rStream\index.html GitHub
  24. Los

    CEF Boilerplate

    CEF Boilerplate This is a boilerplate that will make your development proccess easier. It has a workflow that works like a website development, but, adapted for UI development. Built with Gulp + Webpack + Babel + SASS + ES6 Features: Focused on performance, lightweight. Made to be maintainable and SCALABLE. Small, medium or big projects, doesn't matter how much components, it will be easy to maintain. Easy for integrating any framework like Vue or React. Hot reload Local development: Run npm install Run gulp The index.html inside the src folder, works like a summary. This is the default page that will open when you start the development environment. You can customize it. The others folders is just like any other web project structure. Building for production: Run npm install Run gulp production It will make all the minifying proccess, create bundles and will send it to ../../client_packages/dist folder by default. If you want to change it, go to gulpfile.js/config.json and change the destProd value. Integrating I strongly recommend you to use the ragemp-start typescript by @ekoozu Using with ragemp-starter: Clone this repo into the src folder Run the npm install on it Run gulp production Done. Creating a browser: mp.browsers.new("package://dist/html/boilerplate.html") That's all, folks. Feel free to open an issue or answer this thread if you have any question. Download it on GitHub
  25. В целях изучения разбираю примеры уже готовых серверов, и появился вопрос, как лучше поступать с UI через CEF ? Использовать единый html в котором собрать все элементы интерфейса и управлять ими изнутри, те в одном html будет к примеру компонент и чата и спидометра. Или инициализировать несколько CEF, допустим в один элемент CEF закинуть chat.html, и по верх него еще один элемент с CEF только уже с spedometr.html ? В чем плюсы и минуты того и другого?
  • Create New...