科讯网

请输入关键字词

热门搜索排行

最新搜索排行

您现在的位置是：首页 > 品牌专题 > CRESTRON

CRESTRON

后台-插件-广告管理-手机广告位-内容正文顶部468X60

Smart Graphics I UI 设计 指引 说明

Smart Graphics   设计说明   快思聪   Crestron
2021-02-24 03:37:11CRESTRON
Smart Graphics UI 设计指引说明 目录 一：软件安装环境............................................................................................................
Smart Graphics UI 设计指引说明  
目录  
一：软件安装环境...................................................................................................................................................................... 2  
二：新建一个 Core3 UI 界面................................................................................................................................................... 2  
1：新建项目........................................................................................................................................................................ 2  
2：新建控件........................................................................................................................................................................ 2  
3：中文界面........................................................................................................................................................................ 4  
三：控件详解 .............................................................................................................................................................................. 4  
1：Buttons......................................................................................................................................................................... 5  
2：Images........................................................................................................................................................................10  
3：Lists..............................................................................................................................................................................12  
4：Widgets......................................................................................................................................................................13  
5：Keypad........................................................................................................................................................................14  
6：Slider...........................................................................................................................................................................16  
7：Text...............................................................................................................................................................................17  
四：编辑与自定义....................................................................................................................................................................19  
1：样式..............................................................................................................................................................................19  
2：文字..............................................................................................................................................................................22  
3：图片..............................................................................................................................................................................25  
五：常见问题解决....................................................................................................................................................................28  
1：文字丢失......................................................................................................................................................................28  
2：软件崩溃......................................................................................................................................................................29  
3：其他问题......................................................................................................................................................................29  
六、Smart Graphics 编程事项.............................................................................................................................................30  
1：simpl windows 中加载 Smart Graphics 组控件的 CED 文件方法...............................................................30  
2：Smart Graphics 的“Button”控件“Join number”赋号方法及含义......................................................31  
3：Smart Graphics 中添加音频编程方法 .................................................................................................................32  
4：控件显示格式设置.....................................................................................................................................................32  
5：IOS 系统之 VOIP 设置及编程<以 iPad 为例>....................................................................................................33  
1 / 35  
[ Crestron Beijing Office 2013 ]  
一：软件安装环境  
1：必要的快思聪软件（或更高版本）(*请确保软件版本为当前最新)  
* Crestron _ database  
* Crestron _ device _ database  
* Vt_pro-e  
Crestron _ toolbox  
Simple _ windows  
* Crestron_core3_controls  
Tips: 请保持你的触摸屏&主机固件为最新版本  
二：新建一个 Core3 UI 界面  
1：新建项目  
例：选择（如图 1）一个带有 Core3 UI 后缀描述的项目即可。  
（图 1）  
Tips：  
iPad，iPhone Android 设备需选择“Crestron App”项目来支持 Core3 UI  
不是全部触摸屏都支持 Core3 UI，具体设备以数据库列表为准  
2：新建控件  
如（图 2）， 点击红色框内图标弹出 Core3 UI 专用控件工具栏。  
（图 2）  
2 / 35  
 
 
 
 
[ Crestron Beijing Office 2013 ]  
Tips：  
在 Core3 UI 界面中，不支持传统界面中的 Button，Image，Timer，Gauge，Slider …  
不支持快捷修改工具等等，均为灰色禁止操作  
如（图 3），点击 Core3 图标后出现下图中所有控件列表，按功能需求点击相应菜单栏，拖入相应控件即可。  
（图 3）Core3 UI 控件栏  
如（图 4）拖入一个 “Advanced Button”后效果。  
（图 4）  
如（图 5）在 Core3 UI 中所有控件均需要点开工具栏-属性面板进行设置&调节，不可以使用鼠标右键。  
（图 5）属性面板  
3 / 35  
[ Crestron Beijing Office 2013 ]  
3：中文界面  
如下图所示，在新建一个界面项目后，需选择：Standard Theme International.xml 即可支持输入中文界面  
选择国际版主题  
支持显示中文输入  
4 / 35  
 
 
[ Crestron Beijing Office 2013 ]  
三：控件详解  
1：Buttons  
Buttons 分为 6 种不同用法，它们基本属性相同（都是按钮功能），但用途各有不同。可以从按钮的描述中看出，  
它基本功能含义，下面针对一个高级按钮如何使用进行详解。  
按钮控件  
Advanced Button 的用法  
用途：可以用在多状态显示，自定义的状态设计，自定义状态文字等。  
唯一可以使用自定义图片的按钮，其他按钮均不具备该功能；  
该按钮分为三种状态：Normal（未激活），Pressed（手指按下时），Selected（激活状态）  
样例：如下图，分别为高级按钮的三种不同状态的显示  
按钮三种状态  
5 / 35  
 
