2.3 元件介绍

 2.3.1 按钮

img60

  元件介绍:按钮控件属于基础的控件之一。该控件可在屏幕上绘制一个矩形的带文字的按钮,同时具备按下过程的动画效果。该控件可更改的样式属性有:

l 宽度高度:1)通过定义不同的宽度高度,以实现不同大小的按钮控件

                             2)将鼠标放在按钮边缘,拖动边缘可自由调整按钮大小   

      l坐标:  1)通过定义不同的XY值,来调整控件的位置

                      2)通过键盘↑↓← →键更精细地调整按钮控件的XY坐标位置。

l 文本:灵活修改按钮上的文本内容。

l 字体:修改按钮上文本内容使用的字体。如需设置字体,则必须先在字库选项卡中添加字库。如文本中存在中文则必须设置中文字体。纯英文则不是必须。

l 字体颜色:修改按钮上文本的字体颜色。

l 背景颜色:对按钮的未按下状态以及按下状态、边框的颜色值进行修改。

l 按钮半径: 边框宽度:可以自定义按钮边框的宽度。

l 按钮半径:修改按钮的圆角半径,使其的四角呈现出更大或更小的弧度。

l 透明度:更改按钮的透明度,使其呈现完全隐藏,若隐若现等效果。

l 切换状态:添加点击btn时切换控件显示的文本,可以添加多条,按添加顺序切换,切换到最后一条时重新切换回第一条循环。

图为更改了样式的按钮控件

 2.3.2 图片

img62

  元件介绍:图片控件属于基础的控件之一。该控件可以将一张图片绘制在屏幕上,该控件可更改的样式属性有;

l 图片路径: 要使用图片控件,需要先导入本地的图片素材。之后在图片控件的属性栏中设置图片路径时可以查看到已经导入的本地素材名,选中需要设置的图片。

l 宽度高度:1)通过定义不同的宽度高度,以实现不同大小的图片控件

                             2)将鼠标放在图片边缘,拖动边缘自由调整图片大小

       l坐标  :    1)通过定义不同的XY值,来调整控件的位置

                           2)通过键盘↑↓← →键来调整图片控件的XY坐标位置。

l 拉伸:如果设置图片路径后,勾选拉伸,则继续设置控件的宽度和高度时,原图将跟随控件大小进行拉伸收缩调整。

l 透明度:可以更改图片的透明度,使其呈现完全隐藏,若隐若现等效果。

img63

图为插入的图片控件

 

 

 2.3.3 标签

  元件介绍:标签控件为基础控件之一。该控件可以在屏幕上显示指定的文本内容,而其余地方保持透明,该控件可更改的样式属性有:

l 宽度高度:1)通过定义不同的宽度高度,以实现不同大小的标签控件

                             2)将鼠标放在标签边缘,拖动边缘自由调整标签大小

       l 坐标:  1)通过定义不同的XY值,来调整控件的位置

                          2)通过键盘↑↓← →键来调整标签控件的XY坐标位置。

l 文本:可以灵活修改标签上的文本内容。

l 字体:可以修改标签上文本内容使用的字体。如需设置字体,则必须先在字库选项卡中添加字库。如文本中存在中文则必须设置中文字体。纯英文则不是必须。

l 字体颜色:可以修改标签上文本的字体颜色。

l 透明度:可以更改标签的透明度,使其呈现完全隐藏,若隐若现等效果。

需要注意,当仿真时文字不在同一水平线上,请将对齐方式设置为居中对齐。

img64

图为更改了样式的标签控件

 2.3.4 文本区

  元件介绍:文本区为高级控件之一。该控件可以在屏幕上绘制一块显示文本的区域。与标签控件有所区别的是,文本区的背景并不透明,并且可以更改背景的颜色。该控件可以更改的样式属性有:

l 宽度高度:1)通过定义不同的宽度高度,以实现不同大小的文本区控件

                            2)将鼠标放在文本区边缘,拖动边缘自由调整文本区大小

       l 坐标:   1)通过定义不同的XY值,来调整控件的位置

                         2)通过键盘↑↓← →键来调整文本区控件的XY坐标位置。

l 文本:可以将文本设定为多段文本,设定不同颜色风格,灵活修改文本区上的文本内容。

l 字体:可以修改文本区上文本内容使用的字体。如需设置字体,则必须先在字库选项卡中添加字库。如文本中存在中文则必须设置中文字体。纯英文则不是必须。

l 字体颜色:可以修改文本区上文本的字体颜色。

l 背景颜色: 可以修改文本区除了文本的其他区域的背景颜色。

