一、UI素材准备
整理素材。根据功能实现,处理操作界面的UI,并整理素材。素材可以让自己的UI进行设计,主要是操作界面的主题。
①根据屏幕分辨率,导入800x480的背景图片。确定整个操作界面的主题,这里的图片主要用于显示页面背景图关联显示。
②屏幕的操作界面,首先需要对卧室的电源进行控制,再开启卧室电源的前提下。在开发工具SGTools中可以通过导入ICON,创建变量图标用于标识卧室电源的开关状态。如下图所示,为控制开关的图标指示。如下图
③对窗帘的运动过程进行形象的显示。可通过SGTools中的动画控件,实现窗帘的动态开启关闭的过程。由于GIF 图片的分辨率 480*272 超过了屏幕分辨率的1/4,到网上找了一个小软件,把GIF文件裁剪到360*230大小;
二、通过SGTools建立工程
①打开SGTools,建立工程,可以在我之前的贴子中找到步骤,工程的分辨率为800x480;
并导入背景图,开关图标和动画文件,并做好重命名,方便调用,如下图;
②创建页面,创建动画资源(可以直接导入GIF实现),并设置关联显示的背景图。这里操作比较简单,略去操作过程;
③对各个页面的功能进行编辑,如添加控制按键,显示图标状态的变量图标控件;
在客厅插座页面,添加开关ICON图标,并配置关联变量为0x080008的0bit位:=0为关;=1显示为开;如下图
添加对应触摸键,通过触摸键实现切换开关的状态,利用VP运算异或的功能“*VP := *VP XOP Value”实现;
然后关联与变量图标相同的VP地址“0x080008”。
④卧室窗帘页面设置,添加开窗动画及关窗动画;
将2个动画重叠,并分设置对应的使能变量;
开窗动画使能为:0x080004-开窗使能;
关窗动画使能为:0x080006-关窗使能;如下图
对应添加触摸键 利用vp=value功能,控制窗帘状态变量0x08000A-窗帘状态:= 0 无动画;=1开窗动画;=2 关窗动画;
如下图:
三、简单的Lua脚本程序逻辑设计
要实现触摸键控制动画的功能,需要一定的逻辑判断,需要利用下位机做一些逻辑处理,再通过串口来实现的,在拓普微技术支持人员了解到,我手上的智能模块还支持LUA脚本功能,可以做一些简单的逻辑处理;
-- 主循环 调用一次等待10ms
luamain = function (void)
local windows = 0
-- 读 窗帘状态变量值
windows = hmt.readvp16(0x08000A)
-- 判断 窗帘状态值是否为 0,是写开/关窗帘都不使能
if (windows == 0) then
hmt.writevp16(0x080004,0x00)
hmt.writevp16(0x080006,0x00)
-- 判断 窗帘状态值是否为 1,开窗帘使能,关窗帘不使能
elseif (windows == 1) then
hmt.writevp16(0x080004,0x01)
hmt.writevp16(0x080006,0x00)
-- 判断 窗帘状态值是否为 2,关窗帘使能,开窗帘不使能
elseif (windows == 2) then
hmt.writevp16(0x080004,0x00)
hmt.writevp16(0x080006,0x01)
end
end
-- 触摸键事件,回调函数
tpkhook = function (page,id,state)
return 0
end
-- 页面切换时,回调函数
pagechangehook = function (page)
return 0
end
以上工程和程序编辑好后,可以直接适用数据线通过SGTools下载到屏幕中去。
四、功能测试
五、小结
1.交互界面开发起来简单,只要到网上找到相关的素材利用工具处理一下;
2.LUA可以做基本的逻辑处理,对下位机的单片机要求不高;