当前位置:文档之家› LabVIEW程序界面的布局

LabVIEW程序界面的布局

俗话说:“人靠衣装,佛靠金装”,应用程序的界面是提供给使用者的第一印象,直接影响到应用程序的用户体验。

因此,有效、合理的界面能够为程序增色不少。

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.3LabVIEW控件在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所示。

相关主题