1、 Smart Graphics UI 设计 指引 说明 版本号： V1.4.1 更新日期： 2015 年 05 月 07 日 更新内容 ： 三 ： 控件 详解 list - Subpage Reference List 子页 引用列表 - Spinner List 微调下拉 列表 1 / 55 Crestron Beijing Office 2013 目录 一：软件安装环境 1 二：新建一个 Smart Graphics 界面 2 1：新建项目 2 2：新建控件 2 三：控件详解 4 1： Buttons . 5 2： Images 10 3： Lists 12 4： Widgets 14 5
2、： Keypad 16 6： Gauges 16 7： Slider . 18 8： Text. 19 9： Applications 24 四：编辑与自定义 25 1：样式 25 2：文字 28 3：图片 31 4： Page Resize . 33 五： Crestron App 34 1：付费版 &免费版 34 2：创建新项目 34 3：旋转设计 35 六：标准样式参考 39 七、 Smart Graphics 编程事项 . 47 1： Smart ID . 47 2： Simpl Windows 中加载 Smart Graphics 组控件的 CED 文件方法 48 4： Smart
3、Graphics 中添加音频编程方法 . 50 5：控件显示格式设置 . 50 6： IOS 系统之 VOIP 设置及编程 51 八：常见问题解决 53 1：文字丢失 53 2：软件崩溃 54 3：其他问题 54 一：软件 安装 环境 1： 必要 的 快思聪 软件 2 / 55 Crestron Beijing Office 2013 Crestron _ database Crestron _ device _ database Vt_pro-e Crestron _ toolbox Simpl _ windows Crestron_SmartGraphics Tips: 请 保持你 的 触
4、摸屏 &主机固件 为 最新版本 二 ：新建一个 Smart Graphics 界面 1：新建 项目 例： 选择 （如图 1）一个 带有 Smart Graphics 后缀 描述的项目 即可 。 Tips： iPad， iPhone 设备 需 选择“ Crestron App” 项目来支持 Smart Graphics 不是 全部触摸屏都支持 Smart Graphics， 具体设备以数据库列表为准 2： 新建 控件 如（ 图 2）， 点击 红色 框 内 图标弹出 Smart Graphics 专用控件工具栏 。 Tips： 在 Smart Graphics 界面 中，不支持传统界面中的 But
5、ton， Image， Timer， Gauge， Slider 工具 不 支持快捷修改 按钮样式 工具 ， 为灰色禁止 操作 如（图 3） ， 点击 图标 后 出现 下图 中所有 控件列表，按 功能 需求点击相应菜单栏， 拖入 相应控 件即可。 （图 1） （图 2） 3 / 55 Crestron Beijing Office 2013 （图 3） Smart Graphics 控件 栏 如 （ 图 4） 拖入 一个 “Advanced Button” 后 效果。 如（图 5） 在 Smart Graphics 中 所有控件均 需要 点 开工具栏 -属性面板进行设置 &调节 ，不可以 使用
6、 鼠标右键。 （图 4） （图 5）属性 面板 4 / 55 Crestron Beijing Office 2013 3：中文 界面 如 下图 所示， 在新建一个界面项目后， 需 选择： Standard Theme International.xml 即可 支持输入中文 界面 (或 选择 Int 开头 的主题 均 可支持中文版本界面 例如 ： Int_CT_Slate.xml) 选择国际版 主题 支持 中文 显示 （ ） 5 / 55 Crestron Beijing Office 2013 三 ：控件详解 1： Buttons Buttons 分为 6 种不同 用法 ， 它们 基本属性相
7、同 （ 都是按钮 功能）， 但用途 各有 不同 。 可以 从按钮的描述中看出，它基本功能含义，下面 针对 一个 高级 按钮如何使用进行详解。 Advanced Button 的用法 用途 ：可以用在 多 状态显示， 自定义 的状态 设计 ，自定义状态文字等。 唯一 可以使用自定义图片的按钮，其他 按钮 均不具备该功能 ； 该 按钮分为 三种 状态： Normal（ 未激活）， Pressed（手指按下时 ） ， Selected（激活 状态） 样例 ： 如 下图， 分别 为 高级 按钮 的 三种 不同状态的显示 按钮 控件 按钮 三种状态 6 / 55 Crestron Beijing Off
8、ice 2013 Advanced Button 的用法 - 自定义 图片 *以下内容适用于 Smart Graphics 所有 可以自定义 图片 插入 方法 ， 不再重复 讲解 。 Step1： 点击 Advanced Button，然后点击属性面板， 在 属性面板下找到 Modes 选项 Step2： 在 Image Type 中 选择 Use Custom Image 设定自定义 图片 使用自定义 图片 7 / 55 Crestron Beijing Office 2013 Step3：点击打开 Image Path 选项 ， File Path 选择 ， 即可从 本地 选择 一张你需要
9、的图片 。 Step4：点击打开 Image Path 选项 ， File Path 选择 ，浏览 一张你需要的图片 作为 你 的 按钮 ， 如图例 。 浏览并 插入 一张 图片 最终 得到的效果 （此 图 按钮已 修正） 8 / 55 Crestron Beijing Office 2013 Tips： 调整尺寸，以及自适应拉伸 设定 ， （下文 涉及 重复的内容 ， 不再重复讲述。 ） - 尺寸 默认 新建 的 Button 与自定义图片尺寸不 同 时 ， 会导致图像与文字按钮错位现象，我们通过设置把它们两者之间互相吻合 使 它们 正确。 如图 1， 我们看到 左边 按钮 尺寸 与图像尺寸
10、不 符合 ，导致文 字 以及 按钮与 图像 偏离。 右侧 按钮尺寸为 W:146,H:82 图片 素材尺寸为： W:146 H:82, 只有 两者尺寸 相同 时， 即 为正确。 - 调整 尺寸 在 属性面板中 ,我们 对 尺寸进行自定义 ， 即可 解决问题。 如 图 2，在高级 按钮属性面板框中， Properties-Position and Size 中可以进行对按钮 尺寸 的定义。 把 它的尺寸与图像素材的 宽高 尺寸设定 相同 ，即为正确。 （图 1） （图 2） 9 / 55 Crestron Beijing Office 2013 -自 适应图片 当 我们需要拉伸按钮， 同时 自定
11、义图片需要跟随按钮大小适应时，我们需要 进行 如下设定 。 如 图 3， 在 Fill Type 下拉 菜单中可以选择 适应 方式。 推荐 选择 。 None：图像显示 为默认大小，不会自动适应 变化尺寸 Stretch： 图像 适应按钮 尺寸 大小 Stretch Aspect：按 图像比例 适应按钮尺寸大小 Center： 按 图像比例 居中 按钮中心 Tile： 在 按钮 中 平铺图像 Nine Slice： 图像显示 为默认大小 ， 固定在 按钮 右 下角位置。 （图 3） 10 / 55 Crestron Beijing Office 2013 2： Images 图像 分为 4 种
12、 格式， 如 下图 ， 它们 有 不同功能用途 。 Animation Object ： 一个 Loading 的动画显示 ， 无法 编辑修改 。 Border： 一个 带边框的文字底板，无法编辑。 Fill Border： 一个可以 自定义颜色的 底板 ， 可以自定义 颜色以及透明度。 Image Object： 它 包含了 Animation Object 的功能（需设计），它是一个 真正 的 Border 工具，可以使用自定义图片以及自定义 ICON Image Object 用途 ： Border 工具，可 使用 自定义的图片素材， 制作天气 ICON 动画 ， 制作 Loading
13、动画，制作 逐帧 动画 ， 支持 动态 图像 反馈 。 如图 1，默认的 Image Object 样式 （图 1） 11 / 55 Crestron Beijing Office 2013 如 图 2， 使用了其他样式 得到 的效果 （图 2） 12 / 55 Crestron Beijing Office 2013 3： Lists 17 个 控件， 九 个功能， 如 右 图。 - Background Selector 背景图 片选择 工具 当给 Page 设置了多个背景图片时，默认拖入背景图片工具 即可显示出 当前 设置的背景图片列表，该 功能 无需 底层 编程 即可 实现 切换 背景
14、。 - Button List 按钮 列表 该插件 适用于 多项 按钮 集合 列表，例如 ： 背景音乐 歌曲列表 - Checkbox List 复选框 按钮列表 该 插件适用于多选 功能 按钮 ， 多次 点选 。 - Dynamic Button List 动态 按钮列表 该插件 适用于 多项 按钮 集合 列表， 所不同于 Button List 的 是 当 动态 按钮 设置 一旦 被激活， 则 List 中的每个按钮 不再受 制于 默认的设置，而是 必须通过程序 来实现对图标和文字 的 控制。 - Dynamic Icon List 动态图标 列表 该 插件适用于功能切换，功能选择 。可以
15、 使用默认素材库中 的 图标样式， 亦可设定自定义 图标，跳页等等 。所不同于 Icon List 的 是 动态 图标设置 一旦 被激活，则 List 中的每个 Icon 不再受制于 默认的设置方式，而是 通过 编程来实现对图 标和文字 的 控制。 - Icon List 图标 列表按钮 该 插件适用于功能切换，功能选择 。可以 使用默认素材库中 的 图标样式， 亦可设定自定义 图标，跳页等等 。 - Spinner List 微调下拉 列表 该 插件 可以 通过滑动选择列表内容， 适用于 数字 的微调或文字 的 选择等。 - Subpage Reference List 子页 引用列表 该
16、插件 可以直接引用 子页内容。 最大 支持 list 数为 600。 - Theme Selector 主题 选择 该 插件可以快速切换 界面 主题设置 。 设置界面主 题： 当前项目的属性栏 Themes 设置主题的数量并且选择主题风格， 如下图 所示 。上传界面后插件 Theme selector 即显示出项目所选择的几种 主题 风格。 13 / 55 Crestron Beijing Office 2013 注 ： 目前支持的中文主题 共 有 六个 ， 即 ： Standard Theme International.xml、 Int CT Black Glass 2.0、 Int CT
17、 Indigo、 Int CT Neo、 Int CT Planar、 Int CT Slate。 14 / 55 Crestron Beijing Office 2013 4： Widgets 小工具 插件栏， 目前 仅 有数字 时钟插件 &视频源切换插件。 - Digital Date Time 插件 默认显示格式 为： 日 -月 -年 时 -分 上午 /下午 可以 在属性面板中设定 格式 以及显示的内容 ， 字体 颜色 大小等。 *该 插件 无需编程 - Video Switcher 快速 切换视频源 1：支持 手势拖动视频源切换输 出 2： 支持 最多 36 个显示输出 15 / 55
18、 Crestron Beijing Office 2013 3：支持 最多 256 个 视频源输入 4：支持自定义 的视频源 图标文件 5： 支持 拖入 视 频源后自动跳转子页 功能 （切换至视频源 控制 子页 等设计） 16 / 55 Crestron Beijing Office 2013 5： Keypad 按钮 面板 控件可以 快速拖入你想要的键盘 以及 样式格式。 - D-Pad 如下图 ， D-Pad 可以 选择 两种样式（同一 主题 下），不可自定义单独按键的样式。 - Simple Keypad 键盘插件 可以 选择 按键面板样式以及显示内容， 和 文字 颜色 及 大小。 “默
19、认 样式 ” “ 可设定 样式 ” 17 / 55 Crestron Beijing Office 2013 6： Gauges 包括 10 个 插件，六大功能 ， 分别为 - Drape Controller 窗帘 控件 该 插件可以快速操作窗帘的开启，闭合 可 触摸 控制 或 通过 按钮控制调节 不可 更改 外观 样式 - Liquid Gauge 进度条 横向 ， 竖向 显示 ，反馈读取进度 ，音量大小等 可 触摸 进行 控制 调节 不可 自定义外观样式 - Meter Gauge 计量表 可 触摸进行调节表盘数据 - Segmented Gauge 分段 进度条 可 自定义颜色，以及
20、分段 数量 更 准确的反馈进度 状态 可 触摸进行控制调节 - Signal Level 该 插件可用于 信号 强度显示 ， 音量级别 的 反馈 可 设置信号格栅数量以及间距 不可触摸 控制 - Signed Liquid Gauge 正反向 的进度条 横向 ，竖向显示，反馈读取进度，音量大 小等 可以 设置反向 可 触摸控制或通过按钮控制调节 18 / 55 Crestron Beijing Office 2013 7： Slider 包含 4 个 插件， 三大 功能 。 - Fader Slider 横向，竖向 滑动条控制 可以 选择横向竖向滑动条控制 可以 选择 按钮 的样式以及滑动条的
21、 样式 （ 主题 包限定） 可通过 触摸 点击 操作 - Gesture Canvas 手势 操作 支持滑动手势 触发功能 支持 全屏 &单独 页 手势 在 触摸屏显示 中 它 是透 明的，不可见的 可以选择 的手势为：向左滑 ， 向 右滑， 向上滑 ， 向下滑 ， 点击 激活 ， 长按 激活。 需 底层编程支持 - Knob 旋钮 它可以 自由 在 触摸屏中拖动旋转，进行 调节 控制 它 不可以用做 数据 的反馈 “不同的 样式 ” 19 / 55 Crestron Beijing Office 2013 8： Text 包含 4 个 插件， 用途 均为文字 ，数字， 数值 显示 - For
22、matted Text 支持 HTML 格式 文本 ，字符串 反馈，数字量反馈，模拟量反馈 可以 自动 缩减 文字 内容 - Scrollable Text 支持 滚动文字显示， 可设定 横向 或 竖向滚动 支持 滚动速度 调节 支持 间接 文本 - Simple Label 可 进行简单的文字显示 注释 支持间接 文本 - Text Entry 可进行文字输入 的文本框 可 自动弹出 内置 键盘 可 设置为密码输入模式 20 / 55 Crestron Beijing Office 2013 附： 快思聪字符 对照 表 21 / 55 Crestron Beijing Office 2013
23、 22 / 55 Crestron Beijing Office 2013 23 / 55 Crestron Beijing Office 2013 24 / 55 Crestron Beijing Office 2013 9： Applications 应用套件 ， 包含 三大 功能 。 - Media Player Application 音乐 播放器套件 ， 它 支持 完整 浏览 ADMS, ADMS-G2, Crestron iServer, CEN-IDOCV, and CEN-IDOCV-DSW 设备 功能。 - Weather Application 天气 预报插件支持完整浏览天
24、气 可通过搜索 城市，设置城市代码， 坐标来 定位 可 查看未来 7 天 的天气情况 可 设定华氏度 /摄氏度 与 Weather Widget 自动 链接 Tips 该 插件 暂 不支持中文 - Weather Widget 自动 与天气预报 应用 关联 可设置页 跳转进入跳页 可 显示当前温度以及当天最高最低温度 25 / 55 Crestron Beijing Office 2013 四： 编辑 与 自定义 1： 样式 在 Smart Graphics 中 ，样式 大致 为 三种 Button Style：内置 的按钮 外观， 例如：圆形， 透明 的，默认 的样式。 Image Styl
25、e：内置 的 图像 外观 ， 例如： 背景 ，透明， 线 ，白色的，黑色的等等。 Icon Style：内置 的图标 样式 ，例如： 黑色 图标，白色 图标， 大 图标，小图标 。 Tips1： （图 1）如果 你 使用了 Use Custom Image， 样式会被 替换。 下图 默认为 使用 Use Style State， 选择一个 库 中的 ICON 样式 即可 。 Tips2： 样式可以 节省 图标，按钮以及图片的设计 导入 过程，简化设计步骤 ， 快速 得到 你想要的 界面 设计 。 （图 1） 例：使用 默认 ICON 样式 例：得到 的图标 例：使用 样式 制作 个性 化界面
26、26 / 55 Crestron Beijing Office 2013 制作 一个带有 图标 的 圆形 按钮 （此 方法适用于其他 同类 属性） Step1： 新建 一个 普通 按钮 如图 1 Step2：点击 Button Style， 选择 Round Accent Btn 样式，得到的 效果 如图 2 Step3： 点击选择 Icon Style Media Transports Dark（黑色 样式 ICON） 再 点击选择 Icon Type Use Styles State（使用 样式库 中的 ICON） 如 图 3， 4 (图 1) (图 2) (图 3) 27 / 55 Cr
27、estron Beijing Office 2013 Step4：删除 多余的文字，以及选择一个你想要的 ICON， 得 到最终效果 如图 5,6 Tips1： 图标的尺寸 跟随按钮的尺寸大小变化，不可以 调节素材 库中 图标 大小 ， 但 可以调节它 在 按钮中的位置。 Tips2： 若要使用自定义图标大小，请查阅 下文 “ 文字 ” 内容 ， 或 浏览 自定义图片素材。 (图 4) (图 5) (图 6) 28 / 55 Crestron Beijing Office 2013 2： 文 字 在 Smart Graphics 中 使用的是 HTML 语言编写 文字，但通常我们可以 使用 L
28、able 来 设置文字，无需修改复杂的HTML 语言 。 下图解释了 HTML 语言格式 。 制作 一个带有图标 文字 的 按钮 （此 方法适用于其他 同类 属性） Step1： 新建一个普通按钮 如 图 1 Step2： 点击 如 图 2 红色框 区域 ，打开文字编辑器 (图 1) (图 2) 29 / 55 Crestron Beijing Office 2013 Step3：如 图 3 所示 ， 设置 一个 ICON 以及 键入 文字 内容。 - 音乐符图标 为内置字体图标库中素材，可以 选择 你需要的图标样式以及调节大小及颜色 - 图标 与文字使用了 2 种 字体 - 图标 使用了 Crestron Simple Icons 字体 “f” 字符 - 文字 使用了 Arial 字体 设置完成 1： 选择 Crestron Simple Icons 字体 2： 使用 Icon 字体 键入 “f” 字符 3： 使用 Arial 字体 键入 list 文字内容 最终 效果
