一种基于SVG虚拟电路的构建方法及系统与流程

一种基于svg虚拟电路的构建方法及系统
技术领域
1.本发明涉及模拟仿真技术领域，具体涉及一种基于svg虚拟电路的构建方法及系统。


背景技术：

2.在教学中，实验有着非常重要的地位，可以提高学生的动手能力，也可以增强学生对知识的理解。但是传统实验元器件存在很多不足，比如购买和维护花费巨大、易损坏、存在安全隐患等，这些方面严重地限制了实验的普及以及实验的深入教学。与此同时，随着计算机和网络技术的发展，利用虚拟仿真模拟化学、物理、电工等实验的技术也日益成熟。虚拟仿真实验是虚拟仿真技术在教育领域的重要应用。虚拟仿真实验是指通过计算机、网络设备等模拟教学中的各种实验，虚拟仿真实验可以弥补传统教学设备的不足，是日后辅助教学的重要手段。
3.虚拟电路是虚拟仿真实验的重要组成部分，即是将实际的实验元器件和导线虚拟化，从而弥补了传统实验元器件的各种缺点以及解决安全隐患的问题，同时也可以用于验证电路理论知识。在对电路理论知识完成验证后，再基于虚拟电路对硬件进行搭建，既增加了实验的灵活性，又激发了学生的学习兴趣和学习成本，拓展了学生的学习范围，同时加深学生对教学内容的理解。
4.但是现有技术搭建的虚拟电路无法对元器件之间的动态交互进行准确仿真，导致后期对真实电路进行搭建后，与虚拟电路的运行效果有较大差异。


技术实现要素：