[ Crestron Beijing Office 2013 ]  
Advanced Button 的用法 - 自定义图片  
*以下内容适用于 Core3 UI 所有可以自定义图片插入方法，不再重复讲解。  
Step1：点击 Advanced Button，然后点击属性面板，在属性面板下找到 Modes 选项  
设定自定义图片  
Step2：在 Image Type 中选择 Use Custom Image  
使用自定义图片  
6 / 35  
[ Crestron Beijing Office 2013 ]  
Step3：点击打开 Image Path 选项，File Path 选择<Import>，浏览一张你需要的图片。  
浏览并插入一张图片  
Step4：点击打开 Image Path 选项，File Path 选择<Import>，浏览一张你需要的图片作为你的按钮。  
最终得到的效果  
（此图按钮已修正）  
7 / 35  
[ Crestron Beijing Office 2013 ]  
Tips：调整尺寸，以及自适应拉伸设定，（下文涉及重复的内容，不再重复讲述。）  
- 尺寸  
默认新建的 Button 与自定义图片尺寸不同时，会导致图像与文字按钮错位现象，我们通过设置把它们两者之  
间互相吻合使它们正确。  
如图 1，我们看到左边按钮尺寸与图像尺寸不符合，导致文字以及按钮与图像偏离。右侧按钮尺寸为 W:146,H:82  
图片素材尺寸为：W:146 H:82, 只有两者尺寸相同时，即为正确。  
（图 1）  
- 调整尺寸  
在属性面板中,我们对尺寸进行自定义，即可解决问题。  
如图 2，在高级按钮属性面板框中，Properties-Position and Size 中可以进行对按钮尺寸的定义。  
把它的尺寸与图像素材的宽高尺寸设定相同，即为正确。  
（图 2）  
8 / 35  
[ Crestron Beijing Office 2013 ]  
-自适应图片  
当我们需要拉伸按钮，同时自定义图片需要跟随按钮大小适应时，我们需要进行如下设定。  
如图 3，在 Fill Type 下拉菜单中可以选择适应方式。√为常用选择。  
（图 3）  
None：图像显示为默认大小，不会自动适应变化尺寸 √  
Stretch：图像→适应按钮尺寸大小 √  
Stretch Aspect：按图像比例→适应按钮尺寸大小  
Center：按图像比例→居中按钮中心  
Tile：在按钮中平铺图像  
Nine Slice：图像显示为默认大小，固定在按钮右下角位置。  
9 / 35  
[ Crestron Beijing Office 2013 ]  
2：Images  
图像分为 4 种格式，如下图，它们有不同功能用途。  
Animation Object ： 一个 Loading 的动画显示，无法编辑修改。  
Border：一个带边框的文字底板，无法编辑。  
Fill Border：一个可以自定义颜色的底板，可以自定义颜色以及透明度。  
Image Object：它包含了 Animation Object 的功能（需设计），它是一个真正的 Border 工具，可以使用自定  
义图片以及自定义 ICON  
Image Object 用途：Border 工具，可使用自定义的图片素材， 制作天气 ICON 动画，制作 Loading 动画，  
制作逐帧动画，支持动态图像反馈。  
如图 1，默认的 Image Object 样式  
（图 1）  
10 / 35  
 
