littlevgl 저작 도구가 나왔다.

리눅스 용과 Web 용으로 구분되어 나온듯 하다.

 

https://github.com/kaiakz/lv_gui_designer

 

만드신분든 대단 하다고 ~~

 

PC용도 있는것 같다.

https://github.com/rohmer/LVGL_UI_Creator/tree/Dev/UICreator

 

rohmer/LVGL_UI_Creator

Drag and Drop UI Creation for LVGL. Contribute to rohmer/LVGL_UI_Creator development by creating an account on GitHub.

github.com

 

 

저작자표시

'공부 > littlevgl' 카테고리의 다른 글

LittlevGL STM32F103RC 에서 돌려 보기  (0) 2019.05.21
LittlevGL 한글 설정  (0) 2019.05.21
LittlevGL 여러 예제 돌려 보기  (0) 2019.05.21
Littlevgl simulator 돌려보기  (0) 2019.05.21
Littlevgl 소개  (0) 2019.05.21

LittlevGL STM32F103RC 에서 돌려 보았다.

SPI 모드에서는 느린듯 함

 

 

 

'공부 > littlevgl' 카테고리의 다른 글

littlevgl 저작 도구  (0) 2019.09.24
LittlevGL 한글 설정  (0) 2019.05.21
LittlevGL 여러 예제 돌려 보기  (0) 2019.05.21
Littlevgl simulator 돌려보기  (0) 2019.05.21
Littlevgl 소개  (0) 2019.05.21

한글을 사용하기 위해서는 Windows 에 있는 한글 폰트를 컨버팅 해야 한다.

(가능하면 무료로 풀린 제한없이 사용가능한 폰트를 사용하는 것을 추천한다.)

 

사이트 내에 폰트를 추출할수 있는 기능이 있다.

 

https://littlevgl.com/ttf-font-to-c-array

 

Online TTF to C Array Unicode Font Converter | LittlevGL

LittlevGL - Open-source Embedded GUI Library LittlevGL is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and low memory footprint. If you like Littl

littlevgl.com

폰트를 찾고 해당폰트를 임의의 디렉토리에 복사해 둔다.

window 자체가 font 디렉토리에 접근하는 것을 막는다.

TTF file 에 사용할 font를 지정한다.

Name에 함수에 사용할 명칭을 지정

완성형 Font 내부에 한글 위치 지정 44032 ! 55203

Height 는 폰트 최대 높이 즉 크기지정이다.

Bpp 는 1bit-per-pixel 이라면 1개의 bit가 1개의 pixel 이라는 뜻이다.

 

"Convert" 버튼을 누르면 파일 업로드 이후 컨버팅해서 파일을 내려 받을수 있다.

 

방금전 같은 설정으로 han1.c를 다운로드 받았다.

 

해당 소스를  \lv_examples\lv_apps\demo 아래에 복사를 하고 code block 에서 컴파일 할수 있도록

프로젝트에 첨가한다.

 

han1.c 소스를 보면 아래와 같이 선언 되어 있는데

lv_font_t han1 =
{
    .unicode_first = 44032, /*First Unicode letter in this font*/
    .unicode_last = 55203, /*Last Unicode letter in this font*/
    .h_px = 16, /*Font height in pixels*/
    .glyph_bitmap = han1_glyph_bitmap, /*Bitmap of glyphs*/
    .glyph_dsc = han1_glyph_dsc, /*Description of glyphs*/
    .glyph_cnt = 11172, /*Number of glyphs in the font*/
    .unicode_list = NULL, /*Every character in the font from 'unicode_first' to 'unicode_last'*/
    .get_bitmap = lv_font_get_bitmap_continuous, /*Function pointer to get glyph's bitmap*/
    .get_width = lv_font_get_width_continuous, /*Function pointer to get glyph's width*/
    .bpp = 1, /*Bit per pixel*/
    .monospace = 0, /*Fix width (0: if not used)*/
    .next_page = NULL, /*Pointer to a font extension*/
};

 

이중 " lv_font_t han1 " 선언내용을 보고 아래와 같이 폰트를 사용가능하도록 선언 한다.

 