l 透明度:可以更改文本区的透明度,使其呈现完全隐藏,若隐若现等效果。

img65

图为文本区和标签控件

 2.3.5 输入框

img66

 元件介绍:输入框控件为高级控件之一,该控件也是主要以显示文本为主要功能的控件。该控件区别于文本区以及标签控件所在是,该控件具有占位符,提示输入内容,以及可以添加和删除文本的功能。同时,该控件和文本区一样,背景不透明,可以修改背景颜色。该控件可以更改的属性样式有:

l 宽度高度:1)通过定义不同的宽度高度,以实现不同大小的输入框控件

                             2)将鼠标放在输入框边缘,拖动边缘自由调整输入框大小

       l 坐标:1)通过定义不同的XY值,来调整控件的位置

                      2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 文本:可以灵活修改输入框上的文本内容。

l 占位符: 可以灵活修改提示输入的内容。

l 字体:可以修改输入框上文本内容使用的字体。如需设置字体,则必须先在字库选项卡中添加字库。如文本中存在中文则必须设置中文字体。英文则不是必须。

l 字体颜色:可以修改输入框上文本的字体颜色。

l 背景颜色: 可以修改输入框除了文本的其他区域的背景颜色。

l 透明度:可以更改输入框的透明度,使其呈现完全隐藏,若隐若现等效果。

img67

图为输入框控件效果

 2.3.6 图片按钮

img68

 元件介绍:图片按钮为高级控件之一,该控件可以理解为图片控件与按钮控件的结合,既可以显示单张图片又可以开启按下时状态显示另一张图片,实现类似按钮按下的动态切换效果,并且还支持点击后循环切换显示的图片,该控件可以更改的属性样式有:

l 未按下图片路径: 要使用图片按钮控件,需要先导入本地的图片素材。之后在图片控件的属性栏中设置未按下状态的图片路径。

l 宽度高度:1图片控件在设置图片路径后会自动将宽度高度设置为原图片的宽度高度。

                             2)将鼠标放在图片按钮边缘,拖动边缘自由调整图片按钮的大小

     l 坐标:1)通过定义不同的XY值,来调整控件的位置

                    2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 透明度:可以更改图片的透明度,使其呈现完全隐藏,若隐若现等效果。

l 切换状态:开启设置是否按下时,将切换图片状态,添加控件切换时显示的图片,可以添加多张,按添加顺序切换,切换到最后一条时重新切换回第一条循环。

IMG_256

图为按下状态的图片按钮

 2.3.7 键盘

img70

 元件介绍:键盘为高级控件之一。该控件可以和文本区控件以及输入框控件联动,实现更复杂的文本变化效果。该控件可以更改的属性样式有:

(注:在版本 v1.1.42 中,由于键盘控件重构,若您的工程文件使用的是旧版本的键盘控件,需替换成最新版本的键盘控件)

l 宽度高度:通过更改键盘的宽度高度属性,可以得到不同大小的键盘。同时在键盘更改大小的时候,每个键的大小也会跟随变动。

      l 坐标:1)通过定义不同的XY值,来调整控件的位置

                     2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 关联输入框:设定键盘输入关联的输入框控件。

l 普通键颜色:可以更改键盘默认样式中普通键的颜色。

l 控制键颜色:可以更改键盘默认样式中控制键的颜色。

l 面板颜色:可以更改出按键外的键盘面板的颜色。

l 键盘样式修改: 当选择默认样式时生成的键盘为GT-HMI默认的26键键盘。用户可以自己设计一个特别的键盘样式。实现更丰富的效果。

l 透明度:可以更改键盘的透明度,使其呈现完全隐藏,若隐若现等效果。

l 中文拼音输入法:在仿真中将键盘切换至中文输入法,在输入框中显示中文(中文键盘默认是关闭状态)。
      l 隐藏:可以在画布中隐藏/显示元件。

img71

图为设置颜色的键盘效果

图为中文拼音输入法效果

 2.3.8 开关

img72

 控件介绍:开关控件为高级控件之一。该控件类似按钮,存在活跃和不活跃两种状态。并在点击该控件时切换状态。同时支持灵活的调整大小和不同的样式属性。该控件可以更改的样式属性有:

l 宽度高度:1)通过更改开关的宽度高度属性,可以得到不同大小的开关控件。

                             2)将鼠标放在开关控件边缘,拖动边缘自由调整开关按钮的大小

 

      l 坐标:1)通过定义不同的XY值,来调整控件的位置

                     2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 活跃状态: 通过设定活跃状态,可以设定程序初始化时的开关状态为活跃或是不活跃。