[ Crestron Beijing Office 2013 ]  
如图 2，使用了其他样式得到的效果  
（图 2）  
11 / 35  
[ Crestron Beijing Office 2013 ]  
3：Lists  
10 个控件，六个功能，如下图。  
- Background Selector 背景图片选择工具  
当给 Page 设置了多个背景图片时，默认拖入背景图片工具  
即可显示出当前设置的背景图片列表，该功能无需底层编程  
即可实现切换背景。  
- Button List 按钮列表  
该插件适用于多项按钮集合列表，例如：背景音乐歌曲列表  
- Checkbox Lsit 复选框按钮列表  
该插件适用于多选功能按钮，多次点选。  
- Icon List 图标列表按钮  
该插件适用于功能切换，功能选择。可以使用默认素材库中  
的图标样式，亦可设定自定义图标，跳页等等。  
- Rss Feed List 新闻订阅  
该插件默认为订阅谷歌 Rss 新闻，  
可以自行在互联网搜索相关网站 RSS 地址复制替换  
注：仅部分 RSS 链接支持中文。  
- Theme Selector 主题选择  
该插件可以快速切换界面主题设置。  
12 / 35  
 
[ Crestron Beijing Office 2013 ]  
4：Widgets  
小工具插件栏，目前仅有数字时钟插件&视频源切换插件。  
- Digital Date Time 插件  
默认显示格式为： 日-月-年 时-分 上午/下午  
可以在属性面板中设定格式以及显示的内容，字体颜色大小等。  
*该插件无需编程  
- Video Switcher 快速切换视频源  
1：支持手势拖动视频源切换输出  
2：支持最多 36 个显示输出  
3：支持最多 256 个视频源输入  
4：支持自定义的视频源图标文件  
5：支持拖入视频源后自动跳转子页功能（切换至视频源控制子页等设计）  
13 / 35  
 
[ Crestron Beijing Office 2013 ]  
5：Keypad  
按钮面板控件可以快速拖入你想要的键盘以及样式格式。  
- D-Pad  
如下图，D-Pad 可以选择两种样式（同一主题下），不可自定义单独按键的样式。  
- Simple Keypad  
键盘插件可以选择按键面板样式以及显示内容，和文字颜色及大小。  
“默认样式”  
“可设定样式”  
14 / 35  
 
[ Crestron Beijing Office 2013 ]  
6：Gauges  
包括 10 个插件，六大功能，分别为  
- Drape Controller 窗帘控件  
该插件可以快速操作窗帘的开启，闭合  
可触摸控制或通过按钮控制调节  
不可更改外观样式  
- Liquid Gauge 进度条  
横向，竖向显示，反馈读取进度，音量大小等  
可触摸进行控制调节  
不可自定义外观样式  
- Meter Gauge 计量表  
可触摸进行调节表盘数据  
- Segmented Gauge 分段进度条  
可自定义颜色，以及分段数量  
更准确的反馈进度状态  
可触摸进行控制调节  
- Signal Level  
该插件可用于信号强度显示，音量级别的反馈  
可设置信号格栅数量以及间距  
不可触摸控制  
- Signed Liquid Gauge 正反向的进度条  
横向，竖向显示，反馈读取进度，音量大小等  
可以设置反向  
可触摸控制或通过按钮控制调节  
- Shade Controller  
窗帘第二种控制样式  
15 / 35  
[ Crestron Beijing Office 2013 ]  
6：Slider  
包含 4 个插件，三大功能。  
- Fader Slider 横向，竖向滑动条控制  
可以选择横向竖向滑动条控制  
可以选择按钮的样式以及滑动条的样式（主题包限定）  
可通过触摸点击操作  
“不同的样式”  
- Gesture Canvas 手势操作  
支持滑动手势触发功能  
支持全屏&单独页手势  
在触摸屏显示中它是透明的，不可见的  
可以选择的手势为：向左滑，向右滑，向上滑，向下滑，点击激活，长按激活。  
需底层编程支持  
16 / 35  
 