5.为了克服现有技术的不足，本发明提供一种基于svg虚拟电路的构建方法及系统，用于解决现有技术搭建的虚拟电路无法对元器件之间的动态交互进行准确仿真的技术问题，从而实现降低真实电路与虚拟电路间运行效果差异的目的。
6.为解决上述问题，本发明所采用的技术方案如下：
7.一种基于svg虚拟电路的构建方法，包括以下步骤：
8.基于svg对元器件的元数据模型进行定义，生成对应的元器件；
9.基于svg对元器件间的前端组件进行定义，生成对应的前端组件；
10.基于svg对元器件的后台模型进行定义，生成对应的后台模型；
11.根据用户选择的所述元器件和所述前端组件，进行自动连线，生成导线，完成虚拟电路的搭建；
12.接收到所述后台模型发送的启动命令后，启动并运行所述虚拟电路；
13.根据运行时所述后台模型返回的状态数据动态切换所述前端组件的状态，以控制所述元器件之间的交互，从而模拟实际电路的运行情况。
14.作为本发明优选的实施方式，在对元器件的元数据模型进行定义时，包括：
15.对元器件的结构信息进行定义；
16.对元器件的可视化信息进行定义；
17.对元器件的功能部件信息进行定义；
18.对元器件的状态信息进行定义；
19.根据所述结构信息、所述可视化信息、所述功能部件信息以及所述状态信息生成元器件。
20.作为本发明优选的实施方式，在进行自动连线，生成导线时，包括：
21.获取起始元器件的起点坐标和结束元器件的终点坐标；
22.并根据所述起始元器件的起点坐标和所述结束元器件的终点坐标得到直接向量；
23.根据所述直接向量得到所述正交线的起始方向和最终方向；
24.根据所述正交线的起始方向和所述正交线的最终方向确定拐点的数量，并得到拐点坐标；
25.根据所述起始元器件的起点坐标、所述结束元器件的终点坐标、所述正交线的起始方向和最终方向以及所述拐点坐标，进行自动连线生成导线；
26.其中，所述导线包括正交线。
27.作为本发明优选的实施方式，在得到所述正交线的起始方向和最终方向时，包括：
28.获取所述正交线的起点坐标和所述正交线的终点坐标；
29.根据所述正交线的起点坐标和所述起始元器件的起点坐标获得起点方向；
30.根据所述正交线的终点坐标和所述结束元器件的终点坐标获得终点方向；
31.在水平向量和竖直向量中挑选出与所述起点方向平行的向量，并判断与所述起点方向是否同向，若是，所述正交线的起始方向与挑选出来的向量同向，若否，所述正交线的起始方向与另一向量同向；
32.在水平向量和竖直向量中挑选出与所述终点方向平行的向量，并判断与所述终点方向是否同向，若是，所述正交线的终点方向与挑选出来的向量同向，若否，所述正交线的终点方向与另一向量同向；
33.其中，所述直接向量包括水平向量和竖直向量。
34.作为本发明优选的实施方式，在确定拐点的数量和得到拐点坐标时，包括：
35.判断所述正交线的起始方向和所述正交线的最终方向是否同向，若是，则所述拐点数量为2，若否，则所述拐点数量为1；
36.当所述拐点数量为1时，拐点坐标由公式1得到，所述公式1具体如下：
37.g＝z+q
ꢀꢀꢀꢀꢀ
(公式1)；
38.其中，g为拐点坐标，z为正交线起点坐标，q为正交线的起始方向向量；
39.当所述拐点数量为2时，拐点坐标由公式2和公式3得到，所述公式2和所述公式3具体如下：
40.g1＝z+q*0.5
ꢀꢀꢀꢀꢀ
(公式2)；
41.g2＝g1+f
ꢀꢀꢀꢀꢀ
(公式3)；
42.其中，g2为第二个拐点坐标，g1为第一个拐点坐标，f为水平向量和竖直向量中与正交线的起始方向垂直的向量。
43.作为本发明优选的实施方式，在对后台模型进行定义时，包括：
44.对各所述元器件的名称进行定义；
45.对各所述元器件间的交互信息进行定义；
46.根据所述交互信息定义返回数据。
47.作为本发明优选的实施方式，在完成虚拟电路的搭建后，包括：
48.所述后台模型接收到生成命令后，根据所述虚拟电路生成电路图和脚本文件；
49.将所述电路图和所述脚本文件保存到可视化文件中。
50.作为本发明优选的实施方式，在运行所述虚拟电路时，包括：
51.通过所述脚本文件中电路配置参数来动态启动所述虚拟电路；
52.通过所述脚本文件中电路配置参数来动态切换所述前端组件的状态；
53.通过所述可视化文件展示所述前端组件和所述虚拟电路的运行状态。
54.作为本发明优选的实施方式，在动态切换前端组件的状态时，包括：
55.通过vuex的监听工具遍历所有的脚本文件，以获取多个状态数据；
56.通过所述vuex的监听工具监听所述状态数据的变化状态，当监听到所述状态数据发生变化时，通过所述vuex的监听工具重新获取所述状态数据，以更新所述状态数据；
57.根据更新的状态数据切换所述前端组件的状态，以得到更新后的所述前端组件的状态。
58.一种基于svg虚拟电路的构建系统，包括：
59.前端，用于对元器件的元数据模型和元器件间的前端组件进行定义，生成对应的元器件和前端组件，并根据所述元器件和所述前端组件搭建虚拟电路，将所述虚拟电路的数据通过交互协议传送给服务端，通过websocket链接接收到来自服务端的启动命令、电路配置参数和状态数据，根据所述启动命令和电路配置参数启动并运行所述虚拟电路，根据所述状态数据动态切换所述前端组件的状态；
60.服务端，接收到来自所述前端的虚拟电路的数据后，通过交互协议传送到后端，接收到来自后端的启动命令以及返回的电路配置参数和状态数据，并通过所述websocket链接传送给所述前端。
61.后端，用于对元器件的后台模型进行定义，生成对应的后台模型，并通过所述后台模型发出启动命令以及返回电路配置参数和状态数据到所述服务端。
62.相比现有技术，本发明的有益效果在于：
63.(1)本发明的虚拟电路基于svg进行构建，可以实现任意缩放而不破坏图形的清晰度和细节；
64.(2)svg是基于xml标准设计的，可以与其它技术建立联系，从而扩大了本发明的适用面；
65.(3)svg可以用矩形、椭圆、圆形、直线、折线、多边形以及路径等元素描述矢量图形，具有强大的作图能力，能提高本发明仿真的准确性；
66.(4)本发明基于svg可对元器件之间的动态交互进行准确仿真，从而有效降低与真实电路间运行效果的差异。
67.下面结合附图和具体实施方式对本发明作进一步详细说明。
附图说明
68.图1-是本发明实施例的基于svg虚拟电路的构建方法步骤图；
69.图2-是本发明实施例的元器件的结构信息定义图；
70.图3-是本发明实施例的元器件的可视化表示图；
71.图4-是本发明实施例的元器件的元数据模型在串口通信助手上的显示图；
72.图5-是本发明实施例的导线的元数据模型定义图；
73.图6-是本发明实施例的导线的元数据模型在串口通信助手上的显示图；
74.图7-是本发明实施例的导线结构示意图；
75.图8-是本发明实施例的直接向量示意图；
76.图9-是本发明实施例的导线拐点示意图；
77.图10-是本发明实施例的基于svg虚拟电路的构建系统架构图。
78.附图标号说明：1、前端；2、服务端；3、后端。
具体实施方式
79.本发明提供的基于svg虚拟电路的构建方法，如图1所示，包括以下步骤：
80.步骤s1：基于svg对元器件的元数据模型进行定义，生成对应的元器件；
81.步骤s2：基于svg对元器件间的前端组件进行定义，生成对应的前端组件；
82.步骤s3：基于svg对元器件的后台模型进行定义，生成对应的后台模型；
83.步骤s4：根据用户选择的元器件和前端组件，进行自动连线，生成导线，完成虚拟电路的搭建；
84.步骤s5：接收到后台模型发送的启动命令后，启动并运行虚拟电路；
85.步骤s6：根据运行时后台模型返回的状态数据动态切换前端组件的状态，以控制元器件之间的交互，从而模拟实际电路的运行情况。
86.在上述步骤s1中，在对元器件的元数据模型进行定义时，包括：
87.对元器件的结构信息进行定义；
88.对元器件的可视化信息进行定义；
89.对元器件的功能部件信息进行定义；
90.对元器件的状态信息进行定义；
91.根据结构信息、可视化信息、功能部件信息以及状态信息生成元器件。
92.进一步地，元器件的结构信息定义是一个json格式，如图2所示。
93.其中，图2中的属性解释具体如下：
94.component_id：元器件类型，唯一，同时在根据前端需要封装对应的组件(svg)，用于调试过程中展示对应的状态；
95.kindof：元器件类别，用于区分元器件属于核或者外设，可选值“cpu”和“peripherals”；
96.img：元器件封面图，即在电路图搭建中展示的图片；
97.name：元器件名称，考虑到用户在电路图中针对某一个元器件可能拖拽了多个，所以预设了name属性，用于区分同类别元器件中的哪一个；
98.cname：元器件中文名称，即是在元器件列表中显示的名称；
99.aliasname：元器件在电路图上显示的别名，用于方便自定义名称；
100.version：元器件版本，某些元器件后续升级了，为了兼容旧实验中的老版本，所以
预设了version属性；
101.docurl：有的元器件需要关联实现原理文档或者使用文档，所以预设了docurl属性；
102.width：元器件的宽度，默认读取元器件封面图的宽度，即在电路图搭建中元器件展示的宽度；
103.height：元器件的高度，默认读取元器件封面图的高度，即在电路图搭建中元器件展示的高度；
104.index：元器件引脚列表，即元器件什么地方展示引脚，同时需要为每个引脚设置唯一名称和连线方向(起始、结束)；
105.x：该引脚相对元器件左上角的x坐标；
106.y：该引脚相对元器件左上角的y坐标；
107.name：该引脚名称，鼠标移上引脚会显示该名称；
108.direction：该引脚连线方向(起始、结束)。
109.进一步地，参考svg标准，用于对可视化信息进行定义的基本标签有《line》、《rect》、《circle》、《polyline》、《polygon》、《path》、《text》、《image》、《foreignobject》；其中，《line》表示直线，《rect》表示矩形，《circle》表示圆形，《polyline》表示折线，《polygon》表示多边形，《path》表示任意的曲线或折线，《text》表示插入的文本，《image》表示插入的图像。
110.可视化信息由元器件的结构信息通过json自动处理成上面的几种基本标签进行表示，表示结果如图3所示。
111.进一步地，元器件的功能部件包括引脚、显示面板等；进行定义时，例如通过串口通信助手的tx引脚需要连入stm32的pa10引脚上，同时stm32输出内容需要在显示面板(即串口通信助手组件)上显示，元器件的元数据模型通过串口通信助手进行显示，如图4所示。
112.进一步地，虚拟仿真实验运行的过程中，某一元器件会根据返回的状态数据在不同的状态之间转换，比如开关有“开”和“关”两种状态，因此需要对元器件的状态信息进行定义。
113.在上述步骤s1中，在进行自动连线，生成导线时，包括：
114.获取起始元器件的起点坐标和结束元器件的终点坐标；
115.并根据起始元器件的起点坐标和结束元器件的终点坐标得到直接向量；
116.根据直接向量得到正交线的起始方向和最终方向；
117.根据正交线的起始方向和正交线的最终方向确定拐点的数量，并得到拐点坐标；
118.根据起始元器件的起点坐标、结束元器件的终点坐标、正交线的起始方向和最终方向以及拐点坐标，进行自动连线生成导线；
119.其中，导线包括正交线、起点延伸线以及终点延伸线，正交线包括起点坐标、终点坐标、起始方向以及最终方向，具体如图7所示。
120.在生成导线时，还包括对导线的元数据模型进行定义，具体如图5所示。
121.其中，图5中的属性解释具体如下：
122.from：起始元器件信息，包括元器件索引和元器件引脚索引；
123.to：结束元器件信息，包括元器件索引和元器件引脚索引；
124.pointer：导线的几个拐点坐标；
125.concactarr：导线连接顺序。
126.上述导线的元数据模型通过串口通信助手进行显示，具体如图6所示。
127.进一步地，在得到正交线的起始方向和最终方向时，包括：
128.获取正交线的起点坐标和正交线的终点坐标；
129.根据正交线的起点坐标和起始元器件的起点坐标获得起点方向；
130.根据正交线的终点坐标和结束元器件的终点坐标获得终点方向；
131.在水平向量和竖直向量中挑选出与起点方向平行的向量，并判断与起点方向是否同向，若是，正交线的起始方向与挑选出来的向量同向，若否，正交线的起始方向与另一向量同向；
132.在水平向量和竖直向量中挑选出与终点方向平行的向量，并判断与终点方向是否同向，若是，正交线的终点方向与挑选出来的向量同向，若否，正交线的终点方向与另一向量同向；
133.其中，直接向量包括水平向量和竖直向量，如图8所示。
134.更进一步地，在确定拐点的数量和得到拐点坐标时，包括：
135.判断正交线的起始方向和正交线的最终方向是否同向，若是，则拐点数量为2，若否，则拐点数量为1，如图9所示；
136.当拐点数量为1时，拐点坐标由公式1得到，公式1具体如下：
137.g＝z+q
ꢀꢀꢀꢀ
(公式1)；
138.其中，g为拐点坐标，z为正交线起点坐标，q为正交线的起始方向向量；
139.当拐点数量为2时，拐点坐标由公式2和公式3得到，公式2和公式3具体如下：
140.g1＝z+q*0.5
ꢀꢀꢀꢀꢀ
(公式2)；
141.g2＝g1+f
ꢀꢀꢀꢀꢀ
(公式3)；
142.其中，g2为第二个拐点坐标，g1为第一个拐点坐标，f为水平向量和竖直向量中与正交线的起始方向垂直的向量。
143.在上述步骤s3中，在对后台模型进行定义时，包括：
144.对各所述元器件的名称进行定义；
145.对各所述元器件间的交互信息进行定义；
146.根据所述交互信息定义返回数据。
147.在上述步骤s5中，在完成虚拟电路的搭建后，包括：
148.后台模型接收到生成命令后，根据虚拟电路生成电路图和脚本文件；
149.将电路图和所述脚本文件保存到可视化文件中。
150.在上述步骤s5中，在运行虚拟电路时，包括：
151.通过脚本文件中电路配置参数来动态启动虚拟电路；
152.通过脚本文件中电路配置参数来动态切换前端组件的状态；
153.通过可视化文件展示前端组件和虚拟电路的运行状态。
154.其中，脚本文件为config.cfg文件，可视化文件为view.json文件。
155.进一步地，在动态切换前端组件的状态时，包括：
156.通过vuex的监听工具遍历所有的脚本文件，以获取多个状态数据；
157.通过vuex的监听工具监听状态数据的变化状态，当监听到状态数据发生变化时，通过vuex的监听工具重新获取状态数据，以更新状态数据；
158.根据更新的状态数据切换前端组件的状态，以得到更新后的前端组件的状态。
159.本发明提供的基于svg虚拟电路的构建系统，如图10所示，包括：
160.前端1，用于对元器件的元数据模型和元器件间的前端组件进行定义，生成对应的元器件和前端组件，并根据元器件和前端组件搭建虚拟电路，将虚拟电路的数据通过交互协议传送给服务端2，通过websocket链接接收到来自服务端2的启动命令、电路配置参数和状态数据，根据启动命令和电路配置参数启动并运行虚拟电路，根据状态数据动态切换前端组件的状态；
161.服务端2，接收到来自前端1的虚拟电路的数据后，通过交互协议传送到后端3，接收到来自后端3的启动命令以及返回的电路配置参数和状态数据，并通过websocket链接传送给前端1。
162.后端3，用于对元器件的后台模型进行定义，生成对应的后台模型，并通过后台模型发出启动命令以及返回电路配置参数和状态数据到服务端2。
163.相比现有技术，本发明的有益效果在于：
164.(1)本发明的虚拟电路基于svg进行构建，可以实现任意缩放而不破坏图形的清晰度和细节；
165.(2)svg是基于xml标准设计的，可以与其它技术建立联系，从而扩大了本发明的适用面；
166.(3)svg可以用矩形、椭圆、圆形、直线、折线、多边形以及路径等元素描述矢量图形，具有强大的作图能力，能提高本发明仿真的准确性；
167.(4)本发明基于svg可对元器件之间的动态交互进行准确仿真，从而有效降低与真实电路间运行效果的差异。
168.上述实施方式仅为本发明的优选实施方式，不能以此来限定本发明保护的范围，本领域的技术人员在本发明的基础上所做的任何非实质性的变化及替换均属于本发明所要求保护的范围。