用户使用手册

开始设计: http://t.le5le.com/

1 基本知识

1.1 画布

画布即绘画区域

1.2 菜单栏

顶部菜单导航,可设置Logo、公司名称、文件编辑、钢笔、铅笔、放大镜、缩略图、连线起点、连线终点、连线线宽、视图比例、自动锚点、禁用锚点、编辑/预览/锁定/、预览、分享、帮助、语言、登录

1.3 组件库

组件库功能:搜索、图纸、系统组件、我的组件、图形库管理

1.3.1 图形

绘画对象,分为节点和连线2种

节点

连线

连线是用于绘画的线条,可以选择钢笔工具绘制连线(快捷键V)

1.4 属性面板

1.4.1 文件属性面板

1.4.2 图形属性面板

1.4.3 多选属性面板

对齐:左对齐、右对齐、顶部对齐、底部对齐、垂直居中、水平剧中、等距分布左右对齐、等距分布上下对齐、相同

1.5 右键菜单

鼠标右键或平板三指触摸显示右键菜单

功能:置顶、置底、上一个图层、下一个图层、组合、组合为状态、锁定、删除、撤销、恢复、剪切、复制、粘贴

组合为状态:常用于展示开关的断开与闭合、风机的转动与停止、警示灯的状态切换等

使用参考:http://developer.le5le.com/tutorial/data.html#状态


2 基本操作

2.1 文件

文件:文件的新建、打开、导入、保存、另存为、下载JOSN文件、下载ZIP打包文件、导出为HTML、下载为PNG、下载为SVG

2.1.1 设置文件名、文件夹名、分类

属性面板的文件夹即组件库图纸文件夹

2.1.2 设置画布属性

默认颜色:预先设置默认颜色,拖拽到画布的节点(基础图形、文字、icon)自动统一默认颜色。

画笔填充颜色:预先设置画笔填充颜色,拖拽到画布的节点(基础图形)自动统一默认填充颜色。

背景颜色

背景网格、网格颜色、网格大小、网格角度

标尺、标尺颜色

2.1.3 设置文件通信

支持主流的websocket、MQTT、http协议,能够“0代码”实现消息通信、数据实时修改和触发事件交互。

2.1.4 设置文件布局

​画布和组件的排版布局

2.1.5 设置文件结构

可编辑:可以编辑属性事件
被锁定:可以执行事件和交互
被禁用 :不能选中,完全不出发任何事件,可以当背景底图

2.2 锚点编辑

添加/删除锚点(A):节点(包括图形、图片等)和连线都可以添加/删除锚点
移动锚点(G):将光标移动到锚点上,按一下快捷键G,拖动鼠标完成锚点移动
添加手柄(H)
删除手柄(D)
切换手柄类型(Shift):①两端手柄完全对称 ②一端手柄可以任意伸缩长度 ③一端手柄可以任意伸缩长度和变换角度

2.3 拖拽编辑

可拖拽任意节点到画布

也可以单击选定节点,再单击画布放置节点

2.4 连线

钢笔绘制连线

开始:单击左键

暂停:单击右键 或 enter

结束:esc

绘制横线:按下快捷键ctrl,点击鼠标左键绘制,右键结束绘制

绘制竖线:按下快捷键alt,点击鼠标左键绘制,右键结束绘制

连接绘制连线

曲线

线段

直线

脑图曲线

起点样式

终点样式

线宽

连线变成节点、节点变成连线、切割连线、合并连线

连线变成节点、节点变成连线:右键

切割连线:选中线,移入线锚点,按下 S

合并连线:线连接线时,按下 alt

2.5 外观设置


2.5.1 位置和大小

设置节点的外观样式

角度:设置尖角与圆角,值的范围:0~1

旋转:设置图形的旋转角度

进度:任意封闭图形,都可以当进度条:矩形、圆、svg、封闭连线、或其他任意封闭图形,值的范围:0~1

案例:通常用进度来代表水位高低

2.5.2 样式

设置连线的外观样式

案例:用连线丰富的外观属性,绘制武地铁线路图demo

2.5.3 文字

2.5.3 图片

2.5.4 字体图标

3 事件

3.1 事件

添加相应事件,即可实现相应的事件行为

事件类型:鼠标移入、鼠标移出、选中、取消选中、鼠标按下、鼠标弹起、单击、双击

事件行为:打开链接、更改属性、执行动画、暂停动画、停止动画、执行JavaStript、执行Window函数、自定义消息

3.2 条件触发器

根据数据触发报警

条件触发器案例:参考消息事件-条件触发器

4 动效

4.1 节点动画

给节点添加动画、鼠标提示,设置动画时长、动画效果、循环次数、下个动画tag、是否自动播放、是否保持动画状态

动画效果:无、上下跳动、左右跳动、心跳、成功、警告、错误、炫耀、自定义

自定义动画示例1:进度条,通常用来展示水位变化

自定义动画示例2:特殊效果

4.2 连线动画

给连线添加动画、鼠标提示,设置动画效果、动画颜色、动画速度、正反流动方向、循环次数、下个动画tag、是否自动播放、是否保持动画状态

