ofxWebSimpleGuiToo extends ofxSimpleGuiToo, and runs a web server within your openFrameworks app that provides a web service that allows you to manipulate the GUI. The web server also serves up a html/JQuery client for the webservice - the files for this are stored in the data/ folder of the ofxWebSimpleGuiToo example and are just served up statically to any HTTP client.

This page explains the webservice that ofxWebSimpleGuiToo provides to the HTML client so you can implement your own (better!) one. You put your html client code in data/ofxWebSimpleGuiToo, so it's accessible by the web server built into the openframeworks app.

The webservice provides 2 functions:

# to describe the controls, # to allow the client to change the values of the controls

1. describing controls

ofxWebSimpleGuiToo provides a JSON data structure representing the GUI. If you're running ofxWebSimpleGuiToo locally (on port 8910), the url for this is at http://localhost:8910/control So your client will query this url to find out about what gui elements there are.

Here is an example of the output:

[
	{
		"name": "Header", 
		"controls":
		[
			{
				"name":"1: SETTINGS",
				"type": "Button"
			},
			{
				"name":"Auto Save",
				"type": "Toggle", 
				"value":"true"
			},
			{
				"name":"Save Settings",
				"type": "Button"
			},
			{
				"name":"FPS Counter","type": "FPSCounter"
			}
		]
	},
	{
		"name": "SETTINGS", 
		"controls":
		[
			{
				"name":"fill",
				"type": "Toggle", 
				"value":"true"
			},
			{
				"name":"sizeX",
				"type": "SliderFloat", 
				"value":"100.0000000", 
				"min":"50.0000000", 
				"max":"800.0000000"
			},
			{
				"name":"sizeY",
				"type": "SliderFloat",
				"value":"100.0000000",
				"min":"50.0000000",
				"max":"600.0000000"
			},
			...
			...
		]
	}
]

Here is a description: The root element of the JSON is an array (in 's not {}'s) of pages of the gui. Each page is represented as an associative array (in {}'s not 's), with 2 key/value pairs - firstly "name": "the page's name" and then "controls": array of controls

Each control in the array is represented by an associative array - with a "name", "type" and "value". If the type is a slider (either "SliderFloat" or "SliderInt") it also has "min" and "max" for the extents of the slider.

For "Toggle"'s boolean values are either "true" or "false" (not 0 or 1)

The currently implemented gui types are "SliderInt", "SliderFloat", "Toggle", "Button" and "Title". More soon!

2. manipulating controls

To change the values of the controls in the GUI, you make a http get request to /control, passing a parameter called "key", which is the name of the control, and "value" which is it's current value.

So, for example if you called

http://localhost:8910/control?key=sizeX&value=250

It would set the sizeX slider to 250.

If you have any questions, please contact me (bereza gmail com)