کار با تراشه F1C100S – قسمت چهارم – طراحی رابط گرافیکی با lvgl

این روزها اکثر دستگاه های الکترونیکی کاربرپسند یک رابط گرافیکی دارند (البته همیشه هم لازم نیست?)و بیشتر الکترونیکی ها دنبال راه اندازی یک گرافیک خوب روی محصولاتشان هستند ، اکثرا هم از میکروهای شرکت stm استفاده میکنند اما مدتی است که قیمت این میکروکنترلر ها بسیار افزایش داشته  و غیر از آن بعضی جاها اصلا جوابگو نیستند یا اصلا دلیلی ندارد که از یک میکروکنترلر که شامل بخش های جانبی زیادی (منظور تایمر یا adc و dac و … ) است برای کارها استفاده کنیم که اصلا نیازی به آنها نداریم. پس بهتراست که برای هر کاری سراغ چیزی که باید برویم! در قسمت قبل نحوه ساخت ایمیج لینوکس و اجرای آن روی تراشه F1C100S را آموزش دادیم و در این قسمت هم میخواهیم سراغ راه اندازی یک رابط گرافیکی با کتابخانه lvgl و اجرای آن روی برد sinux f1 برویم پس باما همراه باشید.

LVGL

LVGL یک رابط گرافیکی اُپن سورس است که از تاچ اسکرین هم پشتیبانی میکند و دارای کامپوننت های مختلفی مثل windows, buttons, labels, lists, charts و … است که قابل ویرایش نیز هستند. افکت های مختلفی مثل شفافیت ، سایه، انیمیشن های مختلف و … هم از امکانات دیگر این کتابخانه هستند.

برای اینکه گرافیک خودمان را با استفاده از کتابخانه ی LVGL طراحی کنیم مرحله اول دانلود فایل‌ها هست، یک پوشه برای پروژه خودمان می‌سازیم و با گیت پروژه‌های زیر رو دریافت می‌کنیم:

mkdir gui
cd gui
git clone --branch v8.0.0 https://github.com/lvgl/lvgl.git
git clone --branch v8.0.0 https://github.com/lvgl/lv_drivers.git

حال لازم است که فایل‌های زیر را در پوشه اصلی خود کپی کرده و نام‌های آن را تغییر دهیم:

cp lvgl/lv_conf_template.h lv_conf.h
cp lv_drivers/lv_drv_conf_template.h lv_drv_conf.h

و تغییرات زیر را درفایل  lv_drv_conf.h قرار دهیم  :

در خط 10:

#if 1 /*Set it to "1" to enable the content*/

در خط 275:

# define USE_FBDEV 1

و تغییرات زیر را درفایل  lv_conf.h اعمال می کنیم:

در خط 10:

#if 1 /*Set it to "1" to enable content*/

در خط 275:

#define LV_FONT_MONTSERRAT_28 1

حال یک فایل با نام main.c ساخته و کدهای زیر را در آن قرار میدهیم

#include "lvgl/lvgl.h"
#include "lv_drivers/display/fbdev.h"
#include <unistd.h>
#include <stdio.h>

#define DISP_BUF_SIZE (128 * 1024)

int main(void)
{
/*LittlevGL init*/
lv_init();

/*Linux frame buffer device init*/
fbdev_init();

/*A small buffer for LittlevGL to draw the screen's content*/
static lv_color_t buf[DISP_BUF_SIZE];

/*Initialize a descriptor for the buffer*/
static lv_disp_draw_buf_t disp_buf;
lv_disp_draw_buf_init(&disp_buf, buf, NULL, DISP_BUF_SIZE);

/*Initialize and register a display driver*/
static lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);
disp_drv.draw_buf = &disp_buf;
disp_drv.flush_cb = fbdev_flush;
disp_drv.hor_res = 480;
disp_drv.ver_res = 272;
lv_disp_drv_register(&disp_drv);

static lv_style_t label_1;

lv_style_set_text_font(&label_1, &lv_font_montserrat_28);

lv_obj_t *label = lv_label_create(lv_scr_act());
lv_obj_add_style(label, &label_1, 0);
lv_label_set_recolor(label, true);
lv_label_set_text(label, "#0062ff SISOOG.COM#");
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);

lv_obj_t *label_2 = lv_label_create(lv_scr_act());
lv_label_set_long_mode(label_2, LV_LABEL_LONG_SCROLL_CIRCULAR); /*Circular scroll*/
lv_obj_set_width(label_2, 250);
lv_label_set_text(label_2, "Create GUI with lvgl lib on F1C100S with Embedded linux");
lv_obj_align(label_2, LV_ALIGN_CENTER, 0, 30);

while (1)
{
lv_tick_inc(5);
lv_task_handler();
usleep(5000);
}

return 0;
}

نوبت کامپایل برنامه هست! لازم است که در ابتدا فایلی با نام Makefile ساخته و کدهای زیر را در آن بریزیم، باید در خط 4 مسیر کامپایلر خود را مشخص کنیم که من در اینجا مسیر کامپایلر buildroot را دادم و شما باید مسیر را بر اساس سیستم خود تغییر دهید.

#
# Makefile
#
CC = ~/projects/buildroot-sinux/output/host/bin/arm-buildroot-linux-gnueabi-gcc

