openFrameworks_如何使用ofxXmlSettings和ofxGui来创建识别界面

效果图:

代码及详解

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;
  1. 在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;
	}
}

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

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

相关推荐
转世成为计算机大神19 分钟前
易考八股文之Java中的设计模式?
java·开发语言·设计模式
宅小海37 分钟前
scala String
大数据·开发语言·scala
qq_3273427340 分钟前
Java实现离线身份证号码OCR识别
java·开发语言
锅包肉的九珍41 分钟前
Scala的Array数组
开发语言·后端·scala
心仪悦悦44 分钟前
Scala的Array(2)
开发语言·后端·scala
沉默璇年1 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder1 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727571 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
baivfhpwxf20231 小时前
C# 5000 转16进制 字节(激光器串口通讯生成指定格式命令)
开发语言·c#
许嵩661 小时前
IC脚本之perl
开发语言·perl