l 活跃颜色:在活跃状态为活跃时的开关背景颜色。

l 不活跃颜色:在活跃状态为不活跃时的开关背景颜色。

l 开关点颜色:开关控件上开关点的颜色。

l 透明度:可以更改开关的透明度,使其呈现完全隐藏,若隐若现等效果。

img73 img74

图为两种状态下的开关控件

 2.3.9 幻灯片

img75

 控件介绍:幻灯片控件为高级控件之一,可以实现按特定间隔时间播放图片,或者搭配事件控制切换上一张或下一张图片显示的效果。该控件可以更改的样式属性有:

l 宽度高度:1)设置添加图片项目之后会自动将宽度高度设置为原图片的宽度高度。

                            2)将鼠标放在幻灯片控件边缘,拖动边缘自由调整幻灯片的大小

 

      l 坐标:1)通过定义不同的XY值,来调整控件的位置

                     2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 文件类型:设置播放文件的类型,当前仅支持图片。

l 播放模式:设置播放时的模式,当前支持单次播放,循环播放,来回播放三种模式。

l 播放起始序号:设置播放时从那个序号开始(序号从0开始)。

l 是否自动播放:设置是否开启自动播放。

l 播放间隔时间:使能自动播放后,设置播放时切换下一张时间隔的时间,单位为ms。

l 播放初始状态:使能自动播放后,设置播放的初始状态为播放或者不播放。

l 透明度:可以更改开关的透明度,使其呈现完全隐藏,若隐若现等效果。

 

img76

图为设定循环播放时三张图片循环切换显示

 2.3.10 计数器

img77

 控件介绍:计数器控件为高级控件之一。可以配合按钮增加或减少数值等实现计数的功能并显示当前计数值,该控件可以更改的样式属性有:

l 宽度高度:1)通过定义不同的宽度高度,可以实现不同大小的显示区域。

                            2)将鼠标放在计数器控件边缘,拖动边缘自由调整计数器的大小

 

      l 坐标:1)通过定义不同的XY值,来调整控件的位置

                     2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 文本:可以灵活修改当前计数值。

l 字体:可以修改当前计数值内容使用的字体。

l 字体颜色:可以修改当前使用的字体颜色。

l 透明度:可以更改计数值显示的透明度,使其呈现完全隐藏,若隐若现等效果

l 最小值:设置计数器的最小值。

l 最大值:设置计数器的最大值。

l 递增/递减步数:设置每次递增或者递减时的步进值。

l 整数部分显示宽度:设置计数值显示时整数的宽度,开启格式化补齐数值后,计数值不够时使用0补齐显示,如001。

l 小数部分显示宽度:设置计数值显示时小数的宽度。

l 格式化补齐数值:是否开启格式化补齐,计数值不够时使用0补齐。

img78

图为整数3位补齐小数1位点击add按钮递增200的效果

 

 2.3.11 时钟

img79

 控件介绍:时钟控件为高级控件之一。可以用于显示时间或者作为定时器使用。该控件可以更改的样式属性有:

l 宽度高度:1)通过定义不同的宽度高度,可以实现不同大小的显示区域。

                            2)将鼠标放在时钟控件边缘,拖动边缘自由调整时钟控件的大小

 

      l 坐标:1)通过定义不同的XY值,来调整控件的位置

                     2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 字体:可以修改当前时间内容使用的字体。

l 字体颜色:可以修改当前使用的字体颜色。

l 透明度:可以更改时钟显示的透明度。

l 设置当前时间:设置时钟当前显示的时分秒数值。

l 设置定时时间:是否开启定时,开启后设定定时的时间值。

l 工作模式:选择“显示时间”模式时计数为增,使用“秒表倒计时”模式时计数为减。

l 显示格式:设置时间的显示格式,默认为hh:mm:ss,其中hh表示时,mm表示分

ss表示秒。

l 设置12小时制:设置时间显示是否使用12小时制,开启后设置是否显示AM/PM。

l 开启时钟:设置时钟初始状态是否为启动。

img80

