LabVIEW程序界面的布局.doc

1、俗话说：“人靠衣装，佛靠金装” ，应用程序的界面是提供给使用者的第一印象，直接影响到应用程序的用户体验。因此，有效、合理的界面能够为程序增色不少。LabVIEW提供了丰富的界面控件供开发者选择，有经验的程序员往往能够利用这些控件做出令人称赞的界面效果。在LabVIEW Development Guidelines （ 下载 ）和The LabVIEW Style book （ 介绍 ）书中都有专门的章节来论述 LabVIEW 程序界面设计规范和方法。本文主要从应用应用开发的角度描述一些通用的界面设计的方法。1.1 控件的分类和排列在 LabVIEW 中，控件通常被笼统地分为控制型控件（Cont

2、rol）和显示型控件（Indicator） 。而对某一个具体的应用而言，更需要把 Control 和 Indicator 进行细分，使得具有同样功能的控件排放在一起，甚至组成若干个 Group 组。LabVIEW 提供了一系列工具供程序员排列和分布控件的位置以及调整控件的大小，如图 1所示。图(a)是排列对齐 工具，其中的图标可以很清楚地知道各个按钮的作用。使用Ctrl+Shift+A 可以重复上一次的排列方式。图(b)是位置分布 工具，可以快速地分布各个控件之间的位置。图(c)是大小调整 工具，可以快速地调整多个不同控件的大小（注意：部分控件的大小是不允许被调整的） 。图(d)是组合和叠放次

3、序 工具，Group 表示把当前选择的控件组合起来形成一个整体；Ungroup 与 Group 相反，表示分散已经整合起来的各个控件；Lock 表示锁定当前选择的控件，此时控件将无法被编辑（包括移动控件的位置，调整控件的大小等） ；Unlock 是解锁指令；Move Forward、Move Backward、Move to Front 和 Move to Back 表示修改当前选择控件的排放次序。1 控件排列和分布工具图 2是某个测试界面的控件摆放实例，尽管这些控件都是 Indicator 控件，但是仍然根据显示功能和内容的不同将控件进行了分类。如果将其中的信息不经过任何分类而直接摆放在一起

4、，则没有很好的条理性和层次性。2 控件摆放实例在实际应用中，需要首先将 Control 和 Indicator 分开摆放；然后在 Control 和 Indicator内部对控件按照功能进行分类，不同的类别之间以显著的标志进行区分；最后要合理安排控件的位置和分布，确保整个界面匀称和整洁。1.2 颜色的使用颜色在程序中的应用有多种功能，除了能够确保界面的丰富和完善之外，还能够重点区分不同控件的功能，强调某些控件的作用和位置。LabVIEW 提供了传统的取色工具和着色工具，如图 3所示。取色工具是获取 LabVIEW 开发环境中某个点的颜色值（包括前景色和背景色） ，并将获取的颜色设置为当前的颜色

5、。着色工具是将当前的颜色值（包括前景色和背景色）设置到某个控件上。3取色工具和着色工具【小技巧】(1) 在使用着色工具 时，按住 Ctrl 键可以将工具暂时切换成取色工具，释放Ctrl 键后将返回着色工具。(2) 在使用着色工具 时，使用“空格”键可以快速地在前景色和背景色之间切换。在着色工具中，右上角的“T”表示透明色，可以使用鼠标单击该图标设定当前的颜色为透明色，如图 4所示。此外，LabVIEW 还提供了一系列预定义的标准颜色供程序员选择，其中 System 的第一个颜色是 Windows 的标准界面颜色。4 着色工具面板LabVIEW 允许设置一个 VI 窗口的透明色，在 VI Pro

6、perty 对话框中选择 Windows Appearance 页，单击 Customize按钮将弹出如图 5所示的对话框。勾选“Windows runs transparently”选项，并设置透明度（0%100%） 。5 Customize Windows Appearance 对话框1.3 LabVIEW 控件在 LabVIEW 中有3种不同外观的控件可供选择，分别是：Modern、System 和Classic。其中 Modern 控件是 NI 专门为 LabVIEW 设计的具有 3D 效果的控件，它能够确保在不同的操作系统下显示始终是一样的；而 System 是采用系统控件，它的外观

7、与操作系统有关，不同的操作系统下控件的显示外观有所不同。大多数的程序员似乎更愿意选择System 控件，理由是它可以让程序看起来不那么 LabVIEW 化。但是 LabVIEW 并不允许程序员任意自定义 System 控件的外观，这同时也限制了 System 控件的使用。LabVIEW 允许程序员在现有控件的基础上重新定义控件的外观（Type Def.和 Strict Type Def.技术） 。图 6是使用控件自定义方法重新设计的 Tank 控件，程序员可以修改控件的各种显示表达方式，但是却不能修改控件的功能（可以使用 XControl 技术） 。6 Tank 控件1.4 插入图片和装饰程序

