OfxRemoteUI
OpenFrameworks addon serves any number of variables (bool, float, int, enum, string, ofColor) on the network, so that you can modify from outside the OF app. Includes a native OSX Client. OSC based.
Install / Use
/learn @armadillu/OfxRemoteUIREADME
ofxRemoteUI
OpenFrameworks addon that allows you to serve c++ variables/parameters (bool, float, int, enum, string, ofColor) on the network, so that you can modify them remotely. It uses server client architecture, where your app is the server. It communicates both ways; you can modify your project's variables from the client, but you can also pull your app's variable values from the client; this way you can track values that evolve programatically. It runs on OSC.
You can save and then load "presets", which allow you to quickly change values for a lot of your parameters quickly. You can also make "group presets" to change only the values of a subset of your parameters.
Compile against OF master branch. If you are trying to use this against an older version (0.9.8 or lower) you should use the commit tagged with "OF_0.9.8". It requires ofxPoco in OF versions >0.9.8
Watch a quick Intro Video.

In order of appearance in the screenshot above, Mac OS X native Client, Built In Client (inside your OpenFrameworks app), Web Client (served from your OpenFrameworks app), iOS Client (not quite flushed out).
Features
- Edit & Track variables remotely through UDP/OSC (bool, int, float, string, Enum, ofColor).
- Allows to save/load your variable states across app launches.
- MIDI and Joystick controller bindings. Bind any parameter to any MIDI controller knob/slider/note or HID Joystick. (OSX Client)
- Parameter values are saved in your app's data folder, in xml format.
- Allows creation/deletion of Presets, variable states that you can switch from and to quickly.
- Presets can be created globally (saving all parameter values at once), or for a subset of params (param group).
- Easily create Parameter Groups, and access them through keyboard shortcuts (OSX Client).
- Parameter Groups are automatically colorized to easily identify them.
- Realtime Filter your params by name to find things quickly (OSX Client).
- Automatic discovery of servers in the network; easily control multiple apps from one Client interface.
- Press "tab" on your OF app to see/edit your params from within your OF app. Allows you to do quick client-less edits; and also load and save Global and Group Presets.
- Event notifications in both OSX client (through growl) and on your OF app.
- You can always restore your parameters to the "previous launch" state, or to the default values.
- Log remotely - ofxRemoteUIServer allows you to log messages to you client with RUI_LOG(); which accepts printf-like formatted writing.
- ofxRemoteUI can be used outside OF in any C++ project, and in Processing thx to @kritzikratzi
- Easy to use C++ Macros hide complexity away, very easy to plug into any existing project.
- Support for native ofParameters of compatible types (int, float, bool, string ofColor, ofVec). Allows you to edit native OF ofParameter types from RemoteUI. See "example-ofParameter". *outdated!
- Control parameters from any web browser through its web gui.
Dependencies
- ofxXmlSettings
- ofxOsc
- ofxPoco in OperFrameworks version > 0.9.8
Available Clients
- Native OSX client, feature complete (this should be your first choice)
- Built in client (inside the OF app) for basic edits, saving, resetting, and global and group preset loading and saving.
- WebClient based on dat.GUI. Connect to OpenFrameworks through websockets (thx to @jackosx).
- Native iOS client (WIP - OSC is not very reliable over WIFI and only basic features implemented - deprecated).
Compatibility
Works in OpenFrameworks, but also in plain C++ projects. @kitschpatrol is actively working on a Cinder Block that works on top of a fork here. He's added some awesome feature like getter/setter support for your params, and maybe one day we'll be able to merge back.
There's also a feature limited version of the server for Processing, made by @kritzikratzi! See <a href="http://superduper.org/processing/remoteUI">here</a>.
Motivations
I know there's tons of very good UI's already, but one thing that bothers me about most of them is how by using them, your are affecting your framerates quite a lot. That's the main reason that made me build ofxRemoteUI. Being quite comfy in OSX development, I chose to make a full-featured native OSX client; although clients for other platforms could be developed as well, using the underlying ofxRemoteUIClient class.
Details
It's OSC based, and it includes a native OSX Client. The Native OSX Client allows param colorization for better clarity, and live param filtering. It also supports the grouping of params into categories, for easy access. There's automatic keyboard shortcuts to do so.
It can also be set to store the current values when quitting the app (or whenever its convenient), so that you can carry on where you left off last time you used it. It does so by saving a file called "ofxRemoteUISettings.xml" in your data folder. It uses ofxXmlSettings to store everything.
You can also create and delete presets, which are parameter states for your app. Presets are stored with your OF app, inside an "ofxRemoteUIPresets" folder, in your data folder. This makes it easy to check in your presets with your source code. Whenever you like the current config, you can make a preset to keep it around. You can also delete presets.
ofxRemoteUI uses Macros + the singleton pattern to make it very easy to share any variable you decide to edit remotely, from any class of your project.
The OSX client also allows to copy all the current params as plain text. You can also paste them back after editing them! Thx to @kritzikratzi for this idea!
To use it outside of OpenFrameworks, you can see how the example-noOF is setup.
How To Use
the most basic setup only requires a few calls.
float x;
int y;
ofColor color;
void setup(){
RUI_SETUP(); //start server
//Expose x and y vars to the server, providing a valid slider range
RUI_SHARE_PARAM(x, 0, ofGetWidth());
RUI_SHARE_PARAM(y, 0, ofGetHeight());
//share the color param
RUI_SHARE_COLOR_PARAM(color);
//load values from XML, as they were last saved (if they were)
RUI_LOAD_FROM_XML();
}
Then, use any of the client options to view and edit your shared parameters. Look into the server example to see more features. It is fairly documented.
Controller Bindings
The ofxRemoteUI OSX client allows to bind any midi control / joystick axis / button to any of your params. Make sure your device is connected before you launch the app. To bind a device to a parameter, do the following:
- Click on a param name on the main Window. It will start blinking.
- Rotate/Slide/Press your external device control (joystick, gamepad button, midi slider, knob, etc).
- Done! You can now control that param from your external controller
You can Save/Load/Edit/Clear your midi bindings from the "MIDI Bindings" window.
MIDI Sliders/Knobs/etc can be bound to floats, ints, enums, bools and colors. For ints, floats and enums, the mapping is obvious; for bools, the lower half of a slider/knob sets the param to false, the upper half to true. For colors, the slider shifts the hue of the color parameter.
Bools can also be bound to "piano keys"; params being set to true for as long as a key is held down.
Bindings are saved when the app is quit. You can also save any particular device binding configuration into a ".midiBind" file. You can also double-click any .midiBind file form the finder to load your previously saved bindings. There is a "bindings" window that allows you to delete particular bindings. You can see what parameters are currently bound by choosing "File->Blink Bound Midi Controls".
Web-based Interface
The web client allows you to control the parameters of your OpenFrameworks app from a web browser. It does so by connecting your web browser to your OF app through websockets; it uses ofxPoco to handle the connection.
ofxRemoteUIServer creates a minimal webserver that hosts a single-file HTML + JS + CSS gzipped package that your browser will interpret. You don't need to provide additional files.
You can quickly load up the web GUI interface by getting into the built-in client (press 'tab' from the OF app), and from there press 'c' (for client). This will launch a web browser and load the web gui for you.
The web interface is developed in a separate repository ofxRemoteUI-Web. The whole interface is packaged in the RUIWebBinary.cpp file, so if you want to modify / tweak the interface, go to the ofxRemoteUI-Web repo and create a new build of that file and drop it into the ofxRemoteUI src folder (replacing the old one).
The web client has completely been developed by @jackosx, with some quality-of-life tweaks by @armadillu.
Note that this interface is not very tested. Don't use several clients at the same time, only one will be alloewd to connect. Web client connection/disconnection doesnt seem very realiable at the moment, but should be ok for a quick edit. You can completely disable the web interface by defining the preprocessor macro "NO_RUI_WEB_INTERFACE" in your project.
Random Notes
"Restore to initial XML Values" sets
Related Skills
node-connect
342.5kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
85.3kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
342.5kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
342.5kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
