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

آموزش کار با تراشه F1C100S – امبدد لینوکس – توصیه شده

۱۴۰۰-۱۰-۲۹

5 دقیقه

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

شاید برای شما مفید باشد : آموزش امبدد لینوکس از مقدماتی تا پیشرفته

LVGL

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

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

برای اینکه گرافیک خودمان را با استفاده از کتابخانه ی 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

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

1 2	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*/

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

در خط 275:

#  define USE_FBDEV           1

1	# define USE_FBDEV 1

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

در خط 10:

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

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

در خط 275:

#define LV_FONT_MONTSERRAT_28    1

1	#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;
}

#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)

# 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

make

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

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

پیشنهاد میکنم در این رابطه، این مطلب رامطالعه کنید.

امبدد لینوکس – قسمت ششم – Toolchain یا زنجیره‌ای از ابزارهای لازم برای ساختن همه چیز (بخش دوم)

برنامه 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

1 2	chmod +x myGUI ./myGUI

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

در زیر میتوانید خروجی برنامه را مشاهده کنید:

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

اگر احیاناً زیاد با الکترونیک آشنا نیستید و دنبال LCD که من از آن استفاده کردم می‌گردید می‌توانید از طریق این لینک در فروشگاه‌های مرتبط این نمایشگر را پیدا کنید

مشخصات lcd:

-4.3 Inch TFT LCD Module
– With 24-bit RGB interface (standard 40PIN interface), compatible with most current true color Interface 4.3
– Resolution 480×272

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

دانلود رایگان شماتیک و PCB برد توسعه SINUX F1

فایل های طراحی رو میتونید به صورت رایگان از گیت هاب من دریافت کنید!

در این بخش میتونید به همه قسمت‌های سری آموزش کار با تراشه F1C100S دسترسی پیدا کنید:

تگ ها :

f1c100s sinux f1

اطلاعات

لینک و اشتراک

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

LVGL

برنامه UMTPRD

دانلود رایگان شماتیک و PCB برد توسعه SINUX F1

شاید برای شما مفید باشد

عناصر حافظه در سیستم‌های دیجیتال...

بررسی Raspberry Pi 500 همراه...

نکات مونتاژ در تیراژ بالا...

امبددتک

پالت | بازار خرید و فروش قطعات الکترونیک

آیسی | موتور جستجوی قطعات الکترونیک

فروشگاه سیسوگ

سیسوگ فروم | محلی برای پاسخ پرسش‌های شما

نویسنده شو !

نویسنده شو !

پالت | بازار خرید و فروش قطعات الکترونیک

آیسی | موتور جستجوی قطعات الکترونیک

فروشگاه سیسوگ

سیسوگ فروم | محلی برای پاسخ پرسش‌های شما

دیدگاه ها

mersa گفت :

Mahdi.h گفت :

علی گفت :

Mahdi.h گفت :

Manikandan Ranganathan گفت :

Mahdi.h گفت :

Sisoog Admin گفت :

جواد گفت :

جواد گفت :

Mahdi.h گفت :

جواد گفت :

Mahdi.h گفت :

علی گفت :

Mahdi.h گفت :

Sarah گفت :

Mahdi.h گفت :

Soran گفت :

Mahdi.h گفت :

سورا گفت :

Mahdi.h گفت :

سورا گفت :

Milad گفت :

Mahdi.h گفت :

Milad گفت :

حسینی گفت :

Mahdi.h گفت :

حسینی گفت :

محمد گفت :

Mahdi.h گفت :

Mahdi.h گفت :

صاحبی گفت :

Mahdi.h گفت :

ali alibalaei گفت :

Mahdi.h گفت :

َAmir گفت :

Mahdi.h گفت :

m.h.Yazdani گفت :

نویسنده شو !

نویسنده شو !

آموزش ها

منو و لینک‌ها

شبکه‌های اجتماعی