8、中必要的图片不仅能够给用户直观的视觉感受，还能够描述程序的作用（当然，不能使用过量的图片） 。最简单的插入图片的方式是：将准备好的图片直接拖入到 VI 的前面板中或者使用 Ctrl +C/V 粘贴到前面板中。当然，还可以使用 Picture 控件将图片动态地载入到 Picture 控件中。此外，LabVIEW 还提供了一种自定义程序背景图的方式。新建一个 VI，在 VI 的垂直滚动条或水平滚动条上右击将弹出如图 7所示的快捷菜单。7 VI 前面板快捷菜单选择 Properties，将弹出如图 8所示的 Pane Properties 对话框。在左下方的 Background区域中内置了部分的图

9、片供程序员选择，也可以使用 Browse按钮导入外部自定义的图片。【注意】如果需要导入不规则的图片，可以将图片的部分背景色设置为透明并保存为 png 的格式。8 Pane Properties 对话框在 ControlsModernDecorations 和 ControlsSystem 中有一些装饰用控件，如图 9所示，程序员可以使用这些装饰控件为应用程序增色。图 10就是采用 System 控件中的System Recessed Frame 和 System Label 控件设计的控件组合。9 装饰控件选板10 装饰控件实例1.5 界面分隔和自定义窗口大小控件的显示效果与监视器是密切相关的

10、，因此在程序设计时需要考虑目标监视器的颜色、分辨率等因素，并明确运行该应用程序所需要的最低硬件要求。在很多的论坛中经常会看到问题：如何才能确保应用程序的界面在更高的分辨率上运行时不会变形？这实际上是一个界面设计问题，而思考如何解决它却是应该从程序设计时就开始，而不是等到程序设计完成后再探讨解决方案。LabVIEW 中并没有提供一种有效的方式或工具来解决这个问题，但是我个人认为这与 LabVIEW 无关，更应该把它归纳为通用的程序设计问题，解决它需要比较良好的界面设计、布局和分配作为前提。事实上，程序往往会规定一个最低的运行分辨率，在此分辨率以上的显示器上程序界面应该能够正确地被显示出来。而在

11、LabVIEW 中，控件往往在高分辨率的显示器上被拉大或者留有部分的空白，这使得整个界面完全扭曲了程序员最初的设计。为了能够更加清晰问题的本质和寻求解决问题的方案，有必要对 LabVIEW 的前面板界面进行确认和分析。如图 11所示，一个 VI 的窗口由几个部分组成 ：整个红色的区域称为一个窗口（Windows） ，而 蓝色的区域称为一个面板（Panel ） 。从图中可以看出，窗口中的标题栏、菜单栏和工具栏并不属于面板。11 VI 窗口区域定义LabVIEW 允许程序员将面板（Panel）划分为若干个独立的窗格（Pane） 。使用ControlsModernContainers 选板中的 Ho

12、rizontal Splitter Bar 和 Vertical Splitter Bar 可以将 VI 的面板进行任意的划分 ，如图 12所示。12 Containers 选板划分之后的 VI 前面板如图 13所示，可以看出图中的 Panel（蓝色区域）已经被划分为了5个窗格 Pane，每一个绿色区域都被称为一个 Pane。当 Panel 上只有一个 Pane 时，Panel 与 Pane 会重合。因此，窗口（Windows ）包含整个界面，而1个窗口只有1个面板（Panel） ，该面板能够被划分为若干个独立的窗格（Pane） 。每个 Pane 都包含其特有的属性和滚动条，而 Pane 之间

13、使用 Splitter 进行分隔。13 划分之后的 VI 窗口定义在 Splitter 上右击可以设置 Splitter 的相关属性，如图 14所示。Locked 属性可以设置Splitter 是否被锁定，被锁定的 Splitter 的位置将无法被移动。与控件类似，LabVIEW 提供了3种 Splitter 样式：Modern、System 和 Classic。程序员可以使用着色工具设置 Modern 和Classic Splitter 的颜色，使用手型工具调整 Splitter 的位置以及使用选择工具调整 Splitter 的大小。14 Splitter 右键快捷菜单现在再回头看本小节开头

14、提到的分辨率问题，从常识上判断，当程序从低分辨率界面向高分辨率界面转移时，可以有如下的解决方案：1、 界面上的控件变大；2、 界面控件的位置重新分布，以平衡空白位；3、 界面控件的相对位置不动，留出适当的空白位。在实际操作中，上述的3种方式似乎很难实现以满足界面大小变化带来的自适应问题。比如第3种方式看似简单，却同样存在着疑问：应该在哪里留出空白位，是现有控件的左边？右边？上边？还是下边？打开一些标准的 Windows 界面程序，不难看出，往往程序中结合使用了上面的3种方式。部分的控件位置和大小不变，留出适当的空白位给其它的控件，如Listbox、Graph、Tree 等。因此这类控件显示的信