[ Crestron Beijing Office 2013 ]  
- Knob 旋钮  
它可以自由在触摸屏中拖动旋转，进行调节控制  
它不可以用做数据的反馈  
7：Text  
包含 4 个插件，用途均为文字显示  
- Formatted Text  
支持 HTML 格式文本，字符串反馈，数字量反馈，模拟量反馈  
可以自动缩减文字内容  
- Scrollable Text  
支持滚动文字显示，可设定横向或竖向滚动  
支持滚动速度调节  
支持间接文本  
- Simple Label  
可进行简单的文字显示注释  
支持间接文本  
- Text Entry  
可进行文字输入的文本框  
支持自动调出键盘  
17 / 35  
 
[ Crestron Beijing Office 2013 ]  
8：Applications  
应用套件，包含三大功能。  
- Media Player Application  
音 乐 播 放 器 套 件 ， 它 支 持 完 整 浏 览 ADMS, ADMS-G2, Crestron iServer®, CEN-IDOCV, and  
CEN-IDOCV-DSW 设备功能。  
- Weather Application  
天气预报插件支持完整浏览天气  
可通过搜索城市，设置城市代码，坐标来定位  
可查看未来 7 天的天气情况  
可设定华氏度/摄氏度  
与 Weather Widget 自动链接  
- Weather Widget  
自动与天气预报应用关联  
可设置页跳转进入跳页  
可显示当前温度以及当天最高最低温度  
- Energy Monitoring  
能源检测管理控件  
可通过自定义编程，自定义颜色在触摸屏中做出相应柱形图反馈  
18 / 35  
[ Crestron Beijing Office 2013 ]  
四：编辑与自定义  
1：样式  
在 Core3 UI 中，样式大致为三种  
Button Style：内置的按钮外观，例如：圆形，透明的，默认的样式。  
Image Style：内置的图像外观，例如：背景，透明，线，白色的，黑色的等等。  
Icon Style：内置的图标样式，例如：黑色图标，白色图标，大图标，小图标。  
Tips1：（图 1）如果你使用了 Use Custom Image，样式会被替换。  
（图 1）  
下图默认为使用 Use Style State，选择一个库中的 ICON 样式即可。  
例：使用默认 ICON 样式  
例：得到的图标  
Tips2：样式可以节省图标，按钮以及图片的设计导入过程，简化设计步骤，快速得到你想要的界面设计。  
例：使用样式制作个性化界面  
19 / 35  
 
 
[ Crestron Beijing Office 2013 ]  
制作一个带有图标的圆形按钮（此方法适用于其他同类属性）  
Step1：新建一个普通按钮如图 1  
(图 1)  
Step2：点击 Button Style，选择 Round Accent Btn 样式，得到的效果如图 2  
(图 2)  
Step3：点击选择 Icon Style – Media Transports Dark（黑色样式 ICON）  
再点击选择 Icon Type – Use Styles State（使用样式库中的 ICON）如图 3，4  
(图 3)  
20 / 35  
[ Crestron Beijing Office 2013 ]  
(图 4)  
Step4：删除多余的文字，以及选择一个你想要的 ICON，得到最终效果如图 5,6  
(图 5)  
(图 6)  
Tips1：图标的尺寸跟随按钮的尺寸大小变化，不可以调节素材库中图标大小，但可以调节它在按钮中的位置。  
Tips2：若要使用自定义图标大小，请查阅下文“文字”内容，或浏览自定义图片素材。  
21 / 35  
[ Crestron Beijing Office 2013 ]  
2：文字  
在 Core3 UI 中使用的是 HTML 语言编写文字，但通常我们可以使用 Lable 来设置文字，无需修改复杂的 HTML  
语言。下图解释了 HTML 语言格式。  
制作一个带有图标文字的按钮（此方法适用于其他同类属性）  
Step1：新建一个普通按钮如图 1  
(图 1)  
Step2： 点击如图 2 红色框区域，打开文字编辑器  
(图 2)  
22 / 35  
 
