LabVIEW程序界面的布局LabVIEW程序设计札记 2009-07-21 16:26:02 阅读3017 评论0 字号：大中小 订阅 俗话说：“人靠衣装，佛靠金装”，应用程序的界面是提供给使用者的第一印象，直接影响到应用程序的用户体验。因此，有效、合理的界面能够为程序增色不少。LabVIEW提供了丰富的界面控件供开发者选择，有经验的程序员往往能够利用这些控件做出令人称赞的界面效果。 在《LabVIEW Development Guidelines》（下载）和《The LabVIEW Style book》（介绍）书中都有专门的章节来论述LabVIEW程序界面设计规范和方法。本文主要从应用应用开发的角度描述一些通用的界面设计的方法。 1.1 控件的分类和排列在LabVIEW中，控件通常被笼统地分为控制型控件（Control）和显示型控件（Indicator）。而对某一个具体的应用而言，更需要把Control和Indicator进行细分，使得具有同样功能的控件排放在一起，甚至组成若干个Group组。 LabVIEW提供了一系列工具供程序员排列和分布控件的位置以及调整控件的大小，如图 1所示。图(a)是排列对齐工具，其中的图标可以很清楚地知道各个按钮的作用。使用Ctrl+Shift+A可以重复上一次的排列方式。图(b)是位置分布工具，可以快速地分布各个控件之间的位置。图(c)是大小调整工具，可以快速地调整多个不同控件的大小（注意：部分控件的大小是不允许被调整的）。图(d)是组合和叠放次序工具，Group表示把当前选择的控件组合起来形成一个整体；Ungroup与Group相反，表示分散已经整合起来的各个控件；Lock表示锁定当前选择的控件，此时控件将无法被编辑（包括移动控件的位置，调整控件的大小等）；Unlock是解锁指令；Move Forward、Move Backward、Move to Front和Move to Back表示修改当前选择控件的排放次序。 图 1 控件排列和分布工具 图 2是某个测试界面的控件摆放实例，尽管这些控件都是Indicator控件，但是仍然根据显示功能和内容的不同将控件进行了分类。如果将其中的信息不经过任何分类而直接摆放在一起，则没有很好的条理性和层次性。 图 2 控件摆放实例 在实际应用中，需要首先将Control和Indicator分开摆放；然后在Control和Indicator内部对控件按照功能进行分类，不同的类别之间以显著的标志进行区分；最后要合理安排控件的位置和分布，确保整个界面匀称和整洁。 1.2 颜色的使用颜色在程序中的应用有多种功能，除了能够确保界面的丰富和完善之外，还能够重点区分不同控件的功能，强调某些控件的作用和位置。LabVIEW提供了传统的取色工具和着色工具，如图 3所示。取色工具是获取LabVIEW开发环境中某个点的颜色值（包括前景色和背景色），并将获取的颜色设置为当前的颜色。着色工具是将当前的颜色值（包括前景色和背景色）设置到某个控件上。
图 3 取色工具和着色工具 【小技巧】 (1) 在使用着色工具时，按住Ctrl键可以将工具暂时切换成取色工具，释放Ctrl键后将返回着色工具。 (2) 在使用着色工具时，使用“空格”键可以快速地在前景色和背景色之间切换。 在着色工具中，右上角的“T”表示透明色，可以使用鼠标单击该图标设定当前的颜色为透明色，如图 4所示。此外，LabVIEW还提供了一系列预定义的标准颜色供程序员选择，其中System的第一个颜色是Windows的标准界面颜色。 图 4 着色工具面板 LabVIEW允许设置一个VI窗口的透明色，在VI Property对话框中选择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是采用系统控件，它的外观与操作系统有关，不同的操作系统下控件的显示外观有所不同。大多数的程序员似乎更愿意选择System控件，理由是它可以让程序看起来不那么LabVIEW化。但是LabVIEW并不允许程序员任意自定义System控件的外观，这同时也限制了System控件的使用。 LabVIEW允许程序员在现有控件的基础上重新定义控件的外观（Type Def.和Strict Type Def.技术）。图 6是使用控件自定义方法重新设计的Tank控件，程序员可以修改控件的各种显示表达方式，但是却不能修改控件的功能（可以使用XControl技术）。 图 6 Tank控件 1.4 插入图片和装饰程序中必要的图片不仅能够给用户直观的视觉感受，还能够描述程序的作用（当然，不能使用过量的图片）。最简单的插入图片的方式是：将准备好的图片直接拖入到VI的前面板中或者使用Ctrl +C/V粘贴到前面板中。当然，还可以使用Picture控件将图片动态地载入到Picture控件中。 此外，LabVIEW还提供了一种自定义程序背景图的方式。新建一个VI，在VI的垂直滚动条或水平滚动条上右击将弹出如图 7所示的快捷菜单。
图 7 VI前面板快捷菜单 选择Properties，将弹出如图 8所示的Pane Properties对话框。在左下方的Background区域中内置了部分的图片供程序员选择，也可以使用Browse…按钮导入外部自定义的图片。 【注意】 如果需要导入不规则的图片，可以将图片的部分背景色设置为透明并保存为png的格式。 图 8 Pane Properties对话框 在Controls>>Modern>>Decorations和Controls>>System中有一些装饰用控件，如图 9所示，程序员可以使用这些装饰控件为应用程序增色。图 10就是采用System控件中的System Recessed Frame和System Label控件设计的控件组合。 图 9 装饰控件选板 图 10 装饰控件实例 1.5 界面分隔和自定义窗口大小控件的显示效果与监视器是密切相关的，因此在程序设计时需要考虑目标监视器的颜色、分辨率等因素，并明确运行该应用程序所需要的最低硬件要求。在很多的论坛中经常会看到问题：如何才能确保应用程序的界面在更高的分辨率上运行时不会变形？这实际上是一个界面设计问题，而思考如何解决它却是应该从程序设计时就开始，而不是等到程序设计完成后再探讨解决方案。LabVIEW中并没有提供一种有效的方式或工具来解决这个问题，但是我个人认为这与LabVIEW无关，更应该把它归纳为通用的程序设计问题，解决它需要比较良好的界面设计、布局和分配作为前提。 事实上，程序往往会规定一个最低的运行分辨率，在此分辨率以上的显示器上程序界面应该能够正确地被显示出来。而在LabVIEW中，控件往往在高分辨率的显示器上被拉大或者留有部分的空白，这使得整个界面完全扭曲了程序员最初的设计。 为了能够更加清晰问题的本质和寻求解决问题的方案，有必要对LabVIEW的前面板界面进行确认和分析。如图 11所示，一个VI的窗口由几个部分组成：整个红色的区域称为一个窗口（Windows），而蓝色的区域称为一个面板（Panel）。从图中可以看出，窗口中的标题栏、菜单栏和工具栏并不属于面板。 图 11 VI窗口区域定义 LabVIEW允许程序员将面板（Panel）划分为若干个独立的窗格（Pane）。使用Controls>>Modern>>Containers选板中的Horizontal 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之间使用Splitter进行分隔。 图 13 划分之后的VI窗口定义 在Splitter上右击可以设置Splitter的相关属性，如图 14所示。Locked属性可以设置Splitter是否被锁定，被锁定的Splitter的位置将无法被移动。与控件类似，LabVIEW提供了3种Splitter样式：Modern、System和Classic。程序员可以使用着色工具设置Modern和Classic Splitter的颜色，使用手型工具调整Splitter的位置以及使用选择工具调整Splitter的大小。
图 14 Splitter右键快捷菜单 现在再回头看本小节开头提到的分辨率问题，从常识上判断，当程序从低分辨率界面向高分辨率界面转移时，可以有如下的解决方案： 1、 界面上的控件变大； 2、 界面控件的位置重新分布，以平衡空白位； 3、 界面控件的相对位置不动，留出适当的空白位。 在实际操作中，上述的3种方式似乎很难实现以满足界面大小变化带来的自适应问题。比如第3种方式看似简单，却同样存在着疑问：应该在哪里留出空白位，是现有控件的左边？右边？上边？还是下边？打开一些标准的Windows界面程序，不难看出，往往程序中结合使用了上面的3种方式。部分的控件位置和大小不变，留出适当的空白位给其它的控件，如Listbox、Graph、Tree等。因此这类控件显示的信息较多，并且外观单一，改变它们的大小对整个界面的布局不会产生影响。 因此，在程序开始设计的初级阶段就有必要设计界面的大致控件布局和分布，以明确界面在不同分辨率下的调整方式。如果界面控件过多，则可以通过其它的方式进行规避（比如对话框等），确保界面的大小调整不会影响到控件布局的变化。 【应用（下载）】 本节将以一个标准的Windows测试界面为例说明界面设计的方式和步骤。首先，需要根据程序的功能划分VI的Panel，并决定将其分为多少个Pane。图 15将界面分为了8个Pane，依次为：工具栏、帮助栏、测试信息栏、波形采集栏、状态栏（登陆人员栏、说明栏、测试内容栏和测试时间栏）。 图 15 划分Panel 其次，在状态栏的四个区域中分别加入一个String型Indicator，并且勾选Indicator的右键快捷菜单选项：Fit Control to Pane，也就是说当Pane变化的时候String的大小也随之发生改变以确保String控件能够填充整个Pane，如图 16所示。 图 16 在状态栏中加入Indicator控件 单击窗口的最大化按钮，可以看出整个状态栏的高度变大而最右侧子状态栏的宽度变大，如图 17所示。 图 17 最大化之后的状态栏 事实上，当窗口（或者Pane）大小发生变化时往往不希望状态栏的高度发生改变，而只需要改变其中某一个Pane的长度就可以了。单击“还原”按钮，使窗口回到图 16所示的状态。在底部的蓝色Splitter上右击，选择快捷菜单中的Splitter Stick Bottom选项，如图 18所示。该选项表示在Splitter变化时始终保持底部的相对位置不变。 图 18 Splitter右键快捷菜单 再次最大化窗口，此时状态栏的高度将保持不变，而最右侧的子状态栏的宽度将变大，如图 19所示。
图 19 最大化之后的状态栏 如果希望在VI窗口改变时，修改第2个子状态栏的宽度，而其它的子状态栏宽度保持不变，应该如何设置呢？单击“还原”按钮，使窗口回到图 16所示的状态。如图 20所示，单击图中所示的红色Splitter，勾选Splitter Sticks Right，此时再次改变窗口的大小将会改变第2个子状态栏的宽度。 图 20 设置Splitter属性 同理，设计工具栏如所示。图中使用的按钮都是LabVIEW自带的按钮样式，需要使用Type Def.自定义控件加以替换。程序将工具栏分为2个部分：操作按钮部分和帮助部分。而对比图 19可以看出，将最上层的Splitter颜色设置为与Pane的底色一致，这样可以隐藏Splitter。 图 21 设置Splitter属性 LabVIEW运行对每一个Pane设置不同的背景色，确保Pane的独立性。如图 22所示，在界面上放置不同的控件以丰富界面显示效果，勾选Tab控件和Graph控件的右键快捷属性：Fit Control to Pane。因为Graph控件大小的改变对整个界面的布局没有影响，因此将界面的Splitter属性设置为当Pane变化时修改Graph的大小就可以了。 图 22 VI前面板 如前所述，对任一个程序而言都有一个最低的分辨率要求，同时也存在着一个最小的界面要求，确保在最小的界面上能够将所有控件完整显示出来。调整整个VI前面板窗口的大小，确保所有的控件均能够完整显示。按下Ctrl+I键打开VI Properties属性面板，选择Windows Size页，如图 23所示。单击“Set to Current Panel Size”，单击OK按钮。 图 23 Windows Size属性页 再次改变VI的前面板大小，可以看出整个界面的布局并不受Panel大小的影响，能够正常显示。因此，界面的分辨率自适应问题的解决并不是一蹴而就的，而是需要在程序界面设计阶段就加以考虑和布局的。 Ø 在程序可接受的最低分辨率的显示器上开发； Ø 划分Panel的区域，并且明确各个区域的功能； Ø 尽量至少选择一种大小可伸缩的控件（ListBox、Tab、Multicolumn Listbox、Table、Tree、Chart、Graph、Picture、Sub Panel等）； Ø 尽可能地使用Splitter划分不同的区域，对部分Splitter而言可以将其背景色设置为与Pane的背景色一致以隐藏Splitter； Ø 设置Splitter的属性，明确Splitter的变化方式； Ø 设置Pane的属性（颜色、是否显示滚动条等）； Ø 设置Panel的最小显示大小； Ø 结合Type Def.和Strict Type Def.控件，完善控件的摆放和显示效果； Ø 将Splitter的Lock属性设置为True。 1.6 程序中字体的使用LabVIEW会自动调用系统中已经安装的字体，因此不同的计算机上运行的LabVIEW程序会因为安装的字体库不同而不同。图 24列出了LabVIEW可以选择的部分字体样式（如颜色、加粗、斜体等），可以使用< Ctrl > + < = >和< Ctrl > + < - >快捷键增加和减小当前选择项的字体大小。
图 24 LabVIEW中的字体 如果字体前面加“@”则表示将文字逆时针旋转90°，图 25展示了这两种字体的显示差别。
图 25 宋体和@宋体 为了避免不同的操作系统给字体显示带来的影响，LabVIEW提供了Application Font、System Font和Dialog Font三种预定义的字体。它们并不表示某一种确定的字体，对不同的操作系统所表示的含义不同，这样可以避免某一种字体缺失导致的应用程序界面无法正确显示的问题。此外，LabVIEW也提供了一种方式来人为地指定三种预定义的字体代表的具体含义。选择菜单栏的Tools>>Options菜单项，选择Fonts页，如图 26所示。单击“Font Style…”按钮，可以显式地指定Application Font、System Font和Dialog Font所代表的字体名称和大小。 图 26 Options_Fonts属性设置 在默认下，LabVIEW会自动设置界面的字体为Application Font、System Font和Dialog Font，因为这可以避免应用程序移植所导致的字体缺失。但是同时也会带来分辨率的问题，因为不同的系统所表示的字体样式和大小都不相同，因此不同分辨率的监视器显示界面的字体时会发生“变形”。 为了解决这二者的矛盾以及带来的显示问题，可以将目标计算机上的Application Font、System Font和Dialog Font字体与开发计算机上的字体保持一致。 1、 尽量使用通用的字体显示。如中文使用宋体，英文使用Tahoma，字号使用13号。 2、 确保目标计算机上的LabVIEW Runtime将Application Font、System Font和Dialog Font字体与开发计算机上的字体所代表的含义保持一致。 第1点需要在程序设计时注意，而第2点可以通过程序自动指定。如前所述，LabVIEW允许手动指定预定义字体的实际含义，这这些设置被保存在LabVIEW安装目录下的<…\National Instruments\LabVIEW 8.X\LabVIEW.ini>文件中。使用记事本打开LabVIEW.ini文件，找到如下的三行，如图 27所示。也就是说LabVIEW通过这3行来决定Application Font、System Font和Dialog Font字体表示的具体含义。 appFont="Tahoma" 13 dialogFont="Tahoma" 13 systemFont="Tahoma" 13
图 27 LabVIEW.ini 在生成任意一个exe时，LabVIEW会在exe文件的相同目录中自动生成一个与exe同名的ini文件。只需要在该ini文件中加入上述3行代码，则LabVIEW Runtime会自动调用相应的字体，而不会调用系统的默认字体。例如使用LabVIEW生成一个名为“计算机自动测试系统.exe”的独立应用程序，同时也会在相同目录下生成一个名为“计算机自动测试系统.ini”的文件（如果没有生成，则运行一次“计算机自动测试系统.exe”应用程序）。打开该ini文件，找到“[计算机自动测试系统]”Section文字，如图 28所示（如果没有则手动键入）。在“[计算机自动测试系统]”Section下方加入上述3行代码即可。
图 28 计算机自动测试系统.ini 如果在程序开发中确实需要使用某种特殊的字体，而为了防止目标计算机上没有该字体，需要将所使用的字体同时发布到Installer文件中。在安装时直接将字体拷贝到目标计算机的<C:\Windows\Fonts>文件夹中即可。 1.7 小结在大多数情况下，程序员并不是简单地担任着Coding的工作，一个应用程序的设计需要各种各样的人通力协作完成。而对于测试测量工程师而言，需要尽量地完善开发的应用程序，使之无论从界面上、功能上还是底层代码上都充满着“美感”。从这个角度说，程序员更像是一个艺术家，需要将感性和理性逻辑完美地结合起来。 测试测量应用程序在运行时会涉及到对UUT、测试仪器等各种硬件之间的相互通讯，因此其错误处理、逻辑控制等似乎显示更加充满变数而不可控。因此，这更加需要程序员关注细节，完善用户体验，确保应用程序的运行。如对Numeric值需要设置范围、显示精度、显示方式等等，避免用户的误操作。在程序的使用过程中，如果发生了错误而导致程序崩溃或假死，有些程序员会埋怨用户：为什么乱点呢？为什么不按要求有顺序地点击按钮呢？在数据采集过程中，为什么还要单击这个控件呢？这是不正确的，对于这种情况始终是设计者的错误，而与用户无关。设计者在程序设计和撰写的阶段就应该在程序中加入相应的防误操作机制，而不应该将错误归结为用户的不当使用。 |
|
|
