新版ONENET（2024/4/24）通过view3.0可视化保姆级教程（一学就会）附效果图

---

⏩ 大家好哇！我是小光，想要成为系统架构师的嵌入式爱好者。
⏩上一篇是STM32通过ESP8266连接最新版的ONENET，成功将数据上传之后，本篇文章使用ONENET的view3.0可视化对数据进行可视化做一个详细教程。
⏩感谢你的阅读，不对的地方欢迎指正。
STM32通过ESP8266连接新版ONENET代码（更新时间：2024/4/10）
加入小光嵌入式交流群（qq群号：737327353）免费获取博主所有资料哦！

---

效果展示

这是我使用ONENET view3.0做的一个简单的可视化界面，跟着博主一步步来，简简单单可视化，其中会遇到的问题都会一 一解答。
数据如何通过STM32开发板上传到ONENET可以看上篇文章：
STM32通过ESP8266（MQTT）连接新版ONENET（2024/4/23）（保姆级教程）附运行结果

项目简介

该气象仪基于STMF103ZET6，采用温湿度模块，光照模块，风速模块，风向模块来对环境进行数据检测。通过ESP8266将所有数据上传ONENET物联网平台。

可视化数据源配置

物模型

该项目有温湿度、光照强度、风速、风向、风级6个物模型。如何配置以及和STM32如何上传详看上篇文章。

数据源模板配置

在控制台进入数据可视化：

先获取相关配置参数：鼠标放在右上角头像，点击访问权限：

记下以下两个数据，后面会用到：

创建数据源模板的时候，新版ONENT一定是物联网平台，用户ID和accessKey很多人都会输错，一定要填写的是ONENET用户的ID和key，这样就没问题了。

可视化项目配置

创建项目

1.新建可视化项目

当然如果你充值了，那你就可以使用别的现成的模板或者基础模板。

2.添加控件，这上面有各种控件，比如我比较喜欢用的仪表盘和折线图，一些标题啥的配置我就不教大家了。

数据源配置

创建数据源

使用我们刚才创建的数据源模板创建数据源：

然后就能看到我们创建好的数据源，一般默认是数据源模板名称+随即英文，我们对其修改即可：

选择对应的数据源就可以啦，对于这种只需要数据的控件把过滤器关掉数据就正常啦。

过滤器配置

简单控件只需要数据的比如仪表盘等等就不需要使用过滤器了，其他控件的配置也可以参考以下代码实现。

折线图过滤器

像这种有坐标的可以使用下方过滤器代码，一般横轴是时间，纵轴是数据。

折线图过滤器代码：

// 最终数据应该是一个数组
var result = [];
var dataPoint = null;
//循环处理选中的数据源的数据点
for (var i = 0; i < data.length; i++) {
    // 从数据点中取出需要的数据，通过配置键值对使得数据格式符合要求
    dataPoint = {
        x: data[i].at,
        y: data[i].value,
    };
    // 将这个数据点添加进结果中
    result.push(dataPoint);
}
return result;

别忘了保存哦！

文本过滤器配置

如果你想把数据和文本做一个简单的对应可以使用以下过滤器代码，根据情况自己进行修改哦，比如说我这个我上传的风向是一个角度，如何根据角度判断是什么风呢？使用简单的三目运算符可以巧妙解决这个问题。

文本控件过滤器代码：

var wind = data[data.length - 1].value;
return [{
    name: data[data.length - 1].at,
    value: wind == 0 ? '北风' :
        wind == 45 ? '东北风' :
        wind == 90 ? '东风' :
        wind == 135 ? '东南风' :
        wind == 180 ? '南风' :
        wind == 225 ? '西南风' :
        wind == 270 ? '西风' :
        wind == 315?'西北风':'错误',
}]

常用过滤器代码

参考官方文档：数据可视化view常用过滤器代码
一、迭代处理
通常数据源返回的结果大多是数组类型，通过迭代可以对每个元素进行处理。

data.forEach((item, index) => {
  // console.log('元素：', item, '；下标：', index);
});

二、获取数组第一项

// first([1, 2]); // -> 1
function first(arr) {
  var len = arr ? arr.length : 0;
  if (len) return arr[0];
}

三、获取数组最后一项

// last([1, 2]); // -> 2
function last(arr) {
  var len = arr ? arr.length : 0;
  if (len) return arr[len - 1];
}

四、数组最大值，最小值

//数组最大值
function maxArr(arr) {
  return Math.max.apply(null, arr);
}
//数组最小值
function minArr(arr) {
  return Math.min.apply(null, arr);
}

五、数组求和，平均值

// 这一块的封装，主要是针对数字类型的数组
// 求和
function sumArr(arr) {
  return arr.reduce(function(pre, cur) {
    return pre + cur;
  });
}