LVGL_DIR_NAME ?= lvgl
LVGL_DIR ?= ${shell pwd}
CFLAGS ?= -O3 -g0 -I$(LVGL_DIR)/ -Wall -Wshadow -Wundef -Wmaybe-uninitialized -Wmissing-prototypes -Wno-discarded-qualifiers -Wall -Wextra -Wno-unused-function -Wundef -Wno-error=strict-prototypes -Wpointer-arith -fno-strict-aliasing -Wno-error=cpp -Wuninitialized -Wmaybe-uninitialized -Wno-unused-parameter -Wno-missing-field-initializers -Wtype-limits -Wsizeof-pointer-memaccess -Wno-format-nonliteral -Wno-cast-qual -Wunreachable-code -Wno-switch-default -Wno-switch-enum -Wreturn-type -Wmultichar -Wformat-security -Wno-ignored-qualifiers -Wno-error=pedantic -Wno-sign-compare -Wno-error=missing-prototypes -Wdouble-promotion -Wclobbered -Wdeprecated -Wempty-body -Wtype-limits -Wstack-usage=1024 -Wno-unused-value -Wno-unused-parameter -Wno-missing-field-initializers -Wuninitialized -Wmaybe-uninitialized -Wall -Wextra -Wno-unused-parameter -Wno-missing-field-initializers -Wtype-limits -Wsizeof-pointer-memaccess -Wno-format-nonliteral -Wpointer-arith -Wno-cast-qual -Wmissing-prototypes -Wunreachable-code -Wno-switch-default -Wswitch-enum -Wreturn-type -Wmultichar -Wno-discarded-qualifiers -Wformat-security -Wno-ignored-qualifiers -Wno-sign-compare
LDFLAGS ?= -lm
LDFLAGS +=-lts
BIN = myGUI

#Collect the files to compile
MAINSRC = ./main.c

include $(LVGL_DIR)/lvgl/lvgl.mk
include $(LVGL_DIR)/lv_drivers/lv_drivers.mk


OBJEXT ?= .o

AOBJS = $(ASRCS:.S=$(OBJEXT))
COBJS = $(CSRCS:.c=$(OBJEXT))

MAINOBJ = $(MAINSRC:.c=$(OBJEXT))

SRCS = $(ASRCS) $(CSRCS) $(MAINSRC)
OBJS = $(AOBJS) $(COBJS)

## MAINOBJ -> OBJFILES

all: default


%.o: %.c

$(CC) $(CFLAGS) -c $< -o $@
echo "$(CC) $<"

default: $(AOBJS) $(COBJS) $(MAINOBJ)
$(CC) -o $(BIN) $(MAINOBJ) $(AOBJS) $(COBJS) $(LDFLAGS)

clean:
rm -f $(BIN) $(AOBJS) $(COBJS) $(MAINOBJ)

حال باید در ترمینال دستور زیر رو وارد کنیم تا برنامه کامپایل شود

make

یک فایل خروجی با نام myGUI تولید می‌شود که برنامه گرافیکی ماست.

وقتی داریم با سیستم‌های امبدد کار می‌کنیم معمولاً پردازنده هدف، سخت‌افزار ضعیفی دارد و کامپایل کردن روی آن زمان‌بر و در برخی موارد غیرممکن است پس‌روی سیستم خودمان کامپایل کرده و خروجی را روی سخت‌افزار خود انتقال داده و اجرا می‌کنیم مثل کاری که در بالا انجام دادیم

برنامه UMTPRD

حالا نکته‌ای که می‌خواهیم در باره ی آن صحبت کنیم همین‌جاست!

آن هم برای انتقال دادن فایل خروجی روی سخت‌افزار، اکثر چیپ‌های لینوکسی که با آنها کار می‌کنیم دارای شبکه هستند یا به‌صورت lan و یا به‌صورت  Wifi و برای انتقال فایل از بستر شبکه استفاده می‌کنیم و با دستور scp یا دستورات مشابه فایل‌ها را انتقال می‌دهیم، اما F1C100S این‌طور نیست و ما شبکه را در آن نداریم (البته که توی برد sinux f1 ماژول Wifi رو اضافه کردیم اما اکثر بردهایی که f1c100s دارند یا بردی که ممکنه در آینده بزنید احتمال زیاد دارای ماژول Wifi نیست پس ما این رو در نظر نمی‌گیریم ولی راه دیگری که با کمک برنامه UMTPRD  بردمان را با یک کابل usb به سیستم وصل کرده که در آن برد ما به‌عنوان یک دستگاه ذخیره‌سازی شناخته می‌شود و به فایل‌های ما در سیستم دسترسی پیدا می‌کند.

کانفیگ buildroot که در قسمت قبل نحوه استفاده از آن را آموزش دادیم این پکیج را هم در ایمیج ما نصب میکند و میتوانید از آن استفاده کنید فقط لازم است که سوییچ usb و کلید otg برد sinux f1 را روی حالت device قرار دهیم و با یک کابل usb آن را به سیستم متصل کنیم.

حال فایل myGUIرا روی برد در مسیر /root/ کپی میکنیم و با دستور زیر آن را اجرا میکنیم:

chmod +x myGUI
./myGUI

(دستورات بالا همونطور که میدونید باید در ترمینال برد اجرا بشه?)

در قسمت‌های بعدی در پروژه‌هایی که انجام می‌دهیم بیشتر با کتابخانه گرافیکی lvgl آشنا می‌شویم و از امکانات دیگر آن هم استفاده می‌کنیم اما شما می‌توانید جلوتر پیش برید و زودتر گرافیک‌های خود را طراحی کنید از این لینک هم می‌توانید برای آشنا شدن با دیگر امکانات این کتابخانه استفاده کنید.

دانلود رایگان شماتیک و PCB برد توسعه SINUX F1
فایل های طراحی رو میتونید به صورت رایگان از گیت هاب من دریافت کنید!

منبع:سیسوگ