| 后台-插件-广告管理-手机广告位-内容正文顶部468X60 |
Xpanel guiDesigner 界面设计
2021-04-14 02:24:54CRESTRON
Xpanel guiDesigner界面设计 XpanelDesigner 是Xpanel自身研发的一款应用于WIFI系列触摸屏的人机界面编程软 件，其功能强大、稳定，控件模式设计，全新的拖拽式编程方式方便用
Xpanel guiDesigner界面设计
XpanelDesigner 是Xpanel自身研发的一款应用于WIFI系列触摸屏的人机界面编程软
件，其功能强大、稳定，控件模式设计，全新的拖拽式编程方式方便用户轻松掌握。本软件
运行于Windows视窗操作系统，兼容win98/2000/XP/Win 7。
产品安装
2.1、PC上安装Xpanel Designer
本软件为绿色软件，无需安装，只需把XpanelDesigner目录的文件拷贝到电脑硬盘，
然后双击XpanelDesigner.exe即可运行人机界面编辑软件。安装过程比较简单，这里不作
重 点 描 述 ， 需 注 意 的 是 ： Winxp 系 统 下 Xpanel Designer 必 须 先 安 装
Microsoft.NET.Framework 4.0 SP1插件才能正常运行。
2.2、IPad上安装Xpanel
XpanelDesigner是一款界面编程软件，要想与CSII主机通讯必须要在IPAD安装”
Xpanel”，方法如下：
第一步，iPad 首页找到“App Store”并打开(见下图) ；
第二步，在查找栏里输入“Xpanel”即可在互联网上找到该软件；
2
第三步，点击免费，跳出苹果帐号密码输入框，输入完成后开始安装；
注意：在本次调试中由于iPad 自动连接的是中国ITUNES 网站,因此需要输入在中国
网站注册的帐户密码，现提供一个免费下载帐号(登入数量不能超过苹果规定的5个，下载
完软件请注销，方便他人使用，若有需要请自行注册帐号)：79499032@qq.com；密码：
A123456789a
2.3、苹果手机上安装Xpanel
第一步，手机上找到”App Store”并打开(见下图) ；
3
第二步，在搜索栏里搜索“Xpanel”(见下图) ；
第三步，点击软件右边“免费”字样，字体将由“免费”变成“安装”；
第四步，点击“安装”后会跳出一个密码提示框，只要输入苹果的ID和密码就可以安装
4
了（若无手机ID和密码请与手机服务商联系）；
第四步，安装成功。
5
界面说明
在启动XpanelDesigner之后，将会打开XpanelDesigner的主窗口界面。下面简单介绍
一下XpanelDesigner主窗口中各部分的功能，该窗口中主要包含菜单栏、工具栏、工程管
理窗口、工作窗口、对像样式管理窗口等四部分。如下图所示：
3.1 菜单栏
XpanelDesigner主窗口界面中的菜单栏是用户设置系统参数和编辑工程的入口，主要包
括文件、编辑、查看、对像、窗口和帮助等6个主菜单，如下图所示。
3.1.1 [文件]菜单
[文件]菜单主要用于文件的管理，通常包括新建工程文件、打开已有的工程文件、保存
当前的工程文件、编绎当前的工程文件以及设备管理等功能，菜单命令如下图所示。
6
[文件]菜单中各菜单命令主要的功能如下：
(1) 新建工程：执行该菜单命令可以新建一个工程文件。选择工程文件保存的目录后，
会弹出一个工程属性窗口。如下图所示:
这里要介绍的是[页面大小]、[控制系统]两个选项的参数说明:
[页面大小]选项中，我们可以看到，类型分别有：Custom、iPhone/iPodTouch（480X320）、
IPad(1024X768)、800X600、640X480、320X240。这里我们重点介绍三种分辩率，其余分辩
率只作新产品预留分辩率。
a、iPhone/iPodTouch是专门为iPhone/iPodTouch设置的分分辩率，其尺寸为：480*320；
b、1024*768为iPad的分辩率；
c、800*600为嵌入式XP触摸屏的分辩率；
d、安卓软件支持分辨率为：320*480 800*600 1024*768 960*480。
[控制系统]选项,重点介绍IP地址、端口两个参数，其它参数为新版本预留功能。
IP 地址：CS-II 中控系统或其它中控系统的 IP 地址，可以输入固定的 IP 地址，如：
192.168.0.109(本公司中控系统默认IP)，也可以输入域名，如:XXX.mvddns.net。
端口：中控系统的TCP连接端口号，本公司中控系统的出厂默认端口号为:15000。
语音控制管理器:是用于管理语音识别，通过它可以实现语音控制中控系统。
(此项功能，只对可编程中控有效，对自定义发码的第三方设备无效)
7
1、可点击添加指令，添加语音识别命令（暂时只能识别普通话。以后会增加其他语种）
2、名称：语音识别时配对的文字。
3、Jion：要执行的数字变量的Jion。
例如：上图的语音控制设计，当我们说：“开灯”就触发数字变量为871的jion.
按钮的jion=1000时，将弹出语音输入
脚本管理器：用于管理脚本程序。通过脚本程序实现一些复杂功能。
1、添加程序:添加脚本程序。
2、编辑:编辑脚本程序。
注意：软件暂时只能解析一个脚本程序。当添加多个脚本程序时，软件只能识别最先
添加的脚本程序。
（2）上传工程：执行该菜单命令会弹出上传工程窗口，用于把工程上传到触摸屏包括IOS。
8
1、192.168.0.101:8019为服务器地址。IOS设备上传工程时，在设置---应用程序—Xpnael，
右侧用户界面内的下载文件地址：输入192.168.0.101:8019。如下图所示：
用户界面：
1、下载文件地址：下载服务器地址，对应上传程序的IP地址（一般格式为：IP地址:8019）
2、下载选择：打到ON时，下载界面工程，打到OFF时不下载。
3、只下载布局文件：到到ON时，只下载布局文件，并不下载图片。打到OFF时，布局文件
和图片等文件都下载。（此项一般用于：如果只修改了按钮或其它元素的坐标，大小，而没
修改它们的图片，重新下载时打到ON时，就会加快下载速度）
中控系统设置
1、IP 地址：中控的 IP 地址,可为任意个.每个 IP 之间通过,分隔（如：
192.168.0.1,192.168.0.2）
2、端口号：中控的端口。（只能是一个端口，区别于IP地址不可以有多个）。
9
注：
此处的IP地址及端口号优先于工程属性的IP地址及端口号。当两处都填写好IP地址及端
口号，只会连接此处填写的IP地址。
（3）设备管理：该菜单命令用于输入Xpanel的授权使用码，若未注册工程无法使用，点击
如下图所示:
a、[设备UDID]为iPod/iPhone/iPad的UDID。可在上传工程时获得。
b、导出到文件：把UDID和注册码导出到文件保存。
c、从文件导入：把保存有UDID和注册码的文件导入到工程。
3.1.2 [编辑]菜单
10
[编辑]菜单中各菜单命令主要的功能如下：
（1） 撤消：撤消已执行的动作或命令；
（2） 重做：重做已执行的功作或命令；
（3） 清除撤消记忆：清除撤消命令所要用到的内存（此子菜单请小心使用）；
（4） 禁用撤消：选择些功能，撤消功能将禁用；
（5） 工程属性：请参考新建工程时的工程属性介绍；
（6） 移到最后：把当前页面的对像（如按钮、图片等）放到最后层；
（7） 向后：把当前页面的对像（如按钮、图片等）往后移一层；
（8） 向前：把当前页面的对像（如按钮、图片等）往前移一层；
（9） 移到最前：把当前页面的对像（如按钮、图片等）放到最前层；
(10) 选择所有：选择当前页所有的对像；
(11) 删除所有：删除当前工程所有内容；
(12) 清除Joins/Commands：清除当前工程的所有Join Num。
3.1.3 [视图]菜单
(1):显示Join Numbers:显示/隐藏当前工程的所有Join Numbers；
(2):显示Command & Macro Names: 显示/隐藏当前工程的所有Command&Macro Names；
(3):Load Web Images:此功能为新版本预留；
(4):Join管理：弹出Join Numbers管理窗口，直观显示那些Join Numbers已用；
(5):Regex Tester:自定义反馈测试，此功能为新版本预留；
(6):WOL Generator: 此功能为新版本预留；
(7)放大/缩小：把当前页面/子页放大/缩小，方便用户编辑界面程序。
其它三项菜单相对简单，这里不详细讲解。
3.2 工具栏
新 建
页面
选 取
框
保 存
工程
新 建
工程
列表
视频监控
文字输入
按钮
滑动条
打 开
工程
新 建
子页
工程另
存为
光标
文字
图片/视频
Web
进度条
11
快速定义
字 符 型
Jion No.
快速定义
按钮文字
内容.
快速定义
数 字 型
Jion No.
对齐工具
（左、右、上、下
等对齐）
水平均分
声音添加
快速定义
图片属性
垂直均分
快速定义模拟
快速定义
对像属性
型Jion No.
3.3 对象样式管理窗口
对像样式管理窗口是用于设置对像元素参数，在此窗口设置好所有对像元素的参数后，
页面和子页使用这些元素即可达到不同的效果。
对像样式（简称“对像”），对像样式有五个元素：Backgrounds(背景)、Buttons(按钮)、
Gauges & Sliders(进度条、滑动条)、Input Fields(文本输入框)、Text(文本)。
粘帖对像
复制对像
删除对像
新建对像
删除所有的对像
背景对像
从其它工程导入对像
按钮对像
进度条、滑动条对像
文字输入框对像
文本对像
12
3.3.1 Backgrounds(背景)对像属性
选择Backgrounds, 如：backgrounds，再点击: 。弹出“背景对像属性”窗口。
背景对像名称
背景图片
3.3.2 Buttons(按钮)对像属性
选择 Buttons, 再点击: 。弹出“按钮对像属性”窗口。需要注意的是：名称、背景
图片文件名尽量不使用中文，尽量拼音或英文。
非激活状态
按钮对像名称
使用的图片
激活状态
非激活、激活
使用相同图片
预览
文字偏移
文字阴影
按钮文字使用
的字体，不支持
特殊中文字体
文字在按钮位置
字体大小
13
3.3.3 Gauges & Sliders(进度条、滑动条)对像属性
选择Gauges & Sliders, 再点击: 。弹出“进度条、滑动条对像属性”窗口。需要注
意的是：名称、背景图片文件名不能使用中文，只能是拼音或英文(注：进度条和滑动条的
激活与非激活是两种状态，需要两种图片)。
进度条\滑动条对像名称
非激活状态图片
预览
激活状态图片
3.3.4 Input Fields(文本输入框) 对像属性
选择 Input Fields(文本输入框), 再点击: 。弹出“文本输入框属性”窗口。需要
注意的是：名称不能使用中文，只能是拼音或英文。
文本输入框对像名称
字体大小
字体颜色
文字在按钮位置
3.3.5 Text(文本)对像属性
选择 Text(文本), 再点击: 。弹出“文本属性”窗口。需要注意的是：名称不能使
14
用中文，只能是拼音或英文。
文本输入框对像名称
字体大小
字体颜色
字体在按钮位置
操作说明
通过上一章的讲解，基本了解了XpanelDesigner的架构，现在，我们通过新建一个
iPad工程来详细学习的XpanelDesigner的使用方法。
4.1 新建工程
首先，我们先建一个工程。如下图所示
新建一个工程
在弹出窗口中选择您工程中所保存的路径及名称及采用的触摸屏的分辨率，现在以iPad
为例，选择1024X768的分辨率，中控主机的IP地址为:192.168.0.109 端口为：15000。存储
位置为D盘教程目录下，文件名为iPad.gui。如图：
15
按确定完成，这时候在软件界面左边的Projects 上就会多出一个工程，但没有任何东西，为
这个工程新建一个页面：
新建一个页面
16
软件会自动在为工程增加一个“NewPage1”的页面，右键选择重命名可以重新命名这个
页面的名称（注意：不支持中文名称）。我们可以看到“NewPage1”页面下有“Portrait”、
“landscape”两个页面，这分别是iPad的竖屏和横屏，我们可以分别设计这个页面的横屏
和竖屏界面。
4.2 添加对象样式
新建的页面是一片空白的，没有按钮，没有背景，所以现在我们要先增加对像元素。
1、新建背景对像样式
选择Backgrounds, 再点击
，弹出“背景对象属性”窗口。在名称输入light；
背景图片选选择一幅文件名为: Backgrounds.png分辨率为1024X768的图片。
2、新建按钮对像样式
选择Buttons, 再点击: 。弹出“按钮对像属性”窗口（如下图）。
激活和非激活是两种不同状态，为了区分开来，可以选择两张形状相同但外观不同的
图片，相应的字体也可以选择不同的大小和颜色，如：非激活选图 light-02.png，字体选
宋体，大小为22，加黑，颜色为绿色；激活选图light-01.png，字体选宋体，大小为22，
加黑，颜色选紫色。
17
18
3、新建进度条、滑动条样式
选择Gauges & Sliders, 再点击: 。弹出“进度条、滑动条对像属性”窗口
4、新建文本输入框对像属性
选择Input Field, 再点击: 。弹出“文本输入框属性”窗口。
19
5、新建Text(文本)对像属性
选择Text(文本), 再点击: 。弹出“文本属性”窗口。
20
4.3 页面设计
4.3.1 欢迎界面
设置好对像样式后，下一步我们要在页面分别添加这些元素。中控的页面主要分为
两种，一种是欢迎页面，一种是控制页面，下面我们先来了解欢迎页面的设计。
1、选择HomePage页面，右键选择页面属性。弹出页面属性窗口，横屏主题我们选择
刚才新建的light的背景样式，并勾选首页选项。
2、为了添加动画效果，我们可以在切换过渡项选择动画类型。如：fade(渐入渐出)、
moveIn、push、reveal 等。子类型：动画方向，如（从上，从下，从左，从右）时间：
为动画执行时间。
3、其他页面切换动画。除了fade、moveIn、push、reveal四种简单的基本动画，还隐藏了
6种特殊动画。具体用法，下几章会讲到。注意的是，如果用隐藏的特殊动画。切换过渡中
的类型必须选择None,子类型及时间可根据需求选择.同时，页面的Digital Join不能为0
如下图所示
注：首页选项必须勾选，否则系统会把随机把某一页做为首页。
点击确定后，HomePage页面的横屏背景会变会light 背景样式选择的图片，如下图所示：
21
刚新建的页面是没有任务对象样式的，所以我们要在新建的HomePage页面添加图片、按钮
和文字。
A、添加图片---点击工具栏中的图片控件，如图：
在新建的页面上按住鼠标左键不放拖出一个矩形，大小可自己控制，松开鼠标后弹出
图片属性窗口,选择需要的图片。
22
说明：
1、Serial Join：为字符变量的Jion.可通过此项动态更改图片名。把如果图片一直不会更改，
只需填入0，否则按需填写Jion
2、图片：图片名可以是本地的（支持PNG、JPG、BMP、GIF 等格式），也可以是网络的
B、添加文字，方法如上（详细方法请参考添加对象样式），效果如下：
注：
Serial Join：用于动态更改文字的文本。（但，1 为时间，2 为星期，3 为日期。所以必须跳开
1,2,3 这三个Join）
23
C、添加跳转按键
在对象样式管理栏里新建一个没有任何图标的按键
在工具栏里选择按键控件，然后在在新建的HomePage页面上按住鼠标左键不
放拖出一个覆盖整个页面的矩形，松开鼠标后弹出按键属性窗口，主题选择刚才新
建的无图按键，跳页选择main，如图：
注：可以选择直接跳页，也可以通过代码跳页。以后章节会讲到通过代码跳页
做到这一步，我们的欢迎界面就做好了，接下来我们要学习控制界面的制作。
24
4.3.2 控制菜单界面
控制菜单界面是整个控制系统的主要部份，所以我们会涉及到所有的元素。在设置控
制菜单前，我们先建好背景、按钮、文字、文字输入框、进度条的对像样式。
1、子页
为了方便用户使用，我们按控制类别分别采用不同的子页方式显示。
从上图，我们可以看到main 页面包含12 个子页，每个子页都有自己的功能。
1、子页与页面的区别
A、 每个子页的大小是独立的，可以是任意大小。每个页面的大小是相同的。
B、 页面是子页的显示容器。子页不能单独显示，只能插入到页面显示。
C、 子页只能通过代码方式弹出。页面可以代码，也可以通过直接转跳显示
25
2、子页的新建及属性
新建子页及设计子页属性基本与页面的相同。这里就不详讲了。如下图:
3、插入子页
1、选择要插入的子页。按住鼠标左键，拖拉到要插入的页的 landscape 或 portrait 页
面上，松开鼠标左键即可。
26
2、调整子页的坐标、Jion、切换动画等。在页面中双击刚插入的子页light..弹出“子页引
用属性”窗口。
A、 Digital Jion: 数字Jion.。当可编程中控系统返回对应的子页Jion。子页就显示
或消失。
B、坐标：用于子页的坐标，包括有X，Y 轴。
C、显示：当打上勾时，子页所在的页面显示时，该子页
就会显示，否则只能通过中控主机控制显示与消失。
当打上勾时，对应的子页会显示
。
D、 转入、转出：用于子页显示及消失的动画设计。
根据上面的教程，依次做出各个子页并插入到 main 页面
中。我们可以点击右键，选择锁定位置和大小，在接下来
制作按键的时候就不会因为误操作移动了。
3、菜单制作（List 的使用）
有时我们会碰到在一页中无法显示全部的内容或对像，这时我们就要用到list。List 的作
27
用是把多个子页通过滑动的方式在页中显示。
上图中，紫色部份就是一个List。我可以向上或下滑动显示菜单按钮。下面我们来讲解一
下他的制做过程。
A、点击工具栏的列表控件，新建一个列表，如图：
B、这时鼠标变成+，在要插入列表的页面或子页中按住鼠标左键拖拉。这时弹出列
表属性窗口。
1、List Jion：预留功能。
2、页面滚动：当此项打上勾时，以页为单位来滚动，否则，随意滚动。
28
3、坐标及大小：列表的坐标及尺寸。
4、列表内容：一个列表是由4 个子页组成，可下拉选择要加入的子页。超过4
个子页，可以使用列表套列表的方式添加（如：第四个子页，添加一列表，
列表中添加第4,5,6,7 子页）
4、输入框(Input Fields)的使用（一般用于密码验证、及发送输入的文字到中
控）
1、首先要为输入框建立全局的主题（对像）属性。上一节我们已简单介绍，这节我们再次
温故。
选择Input Fields，再点击
新建一个Input Fields主题对像。在弹出的输入框主题
属性按需求设置名称、字体、大小等属性。这里我们把名称设为transparent(也可以任意，
但不支持中文命名)，然后点击确定。如下图所示。
29
2、新建一个密码页面。点击工具栏中的输入框按钮，并拖拉到页面中，增加一个输入框。
已拖拉到页面中
的输入框
30
3、双击已拖拉到页面的输入框，弹出输入框属性。
文本:当输入框显示时，要显示的文本，如果为空。只显示键盘输入的文本。
主题：输入框的采用的全局主题名称，包括了字体，大小，颜色等。这里选择transparent
Serial Join: 输入框的Jion No.当从键盘输入文字后，会发送S1=文字 到中控系统.其中
1为输入框的Jion。
格式：选择弹出键盘的类型，如：只有数字、常用、网页等键盘类型。
密码模式：此项打上勾，输入的文字自动用*显示。
其他几项为预留功能
现在，我们要实现密码输入正确后才跳到指定的页。这里我们要用到脚本程序。先打开脚本
编辑器，或者写字板。新建一个password.lua的脚本程序。如下图:（其中—为程序注释）
此脚本程序的功能是，当输入Xpanel（暂时不支持中文）时，跳到jion=23的页面（即为
log页）。1为跳，0为不跳。
注意的是：当键盘输入后，软件会自动调用脚本的Input的函数，如果有，就执行函数。没
有就跳过。所以不要修改Input函数名
返回值说明：
p代表页面jion。有两个值1或0；
d代表数字变量，如按钮、子页的jion。有两个值1或0；
a代表模拟变量，如进度条、滑动条的jion。值的范围为0-100；
s代表字符变量，如文字、图片的jion。值为任意非中文字符。
31
32
5、实时视频的使用。
1、点击工具栏的视频工具按钮,
2、拖拉到页面或子页中，添加一个视频窗。双击视频窗。弹出视频属性窗口。
设计项：
IP地址：视频服务器或网络摄像机的IP。（格式为：IP地址:端口）
视频格式：H264、MPEG等格式
播放、停止：控制播放、停止的按钮jion
位置：视频窗口的坐标及大小
安全项:
用户名、密码：验证权限访问视频服务器或网络摄像机
流码：（1-4）清淅度，1最高，4最低。
33
6、添加按钮声音
点击工具栏的声音工具按钮，弹出声音管理窗口。
名称：可任意，但不支持中文名称
Join：对应按钮的Jion,如果为0,即表示所有的按钮
Filename:声音文件。（只支持mp3格式）
34
自定义发码部份
软件内置了可编程中控系统的发码协议，也可以自定义发码。支持TCP、UDP、HTTP网络协
议（注：暂不支持Https协议）
1、添加系统，点击工具栏的系统管理工具按钮。
2、点击
弹出系统属性窗口。
A、系统名称：可任意命名。
B、协议:TCP、UDP、http 三种暂不支持https。
C、IP地址/主机名：支持IP方式及域名方式。
D、端口:连接端口。
E、接收广播信息：接收UDP广播。
3、添加命令,点击 ,弹出添加命令窗口。
A、 命令名称：支持中文。
B、 按下发送：按钮点击时发送的命令。
C、 弹起发送：按钮弹起时发送的命令。
D、互锁模式：打上勾，第一次点击按钮发按下
的命令，第二次点击按钮发弹起发送的命令
E、停止所有的宏：停止宏中还没执行的命令
注：命令格式,支持16进制和字符。16进制用
$,字符用’’括起。如$43,$30,$31,’abcd’,’1234ef’代码用,分隔
35
4、添加宏，点击
,弹出添加宏命令窗口
A、宏名称：支持中文。
B、延时：以秒为单位。
C、命令名称：选择要执行的命令
例子说明：（按钮互锁）
d2=1表示jion为2的按钮按下，d3=0表示jion为3的按钮弹起。
36
连接命令。
点击命令：当点击按钮时，执行的命令。
点击宏：当点击按钮时，执行的宏。
脚本程序：点击按钮时，执行的脚本（暂不支持）
重复延时：当按住按钮不放时，每隔X秒执行一次命令或者宏（若有时）
附：6种特殊页面切换动画说明
'p21=cube'；'p21=suckEffect'；'p21=oglFlip'；'p21=rippleEffect'；'p21=pageCurl'；
'p21=pageUnCurl'
Ip地址设为:127.0.0.1为回路地址。即自己发给自己。
37
天气预报例子说明
1、新建一个 weather 的系统。连接协议为 http,连接中国天气网的服务器
（http://m.weather.com.cn/data/）。添加北京、广州的城市代码。
2、加入天气图片到页面。新建页面，并把天气图片拖拉到该页面。
由于图片名与天气服务器的信息挂勾，所以天气的图片名必须为0.png---31.png
0 代表晴,1代表阴等
38
3、添加天气信息及天气文字。在要显示天气的页面中加入天气信息及天气文字
注意的是，文字和图片的jion要跳过1,2,3这三位。
4、编写脚本语言
5、连接按钮
39
很赞哦！ ()
相关文章
| 后台-插件-广告管理-手机广告位-内容正文底部468X60 |
微信收款码
支付宝收款码