【匠芯创D133CBS】LVGL的应用 2
<div class='showpostmsg'><div style="text-align: justify;">上一篇做的UI虽然算是LVGL的应用，但是由于SRAM_S0溢出报错，并且不会配置到PSRAM导致用一个比较笨的方式来展现了匠芯创D133CBS开发板的显示功能，但是根本体现不了其强悍，而且也是我的一种遗憾，后来请教坛友@dirty，有幸得其指导，非常顺利的将PSRAM配置成功，并且做了最后的完善。本篇就来细说一下如何配置PSRAM与智慧餐厅的大致效果。</div><div style="text-align: justify;">首先介绍PSRAM如何配置：如图1所示。进入到该界面都将其改成PSRAM即可。</div>
<div style="text-align: center;"></div>
<div style="text-align: center;">图1 匠芯创D133CBS芯片配置PSRAM</div>
<div style="text-align: center;"></div>
<div style="text-align: center;">图2 匠芯创D133CBS芯片配置后的界面</div>
<div style="text-align: justify;">如果将上面都配置好之后，再进行编译，基本上就不会出现报错了。</div>
<div style="text-align: justify;">接下来展示一下我添加的功能，基本上智慧餐厅的显示屏上基本上就是显示菜品，价格和支付的二维码，我就简单的使用了GUI-guider进行了界面搭建，主要使用的控件有label，image和qrcode这三种控件，使用GUI-guider是比较简单且方便的可以搭建大致的界面，但是在应用QRcode方面和图片方面是需要自己手动的添加一些代码和修改一些命名，否则是编译报错的。比如在QRcode方面，因为我们生成的C代码是没有包含QRcode部分代码的，所以需要自己手动添加。该库是我从这里克隆而来，如果大家有需要，可以复制过去，进行克隆即可：git clone <a href="https://github.com/littlevgl/lv_lib_qrcode.git">https://github.com/littlevgl/lv_lib_qrcode.git</a></div>
<div style="text-align: justify;">
<pre>
<code class="language-cpp">/**
* @File lv_qrcode.c
*
*/
/*********************
* INCLUDES
*********************/
#include "lv_qrcode.h"
#include "qrcodegen.h"
/*********************
* DEFINES
*********************/
#define QR_SIZE 140
/**********************
* TYPEDEFS
**********************/
/**********************
*STATIC PROTOTYPES
**********************/
/**********************
*STATIC VARIABLES
**********************/
/**********************
* MACROS
**********************/
/**********************
* GLOBAL FUNCTIONS
**********************/
/**
* Create an empty QR code (an `lv_canvas`) object.
* @param parent point to an object where to create the QR code
* @param size width and height of the QR code
* @param dark_color dark color of the QR code
* @param light_color light color of the QR code
* @return pointer to the created QR code object
*/
lv_obj_t * lv_qrcode_create(lv_obj_t * parent, lv_coord_t size, lv_color_t dark_color, lv_color_t light_color)
{
uint32_t buf_size = LV_CANVAS_BUF_SIZE_INDEXED_1BIT(size, size);
uint8_t * buf = lv_mem_alloc(buf_size);
LV_ASSERT_MALLOC(buf);
if(buf == NULL) return NULL;
lv_obj_t * canvas = lv_canvas_create(parent);
if(canvas == NULL) return NULL;
lv_canvas_set_buffer(canvas, buf, size, size, LV_IMG_CF_INDEXED_1BIT);
lv_canvas_set_palette(canvas, 0, dark_color);
lv_canvas_set_palette(canvas, 1, light_color);
return canvas;
}
/**
* Set the data of a QR code object
* @param qrcode pointer to aQ code object
* @param data data to display
* @param data_len length of data in bytes
* @return LV_RES_OK: if no error; LV_RES_INV: on error
*/
lv_res_t lv_qrcode_update(lv_obj_t * qrcode, const void * data, uint32_t data_len)
{
lv_color_t c;
c.full = 1;
lv_canvas_fill_bg(qrcode, c, LV_OPA_COVER);
if(data_len > qrcodegen_BUFFER_LEN_MAX) return LV_RES_INV;
uint8_t qr0;
uint8_t data_tmp;
memcpy(data_tmp, data, data_len);
bool ok = qrcodegen_encodeBinary(data_tmp, data_len,
qr0, qrcodegen_Ecc_MEDIUM,
qrcodegen_VERSION_MIN, qrcodegen_VERSION_MAX,
qrcodegen_Mask_AUTO, true);
if (!ok) return LV_RES_INV;
lv_img_dsc_t * imgdsc = lv_canvas_get_img(qrcode);
lv_coord_t obj_w = imgdsc->header.w;
int qr_size = qrcodegen_getSize(qr0);
int scale = obj_w / qr_size;
int scaled = qr_size * scale;
int margin = (obj_w - scaled) / 2;
uint8_t * buf_u8 = (uint8_t *)imgdsc->data + 8; /*+8 skip the palette*/
/* Copy the qr code canvas:
* A simple `lv_canvas_set_px` would work but it's slow for so many pixels.
* So buffer 1 byte (8 px) from the qr code and set it in the canvas image */
uint32_t row_byte_cnt = (imgdsc->header.w + 7) >> 3;
int y;
for (y = margin; y < scaled + margin; y+=scale) {
uint8_t b = 0;
uint8_t p = 0;
bool aligned = false;
int x;
for (x = margin; x < scaled + margin; x++) {
bool a = qrcodegen_getModule(qr0, (x - margin) / scale, (y - margin) / scale);
if(aligned == false && (x & 0x7) == 0) aligned = true;
if(aligned == false) {
c.full = a ? 0 : 1;
lv_canvas_set_px(qrcode, x, y, c);
} else {
if(!a) b |= (1 << (7 - p));
p++;
if(p == 8) {
uint32_t px = row_byte_cnt * y + (x >> 3);
buf_u8 = b;
b = 0;
p = 0;
}
}
}
/*Process the last byte of the row*/
if(p) {
/*Make the rest of the bits white*/
b |= (1 << (8 - p)) - 1;
uint32_t px = row_byte_cnt * y + (x >> 3);
buf_u8 = b;
}
/*The Qr is probably scaled so simply to the repeated rows*/
int s;
const uint8_t * row_ori = buf_u8 + row_byte_cnt * y;
for(s = 1; s < scale; s++) {
memcpy((uint8_t*)buf_u8 + row_byte_cnt * (y + s), row_ori, row_byte_cnt);
}
}
return LV_RES_OK;
}
/**
* Delete a QR code object
* @param qrcode pointer to a QR code obejct
*/
void lv_qrcode_delete(lv_obj_t * qrcode)
{
lv_img_dsc_t * img = lv_canvas_get_img(qrcode);
lv_img_cache_invalidate_src(img);
lv_mem_free(img->data);
lv_obj_del(qrcode);
}
/**********************
* STATIC FUNCTIONS
**********************/
</code></pre>
<p> </p>
</div>
<div style="text-align: center;"></div>
<div style="text-align: center;">图3 添加qrcode库</div>
<div style="text-align: justify;">代码添加完成之后，在进行头文件的包含，正常来说QRcode就可以正常使用了。接下来说说图片image，在图片方面，首先编译会出现报错，提示路径不对，也就是说我们需要的是图片读取方式替换，并且将图片的路径进行替换，这样才可以，而且由于没有包含关于LVGL_PATH的头文件，这里需要注意添加对应的头文件才可以lv_img_set_src(ui->screen_img_1, LVGL_PATH(import/image/bg.png));这里的路径要根据你想要显示的图片的路径来哦，我这个是关于我自己的路径，因此，要想用的话需要自己改到自己的图片路径才可以，至此，关于代码部分就已经大致搞完了。接下来就是展示~</div>
<div style="text-align: center;"></div>
<div style="text-align: center;">图4 GUI Guider绘制的大致界面</div>
<div style="text-align: center;"></div>
<div style="text-align: center;">图4 实际显示界面</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>在应用QRcode方面和图片方面是需要自己手动的添加一些代码和修改一些命名，否则是编译报错的，这个是这样的</p>
页:
[1]