Properly Simulate Small Screen on Visual Studio

How-to
1

Description

I am not able to properly simulate a small screen on Visual Studio.

What MCU/Processor/Board and compiler are you using?

Simulator on Visual Studio

What do you want to achieve?

I want to properly simulate a small screen. As of now I started with a basic button but it runs out of screen. The size of the button is also too big.

How can I get everything to fit perfectly ?

What have you tried so far?

Change these in lv_conf.h

#define LV_HOR_RES_MAX          (128)
#define LV_VER_RES_MAX          (64)
#define LV_COLOR_DEPTH     1

Code to reproduce

I used this code to create a button

lv_obj_t * label;

lv_obj_t * btn1 = lv_btn_create(scr, NULL);
lv_obj_set_event_cb(btn1, event_handler);
lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, -40);
lv_btn_set_fit(btn1, LV_FIT_TIGHT);

label = lv_label_create(btn1, NULL);
lv_label_set_text(label, "Button");

Screenshot and/or video

image

2

I had to also change the WINDOW_HOR_RES and WINDOW_VER_RES found in lv_drv_conf.h.

#  define WINDOW_HOR_RES      128
#  define WINDOW_VER_RES      64
3

I am using the pre-configured project.

It was setup like this.

#define USE_WINDOWS         0
#if USE_WINDOWS
#  define WINDOW_HOR_RES      480
#  define WINDOW_VER_RES      320
#endif

So I did not change these.

4

Sorry, I forgot that it was defaulted to 0. I am using a Windows machine and mine looks like this:

#ifndef USE_WINDOWS
#  define USE_WINDOWS       1
#endif

#if USE_WINDOWS
#  define WINDOW_HOR_RES      480
#  define WINDOW_VER_RES      272
#endif

Prior to changing the USE_WINDOWS define to a 1 my window was not resized to my resolution.

5

There is a difference between the CodeBlocks and Visual Studio projects, and it looks like some things are getting mixed up.

  • USE_MONITOR (and the MONITOR_XXX settings) control the SDL driver. This is what the Visual Studio project uses. I think that @il3ven is looking for MONITOR_HOR_RES and MONITOR_VER_RES.
  • USE_WINDOWS (and the WINDOW_XXX settings) control the native Windows driver, which I quickly wrote about 9 months ago to ease the learning curve for Windows users (who often have difficulties getting SDL/Visual Studio working). That driver is currently only used with the CodeBlocks project.

I’m not sure how, with default settings, @tarvik managed to get their screen to resize using the USE_WINDOWS options (unless they had already switched to the Windows driver, **or they were using CodeBlocks).

6

Ah, thanks for the clarification. I am indeed simulating with CodeBlocks.

7

You move the button up with 40 px, and now it’s partially out of the screen. It seems correct to me.
Try lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, 0);

Keen in mind, lv_obj_align should be called when the size of the object is set. If you add a label and the button has LV_FIT_TIGHT, the button’s size will change according to the label size. So just add lv_obj_align after adding the label.

8

This problem has partially been solved. Thank you all for your help.

To fit the button on screen I used lv_obj_set_width(). This has solved my problem for now.

I was expecting LittlevGL to resize the button automatically according to my screen size. Therefore I was thinking that maybe I have not set my resolution correctly.

This is my solution to properly fit a button.

lv_obj_t * btn1 = lv_btn_create(scr, NULL); 
lv_obj_set_width(btn1, LV_HOR_RES);     //Button width is set to maximum
lv_obj_set_height(btn1, LV_DPI/7);     //Button takes 1/7th of an inch
lv_obj_align(btn1, label1, LV_ALIGN_OUT_BOTTOM_MID, 0, 0); //This properly aligns my button corresponding to label1