效果图：
代码及详解
1.添加两个插件的头文件:
cpp
#include "ofxGui.h"
#include "ofxXmlSettings/src/ofxXmlSettings.h"2.添加GUI部分，然后在.h声明右边的openframeworks的UI部分，包括面板ofxPanel，按钮ofxButton，滑块ofxSlider，切换ofxToggle,组ofxGuiGroup:
cs
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;- 在ofApp::setup()函数中对变量赋值：
cs
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()函数中对调用绘制方法：
cpp
panel.draw();5.添加xml外部配置,在.h中声明ofxXmlSettings的变量
cpp
ofxXmlSettings xml;6.在ofApp::setup()函数中对xml调用：
cpp
xml.loadFile("config.xml");7.按保存按键对UI上的数值进行保存：
cpp
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中声明函数：
cpp
void description();8.在ofApp::draw()函数中对调用介绍方法：
cpp
void ofApp::draw() {
panel.draw();
description();
}9.description()方法中的代码如下：
cpp
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所执行的方法代码如下：
cpp
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;
}
}最终的效果已经发在文章的开篇了