[ Crestron Beijing Office 2013 ]  
Step3：如图 3 所示，设置一个 ICON 以及键入文字内容。  
- 音乐符图标为内置字体图标库中素材，可以选择你需要的图标样式以及调节大小及颜色  
- 图标与文字使用了 2 种字体  
- 图标使用了 Crestron Simple Icons 字体“f”字符  
- 文字使用了 Arial 字体  
1：选择 Crestron Simple Icons 字体  
2：使用 Icon 字体键入“f”字符  
3：使用 Arial 字体键入 list 文字内容  
设置完成  
最终效果  
23 / 35  
[ Crestron Beijing Office 2013 ]  
制作一个百分比反馈  
Step1：新建一个 Formatted Text 文本框，如图 1  
（图 1）  
Step2：如图 2，点击 Analog，选择%2x-Hexadecimal（十六进制），再键入%符号、得到的效果。  
Tips1：依照实际应用，我们可以选择不同类型的字符来设置。  
（图 2）  
24 / 35  
[ Crestron Beijing Office 2013 ]  
Tips2：以此类推，Serial 量，与 Digital 分别代表字符串量和数字量它们的用处为  
- Serial 用于底层的字符串反馈  
- Digital 用于激活/未激活的显示两种状态文字反馈  
预留空白  
25 / 35  
 
[ Crestron Beijing Office 2013 ]  
3：图片  
设置一个有多个背景图片界面并且可以选择背景  
Step1：点击项目并且打开属性面板，打开 Backgrounds 选项卡后，看到 Number of Backgrounds=0  
Step2：设置 Number of Backgrounds = 3（这里 3 代表可添加 3 张背景图片）如下图。  
Step3：分别打开并且添加 3 张背景图片，如下图。  
默认在页面中显示第 0 张背景图片  
26 / 35  
[ Crestron Beijing Office 2013 ]  
Step4：选择 List 工具栏-新建一个 Background Selector 插件，默认显示空白。  
Step5：勾选 Background Selector – Project Level 选项，得到下图效果。  
Tips1：该插件无需底层编程，即可在触摸屏中实现切换背景。背景数量取决于添加背景的数量。  
Tips2：该插件在 Vtp-E 中显示不完整，仅显示一张图片，上传至触摸屏后显示正常。  
Tips3：涉及到图像的内容，均可以选择它适应尺寸的模式，例如：拉伸，自适应，居中等。  
新建一个自定义图片的高级按钮  
在 Button 中，仅有 Advanced Button 可以使用自定义图片来定义按钮的外观样式。  
其他的 Button 可以使用自定义 ICON 图片，但它不是按钮的样式，两者不能混淆。  
Step1：新建一个高级按钮，并且打开它的 Mode-0。如图 1  
（图 1）  
Step2：分别对 Normal，Pressed，Selected 添加自定义图片素材。点击查看方法  
最终效果  
27 / 35  
[ Crestron Beijing Office 2013 ]  
五：常见问题解决  
1：文字丢失  
上传界面至触摸屏后无中文文字显示  
解决办法：  
1：检查 VTP-E 界面项目是否为 Standard Theme International.xml 国际版主题包。如不是可以在项目名  
称处打开属性面板-重新设置主题即可。（图 1）  
（图 1）  
2：F12 编译完成界面后，上传时请注意（图 2）红色框内选项，如图勾选后再次上传。  
（图 2）  
28 / 35  
 
 
[ Crestron Beijing Office 2013 ]  
2：软件崩溃  
1：请注意 VTP-E 软件右下角内存状态反馈，至红色时为占用过大，请注意及时保存以及重新打开软件。  
2：请勿同时复制多个 Core3 UI 界面中的控件以及快速移动坐标位置，该操作会导致软件崩溃  
3：请勿同时复制多个子页  
4：单独页/子页（按钮，控件，文字）中内容较多时，请勿快速进行编辑，例如：修改按钮图片，文字等  
推荐电脑配置：  
CPU : I5 四核心  
内存：DDR3 4G  
显卡芯片：独立显卡  
3：其他问题  
1：当使用了不同软件版本环境或者界面内容过多时，界面程序可能会出现不可修改，不可添加新控件的情况。  
目前暂无解决办法，请及时进行备份。  
2：当界面上传至触摸屏中出现位置错乱，不正常内容显示时，请从新调整位置，不正常显示内容请删除当前页  
面错误内容后重新制作即可解决。  
3：无法平行居中等对齐问题，关闭当前页面，再次打开即可对齐。  
4：字号无故变小，由于在同一位置使用多种字体导致该问题出现。重新调整字号后保存即可。  
5：无法编译界面或编译后 vtz 文件为 0kb，请检查 Message log 信息栏会提示相应问题，找到并解决。  
29 / 35  
 
 
[ Crestron Beijing Office 2013 ]  
六、Smart Graphics 编程事项  
1：simpl windows 中加载 Smart Graphics 组控件的 CED 文件方法  
Step1：在组控件中赋 Smart Object ID 号，支持的控件<如表 1>。  
（表格中的控件赋号方法类似，以“Vertical Button”为例<如图 1>）。  
在控件属性中，选择“Smart Object ID”右边的“…”为控件赋号<如图 2>。  
Horizontal Button  
Vertical Button  
Icon List Horizontal  
Icon List Vertical  
Button List Horizontal RSS Feed List  
Button List Vertical Video Switcher  
Checkbox List Vertical Media Player Application  
DPad  
Simple Keypad  
表 1  
:
图 1  
图 2  
Step2：通过 F12 编译，在界面程序存储目录中会生成“*.ced”文件，在 simpl windows 中加载该文件即可。  
如图 3。  
图 3  
30 / 35  
 
 
[ Crestron Beijing Office 2013 ]  
2：Smart Graphics 的“Button”控件“Join number”赋号方法及含义  
Smart Graphics 中为“Button”控件增加“Join Number”的方法如下。  
方法一：  
如图 1，四种按钮控件类型，可以通过图 2(标记红框)赋数字量号和字符串量号，不可直接赋模拟量号，赋模拟  
量号的方法参考第四条。<“ Horizontal Button” 及“ Vertical Button”按钮控件需要赋 Smart Object ID >。  
字符串量  
数字量  
图 2  
图 1  
方法二：通过“Button”控件属性，赋“Join Number”，如图 3。  
赋“数字量”号  
赋“字符串量”号：动态文本  
图 3  
“Digital Enable Join”及“Digital Visibility Join”的含义，如图 5。  
为按钮控件赋“Digital Enable Join”及“Digital  
Visibility Join 数字量号”  
图 4  
Digital Enable Join：赋号后低电平时不可触发  
Digital Visibility Join： 赋号后低电平时不可见  
图 5  
31 / 35  
 
