1. UI material preparation
and material organization. According to the function implementation, process the UI of the operation interface and organize the materials. The materials can allow you to design your own UI, mainly the theme of the operation interface.
① Import a background image of 800x480 according to the screen resolution. Determine the theme of the entire operation interface. The image here is mainly used to display the page background image.
② The operation interface of the screen, first you need to control the power supply of the bedroom, and then turn on the power supply of the bedroom. In the development tool SGTools, you can import ICON to create a variable icon to identify the switch status of the bedroom power supply. As shown in the figure below, it is the icon indication of the control switch. As shown in the figure below
③ Visually display the movement of the curtains. The dynamic opening and closing of the curtains can be realized through the animation control in SGTools. Since the resolution of the GIF image is 480*272, which exceeds 1/4 of the screen resolution, I found a small software on the Internet to crop the GIF file to 360*230 size;
2. Create a project through SGTools
① Open SGTools and create a project. You can find the steps in my previous post. The resolution of the project is 800x480;
import the background image, switch icon and animation file, and rename them for easy calling, as shown below;
② Create a page, create animation resources (you can directly import GIF to achieve this), and set the background image for the associated display. The operation here is relatively simple, so the operation process is omitted;
③ Edit the functions of each page, such as adding control buttons and variable icon controls that display icon status;
in the living room socket page, add the switch ICON icon and configure the associated variable to 0x080008, bit 0: =0 for off; =1 for on; as shown in the figure below
, add the corresponding touch keys, and use the touch keys to switch the switch status, using the VP XOR function "*VP := *VP XOP Value" to achieve this;
Then associate the same VP address "0x080008" as the variable icon.
④ Bedroom curtain page settings, add window opening animation and window closing animation;
overlap the two animations and set the corresponding enable variables;
the window opening animation enable is: 0x080004-window opening enable;
the window closing animation enable is: 0x080006-window closing enable; as shown below
Add touch keys to control curtain status variable 0x08000A using vp=value function - curtain status: = 0 no animation; = 1 window opening animation; = 2 window closing animation;
As shown below:
3. Simple Lua script program logic design
To realize the function of touch key control animation, certain logical judgment is required, and some logical processing needs to be done by the lower computer, and then realized through the serial port. I learned from the technical support staff of Topway that the intelligent module I have also supports LUA script function, which can do some simple logical processing;
-- 主循环 调用一次等待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
After editing the above projects and programs, you can directly use the data cable to download them to the screen through SGTools.
4. Functional Testing
V. Summary
1. The interactive interface is easy to develop. You just need to find relevant materials on the Internet and use tools to process them.
2. LUA can do basic logic processing and does not require high requirements for the microcontroller of the lower computer.