动画效果:水流、水珠流动、圆点

案例:连线动画常常用于展示管道水流/能源等流动方向

案例地址:https://t.le5le.com/?id=63071758288d77e4cee19a6f

4.3 鼠标提示

参考Markdown语法编写鼠标提示

4.4 视频video

video标签支持MP4、WebM、Ogg 三种格式

4.5 网页iframe

5 数据

绑定变量,快速实现实时数据动态展示

绑定变量示例

参考视频:https://www.bilibili.com/video/BV1Yd4y1D7ys?spm_id_from=333.999.0.0

6 消息通信

6.1 mqtt通信

参考:开发教程 - 实时数据监听

6.2 websocket通信

参考:开发教程 - 实时数据监听

6.3 消息通信案例

实时数据监听-消息通讯

7 常用菜单基本命令

7.1 钢笔

开始:单击左键

暂停:单击右键 或 enter

结束:esc

闭合/取消闭合:enter

7.2 铅笔

开始:连续拖动左键

暂停:释放左键

结束:esc

闭合/取消闭合:enter

7.3 放大镜

7.4 缩略图

7.5 自动锚点

​开启时自动选择2个最近锚点,关闭时可自由选择锚点

7.6 禁用锚点

​禁用锚点,即不显示锚点

8 组件库

8.1 图纸

新建文件夹、新建图纸、删除文件夹、删除图纸

8.2 系统组件

搜索:输入关键词可以搜索相应的系统组件
取消搜索:删除关键词,回车

图形库管理:不常用的图形可以取消勾选,提升加载速度

8.3 我的组件

新建文件夹、上传图片、创建组件、删除文件夹、删除我的组件

例如常用的电网图元组合可以组合成一个组件,保存在“我的组件”里面,方便下次直接拖拽使用,同时也可以将绘制好的组件下载JSON分享给同事使用

9 图形库

乐吾乐图形库一共分为三大类:基础图形库、电力图形库、物联网图形库,总共约3700个图元,能满足大部分行业的基本需求。 格式有三种:原生代码(JS)、阿里字体(iconfont)、图片(svg、gif),企业版已经写好固定的逻辑,支持良好。
同时乐吾乐Topology支持扩展自定义图库:http://developer.le5le.com/topology-documents/tutorial/make-component.html

​ 点击查看系统组件:http://t.le5le.com/

如何搜索:系统组件

常用基础组件:文字、图片、视频、iframe、icon

9.1 基础图形库

序号类别格式数量
1基本形状js22
2表单js8
3脑图js2
4流程图js15
5活动图js8
6时序图和类图js4
7Echarts图表js4
8Highcharts图表js4
9Le5le chartsjs5
10故障树js12
合计84

9.2 电力图形库

序号类别格式数量
1逻辑门电路js27
2电阻js23
3电容js16
4电感js39
5开关、转换器js46
6二极管js13
7信号源js29
8晶体管js72
9仪表js5
10电子显示设备js15
11真空电子管js7
12电子波形js23
13转动与机械设备js15
14电子逻辑计算器js10
15电子传输/传播js17
16电子未分类js147
17液压符号js245
18电气工程常用字母和符号iconfont578
19国家电网图元规范iconfont344
合计1671

9.3 物联网图形库

序号类别格式数量
1js313
2网络设备js81
3电子产品js147
4楼宇js37
5物联网未分类js35
6Iot-MNMS(移动网管域)svg6
7City(城市)svg21
8Iot-pump(泵)svg、gif40
9Iot-HVAC(暖通空调)svg、gif35
10Iot-waste water treatment(废水处理)svg、gif129
11Iot-Boilers(锅炉)svg21
12Iot-process heating(制程加热)svg20
13Weather(天气)svg51
14Iot-Labortory(实验室)svg19
15鞋子专属定制svg9
162.5D Room(2.5D 房间)svg16
17Iot-logistics(物流)svg35
18Iot-water tank(水槽)svg95
19Iot-Food(食品)svg60
20Iot-building(建筑)svg9
21Iot-machining(机器)svg60
22Iot-CONTAINERS(容器)svg14
23Iot-light(灯)svg18
24Iot-PIPES(管道)svg21
25Iot-valve symbols(阀门符号)svg32
26Iot-WIRE(电线电缆)svg13
27Iot-Material Handing(物料运输)svg55
28Iot-Flow Meters(流量计)svg24
29Iot-buttom(按钮)svg40
30Iot-MIXERS(搅拌器)svg21
31Iot-process cooling(制程冷却)svg22
32Iot-SAFETY(安全)svg27
33Iot-Chemical(化学)svg36
34Iot-power(电源)svg58
35Iot-valve(阀门)svg20
36Iot-Plant Facilities(工厂设施)svg36
37Iot-Meter(仪表)svg12
38Iot-Motors(发动机)svg18
39Iot-Computer Keys(电脑按键)svg94
40Iot-Blowers(鼓风机)svg、gif18
41大屏可视化svg19
合计1837

开始设计: http://t.le5le.com/

快捷键:http://developer.le5le.com/tutorial/keyboards.html

解决方案:http://topology.le5le.com/search