[ Crestron Beijing Office 2013 ]  
3：Smart Graphics 中添加音频编程方法  
Step1:选中 VT Pro-e 项目属性,如图 1,指定音频数量、数字量反馈号、音频文件。  
图 1  
Step2：simpl windows 编程如图 2，触发“play”就可以播放指定音乐了。  
图 2  
4：控件显示格式设置  
控件可以按照图 1 样式设置显示格式。  
图 1  
图 2  
以“%7d-Signed Integer”为例，应用在室温显示及空调温度设置中，如图 2:。  
32 / 35  
 
 
[ Crestron Beijing Office 2013 ]  
在 Simpl windows 中，通过“Analog Increment”函数，实现温度的上下调节，如图 3。  
图 3  
5：IOS 系统之 VOIP 设置及编程<以 iPad 为例>  
Step1：iPad 设置如图 1，图 2。  
填写被呼设备的地址  
图 2  
图 1  
SIP：Ext:本机 SIP 地址。  
Display name：自定义名称。  
Server Port：服务器端口，默认 5060。  
Local Port：默认 4060。  
33 / 35  
 
[ Crestron Beijing Office 2013 ]  
Step2：Simpl windows 中右键选择“Crestron App”模块，添加“Crestron App VOIP Reserved joins“模  
块，如图 3。  
图 3  
Step3：通过 Simpl windows 编写程序实现对讲功能，设置“Crestron App VOIP Reserved joins “模块的数  
字量<如图 4>和字符串量<如图 5>。  
图 4  
图 5  
如有更多问题请反馈至邮箱：billysun@crestronasia.com  
34 / 35  
很赞哦！ ()

相关文章

后台-插件-广告管理-手机广告位-内容正文底部468X60

文章评论