Search the Community

Showing results for tags 'UI'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • RAGE Multiplayer
    • Announcements
    • Discussion
    • Suggestions
  • 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








Found 7 results

  1. GamingMaster


    Version 18w48a


    NativeUI for RageMP! This can only be used Clientside! Documentation: Click Github: Click
  2. В целях изучения разбираю примеры уже готовых серверов, и появился вопрос, как лучше поступать с UI через CEF ? Использовать единый html в котором собрать все элементы интерфейса и управлять ими изнутри, те в одном html будет к примеру компонент и чата и спидометра. Или инициализировать несколько CEF, допустим в один элемент CEF закинуть chat.html, и по верх него еще один элемент с CEF только уже с spedometr.html ? В чем плюсы и минуты того и другого?
  3. KGamer63

    Weather and Time changing GUI

    Version 1.0.0


    With this simple Script you can open an UI that allows you to change the Time and Weather. Installation: 1. Copy the Files into your server-directory. 2. Add require("./weatherChanger"); to your index.js in the client_packages folder. Usage: Press F9 to open the UI.
  4. Mispon

    [Guide] Creating UI with React

    Good day to all! I recently started developing my server and decided to try doing all UI on React. Today I want to share how to set up a project for convenient work with this framework! I loaded the finished example on github: There are also collected files in the archive server-files.rar for quick test. And now in order: First you need to initialize the project by running the command npm init Then install all the necessary packages. That is my packege.json file { "name": "rage-mp-react-ui", "version": "1.0.0", "description": "Example repo to explain how use react in rage mp servers", "main": "index.js", "scripts": { "start": "npm run dev", "dev": "set NODE_ENV=development && webpack", "prod": "set NODE_ENV=production && webpack" }, "repository": { "type": "git", "url": "git+" }, "keywords": [ "rage-mp", "react", "rage", "mispon", "gta5", "gtav" ], "author": "Mispon", "license": "ISC", "bugs": { "url": "" }, "homepage": "", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^1.0.0", "node-sass": "^4.9.3", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "webpack": "^4.20.2", "webpack-cli": "^3.1.2" }, "dependencies": { "react": "^16.5.2", "react-dom": "^16.5.2" } } You can do it by command npm i packetname --save (or --save-dev if packet will use only in developing, like babel-core and etc). Next you need to create webpack.config.js and paste the following settings into it: const webpack = require('webpack') const path = require('path') let NODE_ENV = 'production' if (process.env.NODE_ENV) { NODE_ENV = process.env.NODE_ENV.replace(/^\s+|\s+$/g, "") } module.exports = { entry: { index: './index.js', app: './ui/app/app.js' }, output: { path: path.resolve(__dirname, 'build'), filename: '[name].js' }, watch: NODE_ENV == 'development', module: { rules: [{ test: /\.js$/, exclude: [/node_modules/], loader: 'babel-loader', query: { presets: ['react', 'es2015'] } }, { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] } ] }, resolve: { extensions: ['.js', '.json'] }, optimization: { minimize: true }, mode: NODE_ENV, plugins: [ new webpack.EnvironmentPlugin('NODE_ENV') ] } I will not go into details, there is documentation for this. In short, the webpack will collect all the files of our application into one (or several) ready-made files (and styles too!). Then create clients index.js file, a separate folder for the UI with single index.html, app.js, bridge.js and some style file. In my case I use .scss. After you got something like that: In index.js add simple code for test how events works: let browser'guiReady', () => { browser ='package://ui/index.html') }) // Handle event from server and send data to react app'onMessageFromServer', (value) => { browser.execute(`trigger('onMessage', '${value}')`) }) // Handle event from react app'showUrl', (url) => { }) // F12 - trigger cursor mp.keys.bind(0x7B, true, () => { let state = !mp.gui.cursor.visible, state) }) In app.js we'll add our example react component and render it in index.html: import '../styles/app.scss' import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { constructor(props) { super(props) this.state = { time: new Date(), message: 'default message' } } componentDidMount() { EventManager.addHandler('onMessage', this.onMessage.bind(this)) this.timerId = setInterval(() => { this.setState({time: new Date()}) }, 1000) } componentWillUnmount() { clearInterval(this.timerId) EventManager.removeHandler('onMessage', this.onMessage) } onMessage(value) { this.setState({message: value}) } // send current url to client click() { let currentUrl = window.location.pathname mp.trigger('showUrl', currentUrl) } render() { return( <div className="app"> <h1>Make UI on React!</h1> <p className="current-time">{this.state.time.toLocaleTimeString()}</p> <p className="message">{this.state.message}</p> <button className="send-button" onClick={}>Send</button> </div> ) } } ReactDOM.render(<App />, document.getElementById('root')) Here everything is as in normal work with the react. At the very beginning we connect our styles. You can define them to your taste. Next, create the component, define the default state, write the HTML code that will be rendered in the browser, and add the necessary handlers in the component. But there is one very important point! In the componentDidMount method, using the EventManager which is global space, we subscribe to the event that will be passed from the client to our react-application. At its core, EventManager is a bridge between client multiplayer code and our UI. Let's define EventManager in our bridge.js: // Global variable for describe on events from react components var EventManager = { events: {}, addHandler: function(eventName, handler) { if (eventName in {[eventName].push(handler); } else {[eventName] = [handler]; } }, removeHandler: function(eventName, handler) { if (eventName in { var index =[eventName].indexOf(handler);[eventName].splice(index, 1); } } } // Handle events from client function trigger(eventName, args) { var handlers =[eventName]; handlers.forEach(handler => handler(JSON.parse(args))); } The trigger function serves as the only point of access to our UI from the client and delegates execution to the accessible handler by the name of the event. That is, in any component we can create a handler, subscribe to an event interesting to us and update its state depending on what happens in the game. In client code we will only use browser.execute(`trigger('eventName')`). In addition as simple as possible index.html and my app.scss: <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Don't forget to change paths after copy in server packages --> <script src="app/bridge.js" defer></script> <script src="../build/app.js" defer></script> </head> <body> <div id="root"></div> </body> </html> .app { h1 { text-align: center; font-weight: bold; padding-top: 2vh; } .message { text-align: center; font-size: 2vw; padding-top: 2vh; } .current-time { display: block; position: absolute; right: 1vw; bottom: 0; } .send-button { display: block; width: 100px; height: 50px; margin: 15% auto; outline: none; } position: relative; width: 30%; height: 40vh; margin: 20vh auto; border-radius: 10px; box-shadow: 1px 1px 2px black; background-color: black; color: white; } Now you can run the npm start or npm run dev in the root directory to build the project. Check full example usage on my github, link above. Hope it's help for someone. Be good in developing! Mispon (discord: Mispon#8498)
  5. araynimax

    Login Window | Design

    Version 1.0.0


    Login Window Design
  6. davidsl6


    Version 1.0.0


    Need some dialog menus with 2 buttons, for example to show user your server's rules and 2 buttons, "accept" and "not accept"? DialogUI can help you with that! Example of using: const dialogUILib = require('dialogui'); // Load the library var dialog = new dialogUILib.DialogUI("My Title", ["Row number 1", "Row number 2","Row number 3"], "Left Button", "Right Button"); // Make a new instance of dialogUI.; // Show the dialog Your players use enter and escape keys? DialogUI support them. You can know which button is pressed by using the OnDialogResponse client-side event, which have 1 parameter of type Boolean, which indicate if the left button pressed.
  7. Hello. I'd like to send in a couple of suggestions that, despite requiring programming, don't massively alter the engine or anything — they are aimed at improving the UX (user experience) of RAGE Multiplayer. Add a sub-list called "Favorites" to "Servers". The hamburguer menu next to "Servers" should be an actual menu where you can choose between a list of Public and Favorite servers. Keep the RAGE Multiplayer program open and launch the game in a separate window. When a user decides to quit the game, the RAGE Multiplayer program window will still be open. There are no big advantages in doing this, but then again this is aimed at improving the UX, which should always be considered.