Merit +1, use AiPi-Eyes-S1 to make an electronic wooden fish
Ai-Thinker
Ai-Thinker focuses on IoT module, antenna, RF test, cloud and PCBA service, to provide customers with one-stop solution
As soon as the wooden fish sounds, all your troubles will disappear~ Knock on the electronic wooden fish and enjoy your cyberspace life. How much merit have you accumulated today?
The first tutorial of 2024 is here. In this article, we learn how to add LVGL events and create an electronic wooden fish. Wish you all the best in 2024 and may all your wishes come true! Next, let’s take a look at how to use?AiPi-Eyes-S1 to make an electronic wooden fish.
Video
01
GUI-Guider UI design
First, create a new project.
Enter the UI design interface directly. Two components are used here, one is a picture button and the other is a text box.
?
First add a picture button, which requires a wooden fish picture. You can add any pattern you like. Remember to adjust the size ratio. It is recommended to prepare two identical pictures. The difference lies in their sizes, one large picture + one small picture. The large picture is added to the picture after release, and the small picture is added to the picture when pressed. This will achieve the changing effect of knocking down.
Add a text box, fix the position first, and enter the words "merit +1" in the text on the right.? At this point, the required components have been added successfully.
Next, add the event of the picture button. The effect to be achieved is to move the text box of "merit +1" upward when the picture (wooden fish) is pressed, and to hide the "merit +1" when the picture (wooden fish) is released. This effect is that when clicked, "merit +1" will appear floating out.
?
1. Click the imgbtn_1, picture button on the left
2. Click the finger icon event setting. Only two events need to be configured, Pressed (pressed) and Released (released).
?
3. Click pressed, select label_1, which is the text box, in the component, check Move under the Animation option, and set the coordinates that need to be moved, which is the final position of label_1 after pressing, as shown in the figure below. The x coordinate is 206, the y coordinate is 25, the Animation effect is linear, and the duration is 50ms, which is the duration of the entire movement process.
4. Return to the previous layer, click Released, select lable_1 in the component, first check visualization under General, and select Hide, that is, the text box will be hidden after we release the button.
5. Next, check Move under Animation and move the text box after pressing the picture back to its original position (that is, the initial coordinate position, x coordinate 206, y coordinate 45). Select linear for animation, and the duration is 0 seconds. It's just teleportation. This will move the text box 20 pixels along the Y axis when the image is pressed, and then move the text box back to its original position and hide it when the image is released. You can achieve the effect of "merit +1" floating out.
Remember to have a try to run it and see the effect of the simulator. The required project files will also be generated here
02
File migration
It is recommended to use FreeRTOS to add a task to refresh the LVGL screen. Put the files that were not transplanted last time, that is, the .c and .h files of lv_user_config together. The files can be copied from the UI under components under AiPi-Radar-WakeUp. The method will not be described again.
?
Since this refresh of LVGL requires FreeRTOS, you also need to copy FreeRTOSConfig.h under config and place it in the project directory. At the same time, modify the proj.conf file, add set(CONFIG_FREERTOS 1), and enable RTOS.
领英推荐
Secondly, add and compile all files through CMakeLists.txt. CMake is attached here.
Add a task in Main and attach the complete list for your reference.
03
Add wooden fish tapping audio
In order to facilitate production, the 8388 driver was also transplanted to components and some configuration files were modified. The driving principle is that I2S drives the 8388 chip, burns audio files into flash, and then outputs the audio files through dma in the interface.
The audio file found here is in wav format and the sampling rate is 44100.
Put the audio file into it, and then modify flash_prog_cfg.ini to burn the audio file into flash. You can refer to the method in the screenshot. The starting address can be referred to the flash teaching blog post. Here, select 0x230000. If you are burning multiple files, Remember to calculate the file size to make sure the address spaces are not duplicated.
Add a muyu_8388_pcm.h file to define the starting address and size of Muyu audio. The initialization function here already exists in 8388_pcm.c, you only need to write a voice_MuYu function.
Modify the 8388_pcm.c file and write a play function. This function also calls the play_voice interface, and the parameters are the address and size of the audio file. At the same time, the initialization of i2s is modified, and the sampling rate is 44100.
Remember to initialize the 8388 chip in the main function.
Modify events_init.c in the LVGL project. This file is the event control file. Add the muyu_8388_pcm.h header file and add an audio playback interface to the Pressed event.
Let’s see the final effect
04
Code and other documents
●Code：AiPI-Eyes-S1——LVGL
●AiPi series toturial：
?
●AiPi open source hardware documents：
?
For the AiPI-Eyes-S1 sample, pls access: Alibaba store
Welcome to follow us for more information!