Unreal Engine 5 Documentation has been moved to the Epic Developer Community

Remote Control Presets and Web Application

Collect and organize UI parameters and functions into a Remote Control Preset and connect them to widgets in a web application.

Choose your operating system:

Windows

macOS

Linux

With Remote Control Preset , collect and organize any UI parameters or functions in a single panel and expose them to the Remote Control API . These parameters and functions can be connected to widgets in a companion web application provided by the Remote Control Web Interface plugin to control the engine remotely. This web application has a built-in UI editor so you can customize its interface without any additional code to create or format it.

Since this is a web application, you can run multiple clients at the same time. Any properties that are modified in one client will have their changes propagated through the web server to all the other clients. This can help create a collaborative workflow in a live environment.

This page covers how to expose properties and functions from the Unreal Editor to the Remote Control API and connect them to widgets in the companion Remote Control web application.

GIF of a sky rotating with the turn of a dial widget in the remote control web application

Required Plugins

Add the following plugins to your project to get started with the Remote Control Preset and Remote Control web application.

Remote Control API

The Remote Control API plugin provides the web server that hosts the data and websocket connections for the Remote Control Preset .

Follow these steps to enable the plugin for your project.

  1. Open your project in the Unreal Editor.

  2. In the Editor's main menu, choose Edit > Plugins to open the Plugins window.

  3. In the Plugins window, find the Remote Control API plugin in the Messaging category. Check its Enabled checkbox.

    image alt text

  4. Restart the engine.

Remote Control Web Interface

The Remote Control Web Interface uses NodeJS to provide a companion web app with default widgets, such as gauges, sliders, and color pickers, for controlling the engine remotely without any additional code.

This plugin is available in the Marketplace . Add the plugin to your library and install it to a compatible version of Unreal Engine before following the steps below.

Follow these steps to connect the web application to your project:

  1. Install NodeJS on your machine.

    • Minimum version: 8.

    • Maximum version: 14.15.5.

  2. Open your project in the Unreal Editor.

  3. In the Editor's main menu, choose Edit > Plugins to open the Plugins window.

  4. In the Plugins window, find the Remote Control Web Interface plugin in the Messaging category. Check its Enabled checkbox.

    image alt text

  5. Restart the engine.

  6. Verify the web app launched successfully. In the Editor's main menu, choose Window > Developer Tools > Output Log and filter by "remote control web" to see a success log similar to:

    LogRemoteControlWebInterface: [Success] Remote Control Web Interface is running - WebApp started, port: 7000

    image alt text

Exposing Properties to the Remote Control Panel and Remote Control API

The Remote Control Panel in the Unreal Editor is where you can collect properties from multiple objects in the level together for easy access. You can also add functions to the panel and call them from the panel. When properties and functions are exposed to the Remote Control Panel , they are also exposed to the Remote Control API . This helps an operator easily organize any items that they need to control in a live environment.

Follow these steps to add a Remote Control Preset and open the Remote Control Panel .

  1. Right-click in the Content Browser and navigate to the Miscellaneous section. Select Remote Control Preset.

    image alt text image alt text

  2. Open the Remote Control Panel by double-clicking the Remote Control Preset Asset .

    image alt text

  3. Check the Edit Mode checkbox.

    image alt text

  4. In the Details panels for Assets , all properties now have either a closed or open eye icon next to it.

    image alt text

  5. The eye icon determines whether a property is added to the Remote Control Panel :

    • An open eye icon means the property is added to the Remote Control Panel.

    • A closed eye icon means the property is not added to the Remote Control Panel.

    • Clicking on an open eye icon closes it, and vice versa; the property is added or removed from the Remote Control Panel accordingly.

  6. When the property is in the Remote Control Panel, it has the same interface as in the Details panel.

    image alt text image alt text

    A Light Color property with RGB values in the Remote Control Panel (left) and in the Details panel (right).

  7. Right-click on the Remote Control Preset and select Save to keep your changes.

Using the Remote Control Panel

image alt text

You can organize the Remote Control Panel and rename elements for simpler reference in the Remote Control API. The following table describes the UI for customizing the panel for your project's needs.

Action

UI Element

Description

Create Group

create_group_panel.png

Create multiple groups to organize similar properties and functions together.

Add Function

add_function_panel.png

Add a function to the panel where you want to expose functionality that is not merely a property. You can customize the parameters for the function and run it from the panel.

Remove Property or Function

remove_property_panel.png

Remove the property or function from the Panel and make it no longer exposed to the Remote Control API.

Reset Property

reset_property_value.png

Return the property's value back to its default value.

Move Element

move_panel_element.png

Rearrange properties, functions, and groups by dragging and dropping the elements in the panel.

Rename Element

rename_panel_element.png

Change the names of the properties, functions, or groups to make their references clearer and simpler in function calls.

Using the Remote Control Web Application

Connect properties and functions in the Remote Control Panel to a web application. The web application will read any Remote Control Preset that you have open in your Unreal session. The following browsers are officially supported: Chrome, Firefox, and Safari.

To see updates in the Editor as you change property values in the web app, open Edit > Editor Preferences and, in the Performance section under General , disable Use Less CPU when in Background . image alt text

Follow these steps to launch the web application and customize its interface:

  1. Open your web browser on the same machine running the engine and enter the URL 127.0.0.1:7000 . See the Remote Control Quick Start for details on how to expose the Remote Control API to other machines.

    image alt text

    You can change which port the Remote Control Web Interface uses for your project. In the Editor's main menu, choose Edit > Project Settings… to open the Project Settings window. In the Project Settings window, select Remote Control Web Interface in the Plugins section to see its settings, where you can change the default port.

    image alt text

  2. When the page loads, you should see a blank Remote Control application. Create a Tab in the web application to start adding widgets.

    image alt text

  3. The web application is based on a grid. You can design your preferred screen layout. On the right side, you can choose from four panel arrangements. Each panel can contain multiple widgets.

    The four panel arrangements available for the web application's layout.

  4. Click the Plus button inside a panel to open the Set Widget window.

    image alt text

  5. In the Set Widget window is a list of the available properties exposed in the preset.

    image alt text

  6. Select a property.

    • On the right side of the window in the Available Widgets section are all the widgets that can be used to represent the property in the web application's UI.

    • Below the Available Widgets is the Widget Options section where you can customize the widget further, such as setting its Minimum and Maximum values.

    image alt text

    Example of some of the widgets available in the web application.

  7. You can stack widgets together in a panel to simplify the web application's UI. When you have several properties that use the same widget type, such as a color picker, you can use the same widget interface but change the property to which the changes are applied by selecting a property from the stacked list.

    image alt text

  8. You can have multiple Tabs in your web application. This is helpful for creating different views for the operators in a live environment.

    • You can change a Tab's label and choose an icon from a library of icons to differentiate the Tabs.

    • You can also duplicate a Tab to use as a starting point for a new interface.

    image alt text

  9. Save your changes to the web application by saving the corresponding Remote Control Preset in the Unreal Editor . The next time you open the web application, the layout will be the same as when you last saved the Asset.

  10. Click Play to leave the Edit mode for the web application.

    image alt text

You can have multiple remote presets available in the web application, but you can only have one Remote Control Preset open at a time. The available remote presets are on the left side of the window.

image alt text

Help shape the future of Unreal Engine documentation! Tell us how we're doing so we can serve you better.
Take our survey
Dismiss