常见问题

是否可以商用

基于开源协议 MIT 核心库自己开发的应用可以商用;

试用企业版非 MIT 项目,需要购买授权;

其他开发者作品参考开发者作品协议;

如何编译核心库源码

  1. 下载核心库源码
git clone https://github.com/le5le-com/topology.js.git
  1. 安装依赖包
// 使用yarn。我们使用的是yarn workspace目录结构
yarn
  1. 编译(Build)
yarn build
// 编译后的文件在dist目录下
  1. 使用
    编译后的 js 包,参考开发文档使用

关于企业版

参考: 教程 - 企业版

开源版有核心算法没开放

不是的。开源核心库开放了所有完整 API 能力,企业版是基于核心库做的上层 UI 封装。

为什么有不开源的企业版:1. 基于核心库能开发各式各样的丰富产品,我们企业版只是形态之一。2. 当然,也是为了项目和团队的更好的、长期的发展

动画只有 7 种吗

不是的,可以自定义扩展。

  • 节点动画:在编辑器中选中节点,动效--动画--自定义,按照着帧的形式自定义动画效果。

  • 连线动画:在编辑器中暂时只有 4 种。连线动画规则无法复用,自定义扩展需要基于开源核心库编码开发,欢迎联系我们。

如何集成到自己的 IoT 平台

  • 仅大屏显示:参考教程快速上手即可

  • 自己实现编辑器集成到平台:阅读本教程开发即可

  • 使用企业版集成到平台:联系我们购买企业版源码,我们提供 1 年的技术支持

集成到自己的 IoT 平台,企业版编辑器右上角用户如何关联?

  1. 在登录后,保存一个 localStorage.token 或 cookie.token,编辑器会把此 token 放到 http 请求头 headers.Authorization 中。平台后端自行验证此 token 身份即可。
  • 如果把企业编辑器作为一个独立页,(登录成功后,回跳到编辑器)url 上带?token=your-token 参数,编辑器会自动保存 localStorage.token。
  1. 按照我们的API 接口文档写一个用户接口,url path:/api/user/profile 即可

每新打开一个图纸必须重新填写 mqtt 的参数吗?可以和现有 IoT 系统通过接口整合吗?

不同的图纸 mqtt 地址和 topic 可能不同,因此默认每个图纸独立存储通信地址。保存文件时,会自动保存通信地址和参数设置,下次打开,无需再次设置。

如果 IoT 平台通信地址固定,可以修改编辑器源码在 topology.open 前,给图纸 json 赋值固定的通信地址即可,参考实时数据监听教程设置即可

如何绑定变量

  1. 理解实时数据监听原理
  • 我们有 3 种方式实现数据实时变化方式:
    A、mqtt
    B、websocket
    C、topology.setValue(pen)

  • 修改数据的本质是:找到 pen,修改 pen。我们通过 pen.id 或 pen.tag 定位 pen,然后把数据的其他属性赋值给 pen。例如:

{
  id: 1, // 定位查找pen用
  text: '1' // 要修改的数据属性
}

{
  tag: 'tag1', // 定位查找pen用
  text: '1' // 要修改的数据属性
}
  1. 绑定变量的本质,绑定需要定位的 id 或 tag。通常来说,id 是唯一的,不能随意修改的;tag 是可以任意添加的。因此,我们推荐的是绑定 tag:
// tag列表来源于自己平台列表。选中一个变量绑定,等于添加一个tag
pen.tags.push('1号位置-温度传感器');

// 只要有数据给到topology,即可自动修改变化
{
  tag: '1号位置-温度传感器', // 定位查找pen用
  value: 36 // 要修改的数据属性
}
  1. 如果是自己的数据格式,写一个中间件转换成 topology 格式即可。

鼠标框选错位

原因:

  1. 父 dom 元素 css 还没渲染完,就加载画布,确认方式:new Topology 时,查看父 dom 的 clientWidth 和 clientHeight 是否存在;
  2. 修改了父 dom 元素位置,可能是存在动画

解决方案:

  1. 等待父 dom 元素 css 加载完成后在 new Topology
  2. 确定画布位置已经稳定时,修正画布位置: topology.resize();

drawImage width or height 0

原因:

父 dom 的宽高变成 0 了,常见于改变屏幕尺寸
父 dom 的宽高度为 0 就 new Topology 了,可能是存在动画

解决方案:

  1. 更改屏幕尺寸后,仍要保证父 dom 的宽高不为 0
  2. 等待父 dom 元素存在 clientWidth 和 再 clientHeight new Topology

脏数据处理

在一些场景下,偶发的会出现脏数据,目前原因不详。
下面是一些解决方案:

场景一:与大部分画笔位置相差较远

视频讲解: 如何处理脏数据-场景 1

确认方式:

  1. topology.getRect() 宽度和高度很大,但有值。
  2. 已点击窗口大小,但出现空白,或主体区域不在中心区域。

在设计上,画布是无限大的,如果你的主体部分在右下角,而左上角存在一个画笔,而且距离很远,最小缩放比又是一个固定值(老官网 0.3),那么使用窗口大小(fitView),会使画布居中并且按照最小缩放比显示,但仍然看不到主体部分和左上角的画笔。
显然在这种情况下,左上角的画笔并不是我们想要的,那么它变成了一个脏数据,是我们需要移除的。

解决方法:

  1. 老官网: http://topology.le5le.com/workspace/

窗口大小可实现该功能,但按前文所说,受到了最小缩放比的限制,所以我们把最小缩放比设置成 0 ,即允许继续缩放。
在控制台执行下面代码

topology.options.minScale = 0;

然后点击 视图 窗口大小 即可。

  1. 官网:http://t.le5le.com/

操作可同上。 代码更改为:

topology.store.options.minScale = 0;

新版本中存在缩略图(地图)功能,打开地图也可以看到。

图片置底后仍遮住其它图元

图片层级

pen 或 pens 无 calculative 属性导致报错

确定 pens 是否从 topology.data() 方法中取的,若是,改用 topology.store.data.pens 即可;若不是,欢迎群里讨论,在官网控制台发重现代码,截图。

预览画布

topology 是没有预览画布的 api 的,官方仅仅是在一个新的路由(页面),重新 new Topology ,将数据 open ,并 lock.
也可以有其他的做法,例如不跳新页面,仅仅隐藏除画布以外的内容,并且 lock ,注意此处情况可能带来鼠标错位的问题。

mqtt通信

mqtt支持两种协议,一种是tcp协议(mqtt开头),另一种是websocket协议(ws开头),而浏览器(b/s)只支持ws开头的协议,mqtt开头的协议一般是c/s架构使用,tcp协议和websocket协议的端口也不同,ws开头的协议端口为8083(wss为8084),专业的厂商 EMQX 的产品也是这样做的。

其他问题

其他问题,欢迎联系我们:

Github: https://github.com/le5le-com/topology.js/issues

交流群: 交流群

Email: business@le5le.com