【 匠芯创D133CBS】基于SquareLine开发LVGL UI
<div class='showpostmsg'><div>SquareLine Studio做为LVGL官方推出的PC端开发工具，采用所见即所得的开发方式，大大减少了敲代码方式开发UI的时间，最早的名字是EdgeLine。</div><h1>1 SquareLine下载安装</h1>
<div>下载地址：https://squareline.io/downloads</div>
<div>根据自己的系统下载相应的软件包。</div>
<div></div>
<div>SquareLine Studio如果商用需要购买License，费用如下：</div>
<div></div>
<div>根据自己的需求购买吧，笔者这里使用免费的。</div>
<div>下载最新的SquareLine Studio 1.4.2版本，我是在Windows系统下开发，所以选择第一个Windows版本下载，下载完成后直接安装。</div>
<div></div>
<div>登录成功可以选择一个Example打开运行一下。</div>
<div></div>
<div>我这里选择第三个demo。</div>
<div></div>
<div>接下来可以导出工程。左上角File->Project Settings设置文件输出格式及保存的位置。</div>
<div></div>
<div></div>
<div>单栏Export->Export File选择导出文件的格式。</div>
<div></div>
<div>提示“Export Succeed”表示导出成功，找到对应的文件夹。以下即为导出的.c和.h文件。</div>
<div></div>
<h1>2 SquareLine创建工程与移植</h1>
<h2>2.1 创建工程</h2>
<div>打开SquareLine Studio,点击Creat,选择Desktop,右下角根据显示屏分辨率以及Bit数，填写好参数，点击右下角CREAT，创建工程。</div>
<div></div>
<div>在Screen中添加一个Label控件，编辑Label的字体颜色以及字体大小。</div>
<div></div>
<div>在Screen中添加完后控件后，可点击play按钮。</div>
<div></div>
<div>点击Export->Export File,导出UI文件，包括UI Layout的.c和.h文件，以及PNG图片编码后的.c文件。</div>
<h2>2.2 移植UI文件到D133CBS</h2>
<div>找到一个一直好LVGL的工程，新建UI文件件，将上面生成的.c和.h文件添加到文件夹中。值得注意的是，D133CBS的SDK的LVGL使用的版本是v8.3.1，因此使用SquareLine Studio导数UI需要切换到v8.3.x的版本。</div>
<div></div>
<div>然后将导出文件放入目录。</div>
<div></div>
<div>同时新建文件SConscript，文件内容如下：</div>
<div>from building import *</div>
<div>import os</div>
<div>cwd = GetCurrentDir()</div>
<div>group = []</div>
<div>src = []</div>
<div>CPPPATH = </div>
<div>if GetDepend(['AIC_CHIP_D13X']) or GetDepend(['AIC_CHIP_G73X']):</div>
<div>src += Glob('./*.c')</div>
<div>list = os.listdir(cwd)</div>
<div>for d in list:</div>
<div>path = os.path.join(cwd, d)</div>
<div>if os.path.isfile(os.path.join(path, 'SConscript')):</div>
<div>group = group + SConscript(os.path.join(d, 'SConscript'))</div>
<div>group = group + DefineGroup('LVGL-port', src, depend = ['AIC_LVGL_USER_PROJECT'], CPPPATH = CPPPATH)</div>
<div>Return('group')</div>
<div>在application/Kconfig中增加配置。</div>
<div></div>
<div>然后使用scons --menuconfig配置。</div>
<div></div>
<div>然后保存退出。</div>
<div>再将ui.c中的ui_init()函数在aic_ui_init函数中调用即可。</div>
<div></div>
<div>最后编译工程。</div>
<div></div>
<div>烧写后现象如下。</div>
<div></div>
<div> </div>
<div> </div>
<div> </div>
<p><!--importdoc--></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> <p>谢谢分享，期待后续评测</p>
页:
[1]