Create Engaging Interactive Interface with micro:bit V2 & 2.0 Inch LVGL ESP32-S3 IPS Screen

Introduction

In this guide, we’ll explore how to create interactive projects using the micro:bit V2 board and 2.0 Inch LVGL ESP32-S3 IPS Screen. This setup will teach you how to display a variety of information, from text and graphics to dynamic widgets, using MakeCode programming. By combining these tools, you can effectively visualize data, enrich educational experiences, engage students, and bring your STEM projects to life.

HARDWARE LIST
1 micro:bit V2 board
1 micro:bit IO expansion board
1 Gravity: 2.0 Inch LVGL ESP32-S3 IPS Screen with 8M Flash (320×240, I2C and UART)
1 PH2.0-4P jumper wire
1 USB cable

Software

- MakeCode programming platform: Click here to open MakeCode

- MakeCode I2C library address: https://github.com/DFRobot/pxt-DFRobot_lcdDisplay

Hardware Connection Diagram

Here we use MakeCode programming platform, so this product only supports I2C communication.

 

I2C communication connection diagram
I2C communication connection diagram

Function

1. DIY an Unique Digital Memory Book

Background Color or Image Display
 

This function can set the background color of the display or display a custom image from the USB drive (fixed resolution 320×240). The background color or image display function can personalize a digital memory book, making it easier to highlight important memories and cherish special moments. Beyond that, these features can be used in various scenarios, such as in educational projects where students can use images to better understand the content.

 

 

2. DIY a Digital Calendar Alarm Clock

Text Display

This function can display text, time, and date.

Note: Each display type has a corresponding number. For example, text, icon, widget, graphics, etc., each type can be assigned a number up to 255. Each number corresponds to the text, so each text can be deleted by specifying the number. The text display function on a digital calendar alarm clock can show the time, date, and important reminders, making it easier to stay organized and on schedule. It can also display personalized messages, enhancing daily routines. Beyond that, this function can be used in various scenarios, such as in educational projects to show real-time data or messages, and in games to present scores or instructions, enriching the overall experience.

 

3. DIY a Random Choice Generator

Icon display

This function can display icons and animations stored in the USB drive. Icons can be updated in terms of position and size, while animations can only be modified in terms of position and cannot change the size. The icon display function on a Random Choice Generator allows you to show and customize icons and animations from a USB drive. For instance, it can display food emojis to help users decide what to eat today, making it easier for those with decision-making difficulties. Additionally, this function can be used in various other scenarios: in games, it can show animated graphics for dynamic effects, enhancing both the visual appeal and functionality of the project.

 

4. DIY an Imaginative Graphic Drawing

Basic Graphics Display

This function can display basic graphics such as lines, rectangles, circles, triangles, etc. on the display. The position, size, border color, fill color, and other parameters can be modified. The basic graphics display function on an imaginative graphic drawing tool allows you to create pictures using only lines, rectangles, circles, and triangles. It’s perfect for exploring creativity through geometric shapes. Additionally, this function can be used in various other scenarios: it’s useful for visualizing concepts in education, and enhancing visuals in games, making them more engaging and visually appealing.

 

5. DIY Practical Measuring Devices

5.1 DIY an environmental data monitoring progress bar

You need to create a progress bar widget first, and then set the value to be displayed on the progress bar. This widget can be modified in terms of position, size, and color, and can also be deleted. This feature is ideal for environmental data monitoring devices to see dynamic changes at a glance. You can present this feature as either a bar or a slider, depending on your preferred visual style.

 

Bar Function

 

Bar Function

 

Slider Function

 

Slider Function

5.2 DIY an electronic compass

Compass Function

You need to create the compass widget first, and then set the value to be displayed on the compass pointer. This widget can be modified in terms of position, size, and can also be deleted. This feature is perfect for making an electronic compass, which is very useful for orientation learning or even outdoor activities!

 

 

 

 

5.3 DIY a visualized thermometer

Gauge Function

You need to create the gauge widget first, and then set the value to be displayed on the gauge. This widget can be modified in terms of position, size, starting and ending scale, base color, and pointer color, and can also be deleted. This function can be used to create thermometers, smart scales, and so on, which can measure precise data such as liquid temperature, object mass, and so on.

 

 

 

5.4 DIY a physical quantity gauge

Linear Gauge Function

You need to create the linear gauge widget first, and then set the value to be displayed on the linear gauge. This widget can be modified in terms of position, size, starting and ending scale, base color, and pointer color, and can also be deleted. This function is ideal for creating physical quantity gauges, such as measuring velocity, acceleration, etc.

 

 

 

5.5 DIY an experimental chart recorder

Chart Function

Step 1: You need to create the chart widget first, set the content of the horizontal and vertical axes, chart background color, and chart style (there are 3 types: 1-line shadow chart, 2-bar chart, 3-line shadow chart).

Step 2: Create the color for the chart data series.

Step 3: Add data to the chart data series, including data name, data group name, and the number of data points to be displayed.

(The number of data points displayed should be set according to the screen size, as the space for displaying the horizontal axis content is limited)

The colors and styles of the chart widget can be modified. The colors of the chart data series can also be modified. The chart can also be deleted. This function is ideal for creating experimental chart recorders that can help students visualize experimental data, etc.

 

Conclusion

By following this guide, you've unlocked the potential to create engaging and interactive projects with the micro:bit V2 and the 2.0 Inch LVGL ESP32-S3 IPS Screen. Whether you're crafting personalized digital memory books, innovative educational tools, or practical measuring devices, these functions offer endless possibilities for creativity and learning. Now that you’ve mastered these techniques, it’s time to bring your ideas to life and see how these versatile functions can enrich your STEM projects.

License
All Rights
Reserved
licensBg
0