【匠芯创D133CBS】--10.LVGL界面设计
<div class='showpostmsg'><p> 本篇讲述使用GUI-Guider工具设计LVGL界面。</p><p><strong><span style="color:#0000ff;">一.GUI-Guider工具使用</span></strong></p>
<p><span style="color:#c0392b;">1.创建工程</span></p>
<div style="text-align: center;"></div>
<div style="text-align: center;">图1:工具创建界面工程</div>
<p><span style="color:#e74c3c;">2.设计界面</span></p>
<p> 这里使用工具自带的插件。首先加上文本标题，设置字体及大小。下面添加了六个组件，有按键、选择开关、下拉框，滑动选择条，滚动条等。这里可以配色及形状等选择，设计好后界面如下。</p>
<div style="text-align: center;"></div>
<div style="text-align: center;"><span style="color:#e74c3c;">图2:界面设计与模拟仿真</span></div>
<p><span style="color:#e74c3c;">3.模拟仿真。</span>点击上图红框所示，软件会运行弹出界面，可以模拟操作看效果这些，根据需要可以调整。运行后会生成界面代码。</p>
<p> </p>
<p><strong><span style="color:#0000ff;">二.代码准备</span></strong></p>
<p>1.选取生成代码取如下红框内如下图，</p>
<div style="text-align: center;"></div>
<div style="text-align: center;">图3:选取代码移植</div>
<p>2.迁移到工程目录下如图</p>
<div style="text-align: center;"></div>
<div style="text-align: center;">图4:工程添加</div>
<p><strong><span style="color:#0000ff;">三.测试</span></strong></p>
<p> 编译烧录后，界面如下，触摸组件有相应效果，LVGL 界面设计达到预期。</p>
<div style="text-align: center;"></div>
<div style="text-align: center;">图5:界面实际效果</div>
<p>8e3e0b4dc0b69a4e3c40936c1f3c0d67</p>
<p> </p>
</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]