图为设定显示格式为hh时mm分ss秒的时钟效果

                   

 2.3.12 一维码

            

 

 一维码控件介绍:一维码控件为高级控件之一,可以用于对物品的标识的作用使用。该控件可以更改的样式属性有:

 

    l 宽度高度:一维码不支持高度与宽度的调整。

    l 等比锁定:可固定当前一维码的宽高。

    l 透明度:一维码显示的透明度。

    l 格式选择:目前可使用的格式有:EAN13/EAN8/UPC/UPCE/ITF/CODEBAR/CODE128A/CODE128B/CODE128C/CODE39

    l 文本:可输入自己所需的文本,生成对应格式的一维码。

    l 高度:设置条形码高度;

 

 2.3.13分组

         

 

 二维码控件介绍:二维码控件为高级控件之一。可以用于用于支付、票务、身份验证、商品溯源、广告推广和信息分享等各个领域。该控件可以更改的样式属性有:

    l 宽度高度:二维码不支持高度与宽度的调整。

    l 等比锁定:可固定当前二维码的宽高。

    l 透明度:二维码显示的透明度。

    l 前景:可以修改生成二维码的背景颜色。

    l 背景:可以修改生成二维码的背景颜色。

    l 版本号:二维码版本号是指二维码的规格版本,表示二维码的大小和容量。每个版本号都有特定的模块数和数据容量,版本号越高,二维码的容量和大小越大。当前支持版本3到版本17共15个版本。用户可根据应用需求选择合适的版本号。

    l 文本:可输入自己所需的文本,生成对应格式的二维码。

 

 2.3.14滑窗

 

滑窗控件介绍:滑窗控件为高级控件之一。滑窗可以实现素材界面横向滑动功能。用户可以通过左右滑动屏幕,切换不同的选项或查看不同的内容。这种功能适用于需要展示横向排列的菜单或选项的场景等。该控件可以更改的样式属性有:

    l 宽度高度:滑窗支持高度调整,宽度为屏幕宽度暂不支持调整。

    l 透明度:滑窗控件透明度的调节,需要打开背景玻璃效果,更改滑窗控件viewpager显示的透明度。

    l 坐标:1)通过定义不同的Y值,来调整控件的位置。(X坐标不支持更改)

                   2)通过键盘↑↓键来调整滑窗控件的Y坐标位置。(X坐标不支持更改)

    l 添加页:添加多个滑动页面,在每个滑动页面均可设计排版,用户可以通过左右滑动屏幕,切换不同的页显示不同的内容。

    l 减少页:删除添加的页面。

    l 背景玻璃效果:打开背景玻璃效果按钮,滑窗背景会呈现玻璃效果。

 

 

2.3.15分组

img81

 控件介绍:分组控件为图表控件之一。该控件为一种逻辑抽象的控件。并不会在画布上直接显示。该控件存在的功能是为单选框、按钮和复选框分组。使单选框、按钮和复选框可以实现单选和复选的效果。

该控件无需更改样式属性。注意若是更改了分组控件的大小并将其覆盖在其他控件之上,则可能导致其他控件无法被点击。

5img82

图为分组控件并容纳单选框控件

 2.3.16单选框

img83

 控件介绍:单选框控件为图表控件之一。该控件分为选中状态和未选中状态。而在同一个分组下的单选框控件,当有一个单选框被选中时,其他单选框会同时被设置为未选中状态。

而该控件可以更改的样式属性有:

l 宽度高度:1)通过更改开关的宽度高度属性,可以得到不同大小的单选框控件。

                            2)将鼠标放在单选框控件边缘,拖动边缘自由调整单选框控件的大小

 

      l 坐标:1)通过定义不同的XY值,来调整控件的位置

                     2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 文本:可以灵活修改单选框上的文本内容。

l 字体:可以修改单选框上文本内容使用的字体。如需设置字体,则必须先在字库选项卡中添加字库。如文本中存在中文则必须设置中文字体。英文则不是必须。

l 字体颜色:可以修改单选框上文本的字体颜色。

l 透明度:可以更改单选框的透明度,使其呈现完全隐藏,若隐若现等效果。

l 选中状态:更改该属性可以改变程序运行时单选框的选中状态。

l 所属分组:在该属性中可以看到当前屏幕下所存在的分组,并选取。

img84

图为单选框控件

 2.3.17 复选框

img85

 控件介绍:复选框控件为图表控件之一。该控件和单选框控件类似,分为选中状态和未选中状态。区别于单选框控件的是,即使处于同一分组下,复选框控件可以有多个同时处于选中状态。该控件可以更改的样式属性有:

l 宽度高度:1)通过更改开关的宽度高度属性,可以得到不同大小的复选框控件。

                            2)将鼠标放在复选框控件边缘,拖动边缘自由调整复选框控件的大小

 

      l 坐标:1)通过定义不同的XY值,来调整控件的位置

                     2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 文本:可以灵活修改复选框上的文本内容。

