TouchGFX 设计”+电池状态在线监测
<div class='showpostmsg'>1、 TouchGFXDesigner简介 GFX作为一个再MCU上跑得很high的库，可以再各种版本的KEIL上见到，通常的开发流程是创建一个工程project，然后根据硬件逐个添加库，gfx库再keil中是需要license才能够使用的。但是，GFX被st装到口袋里了。然后呢，就有了这个免费的TouchGFXDesigner。 TouchGFXDesigner更像是MVC开发的网页工具，有了frontpage网站设计基础就可以不看手册直接上手。设计的用户界面可以用分钟来计算。这个项目就是这样的。 但是，基于嵌入式开发，代码的连接再TouchGFXDesigner里面有两种方式，第一种是再UI设计完成后用生成代码按键，一键生产，然后导出后在keil，gcc，iar等环境继续开发。 但是还有一个更快的，在interaction选项下有插入function的选项，可以直接把代码嵌入到这个项目中。 不过，更好用的部分是simulator，用模拟器可以直接形成代码的动态部分。编译执行的过程稍慢，不过确实很好玩，如果编写小游戏，更是方便。2、 电池状态在线监测项目介绍2.1 电池状态在线监测项目实现的效果，这个界面包括初始页面splash，状态显示页面Status，设置页面Settings，介绍页面About。 这个项目可以接受来自ADC接口或者通讯接口的数据显示实时状态，这个项目的数据接口用演示数据表示。具体实现的流程：- 项目启动，显示起始页面的图像，同时等待整个项目的加载和初始化。- 完成初始化后，就直接进入主页面。主页面包括文字显示的电池电压，电池电流和电池运行温度，环境温度的动态显示。- 为了正确显示出设定的参数，需要对设定的单位和时间段进行设定，这些都表现在设定页面。- 最后的关于页面，说明了需要的信息，这介绍了touchGFX的说明。2.2 应用平台：在开发的创建工程时，可选的都是stm32的discover等典型开发板，这个项目使用simulator开发，从blank UI开始设计，没有套用典型的范例和demo；2.3 应用场景：工业用数据监控面板显示。2.4 设计的特点：用户界面简洁，使用方便。设计中使用了STM32LOGO，不过需要注意的时文件名需要改成短文件名，否则要报错的。3、设计中使用到container和Scroll list，界面的设计更丰富。3.1 首先创建一个自定义容器，然后在其中添加元素，这里时图片和文本，其中文本中的<value>是在代码中访问和更新的数据3.2 这样就可以在创建的页面中添加这个元素，这里用滚动表格scroll list添加3个元素，3.3 其他的文件均按此逐个编辑，就形成了一个如下简单的逻辑执行框架。4、对应的工程文件和简单操作展示视频如下。4.1 视频用simulator，显示用gif截屏后的效果如下，4.2 上传的代码如所附附件
5. 后续工作。在这个简单界面上，完成代码的注入和修改，实现数据更新的功能。在完成基本逻辑后，就可以进一步优化页面设计，选择颜色，图片和更丰富的用户交互。
</div><script> var loginstr = '<div class="locked">查看本帖全部内容，请<a href="javascript:;" style="color:#e60000" class="loginf">登录</a>或者<a href="https://bbs.eeworld.com.cn/member.php?mod=register_eeworld.php&action=wechat" style="color:#e60000" target="_blank">注册</a></div>';
if(parseInt(discuz_uid)==0){
(function($){
var postHeight = getTextHeight(400);
$(".showpostmsg").html($(".showpostmsg").html());
$(".showpostmsg").after(loginstr);
$(".showpostmsg").css({height:postHeight,overflow:"hidden"});
})(jQuery);
} </script><script type="text/javascript">(function(d,c){var a=d.createElement("script"),m=d.getElementsByTagName("script"),eewurl="//counter.eeworld.com.cn/pv/count/";a.src=eewurl+c;m.parentNode.insertBefore(a,m)})(document,523)</script> 谢谢分享！
页:
[1]