/**********************
* GLOBAL FUNCTIONS
**********************/
LV_FONT_DECLARE(han1); /*hangle font*/

/**
* Create a demo application
*/
void demo_create(void)
{
         lv_font_add(&han1, &lv_font_dejavu_20);

아래와 같이 사용하면 된다.

lv_label_set_text (label1, "한글" ); 

 

주의할 점은 꼭 UTF-8 포멧으로 코드를 저장해야 한다.

 

codeblock 의 경우 Setting -> Editer -> General settings -> Encoding settings 에서 설정 가능하다.

 

 

'공부 > littlevgl' 카테고리의 다른 글

littlevgl 저작 도구  (0) 2019.09.24
LittlevGL STM32F103RC 에서 돌려 보기  (0) 2019.05.21
LittlevGL 여러 예제 돌려 보기  (0) 2019.05.21
Littlevgl simulator 돌려보기  (0) 2019.05.21
Littlevgl 소개  (0) 2019.05.21

LittlevGL에 보면 다양한 예제를 볼수 있다.

따라 하기 식으로 참고 해서 보기 좋을 것같다.

소스 예제는 lv_examples 에 있다.

예제는 함수 호출 형대로 되어 있어서 해당 함수를 호출해서 확인해 볼수 있다.

원래 소스의 main() 에는 demo_create(); 만 선언 되어 있는데 아래와 같이 확인해 보기위해

다양한 함수를 불러서 볼수 있다.

/*Load a demo*/
demo_create();
//lv_test_object_1();
//lv_test_group_1();
//lv_test_stress_1();

/*Load a tutorial*/
//lv_tutorial_antialiasing();
//lv_tutorial_image();
//lv_tutorial_fonts(); //다국어 폰트, 한글 지원
//lv_tutorial_animations();
//lv_tutorial_responsive();

/*Lib a demo */
//lv_test_arc_1();
//lv_test_bar_1();
//lv_test_btn_1();
//lv_test_btnm_1();
//lv_test_cb_1(); //폰트test, 한글
//lv_test_chart_1();
//lv_test_cont_1();
//lv_test_ddlist_1();
//lv_test_gauge_1();
//lv_test_img_1();
//lv_test_imgbtn_1();
//lv_test_kb_1();
//lv_test_kb_2();
//lv_test_label_1();
//lv_test_led_1();
//lv_test_line_1();
//lv_test_list_1(); //이미지버튼
//lv_test_lmeter_1();
//lv_test_mbox_1();
//lv_test_page_1();
//lv_test_page_2();
//lv_test_preload_1();
//lv_test_roller_1();
//lv_test_slider_1();
//lv_test_sw_1();
//lv_test_ta_1();
//lv_test_ta_2();
//lv_test_table_1();
//lv_test_table_2();
//lv_test_tabview_1();
//lv_test_tileview_1();
//lv_test_win_1();


/*Try the benchmark to see how fast is your GUI*/
//benchmark_create();

//sysmon_create();
//terminal_create();
//tpcal_create();

예를 들어 demo_create(); 를 죽이고 lv_test_object_1(); 를 살리면 아래와 같은 화면을 볼수 있다.

'공부 > littlevgl' 카테고리의 다른 글

littlevgl 저작 도구  (0) 2019.09.24
LittlevGL STM32F103RC 에서 돌려 보기  (0) 2019.05.21
LittlevGL 한글 설정  (0) 2019.05.21
Littlevgl simulator 돌려보기  (0) 2019.05.21
Littlevgl 소개  (0) 2019.05.21

Littlevgl 은 저작 도구가 없어 화면구성을 직관적으로 보기가 어렵다.

그나마 다행이도 Simulator 를 사용해 비슷하게 확인할수 있는 방법이 있다.

 

먼저 windows 환경에서 편리하고 친숙하게 사용하고 싶었다.

 

github.com/littlevgl 에 보면 Eclipse, qt , platformio , visual studio , codeblocks 등이 있는데

 

이중 codeblocks 을 선택 했다.

 

1. codeblocks 사이트에 가면 ("http://www.codeblocks.org/") 컴파일러까지 함께 설치 할수 있는

   버전을 다운받아 설치 한다. (" codeblocks-17.12mingw-setup.exe")

 

해당버전을 설치 하면 바로 컴파일이 가능하다.

 

2. github에서 시뮬레이션 관련 코드 받기 ("https://github.com/littlevgl/pc_simulator_win_codeblocks")

codeblocks 용으로 되어 있는 소스를 다운받는다.

단 lv_drivers, lv_examples , lvgl은 별도로 다운받아 합쳐야 한다.

 

3. codeblocks에서 해당 소스의 프로젝트를 읽어서 컴파일후 실행한다. (프로젝트로 읽어야 함)

"Build and run" 버튼을 이용하면 된다.

 

4. 실행 ("Build and run" 버튼)

아래는 실행화면이다. 보다시피 UTF-8 포멧으로 했을때 한글도 잘 출력한다.

 

(주의 사항 : 가끔 시뮬레이터를 죽이면 디버깅 모드에서 코드블럭이 빠져나오지 못하는 경우가 있는데

이때는 프로세서를 강제로 죽이면 된다. "ctrl+alt+del -> 작업 관리자 이용")

'공부 > littlevgl' 카테고리의 다른 글

littlevgl 저작 도구  (0) 2019.09.24
LittlevGL STM32F103RC 에서 돌려 보기  (0) 2019.05.21
LittlevGL 한글 설정  (0) 2019.05.21
LittlevGL 여러 예제 돌려 보기  (0) 2019.05.21
Littlevgl 소개  (0) 2019.05.21

Google 에서 검색하면 딱하니 "LittlevGL - Open-source Embedded GUI Library" 라고 나온다

 

Embedded GUI Library 라고 하면 다양하게 나오는데 상업용으로 많이 쓰이는 TouchGFX,Emwin 등이

대표적인 예이다.

 

그런데 무료로 쓸수 있는 좋은 그래픽 라이브러리를 찾던중 LittlevGL 을 찾게 되었다.

 

대략적으로 시험해본 결과 생각보다 빨랐으며 C로 되어 있어 이식이 좋은 편인듯 하다.

그리고 컴파일 사이즈가 타 라이브러리에 비해 비교적 작은 사이즈 였다.

 

아직 수작업으로 화면을 편집해야 하는 문제가 있으나 무료인점을 감안하면 정말 좋은 라이브러리 인듯 하다.

 

 

해당 사이트  : https://littlevgl.com/

 

LittlevGL - Open-source Embedded GUI Library

Powerful building blocks buttons, charts, lists, sliders, images etc Advanced graphics with animations, anti-aliasing, opacity, smooth scrolling Various input devices touch pad, mouse, keyboard, encoder etc Multi language support with UTF-8 encoding Fully

littlevgl.com

메뉴얼 배포 사이트  : https://docs.littlevgl.com/

 

LittlevGL documentation

Welcome Written for v5.3, revision 2 Welcome LittlevGL Embedded GUI Library LittlevGL is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and low memo

docs.littlevgl.com

소스 배포 사이트 : https://github.com/littlevgl

 

LittlevGL

Open-source Embedded Graphics Library. LittlevGL has 29 repositories available. Follow their code on GitHub.

github.com

 

 

 

 

( MIT 라인센스

  1. 이 소프트웨어를 누구라도 무상으로 제한없이 취급해도 좋다. 단, 저작권 표시 및 이 허가 표시를 소프트웨어의 모든 복제물 또는 중요한 부분에 기재해야 한다.
  2. 저자 또는 저작권자는 소프트웨어에 관해서 아무런 책임을 지지 않는다.)

 

'공부 > littlevgl' 카테고리의 다른 글

littlevgl 저작 도구  (0) 2019.09.24
LittlevGL STM32F103RC 에서 돌려 보기  (0) 2019.05.21
LittlevGL 한글 설정  (0) 2019.05.21
LittlevGL 여러 예제 돌려 보기  (0) 2019.05.21
Littlevgl simulator 돌려보기  (0) 2019.05.21

+ Recent posts

티스토리툴바