15、息较多，并且外观单一，改变它们的大小对整个界面的布局不会产生影响。因此，在程序开始设计的初级阶段就有必要设计界面的大致控件布局和分布，以明确界面在不同分辨率下的调整方式。如果界面控件过多，则可以通过其它的方式进行规避（比如对话框等） ，确保界面的大小调整不会影响到控件布局的变化。【应用（ 下载 ） 】本节将以一个标准的 Windows 测试界面为例说明界面设计的方式和步骤。首先，需要根据程序的功能划分 VI 的 Panel，并决定将其分为多少个 Pane。图 15将界面分为了8个Pane，依次为：工具栏、帮助栏、测试信息栏、波形采集栏、状态栏（登陆人员栏、说明栏、测试内容栏和测试时间栏） 。1

16、5 划分 Panel其次，在状态栏的四个区域中分别加入一个 String 型 Indicator，并且勾选 Indicator 的右键快捷菜单选项：Fit Control to Pane，也就是说当 Pane 变化的时候 String 的大小也随之发生改变以确保 String 控件能够填充整个 Pane，如图 16所示。16 在状态栏中加入 Indicator 控件单击窗口的最大化按钮，可以看出整个状态栏的高度变大而最右侧子状态栏的宽度变大，如图 17所示。17 最大化之后的状态栏事实上，当窗口（或者 Pane）大小发生变化时往往不希望状态栏的高度发生改变，而只需要改变其中某一个 Pane 的

17、长度就可以了。单击“还原”按钮，使窗口回到图 16所示的状态。在底部的蓝色 Splitter 上右击，选择快捷菜单中的 Splitter Stick Bottom 选项，如图 18所示。该选项表示在 Splitter 变化时始终保持底部的相对位置不变。18 Splitter 右键快捷菜单再次最大化窗口，此时状态栏的高度将保持不变，而最右侧的子状态栏的宽度将变大，如图 19所示。19 最大化之后的状态栏如果希望在 VI 窗口改变时，修改第 2个子状态栏的宽度，而其它的子状态栏宽度保持不变，应该如何设置呢？单击“还原”按钮，使窗口回到图 16所示的状态。如图 20所示，单击图中所示的红色 Spli

18、tter，勾选 Splitter Sticks Right，此时再次改变窗口的大小将会改变第2个子状态栏的宽度。20 设置 Splitter 属性同理，设计工具栏如所示。图中使用的按钮都是 LabVIEW 自带的按钮样式，需要使用 Type Def.自定义控件加以替换。程序将工具栏分为2个部分：操作按钮部分和帮助部分。而对比图 19可以看出，将最上层的 Splitter 颜色设置为与 Pane 的底色一致，这样可以隐藏Splitter。图 21 设置 Splitter 属性LabVIEW 运行对每一个 Pane 设置不同的背景色，确保 Pane 的独立性。如图 22所示，在界面上放置不同的控件

19、以丰富界面显示效果，勾选 Tab 控件和 Graph 控件的右键快捷属性：Fit Control to Pane。因为 Graph 控件大小的改变对整个界面的布局没有影响，因此将界面的 Splitter 属性设置为当 Pane 变化时修改 Graph 的大小就可以了。22 VI 前面板如前所述，对任一个程序而言都有一个最低的分辨率要求，同时也存在着一个最小的界面要求，确保在最小的界面上能够将所有控件完整显示出来。调整整个 VI 前面板窗口的大小，确保所有的控件均能够完整显示。按下 Ctrl+I 键打开 VI Properties 属性面板，选择 Windows Size 页，如图 23所示。单

20、击“Set to Current Panel Size” ，单击 OK 按钮。23 Windows Size 属性页再次改变 VI 的前面板大小，可以看出整个界面的布局并不受 Panel 大小的影响，能够正常显示。因此，界面的分辨率自适应问题的解决并不是一蹴而就的，而是需要在程序界面设计阶段就加以考虑和布局的。 在程序可接受的最低分辨率的显示器上开发； 划分 Panel 的区域，并且明确各个区域的功能； 尽量至少选择一种大小可伸缩的控件（ListBox、 Tab、Multicolumn Listbox、Table、Tree、Chart、Graph 、Picture 、Sub Panel 等）

21、； 尽可能地使用 Splitter 划分不同的区域，对部分 Splitter 而言可以将其背景色设置为与 Pane 的背景色一致以隐藏 Splitter； 设置 Splitter 的属性，明确 Splitter 的变化方式； 设置 Pane 的属性（颜色、是否显示滚动条等） ； 设置 Panel 的最小显示大小； 结合 Type Def.和 Strict Type Def.控件，完善控件的摆放和显示效果； 将 Splitter 的 Lock 属性设置为 True。1.6 程序中字体的使用LabVIEW 会自动调用系统中已经安装的字体，因此不同的计算机上运行的 LabVIEW程序会因为安装的字体