l 字体:可以修改复选框上文本内容使用的字体。如需设置字体,则必须先在字库选项卡中添加字库。如文本中存在中文则必须设置中文字体。英文则不是必须。

l 字体颜色:可以修改复选框上文本的字体颜色。

l 透明度:可以更改复选框的透明度,使其呈现完全隐藏,若隐若现等效果。

l 选中状态:更改该属性可以改变程序运行时复选框的选中状态。

l 所属分组:在该属性中可以看到当前屏幕下所存在的分组,并选取。

img86

图为同一分组下的单选框和复选框

 2.3.18 滑动条

img87

 控件介绍:滑动条控件为图表控件之一。该控件类似手机调整亮度的功能部件。可以灵活调整刻度点的位置并让进度条填充到刻度点处。同时也支持灵活更改滑动条的样式。该控件可以更改的属性有:

l 宽度高度:1)通过更改滑动条的宽度高度属性,可以得到不同大小的滑动条控件。

                            2)将鼠标放在滑动条控件边缘,拖动边缘自由调整滑动条控件的大小

 

      l 坐标:1)通过定义不同的XY值,来调整控件的位置

                     2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 透明度:可以更改滑动条的透明度,使其呈现完全隐藏,若隐若现等效果。

l 起始值:当刻度点在滑动条起始位置时表示的数字。

l 结束值:当刻度点在滑动条最末端时表示的数字。

l 位置:设置该值可以修改程序运行时,刻度点的起始位置。(如起始值为100,结束值为200,则中间位置为150)

l 活跃颜色:填充区域以及纯色刻度点的颜色。

l 不活跃颜色:非填充区域的颜色。

l 滑动方向:可以更改滑动条滑动的方向。

l 刻度点:该属性可以更改刻度点的样式,隐藏,纯色以及图片。可以设置不同的效果。

l 长条大小:该属性可以任意更改滑动条长度。

l 刻度大小:该属性可以任意更改刻度原点的大小。

l隐藏可以在画布中隐藏/显示元件

图为滑动条控件

 2.3.19 进度条

img89

 控件介绍:进度条控件为图表控件之一。该控件类似滑动条,但是在没有添加其他事件的时候无法通过点击来更改进度条的值。进度条同样支持灵活调整样式。该控件可以更改的属性有:

l 宽度高度:1)通过更改进度条的宽度高度属性,可以得到不同大小的进度条控件。

                            2)将鼠标放在进度条控件边缘,拖动边缘自由调整进度条控件的大小

 

      l 坐标:1)通过定义不同的XY值,来调整控件的位置

                     2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 透明度:可以更改进度条的透明度,使其呈现完全隐藏,若隐若现等效果。

l 起始值:当填充区域在进度条起始位置时表示的数字。

l 结束值:当填充区域在进度条末端时表示的数字。

l 位置:设置该值可以修改程序运行时,填充到起始位置。(如起始值为100,结束值为200,则中间位置为150)

l 活跃颜色:填充区域以及纯色刻度点的颜色。

l 不活跃颜色:非填充区域的颜色。

l 滑动方向:可以更改进度条填充的方向。

img90

图为进度条控件的效果

 2.3.20 列表

img91

 控件介绍:列表控件为图表控件之一。该控件可以列出多个item,来显示不同的文本内容。

(注:在新版本v1.1.42中,由于列表控件重构,若您的工程文件使用的是旧版本的列表控件,需替换成最新版本的列表控件)

当有多个item时,可以通过滚动显示不同的item并选中其中指定的文本内容。同时,该控件也支持灵活调整样式。该控件可以更改的属性有:

l 宽度高度:1)通过更改列表的宽度高度属性,可以得到不同大小的列表控件。

                            2)将鼠标放在列表控件边缘,拖动边缘自由调整进列表控件的大小

 

      l 坐标:1)通过定义不同的XY值,来调整控件的位置

                     2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 字体颜色:可以修改列表上显示的文本的字体颜色。

l 字体:可以修改复选框上文本内容使用的字体。如需设置字体,则必须先在字库选项卡中添加字库。如文本中存在中文则必须设置中文字体。英文则不是必须。

      l 每栏高度设置:可以根据列表的文字数量要求更改栏目的高度,以确保列表栏在文字过 多时自行换行显示全部文字的功能。

      l 隐藏:可以在画布中隐藏/显示元件。

   l 边框颜色:可以任意修改边框的显示颜色。

  l 边框宽度:可以任意修改边框宽度。

  l 分割线:可以将列表自动分割成多个 item,并显示分割线(分割线数量由所添加项的数量决定)

  l 选中高亮模式:可以在仿真后点击任意项,显示选中高亮的效果。

  l 模式:1)默认模式——无图标显示。

                   2)图标在左模式——可以在添加项属性中添加图标,图标显示在列表左侧。

                   3)图标在右模式——可以在添加项属性中添加图标,图标显示在列表右侧。

