【ST自由学习】+ 学做简单的智能家居触摸屏控制器界面

2019-3-31 21:22

本帖最后由 weiwei4dk 于 2019-3-31 23:44 编辑

   TouchGFX的强大早在ST收购它之前就已经听说了,但是一直没有空出时间来学习。
   现在TouchGFX专门针对ST的大部分开发板做了适配，因此手上有ST开发板的话，可以使用官方的DEMO进行学习更有效果。刚好手上也有F429Discovery板，想着可以用这个板子来学习GUI开发。
   那么先来用simulator来做个模拟的界面看看好了。
   做个什么界面好呢？之前接触智能灯光控制这些比较多，也对智能家居比较有兴趣，做个简单的智能家居触摸屏界面好了。
   首先是安装软件，TouchGFX要求dotnet 4.5.2版本，如果之前没有安装过的话，可以先从Microsoft官网下载安装。
   打开软件，软件默认使用simulator进行开发，那么配置一下分辨率即可，这里选择跟F429Discovery相同的分辨率来做，看看在小分辨率屏幕上做个GUI会是怎么个效果。

加入需要用到的图片、图标
加入图片.jpg

主界面由以下元素组成
主界面.jpg

动态显示图片的设置如下
动态显示属性配置.jpg

2019-3-31 21:22

本帖最后由 weiwei4dk 于 2019-4-1 00:30 编辑

接下来看下事件触发的设置，因为使用到按键触发切换屏幕的方式，看下具体的设置吧触发事件设置.jpg

有多个属性：如Trigger(事件触发方式)，source(触发事件源)，Action（触发执行动作），Screen(切换屏幕名称)，Transition(切换方式）。最后还有一个打勾的选项是can trigger another interaction(是否触发另一个事件)，也就是说这个事件可触发另一个事件，不过这个暂时没用到，也就不细说了
下面是主界面按下去之后，进入的第一个界面，这里有2个按键区域
风扇页面.jpg

   两个按键，都是使用的自定义区域的按键，好处时可以让有效按键区域尽可能得大
   flexbutton1 放在风扇图标上，点击可以进去风扇的开关界面
   flexbutton2 放在右侧中间的箭头标志上，但比箭头标志的区域要大，用意在于：只要点击右边边沿区域都可以触发按键。按键的用途是切换到下一个设备页面。
   具体的动作设置如下：
   切换到下一页的设置.jpg

下面来看下风扇开关页面
风扇开关页面.jpg

左箭头区域的按键用于返回上一级菜单
下方的Trogger Button用于模拟风扇的开关动作，后面在视频里可以看到点击按键是否有相应的变化的。

2019-3-31 21:22

本帖最后由 weiwei4dk 于 2019-4-1 10:12 编辑

继续看下一个页面吧，灯光设备选项和相应的开关界面灯光设备选项菜单
灯光页面.jpg

其中有3个按键，用于触发事件
灯光事件设置1.jpg

   3个事件触发分别用于返回上一选项（Fan）菜单，进入灯光开关界面，下一选项（Music）选项菜单

   还有其它菜单也是类似的设计方法，各菜单如下
   音乐菜单
   音乐菜单.jpg

插座菜单

版本菜单

2019-3-31 21:23

本帖最后由 weiwei4dk 于 2019-4-1 11:39 编辑

   工程分享：百度云： https://pan.baidu.com/s/1cvilo5Sv-sQFyOe97V8NRg 提取码：hnr9
   视频链接：百度云： https://pan.baidu.com/s/1LugAUaHl0im3DBe1oXOUjA 提取码：4eea

parse_av_tips

2019-3-31 23:24

429貌似很好用

2019-3-31 23:24

之前我看谁出的教程就是基于429

专栏首页

【ST自由学习】+ 学做简单的智能家居触摸屏控制器界面

技术新星奖章