基于云端的PCB版图在Web上的加速显示
2020-06-10高晔王美辰
高晔 王美辰
(西安科技大学 陕西省西安市 710054)
1 引言
在PCB设计仿真中,需要建模、材料参数及激励源的设置,也需要设置频率范围,最后根据设置的参数得到仿真结果,这种方法方便、快速、准确,而且由于参数可调,可对各种情况进行比较,降低了设计成本,提高了设计准确度。但是本地的设计仿真软件必须有高端的计算服务器,也需要具有专业知识的设计人员对软件进行操作,否则无法保证仿真对设计优化的及时性和有效性。而且目前使用的大部分设计仿真软件迁移性差,使用前必须要在本地安装、部署软件,并需要为仿真软件和高端的运算服务器支付昂贵的费用。而将仿真系统迁徙至云端后,设计人员就可以在接入互联网的环境下随时随地进行PCB的设计仿真,不再受到必须要在本地安装部署才可以进行仿真、优化设计的限制。迁徙至云端后只需将PCB设计数据通过互联网HTTP通讯协议上传至云端储存,并在Web上进行数据分析、数据处理,就可以得到仿真分析报告。
使用基于云端PCB设计软件,第一步也是最重要的一步就是将PCB设计数据上传至云端。设计数据包括PCB设计文件(版图设计文档和元器件模型库)及相关的PCB生产信息(叠层信息、导体的电阻率以及介质的电容率)。如何将包含大量设计信息及生产信息的PCB版图显示在Web浏览器中让人们更加迅速方便地进入的设计、仿真、优化环节呢?
传统的显示方式主要分为两种:一是将版图渲染成矢量图形。这种显示方式优点是可以无损的将整个版图中所有的信息显示出来,但是当显示大型电路板(元器件数量大于2000个)时,所耗费的渲染时间也在指数型增加,严重影响了设计人员的工作效率;二是将版图渲染成像素图形。这种显示方式优点是可以快速将版图渲染出来,但是缺点是当设计人员进行放大操作时,图形会失真,版图信息会丢失。
本文借鉴地图显示技术将瓦片技术引入云端设计仿真系统以达到保真加速显示的目的。
图1:地图瓦片切割示意图
图2:瓦片地图金字塔模型[8]
2 瓦片技术
2.1 瓦片地图
所谓瓦片地图,即将特定比例尺的数据源,事先按照坐标分块生成固定大小( 一般256像素 × 256像素) 的栅格图片,所有的图片将构成一幅完整的地图,这些栅格图片遵循一定的组织规则存储在文件系统中[4]。在Web中访问网络地图时,仅需根据该组织规则进行读取,拼接起来便可得到相应的地图视图[5]。不同比例尺的数据可生成不同级别的地图,因此瓦片地图具有一定的缩放功能,并且用户交互性良好。常用的 ArcGIS、谷歌等瓦片组织形式均是以 XYZ 索引的形式为基础[6]。
2.2 分辨率
图片经过缩放后,其分辨率会发生改变,设初始图片面积为 A0,像素点个数为 C0,当它被缩放至级别K 时图片分辨率为 :
式中,g0 =C0 /A0 为图片初始分辨率,单位:像素/ cm2。
电子地图由若干正方形的图片组成,这些正方形的图片即地图瓦片[4]。一般情况下,缩放级别为N1时,整个地图由2N1×2N1个瓦片组成,每个瓦片的大小为D0个像素,则此时地图上某一点的地图分辨率为:
式中,S0为地球表面积,单位:m2。
由式(1)(2)可知,地球分辨率与图片分辨率的不同点是,当电子地图被放大时,它的分辨率是增加的。
2.3 瓦片技术
使用网络地图时,我们看到的是一张铺满整个屏幕的大的地图图片。实际上,这张大的图片是多个尺寸相同的小图片按照既定规则无缝拼接而成的,这些小图片就是瓦片。在瓦片金字塔结构组织下,每张瓦片都可通过级别、行列号唯一标记。在平移地图、缩放地图时,浏览器只需要根据金字塔规则,计算出所需的瓦片,从瓦片服务器获取并拼接[7],就可以显示出所需要的瓦片,为地图的显示节约了大量的时间。如图1所示。
层次模型:瓦片金字塔模型是一种多分辨率层次模型,从瓦片金字塔的底层到顶层,分辨率越来越低,但表示的范围不变。如图2所示。
这样的多分辨率层次模型[9],从瓦片金字塔的底层到顶层,分辨率越来越低,但表示的地理范围不变。首先确定所要提供的缩放级别的数量N,把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层,即第0层,并对其进行分块,从地图图片的左上角开始,从左至右、从上到下进行切割,分割成相同大小(比如256x256像素)的正方形地图瓦片,形成第0层瓦片矩阵;在第0层地图图片的基础上,按每2x2像素合成为一个像素的方法生成第1层地图图片,并对其进行分块,分割成与下一层相同大小的正方形地图瓦片,形成第1层瓦片矩阵;采用同样的方法生成第2层瓦片矩阵;…;如此下去,直到第N一1层,构成整个瓦片金字塔。
对于地图使用者来说,他们关注的是由矢量数据渲染出来的地图图片,但一张包含世界地物信息的地图何其之大,若用户每次使用浏览地图时都要下载和显示这张地图明显是不现实的。瓦片技术就是将已经渲染好的不同缩放等级的地图图片按固定大小切片,并顺序命名(比如“2,0,0”,代表第二个图层x轴第1张,y轴第一张图片)。这样当用户查看地图时,只需要请求目前浏览部分的图片即可。
3 基于云端的PCB版图在Web上的加速显示
将瓦片技术引入PCB版图在Web上的加速显示,核心点即如何使用“瓦片数据”来进行“PCB版图的加速显示”,最主要的技术手段即为瓦片技术,整个“加速显示”的过程需要经过上传PCB数据、翻译(格式转换)、版图显示文件预处理、前端的显示几个阶段。原始PCB版图为用户需要进行设计仿真的版图(即为用户提供的数据),将版图的设计文件翻译为云端仿真系统可以读取的文件后在对版图进行预处理及显示。技术路线图如图3所示。
图3:技术路线图
版图显示文件的预处理主要有读取、处理、保存三个步骤,当用户上传版图文件后,我们得到了PCB版图的设计信息,将格式进行转换之后,会得到原始的PCB版图,这时的版图是由SVG绘制而成的。为了达到加速的显示的目的,我们将原始的版图进行切分,并设计根据金字塔原理设计了命名规范,以便于存储及拼接。
3.1 版图显示文件预处理
(1)读取从后端获得每一层SVG原版版图。如图4所示。
(2)计算出每一层、每个放大倍数下版图最小的外接矩形,根据外接矩形的大小,对版图进行补全。计算出每个缩放等级中每行、每列的瓦片个数。如图5所示。
(3)切片:将得到每个缩放等级的SVG版图转为PNG图片格式,使用Python PIL(Python Imaging Library) 库对图片进行切片处理。将切片后的文件存在对应的文件夹中。如图6所示。
(4)存储:将版图进行切片后会产生瓦片数据,完整的版图被切分成固定大小的瓦片,每一个瓦片都有自己的编号,当版图需要在前端进行显示时,根据浏览器窗口的大小请求对应位置的瓦片,并将png格式的瓦片渲染出来。文件目录组织结图和切片文件目录结构与编号如图7图8所示。
3.2 前端的显示
前端的显示是要根据用户的操作,进行放大、缩小、拖动和分层显示,当我们对原始版图进行切片后,从后端请求瓦片数据进行拼接,为了更进一步达到加速显示的目的。在前端应实现按需加载。当我们进行切片后直接进行拼接和显示,仍然有一部分时间浪费在没有出现在浏览器视窗中图片的加载上。按需加载时,每次只加载显示在浏览器视窗中的瓦片,而其他的瓦片,当滚动条拉动到某个即将进入浏览器窗口可视范围(比如瓦片距离窗口100px 时),再进行加载。
3.3 实验结果
通过development tool中的performance可得到页面性能的分析,将原始SVG格式的PCB版图直接在Web上进行显示的时间与切片后显示的时间进行对比,可以得出结论:
随着版图文件大小的增加和放大倍数的增加,使用瓦片数据渲染相较直接渲染SVG图像,渲染时间减少的百分比在增加,由此可以得出一个结论,面对PCB layout中所蕴含庞杂的数据,使用瓦片技术来进行存储和渲染,可以有效的节省时间,并且数据量和放大倍数越大这样的效果越明显。
分析PCB版图显示的运行流程可知影响瓦片渲染效率的因素很多。主要有以下四个方面:
(1)传输时间:云端与服务器之间的通信时间,主要决定的通信时间长短的因素是带宽;
(2)排队时间:当有大量用户同时访问服务器时,会出现拥堵现象,严重影响服务性能。
图4:原始版图文件
图5:版图最小外界矩形示意图
图6:瓦片文件
(3)渲染版图时间:后端服务器产生版图瓦片的时间,这一过程主要包括几个步骤,分别是服务器与数据库交互PCB版图设计数据,将得到的版图设计数据进行渲染得到原始SVG版图,将SVG版图生成版图瓦片。版图数据量,瓦片大小,图片质量等因素直接影响渲染PCB版图的时间。
表1:渲染时间比较
图7:文件目录组织结图
图8:切片文件目录结构与编号
(4)进行放大、缩小操作的响应时间:主要包括瓦片数据量大小、索引机制等。
从这几个方面可以看出可控的影响因素都与版图数据有关,因此通过版图数据性能进行调优(例如寻找最佳瓦片大小),同时对Web显示效率的优化(懒加载)都可以达到提升版图显示性能的目的。
4 结束语
PCB版图显示作为PCB设计优化中最为重要,最为直观的步骤,对整个PCB的设计、优化、仿真、分析及最终的生产,都起到了至关重要的作用。而现今大部分的版图都采用了直接渲染SVG的方式进行渲染,这种方式虽然交互性强,且不会因为用户的缩放操作而失真,但却因为用户每一次进行操作都需要重新渲染SVG而耗费了大量的时间。瓦片地图作为一种新兴的互联网电子地图服务方式,有其自身的优点,很多领域都开始采用瓦片技术对含有大量信息的矢量图形进行处理,但直接应用在PCB版图的显示渲染上也存在很多问题,鉴于此,本文介绍了一种适用于PCB版图的切片技术并将其应用于云端PCB信号完整性仿真系统中,不仅提升了PCB版图的显示速度,也将极大地提升了基于云端的EDA仿真软件的效率。