【STM32U599J-DK】 Hello 2024——Vector Graphics Experience

lugl4313820

【STM32U599J-DK】 Hello 2024——Vector Graphics Experience [Copy link]

Today is Christmas in the West. I wish all Westerners a happy Christmas.

[Purpose] Difficult vector graphics display

【experiment equipment】

Stm32U599J-DK Development Board

【develop software】

1. stm32CubeIDE
2. TouchGFX Designer 4.23

【Experimental steps】

1. Carefully study the official tutorial SVG graphics display: https://support.touchgfx.com/zh-CN/docs/development/ui-development/ui-components/images/svg-image.
2. Official demo:
   
3. Generate SVG image

   <?xml version="1.0" encoding="UTF-8" ?>
   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
   <svg width="150pt" height="44pt" viewBox="0 0 150 44" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <g id="#fb944dfb">
   <path fill="#fb944d" opacity="1.00" d=" M 9.80 26.58 C 16.10 23.97 17.65 16.89 20.98 11.68 C 25.92 12.27 20.13 17.51 19.31 20.02 C 23.09 18.52 27.25 18.46 30.39 21.35 C 28.43 23.54 25.73 24.64 22.96 25.40 C 22.50 29.68 22.63 33.99 22.13 38.27 C 19.83 37.09 17.50 35.91 15.50 34.24 C 14.80 34.09 13.38 33.78 12.67 33.63 C 12.85 30.48 14.77 27.55 17.84 26.55 C 17.41 29.12 16.71 31.63 15.89 34.09 C 17.21 33.98 18.54 33.88 19.87 33.81 C 20.10 30.07 20.13 26.29 19.24 22.63 C 17.24 24.50 15.15 26.46 12.20 26.24 C 11.56 29.42 10.89 32.62 10.96 35.88 C 10.41 36.27 9.31 37.05 8.76 37.44 C 8.60 33.81 8.76 30.18 8.70 26.54 C 6.96 28.06 5.29 29.69 3.20 30.72 C 6.19 25.14 9.18 19.56 11.72 13.76 C 12.55 14.64 13.38 15.53 14.21 16.41 C 12.34 19.61 9.65 22.64 9.80 26.58 M 20.38 22.47 C 21.13 23.87 25.25 23.20 24.80 21.29 C 23.38 20.48 21.35 21.29 20.38 22.47 Z" />
   <path fill="#fb944d" opacity="1.00" d=" M 67.90 14.17 C 72.20 9.81 81.06 11.60 81.71 18.27 C 81.40 24.66 75.42 28.43 71.08 32.26 C 74.53 32.11 78.00 32.00 81.37 31.20 C 82.08 39.64 71.75 33.96 67.03 35.97 C 66.91 35.20 66.69 33.68 66.57 32.91 C 69.97 28.51 75.82 26.27 77.95 20.88 C 78.96 18.43 77.32 16.39 75.67 14.77 C 72.55 14.62 70.35 16.76 68.11 18.58 C 68.04 17.11 67.96 15.64 67.90 14.17 Z" />
   <path fill="#fb944d" opacity="1.00" d=" M 86.52 16.62 C 88.46 11.93 95.35 10.08 98.80 14.19 C 104.32 20.60 102.27 31.24 95.62 36.10 C 85.08 37.94 82.53 23.81 86.52 16.62 M 90.05 16.26 C 87.27 21.68 86.47 30.46 92.95 33.48 C 101.55 31.20 100.40 11.29 90.05 16.26 Z" />
   <path fill="#fb944d" opacity="1.00" d=" M 104.89 18.63 C 102.47 10.07 117.27 9.52 118.08 17.00 C 119.58 24.23 112.20 28.19 107.76 32.38 C 111.26 32.17 114.81 32.11 118.21 31.15 C 119.00 39.84 108.53 33.74 103.69 36.00 C 103.35 27.68 116.40 26.46 115.20 17.37 C 114.26 16.54 113.33 15.70 112.41 14.85 C 109.29 14.61 107.19 16.95 104.89 18.63 Z" />
   <path fill="#fb944d" opacity="1.00" d=" M 121.13 26.92 C 125.20 21.39 129.27 15.54 134.83 11.41 C 135.22 16.36 134.95 21.32 134.76 26.26 C 135.66 26.06 137.47 25.65 138.37 25.45 C 138.32 26.34 138.20 28.12 138.15 29.01 C 137.38 29.03 135.85 29.07 135.08 29.09 C 135.32 32.09 135.31 38.02 130.85 35.34 C 131.25 33.34 131.76 31.32 131.65 29.26 C 128.46 29.14 125.30 29.77 122.14 30.09 C 121.89 29.30 121.38 27.72 121.13 26.92 M 124.61 26.22 C 127.03 26.14 129.45 26.05 131.87 25.98 C 131.82 23.17 131.81 20.36 131.78 17.54 C 129.16 20.24 126.71 23.10 124.61 26.22 Z" />
   <path fill="#fb944d" opacity="1.00" d=" M 44.81 13.66 C 45.41 14.09 46.59 14.95 47.18 15.38 C 46.68 18.15 46.05 20.90 45.90 23.72 C 47.46 21.78 48.73 19.60 49.35 17.18 C 51.62 16.50 53.90 15.84 56.17 15.14 C 57.44 15.56 58.72 15.97 60.00 16.36 C 60.00 16.95 60.02 18.12 60.02 18.71 C 59.00 19.50 57.98 20.29 56.95 21.09 C 56.97 21.84 57.02 23.36 57.04 24.12 C 58.92 24.08 60.80 24.00 62.69 23.94 C 63.20 25.38 63.73 26.82 64.23 28.26 C 62.12 28.02 60.05 27.55 58.02 26.94 C 58.46 31.35 57.45 35.64 55.79 39.69 C 51.35 38.48 47.74 35.48 45.25 31.68 C 43.88 33.83 41.92 35.38 39.26 35.27 C 39.19 34.54 39.07 33.09 39.01 32.36 C 40.47 32.16 41.94 31.96 43.41 31.77 C 42.51 30.47 41.57 29.20 40.68 27.90 C 38.42 29.22 35.12 30.28 35.70 26.37 C 38.08 25.58 40.91 25.50 42.83 23.73 C 44.36 20.61 43.99 16.99 44.81 13.66 M 49.44 21.81 C 49.23 23.33 49.03 24.85 48.84 26.38 C 50.63 25.72 52.40 25.01 54.17 24.30 C 53.74 23.12 53.29 21.95 52.84 20.78 C 54.82 20.10 56.22 18.82 56.17 16.59 C 53.61 17.89 51.64 20.01 49.44 21.81 M 45.41 25.96 C 41.13 29.38 49.17 28.96 45.41 25.96 M 46.62 29.35 C 47.67 30.35 48.75 31.32 49.83 32.31 C 49.96 33.50 50.10 34.70 50.24 35.89 C 51.57 35.96 52.90 36.03 54.24 36.11 C 54.90 33.39 55.06 30.59 55.00 27.80 C 52.19 28.24 49.43 28.93 46.62 29.35 Z" />
   <path fill="#fb944d" opacity="1.00" d=" M 24.66 25.64 C 26.50 26.98 28.32 28.34 30.21 29.59 C 30.34 31.74 29.51 33.53 27.61 34.60 C 26.47 31.67 25.27 28.74 24.66 25.64 Z" />
   </g>
   </svg>

   
   
   [Note] Currently the compiler does not handle SVG images with text tags, and will report an error during compilation. So I spent a day learning how to generate images myself, and then found a professional conversion tool, and tried N times before I succeeded.