22、库不同而不同。图 24列出了 LabVIEW 可以选择的部分字体样式（如颜色、加粗、斜体等） ，可以使用 + 和 + 快捷键增加和减小当前选择项的字体大小。24LabVIEW 中的字体如果字体前面加“”则表示将文字逆时针旋转90，图 25展示了这两种字体的显示差别。25 宋体和 宋体为了避免不同的操作系统给字体显示带来的影响，LabVIEW 提供了 Application Font、System Font 和 Dialog Font 三种预定义的字体。它们并不表示某一种确定的字体，对不同的操作系统所表示的含义不同，这样可以避免某一种字体缺失导致的应用程序界面无法正确显示的问题。此外，LabVI

23、EW 也提供了一种方式来人为地指定三种预定义的字体代表的具体含义。选择菜单栏的 ToolsOptions 菜单项，选择 Fonts 页，如图 26所示。单击“Font Style”按钮，可以显式地指定 Application Font、 System Font 和 Dialog Font 所代表的字体名称和大小。26 Options_Fonts 属性设置在默认下，LabVIEW 会自动设置界面的字体为 Application Font、System Font 和Dialog Font，因为这可以避免应用程序移植所导致的字体缺失。但是同时也会带来分辨率的问题，因为不同的系统所表示的字体样式和大小

24、都不相同，因此不同分辨率的监视器显示界面的字体时会发生“变形” 。为了解决这二者的矛盾以及带来的显示问题，可以将目标计算机上的 Application Font、System Font 和 Dialog Font 字体与开发计算机上的字体保持一致。1、 尽量使用通用的字体显示。如中文使用宋体，英文使用 Tahoma，字号使用13号。2、 确保目标计算机上的 LabVIEW Runtime 将 Application Font、System Font和 Dialog Font 字体与开发计算机上的字体所代表的含义保持一致。第1点需要在程序设计时注意，而第2点可以通过程序自动指定。如前所述，Lab

25、VIEW允许手动指定预定义字体的实际含义，这这些设置被保存在 LabVIEW 安装目录下的文件中。使用记事本打开 LabVIEW.ini文件，找到如下的三行，如图 27所示。也就是说 LabVIEW 通过这3行来决定 Application Font、System Font 和 Dialog Font 字体表示的具体含义。appFont=“Tahoma“ 13dialogFont=“Tahoma“ 13systemFont=“Tahoma“ 1327 LabVIEW.ini在生成任意一个 exe 时，LabVIEW 会在 exe 文件的相同目录中自动生成一个与 exe 同名的 ini 文件。只

26、需要在该 ini 文件中加入上述3行代码，则 LabVIEW Runtime 会自动调用相应的字体，而不会调用系统的默认字体。例如使用 LabVIEW 生成一个名为“计算机自动测试系统.exe”的独立应用程序，同时也会在相同目录下生成一个名为 “计算机自动测试系统.ini”的文件（如果没有生成，则运行一次“计算机自动测试系统 .exe”应用程序） 。打开该 ini 文件，找到“计算机自动测试系统 ”Section 文字，如图 28所示（如果没有则手动键入） 。在“计算机自动测试系统 ”Section 下方加入上述3行代码即可。28 计算机自动测试系统.ini如果在程序开发中确实需要使用某种特殊

27、的字体，而为了防止目标计算机上没有该字体，需要将所使用的字体同时发布到 Installer 文件中。在安装时直接将字体拷贝到目标计算机的文件夹中即可。1.7 小结在大多数情况下，程序员并不是简单地担任着 Coding 的工作，一个应用程序的设计需要各种各样的人通力协作完成。而对于测试测量工程师而言，需要尽量地完善开发的应用程序，使之无论从界面上、功能上还是底层代码上都充满着“美感” 。从这个角度说，程序员更像是一个艺术家，需要将感性和理性逻辑完美地结合起来。测试测量应用程序在运行时会涉及到对 UUT、测试仪器等各种硬件之间的相互通讯，因此其错误处理、逻辑控制等似乎显示更加充满变数而不可控。因此，这更加需要程序员关注细节，完善用户体验，确保应用程序的运行。如对 Numeric 值需要设置范围、显示精度、显示方式等等，避免用户的误操作。在程序的使用过程中，如果发生了错误而导致程序崩溃或假死，有些程序员会埋怨用户：为什么乱点呢？为什么不按要求有顺序地点击按钮呢？在数据采集过程中，为什么还要单击这个控件呢？这是不正确的，对于这种情况始终是设计者的错误，而与用户无关。设计者在程序设计和撰写的阶段就应该在程序中加入相应的防误操作机制，而不应该将错误归结为用户的不当使用。