HTML, JS, and WebSocket based UI for Cinder
C++
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
blocks
docs/images
include
samples/WebUISample
src
.gitignore
.gitmodules
LICENSE
README.md

README.md

WebUI Cinder Block

This Cinder Block provides a web-based user interface for Cinder. It binds variables in the Cinder app to HTML elements using WebSockets. Basic usage is very simple. First, in Cinder, declare the UI and a bound parameter:

#include "WebUI.h"

class MyApp : public ci::app::App {
    // ...
    webui::WebUI                mUI;
    webui::BoundParam< float >  mBoundFloat;
}

Then bind it:

mUI.bind( "bound-float", &mBoundFloat );

Then create an HTML element and bind it to the same name:

<script src="client.js" type="text/javascript"></script>
<form id="controls" action="">
  <input id="bound-float" type="number" />
</form>
<script type="text/javascript">
  var client = new WebUIClient.Client( document.getElementById( "controls" ) );
  client.bind( document.querySelector( "input" ) );
</script>

Sample

To see a fully working sample, clone this repo with its submodules, open the WebUISample project, build it, run it, and open the client.

cd Cinder/blocks
git clone --recursive git@github.com:heisters/Cinder-WebUI.git
cd Cinder-WebUI/samples/WebUISample
open xcode/WebUISample.xcodeproj
# build + run ...
open html/index.html

You should see something like this:

Sample Screenshot

Requirements

Cinder-WebSocketPP is included as a submodule. If WebUI isn't building against the latest WebSocketPP, try using the version in the submodule.