图为列表控件

 2.3.21 滚轮

控件介绍:列表控之一。滚轮控件可以增加多个item,界面显示元素可设置。
当有多个item时,可以滑动滚轮选择目标项。同时目标项显示为上中下栏的中间栏,该控件也支持灵活调整样式。该控件可以更改的属性有:

 
l 宽度高度:1)通过更改列表的宽度高度属性,可以得到不同大小的滚轮控件。
                      2)将鼠标放在滚轮控件边缘,拖动边缘自由调整进滚轮控件的大小

 
l 坐标:1)通过定义不同的XY值,来调整控件的位置
                2)通过键盘↑↓← →键来调整滚轮控件的XY坐标位置。


l  字体颜色:可以修改滚轮上显示的文本的字体颜色。

 
l 字体:可以修改滚轮上文本内容使用的字体。如需设置字体,则必须先在字库选项卡中添加字库。如文本中存在中文则必须设置中文字体。英文则不是必须。

 
l 透明度:可以更改滚轮的透明度,使其呈现完全隐藏,若隐若现等效果。

 
l 可以更改显示元素个数,默认为三行(可设置为任意单数)。

 
l 滚动模式可设置为默认或循环模式

 

      

 

 2.3.22 矩形

控件介绍:矩形控件为图形控件之一。该控件可以在屏幕上位置一个矩形区域。并支持填充与否,圆角弧度,边框粗细,边框颜色等样式修改。该控件可以更改的属性有:

l 宽度高度:1)通过更改矩形的宽度高度属性,可以得到不同大小的矩形控件。

                            2)将鼠标放在矩形控件边缘,拖动边缘自由调整矩形控件的大小

 

      l 坐标:1)通过定义不同的XY值,来调整控件的位置

                     2)通过键盘↑↓← →键来调整输入框控件的XY坐标位置。

l 透明度:可以更改进度条的透明度,使其呈现完全隐藏,若隐若现等效果。

l 是否填充:该属性决定矩形控件是否有填充的颜色。

l 圆角半径:该属性决定矩形四角的圆角弧度,(宽高相等的矩形控件圆角半径设置为100,可以得到一个圆形)。

l 边框宽度:当矩形设置为不填充时,该值决定了矩形边框的宽度 。

l 颜色:当矩形选择填充时,为背景原色。当不填充时该属性为边框颜色。

图为不同样式的矩形控件

 2.3.23 屏幕

 

 控件介绍:屏幕控件为屏幕控件之一。该控件是所有其他控件的基础。一个GT-HMI项目中至少需要存在一个屏幕控件。当只剩下最后一个屏幕控件时,该屏幕控件无法被删除。同时,程序运行时,会从图层最上层的一个屏幕控件开始运行。如果需要切换屏幕显示,则需要通过事件来加载屏幕。

 

屏幕支持添加事件动画效果,以帮助提升用户体验和界面的视觉吸引力,提高应用的质量和用户满意度。

 

                                          

1. 添加事件动画效果可设置触发方式和触发事件,触发方式用于实现屏幕间平滑过渡的动态效果,专为触摸屏优化用户界面切换体验而定制。可分为 4 种方式,如图所示:

 

2.触发事件可设置返回所设置页栈,允许用户定义页面回退的动画效果,通过设定返回步数来控制回退的屏幕层级。例如,设置步数为 1 时,将触发返回到前一屏幕的动画;若设置步数为 2,则可实现返回到前两个屏幕的动画效果。

 

    

2.3.24 对话框
控件介绍:对话框为高级控件之一。可以用于按钮弹出的对话框使用。该控件可以更改的样式属性有:

l 宽度高度:通过定义不同的宽度高度,可以实现不同大小的显示区域。

                     2)将鼠标放在时钟控件边缘,拖动边缘自由调整时钟控件的大小

l 坐标:1)通过定义不同的 XY 值,来调整控件的位置

              2)通过键盘↑↓← →键来调整时钟控件的 XY 坐标位置。

l 透明度:可以更改时钟显示的透明度。

l 隐藏:可以在画布中隐藏/显示元件。

l 背景:可以修改生成二维码的背景颜色。

l 关闭按钮:在对话框右上角显示/隐藏关闭按钮。

l 边框颜色:可以任意修改对话框的边框颜色。

