效果图：

代码及详解

1.添加两个插件的头文件:

#include "ofxGui.h"
#include "ofxXmlSettings/src/ofxXmlSettings.h"

2.添加GUI部分，然后在.h声明右边的openframeworks的UI部分，包括面板ofxPanel，按钮ofxButton，滑块ofxSlider，切换ofxToggle,组ofxGuiGroup:

ofxPanel panel;
ofxToggle ip;
ofxIntSlider port;
ofxIntSlider device;
ofxToggle cutFilter;
ofxGuiGroup depthGroup;
ofxToggle useDepth;
ofxToggle base;
ofxIntSlider deviceX;
ofxIntSlider deviceY;
ofxIntSlider gridX;
ofxIntSlider gridY;
ofxButton save;

int portInt = 3333;
int deviceXInt = 1;
int deviceYInt = 1;
int gridXInt = 2;
int gridYInt = 2;

3. 在ofApp::setup()函数中对变量赋值：

panel.setPosition(250, 0);
panel.setup("Values", "toolsConfig", 250, 0);
panel.setName("Values");
panel.add(ip.setup("ip", false));
panel.add(port.setup("port", 3333, 3333, 3350));
panel.add(device.setup("device", 0, 0, 3));
panel.add(cutFilter.setup("cutFilter", false));
depthGroup.setup("depthGroup");
depthGroup.setName("depthGroup");
depthGroup.add(useDepth.setup("useDepth", false));
depthGroup.add(base.setup("base", false));
depthGroup.minimize();
panel.add(&depthGroup);

panel.add(deviceX.setup("deviceX", 1, 1, 6));
panel.add(deviceY.setup("deviceY", 1, 1, 6));
panel.add(gridX.setup("gridX", 2, 2, 10));
panel.add(gridY.setup("gridY", 2, 2, 10));
panel.add(save.setup("save"));
panel.minimizeAll();

panel.loadFromFile("toolsConfig.xml");

gui.setPosition(250, 0);//设置panel的位置

gui.setup("Values", "toolsConfig", 250, 0);//设置名称，位置和config

panel.setName("Values");//设置panel的名称

panel.add(ip.setup("ip", false));//将ip的名字设置在UI上，并记录点击切换后的数值

panel.add(port.setup("port", 3333, 3333, 3350));//同上

panel.add(device.setup("device", 0, 0, 3));//同上

panel.add(cutFilter.setup("cutFilter", false));//同上

depthGroup.setup("depthGroup");//设置组

depthGroup.setName("depthGroup");//设置组名称

depthGroup.add(useDepth.setup("useDepth", false));//组内添加useDepth,并设置false

depthGroup.add(base.setup("base", false));//同上

depthGroup.minimize();//将组最小化

panel.add(&depthGroup);//将组添加到panel中

panel.add(deviceX.setup("deviceX", 1, 1, 6));//设置水平方向设备数量

panel.add(deviceY.setup("deviceY", 1, 1, 6));//设置竖直方向设备数量

panel.add(gridX.setup("gridX", 2, 2, 10));//设置调试点水平方向数量

panel.add(gridY.setup("gridY", 2, 2, 10));//设置调试点竖直方向数量

panel.add(save.setup("save"));//设置保存按钮及名称

panel.minimizeAll();

panel.loadFromFile("toolsConfig.xml");//加载一个名为"toolsConfig.xml"的配置文件到panel对象

//设置背景颜色

ofSetBackgroundColor(ofColor::cornflowerBlue);

//对滑块添加监听事件

device.addListener(this, &ofApp::deviceChange);

4.ofApp::draw()函数中对调用绘制方法：

panel.draw();

5.添加xml外部配置,在.h中声明ofxXmlSettings的变量

ofxXmlSettings xml;

6.在ofApp::setup()函数中对xml调用：

xml.loadFile("config.xml");

7.按保存按键对UI上的数值进行保存：

if(save){
   xml.setValue("ip", ip == false ? "127.0.0.1" : "192.168.0.2");
   xml.setValue("port", port);
   xml.setValue("device", device);
   xml.setValue("cutFilter", cutFilter);
   xml.setValue("useDepth", useDepth);
   xml.setValue("base", base);
   xml.setValue("gridX", gridXInt - 1);
   xml.setValue("gridY", gridYInt - 1);
   xml.setValue("deviceX", deviceXInt);
   xml.setValue("deviceY", deviceYInt);
   xml.saveFile("config.xml");
   panel.saveToFile("toolsConfig.xml");
}

//设置xml中相应的参数并存入xml外部配置中，其他的同理

xml.setValue("ip", ip == false ? "127.0.0.1" : "192.168.0.2");

 7.添加相应的介绍，在.h中声明函数：

	void description();

8.在ofApp::draw()函数中对调用介绍方法：

void ofApp::draw() {
	panel.draw();
	description();
}

9.description()方法中的代码如下：

void ofApp::description() {
	selectFont(18, DEFAULT_CHARSET, "宋体");
	ofSetColor(ofColor::white);
	drawCNString(ip == false ? "ip地址：127.0.0.1" : "ip地址：192.168.0.2", 20, 35);
	drawCNString(("端口号：" + ofToString(portInt)).c_str(), 20, 55);
	drawCNString(("设备类别：" + ofToString(deviceName)).c_str(), 20, 75);
	drawCNString(cutFilter == false ? "滤光片状态：初始不切换" : "滤光片状态：初始切换", 20, 95);
	drawCNString(useDepth ? "图像类别：深度图像" : "图像类别：红外图像", 20, 115);

	if (deviceType == 0 || deviceType == 1) {
		drawCNString("测距基准：无", 20, 135);
	}
	else {
		if (useDepth) {
			drawCNString(base ? "测距基准：识别设别" : "测距基准：被测环境", 20, 135);
		}
		else {
			drawCNString("测距基准：无", 20, 135);
		}
	}

	drawCNString(("水平摄像头数量：" + ofToString(deviceXInt)).c_str(), 20, 155);
	drawCNString(("垂直摄像头数量：" + ofToString(deviceYInt)).c_str(), 20, 175);
	drawCNString(("水平校准点数量：" + ofToString(gridXInt)).c_str(), 20, 195);
	drawCNString(("垂直校准点数量：" + ofToString(gridYInt)).c_str(), 20, 215);

}

10.切换device所执行的方法代码如下：

void ofApp::deviceChange(int& device)
{
	switch (device)
	{
	case 0:
		deviceName = "普通摄像头";
		useDepth = false;
		width = 640;
		height = 480;
		depthGroup.minimize();
		break;
	case 1:
		deviceName = "可切换滤光片";
		useDepth = false;
		width = 640;
		height = 480;
		depthGroup.minimize();
		break;
	case 2:
		deviceName = "Kinect2";
		useDepth = true;
		width = 512;
		height = 424;
		depthGroup.minimize();
		depthGroup.maximize();
		break;
	case 3:
		deviceName = "奥比中光";
		useDepth = true;
		width = 640;
		height = 480;
		depthGroup.minimize();
		depthGroup.maximize();
		break;
	default:
		break;
	}
}

最终的效果已经发在文章的开篇了

给个关注，接下来这些天我将手把手教你使用openframeworks制作一个多媒体互动的识别软件。