// 数组平均值,小数点可能会有很多位，这里不做处理
function covArr(arr) {
  return this.sumArr(arr) / arr.length;
}

六、从数组中随机获取元素

function randomOne(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

七、随机返回一个范围的数字

//ecDo.randomNumber(5,10)
//返回5-10的随机整数，包括5，10
//ecDo.randomNumber(10)
//返回0-10的随机整数，包括0，10
//ecDo.randomNumber()
//返回0-255的随机整数，包括0，255
function randomNumber(n1, n2) {
  if (arguments.length === 2) {
    return Math.round(n1 + Math.random() * (n2 - n1));
  } else if (arguments.length === 1) {
    return Math.round(Math.random() * n1);
  } else {
    return Math.round(Math.random() * 255);
  }
}

八、时间格式处理

/**
 * @param timestamp 时间戳
 **/
function formatDate(timestamp) {
  var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '-';
  var M =
    (date.getMonth() + 1 < 10
      ? '0' + (date.getMonth() + 1)
      : date.getMonth() + 1) + '-';
  var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
  var h =
    (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  var m =
    (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
    ':';
  var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  return Y + M + D + h + m + s;
}

九、返回数组（字符串）一个元素出现的次数

//ecDo.getEleCount('asd56+asdasdwqe','a')
//result：3
//ecDo.getEleCount([1,2,3,4,5,66,77,22,55,22],22)
//result：2
function getEleCount(obj, ele) {
  var num = 0;
  for (var i = 0, len = obj.length; i < len; i++) {
    if (ele === obj[i]) {
      num++;
    }
  }
  return num;
}

十、对象数组排序

//var arr=[{a:1,b:2,c:9},{a:2,b:3,c:5},{a:5,b:9},{a:4,b:2,c:5},{a:4,b:5,c:7}]
//ecDo.arraySort(arr,'a,b')a是第一排序条件，b是第二排序条件
//result：[{"a":1,"b":2,"c":9},{"a":2,"b":3,"c":5},{"a":4,"b":2,"c":5},{"a":4,"b":5,"c":7},{"a":5,"b":9}]
function arraySort(arr, sortText) {
  if (!sortText) {
    return arr;
  }
  var _sortText = sortText.split(',').reverse(),
    _arr = arr.slice(0);
  for (var i = 0, len = _sortText.length; i < len; i++) {
    _arr.sort(function(n1, n2) {
      return n1[_sortText[i]] - n2[_sortText[i]];
    });
  }
  return _arr;
}

十一、数组逆序

// arrayReverse([3,2,1,4])  // [4, 1, 2, 3]
function arrayReverse(arr) {
  var len = arr ? arr.length : 0;
  if (len) return arr.reverse();
}

项目关联与发布

在应用开发中添加项目，随便填

添加我们的设备，添加后会自动添加产品

因为我已经添加过了所以没有显示

在可视化界面我们可以选择是否关联到我们刚刚添加的项目

关联之后执行下方操作就可以查看我们的可视化界面啦！

问题汇总（2024/4/24）

1.数据源模板和数据源创建时无法选择数据源的问题？
解答：创建数据源模板的时候，新版ONENT一定是物联网平台，用户ID和accessKey很多人都会输错，一定要填写的是ONENET用户的ID和key，这样就没问题了。

2.使用ESP8266发送AT指令上传数据包，ONENET接收数据失败的问题？
解答：（1）过滤器未规范配置，具体参考上文。
（2）数据包格式有问题，参考官方文档：MQTT数据接入物模型数据交互
新版上传代码数据包格式：

/*
{
	"id": "123",
	//"version": "1.0",(可选)
	"params": {
		"temp": {
			"value": "12345",
			//"time": 1706673129818（可选）
		},
		"humi": {
			"value": 23.6,
			//"time": 1706673129818（可选）
		}
	}
}
*/

unsigned char OneNet_FillBuf(char *buf)
{
	
	char text[48];
	
	strcpy(buf,"{\"id\":\"123\",\"params\":{");
	//温度
	memset(text,0,sizeof(text));
	sprintf(text,"\"temp\":{\"value\":%d},",DHT11_Data.temp_int);
	strcat(buf,text);
	//湿度
	memset(text,0,sizeof(text));
	sprintf(text,"\"humi\":{\"value\":%d}",DHT11_Data.humi_int);
	strcat(buf,text);
	
	strcat(buf,"}}");

	return strlen(buf);

}

总结

本篇文章使用ONENET的view3.0可视化对数据进行可视化做一个详细教程。总体来说新版在数据格式上进行了优化，上传数据非常方便而且不容易断联。可视化界面没有太大改变，感谢你的阅读，不对的地方欢迎指正。
STM32通过ESP8266连接新版ONENET代码（更新时间：2024/4/10）
加入小光嵌入式交流群（qq群号：737327353）免费获取博主所有资料哦！