l 边框宽度:可以任意修改对话框的边框大小。

l 边框圆角:可以任意修改对话框的圆角大小。

图为对话框效果

 

2.3.25 GIF

 

GIF 控件介绍:GIF 控件为高级控件之一。GIF 格式支持动画功能,可以将多个图像帧组合在一起,形成连续播放的动画效果。该控件可以更改的样式属性有:

透明度:GIF 控件可对透明度的调节,及隐藏模式设置

坐标:1)通过定义不同的 Y 值,来调整控件的位置。(X 坐标不支持更改)

          2)通过键盘↑↓键来调整滑窗控件的 Y 坐标位置。(X 坐标不支持更改),

注:因 GIF 动画图片的特殊性,对 GIF 的大小做有一定的限制,在宽和高度设置栏不可设置或更改

 

2.3.26 状态栏

控件介绍:状态栏为公共控件。该控件是所有屏幕共有部分。状态栏是位于屏幕顶部显示的区域,用于展示设备的各种状态信息和快捷操作选项,该控件可以更改的样式属性有:
l 高度:1)通过定义不同的高度,可以实现不同高度的显示区域。
              2)将鼠标放在状态栏控件边缘,拖动边缘自由调整状态栏的高度。
             注:宽度自动生成,坐标XY 值默认(0,0)

l 字体颜色:可以修改状态栏上显示的文本的字体颜色。
l 字体:可以修改状态栏上文本内容使用的字体。如需设置字体,则必须先在字库选项卡中添加字库。如文本中存在中文则必须设置中文字体。英文则不是必须。
l 背景:可以修改状态的背景颜色。
l 透明度:可以更改状态栏透明度,使其呈现完全隐藏,若隐若现等效果。
l 项内元素宽度比例:状态栏分为三个显示区域:左区域,标题,右区域,可以通过修改左区域,标题,右区域的任意数值,调整状态栏内项元素的宽度显示比例。
l 左区域元素:1)通过添加/删除任意数量按钮,可以在状态栏左区域显示/删除图标。
                         2)通过添加/删除任意数量文本,可以在状态栏左区域显示删除文本。
                         3)通过任意修改文本元素宽度,可以实现不同宽度的显示区域。
                        4)通过箭头按键,可以更改文本或图标在状态栏左区域的左右排序。

l 文本:可以修改文本中的显示内容。
l 右区域元素:1)通过添加/删除任意数量按钮,可以在状态栏右区域显示/删除图标。
                         2)通过添加/删除任意数量文本,可以在状态栏右区域显示删除文本。
                         3)通过任意修改文本元素宽度,可以实现不同宽度的显示区域。
                         4)通过箭头按键,可以更改文本或图标在状态栏右区域的左右排序。

l 是否显示状态栏背景:可以隐藏/显示状态栏背景显示。
l 对应屏幕内是否显示状态栏:可以选中需要显示状态栏的屏幕进行显示。

图为状态栏效果

2.3.26  布局

 

 

l 宽度高度:通过定义不同的宽度高度,可以实现不同大小的显示区域。

                     1)将鼠标放在布局控件边缘,拖动边缘自由调整布局控件的大小

l 坐标:1)通过定义不同的XY值,来调整控件的位置

               2)通过键盘↑↓← →键来调整布局控件的XY坐标位置。

l 所属布局:可以添加所属的子控件。

l 透明度:可以更改布局控件在画布中显示的透明度。

l 隐藏:可以在画布中隐藏/显示元件。

l 主轴方向:可以修改水平主轴和垂直交叉轴的排列方向。

1)水平向右(默认值):主轴为水平方向,起点在左端。

2)水平向左:主轴为水平方向,起点在右端。

3)垂直向下:主轴为垂直方向,起点在上沿。

4)垂直向上:主轴为垂直方向,起点在下沿。

注意:布局是一个虚拟控件,将其他控件添加进布局控件以实现弹性布局,

加入布局的控件位置坐标将会失效

l 主轴对齐方式:可以修改主轴从左到右的对齐方式。

1)起始对齐(默认值):左对齐。

2)结束对齐:右对齐

3)居中对齐:居中。

4)等边距对齐:两端对齐,控件之间的间隔都相等。

5)两端对齐:控件分别靠左、靠右对齐。

6)等间隔对齐:每个控件两侧的间隔相等。

l 交叉轴对齐方式:可以修改交叉轴从上到下的对齐方式。

1)顶部对齐(默认值):交叉轴的起点对齐。

2)居中对齐:交叉轴的中点对齐。