4. Generate a blank project and add your own SVG image to the project.
   
5. After generating the project, add the code to move the picture:

#include <gui/screen1_screen/Screen1View.hpp>

Screen1View::Screen1View():tick(0),state(0)
{

}

void Screen1View::setupScreen()
{
	svgImage2024.moveTo(240, 480);
    Screen1ViewBase::setupScreen();
}

void Screen1View::tearDownScreen()
{
    Screen1ViewBase::tearDownScreen();
}
void Screen1View::svgImage1_handle()
{
	static int svgimg1y = -152;

	if(svgimg1y < 34)
	{
		svgimg1y++;
		svgImage1.setY(svgimg1y);
		svgImage1.invalidate();
	}
	else
	{
		state = 1;

	}
}

void Screen1View::svgImage2024_handle()
{
	static int svgImage2024y = 480;
	static float s = 0.1;
	if(svgImage2024y>250)
	{
		svgImage2024y --;

		svgImage2024.setScale(0.6f + s);
		svgImage2024.resizeToCurrentSVG();
		svgImage2024.setY(svgImage2024y);
		svgImage2024.setX(svgImage2024.getX() - 1);
		svgImage2024.invalidate();
        s = s+0.01;
	}
	else
	{

		state = 3;
	}
}

void Screen1View::svgImageChris_handle()
{
	static int svgImageChrisy = 480;
	if(svgImageChrisy>200)
	{
		svgImageChrisy --;
		svgImageChris.setY(svgImageChrisy);
		svgImageChris.invalidate();

	}
	else
	{

		state = 2;
	}
}

void Screen1View::handleTickEvent()
{
	tick ++;
	if(state == 0)
	{
		svgImage1_handle();
	}
	else if(state == 1)
	{
		svgImageChris_handle();
	}
	else if(state == 2)
	{
		svgImage2024_handle();
	}

}

[Experimental results]

矢量图形体验

jobszheng5

This vector font display is really great.

Very eye-catching

freebsder

Vector fonts are indeed better looking than dot matrix

lugl4313820

freebsder posted on 2023-12-26 15:14 Vector fonts are indeed better looking than dot matrix

Advantage: one font library is enough; disadvantage: it takes up memory; I only used graphics and the font library has not been found yet.

chejm

The effect picture achieved by this technology provided by the OP is so cool, it is worth collecting and learning. Thanks for sharing

lugl4313820

chejm posted on 2023-12-27 16:30 The effect diagram of this technology provided by the OP is so cool, it is worth collecting and learning, thank the OP for sharing

Thank you for your attention. Keep learning and share what you have learned. That is the greatest joy in life!

damiaa

ST has indeed put in a lot of effort, and domestic chips still have a lot of work to do to catch up.

lugl4313820

damiaa posted on 2023-12-28 09:06 ST has indeed put in a lot of effort, and domestic chips still have to work hard to catch up.

TouchGFX is indeed possible. I plan to use ST to develop some graphical applications in the future.