This is a little demo of KnobMan and SkinMan on STM32F429I Discovery board.As the name suggests KnobMan is used to design knobs, sliders and SkinMan is used to design the skin of your design. Here is a simple design I used to test everything:
It consists of one background and four buttons, two for each LED.
You can download booth programs for FREE, click here . There is also a KnobGallery of many already nicely designed knobs and sliders.
One warning: this kind of drawing on display uses a lot of memory, one byte per pixel 240 x 320 = 76800 (almost 80kB for single background)!
Let’s get to it!
First we need to draw some kind of image using SkinMan:
First we set display size: Menu -> Canvas -> Image Properties…
and we set Width to 240 and Height to 320.
For the ease of explaining we wil only draw a rectangle in this tutorial. We draw it anywhere and any size, we will correct this in next step.
And then we resize it using following settings (Pos: and Size:):
To have image somehow simmilar to my demo we set following colors:
We click on Color next to Fill1 and set following: H: 76, L: 120 and S: 42
We do the same for Fill2, this time we set RGB: R:0, G:0 and B:0
For Border we use same settings as for Fill1.
Now all we need is some change to get it more 3D.
First we move setting lower to see Emboss and Texture(using slider marked with yellow).
Then we set settings for border (marked with blue).
Finally for some decoration we also set some texture (marked with red).
Now we should have this image:
We save it (File -> Save) and then we export it (File -> ExportImage) it is important to set BMP file [32bpp with alpha]:
Now we need some software to change this to some numbers. We use program named BmpCvtST.exe which is part of STEmWin package inside our CubeMX repository.
We start it and find our saved image and open it:
Then we go to File -> Save As … and we select “C” bitmap file as output format:
and click Save. This brings us to selection of color format, we select “True color with alpha, r/b swapped, alpha inverted”.
And click OK. Now we have our picture as C data!
We will conclude this part of tutorial here. In following part(s) we will use this data in our program and display image on LCD of STM32F429I-Discovery board.