3)底部对齐:交叉轴的终点对齐。

l 左右边距:可以修改控件之间的间距大小。

l 控件实际范围:可以显示/隐藏布局控件的虚拟边框。

l 子控件实际范围:可以显示/隐藏子控件的虚拟边框。

l 边框颜色:可以任意修改布局控件的边框颜色。

l 子边框颜色:可以任意修改布局控件的边框颜色。

图为布局控件与子控件的效果

 

2.3.27  线图

控件介绍:对话框为图表控件之一。可以用于生成曲线图、柱状图、折线图、散点图。该控件可以更改的样式属性有:

  1. 宽度高度:通过定义不同的宽度高度,可以实现不同大小的显示区域。

1)将鼠标放在线图控件边缘,拖动边缘自由调整线图的大小

  1. 坐标:1)通过定义不同的XY值,来调整控件的位置
  1. 通过键盘↑↓← →键来调整线图控件的XY坐标位置。
  1. 背景:可以修改线图的背景颜色。
  2. 透明度:可以更改线图显示的透明度。
  3. 隐藏:可以在画布中隐藏/显示元件。
  4. 刷新:可以在画布中重新刷新生成线图。
  5. 位置锁定:在画布中锁定/解锁线图。
  6. 横坐标反转:可以将图表的沿(x轴)方向水平反转线图。
  7. 纵坐标反转:可以将图表的沿(y轴)方向垂直反转线图。
  8. 自适应最值:勾选后,控件原点终点会根据实际坐标集数据自动调整,无须再手动设置
  9. 横坐标设置:1)原点:可以任意修改X轴原点值,来调整图表的数值。

  2)终点:可以任意修改X轴终点值,来调整图表的数值。

  1. 纵坐标设置:1)原点:可以任意修改Y轴原点值,来调整图表的数值。

  2)终点:可以任意修改Y轴终点值,来调整图表的数值

  1. 边框线宽:可以任意修改图表的边框大小。
  2. 边框颜色:可以任意修改图表的边框颜色。
  3. 边框透明度:可以任意修改图表的透明度。
  4. 水平跨度:可以任意修改标尺网格的宽度值。
  5. 垂直跨度:可以任意修改标尺网格的高度值。
  6. 单个文本自定义设置:可以任意设置 x,y 的坐标值以及宽、高的大小。
  7. 标尺线宽:可以任意修改标尺线宽大小。
  8. 标尺颜色:可以任意修改标尺线的颜色。
  9. 标尺透明度:可以任意修改标尺线的透明度。
  10. 新增线:可以添加/删除线类型、坐标集、线宽、颜色等。
  1. 类型:可以增加散点。折线、曲线、柱状图等图表显示类型。
  2. 坐标集:可以选择各个XY轴坐标点的坐标集(0,0).-(0,0)。
  3. 线宽:可以任意修改曲线的线宽大小。
  4. 颜色:可以任意修改曲线的颜色。
  5. 透明度:可以任意修改曲线的透明度。
  1. 坐标集设置:可以添加/删除坐标集。
  1. 新增坐标点:可以增加/删除/复制xy轴在图表中的坐标点。
  2. X轴坐标点:可以任意设置X轴坐标点数值。
  3. Y轴坐标点:可以任意设置Y轴坐标点数值。

 

图为线图效果

2.3.28 播放器

 

 

控件介绍:播放器控件属于高级控件之一。该控件在上位机屏幕上添加,在下位机实现视频播放/暂停、进度条等功能。该控件可更改的样式属性有:

宽度高度:1)通过定义不同的宽度高度,以实现不同大小的播放器控件。

                 2) 将鼠标放在播放器边缘,拖动边缘可自由调整播放器大小。

坐标:1)通过定义不同的 XY 值,来调整控件的位置。

           2)通过键盘↑↓← →键更精细地调整播放器控件的 XY 坐标位置。

透明度:更改播放器的透明度,使其呈现完全隐藏,若隐若现等效果。

总时长:可以设置视频的总时长。

当前进度:可以设置视频的当前播放时间。

播放事件:可以设置视频的函数名和执行函数,设置在播放视频瞬间执行当前相关代码。

进度条改变事件:可以设置进度条的函数名和执行函数,在拖动进度条时,进度值变化执行当前相关代码。

停止播放事件:可以设置视频播放暂停的函数名和执行函数,可以设置暂停跟播放事件相反。

 

 

 

下一页
上一页
    • 联系电话

    • 0755—83453881
    • 服务时间

    • 周一至周五 9:00-18:00
    • 高通GT-HMI交流群