BRT Community
General Category => Discussion - EVE => Topic started by: Prog_11 on December 03, 2019, 10:46:37 AM
-
Hello,
I use the EVE Screen Editor v3.1.2 with a FT801 device, and I can not solve the following problem:
I want to paint an image on the screen, which has basically two "layers". On the first, rear (in the background) layer there should be a gradient. On the second, front Layer I want to paint a half transparent (alpha = 128) white surface so that the gradient shines through that surface. That surface should be interrupted by a wide contour of a circle, so that you see the rear layer with the gradient along that contour. All edges should be painted with antialias.
I have tried so many solving approaches and combinations of the standard commands like CLEAR, CMD_GRADIENT, COLOR_MASK, COLOR_A, ALPHA_FUNC, VERTEX2II, ... but dont get it.
Who can help me???
-
Hello,
You may find this book of graphics techniques to be useful. This module uses an EVE device and so the same co-processor commands as all our examples, just via a different library.
http://excamera.com/files/gd2book_v0.pdf (http://excamera.com/files/gd2book_v0.pdf)
I believe the following scissor, stencil and alpha examples should get you on your way to creating the image you desire.
For scissors, the idea is to define an area of the screen which will be updated. You define the top-left coordinate (xy) of a virtual box and then the size in x and y of the box, thereby defining an area of the screen. When you perform a graphics operation, only the area of the screen in the box is affected. To go back to adding items over the full screen, you set the scissor xy back to (0,0) and scissor size to be the full screen. Below, the red rectangle (as dimensioned by the two cursors shown) only paints within a 100x100 box which has coordinate (100,100) at the top left due to the scissors.
** see scissors.png **
CLEAR_COLOR_RGB(128, 255, 158)
CLEAR(1, 1, 1)
SCISSOR_XY(100, 100)
SCISSOR_SIZE(100, 100)
COLOR_RGB(255, 0, 0)
BEGIN(RECTS)
VERTEX2II(64, 50, 0, 0)
VERTEX2II(365, 203, 0, 0)
END()
For Stencil, we use three steps below to draw the polygon. There are many ways to do this and one may be more efficient for a particular situation but here is the general principle:
** see stencil.png **
First, we use a stencil operation to define how the stencil buffer is affected by writes to the screen. By setting it to INCR, INCR, then each time we place an item, the stencil buffer is incremented for each pixel drawn. We mask off the colours so that nothing is visible and then draw the shapes, taking care that they overlap such that the pixels we want for the final shape are incremented twice. The first pair of vertices draw the left image and the second pair draw the right image. The desired area is therefore only drawn over once. All other parts of the screen are either not touched or drawn twice.
CLEAR(1, 1, 1)
COLOR_RGB(255, 0, 0)
STENCIL_OP(INCR,INCR)
COLOR_MASK(0,0,0,0) //mask all the colors
BEGIN(EDGE_STRIP_L)
VERTEX2II(300,100,0,0)
VERTEX2II(200,200,0,0)
VERTEX2II(400,200,0,0)
VERTEX2II(300,100,0,0)
END()
Then we re-enable the colours and draw another edge strip. The stencil func causes only areas with 1 in the stencil buffer to be rendered.
COLOR_MASK(1,1,1,1) //enable all the colors
STENCIL_FUNC(EQUAL,1,255)
BEGIN(EDGE_STRIP_L)
VERTEX2II(480,0)
VERTEX2II(480,272)
END()
Finally, we can draw an outline using a line strip. The stencil is set back to ‘always draw’ so that we can draw anywhere on the screen.
STENCIL_FUNC(ALWAYS,0,255)
LINE_WIDTH(16)
COLOR_RGB(255, 255, 255)
BEGIN(LINE_STRIP)
VERTEX2II(300,100,0,0)
VERTEX2II(200,200,0,0)
VERTEX2II(400,200,0,0)
VERTEX2II(300,100,0,0)
VERTEX2II(300,100,0,0)
END()
DISPLAY()
The Alpha value will specify the transparency of an item drawn on the screen. If the alpha value was set to 255 before an item is drawn, the item will be drawn as a solid colour. If the alpha is reduced toward 0, the item will become more transparent and any items underneath will be visible.
** see alpha.png **
CLEAR_COLOR_RGB(0, 0, 0)
CLEAR(1, 1, 1)
POINT_SIZE(1600)
BEGIN(POINTS)
COLOR_RGB(255, 0, 0)
COLOR_A(255)
VERTEX2II(120, 146, 0, 0)
COLOR_RGB(0, 255, 0)
COLOR_A(128)
VERTEX2II(256, 153, 0, 0)
COLOR_RGB(0, 0, 255)
COLOR_A(128)
VERTEX2II(186, 104, 0, 0)
END()
Best Regards,
BRT Community
-
Hi,
thank you for your answer. But unfortunately it doesn't help me. The gf2book (The Gameduino 2) I already know very well, but it doesn't help me, too. I already programmed complex blending operations, but this problem which I described does not want to be solved... scissor and stencil are not helpful in my case.
I would be very grateful for a principal code for the problem.
In the attachments you can see a screenshot of my principal purpose. But as you can see
- there are alias effects,
- the gradient in the inner circle is not the same like outside the circle
-
Can nobody help me? Does anyone have an idea?
-
Hello,
Can you provide the display list that you are using?
Best Regards,
BRT Community
-
Hello,
here is my display list. But in the heat of battle it seems I have not stored the version I have sent in the picture. As you can see, in the version below there is a gray dot in the middle.
CLEAR(1, 1, 1)
CMD_GRADIENT(17, 64, 0x0075AF, 230, 226, 0xA6F1FF)
COLOR_MASK(0, 0, 0, 1)
BLEND_FUNC(ONE, ONE_MINUS_SRC_ALPHA)
COLOR_A(255)
BEGIN(POINTS)
POINT_SIZE(1000)
VERTEX2II(133, 176, 0, 0)
COLOR_MASK(1, 1, 1, 0)
BLEND_FUNC(ONE_MINUS_DST_ALPHA, SRC_ALPHA)
BEGIN(RECTS)
VERTEX2II(0, 0, 0, 0)
VERTEX2II(239, 319, 0, 0)
COLOR_MASK(0, 0, 0, 1)
COLOR_A(128)
BLEND_FUNC(ZERO, ONE_MINUS_SRC_ALPHA)
BEGIN(POINTS)
POINT_SIZE(500)
VERTEX2II(133, 177, 0, 0)
COLOR_MASK(1, 1, 1, 0)
BLEND_FUNC(ONE_MINUS_DST_ALPHA, DST_ALPHA)
BEGIN(RECTS)
VERTEX2II(0, 0, 0, 0)
VERTEX2II(239, 319, 0, 0)
-
Hello,
Can you have a look at the below display list, where the two circles are stencilled and a background gradient is used which appears through the centre of the 'ring' and the 'ring' itself has a separate gradient. I believe basically this is what you are trying to achieve.
CLEAR(1, 1, 1)
COLOR_MASK(0, 0, 0, 0)
STENCIL_OP(INCR,INCR)
BEGIN(POINTS)
POINT_SIZE(500)
VERTEX2II(400, 240, 0, 0)
POINT_SIZE(1000)
VERTEX2II(400, 240, 0, 0)
STENCIL_OP(KEEP, KEEP)
COLOR_MASK(1, 1, 1, 1)
STENCIL_FUNC(ALWAYS, 0, 255)
CMD_GRADIENT(342, 170, 0x55007F, 473, 284, 0xAAAA00)
STENCIL_FUNC(EQUAL, 2, 1)
CMD_GRADIENT(352, 160, 0xFF0000, 493, 283, 0xAA00FF)
STENCIL_FUNC(ALWAYS, 0, 255)
CMD_TEXT(375, 326, 28, 0, "Text")
Best Regards,
BRT Community
-
Hallo,
Thank you for your answer. But as you can see in your example there are unfortunately alias affects which I have to avoid and you don't use transparency (see picture attached). I thought it is possible to simply create the ring in the alpha channel and then combine the channel using BLEND_FUNC with the gradient background. But this doesn't work. Do you have an other solution?
-
Hello,
Have you though about using a bitmap image in place of trying to render the image via commands?
Best Regards,
BRT Community
-
Hello,
this is no option because the elements have to move on the screen independently and this is just the basic concept for many more following objects on the screen...
Is there another solution?
-
Hello,
I will pass this on to the development team to see if they have any suggestions.
Best Regards,
BRT Community
-
Hello,
here is my display list. But in the heat of battle it seems I have not stored the version I have sent in the picture. As you can see, in the version below there is a gray dot in the middle.
CLEAR(1, 1, 1)
CMD_GRADIENT(17, 64, 0x0075AF, 230, 226, 0xA6F1FF)
COLOR_MASK(0, 0, 0, 1)
BLEND_FUNC(ONE, ONE_MINUS_SRC_ALPHA)
COLOR_A(255)
BEGIN(POINTS)
POINT_SIZE(1000)
VERTEX2II(133, 176, 0, 0)
COLOR_MASK(1, 1, 1, 0)
BLEND_FUNC(ONE_MINUS_DST_ALPHA, SRC_ALPHA)
BEGIN(RECTS)
VERTEX2II(0, 0, 0, 0)
VERTEX2II(239, 319, 0, 0)
COLOR_MASK(0, 0, 0, 1)
COLOR_A(128)
BLEND_FUNC(ZERO, ONE_MINUS_SRC_ALPHA)
BEGIN(POINTS)
POINT_SIZE(500)
VERTEX2II(133, 177, 0, 0)
COLOR_MASK(1, 1, 1, 0)
BLEND_FUNC(ONE_MINUS_DST_ALPHA, DST_ALPHA)
BEGIN(RECTS)
VERTEX2II(0, 0, 0, 0)
VERTEX2II(239, 319, 0, 0)
I tried the display list in ESE and found the effect is acceptable, although the alias effect can be seen if you zoomed in the picture.
-
Is the alias effect visible on your real hardware(LCD)?
-
Ok, thank you.
-
Hi pauljiao,
sorry, my last thank was for the reply from BRT Community. I undesignedly overlooked your reply. Thank you for you reply, but I hope you noticed that I had criticized the alias effects in the example from BRT Community, not that in my example. Yes, the alias effect is absolutely visible on the hardware from the BRT Community's example.
@ BRT Community: I still hope for a good solution :)
-
Hi,
@ BRT Community: What does your development team say?
@ all: Does anybody know a solution?
-
I found in ESD 4.8 there is the widget "ESD Circle Line" and "ESD Gradient" can fit most of your requirement, except the semitransparent. Please have a check the image I enclosed.
-
Please check the code below in the ESE and it shall get the effect as the enclosed image.
Try to change the "ALPHA_TEST" and replace the value with 125 to see the semi-transparent effect of contour.
CLEAR_COLOR_RGB(255,255,255)
CLEAR_COLOR_A(255)
CLEAR(1, 1, 1)
CMD_GRADIENT(100, 207, 0x007FFF, 244, 189, 0x7FFF00)
SAVE_CONTEXT()
SCISSOR_XY(100, 100)
SCISSOR_SIZE(100, 100)
COLOR_RGB(255,255,255)
COLOR_A(255)
COLOR_MASK(0,0,0,1)
BLEND_FUNC(ZERO, ZERO) #clear Alpha
BEGIN(RECTS)
VERTEX2II(100,100,0,0)
VERTEX2II(200,200,0,0)
COLOR_A(255) # ALPHA_TEST
BLEND_FUNC(SRC_ALPHA, ZERO) #Set Alpha
POINT_SIZE(800)
BEGIN(POINTS)
VERTEX2II(150,150, 0,0)
BLEND_FUNC(ZERO, ZERO) #clear Alpha
POINT_SIZE(400)
BEGIN(POINTS)
VERTEX2II(150,150, 0,0)
COLOR_RGB(245,58,41)
COLOR_A(255) #ALPHA_TEST
COLOR_MASK(1,1,1,1)
BLEND_FUNC(DST_ALPHA, ONE_MINUS_DST_ALPHA)
BEGIN(RECTS)
VERTEX2II(100,100,0,0)
VERTEX2II(200,200,0,0)
RESTORE_CONTEXT()
-
Hi pauljiao,
Thanks for your answer, but please have a heart and read my specification. There are still alias effects and the ring should be 100% transparent and the surrounding area should not be.
The very simple problem seems to be more and more an unsolvable problem...
@ BRT Community: What does your development team say?
-
Hello
Over development team concurs with pauljiaos approach.
Maybe you could provide a render of what exactly you are trying to achieve, I found your original description rather vague/hard to visualise. But it is important to remember EVE is intended for use with low power MCUs to facilitate HMIs, it is not an high power graphics IC and some aliasing effects may be present. As you can see from the range of demos available from the software examples section of our website, EVE is a very capable graphics IC in its own right, but there may be some hardware limitations on what you're trying to achieve.
Best Regards,
BRT Community
-
Hi pauljiao,
Thanks for your answer, but please have a heart and read my specification. There are still alias effects and the ring should be 100% transparent and the surrounding area should not be.
The very simple problem seems to be more and more an unsolvable problem...
@ BRT Community: What does your development team say?
Apologies for bumping an old thread, but I believe the issue was with the aliasing on the inner portion of the ring. By adding an additional point with blending to @pauljiao provided snippet, anti-aliasing of the inner portion can be achieved while still allowing for transparency.
CLEAR_COLOR_RGB(255,255,255)
CLEAR_COLOR_A(255)
CLEAR(1, 1, 1)
CMD_GRADIENT(100, 207, 0x007FFF, 244, 189, 0x7FFF00)
SAVE_CONTEXT()
SCISSOR_XY(100, 100)
SCISSOR_SIZE(101, 101)
COLOR_RGB(255,255,255)
COLOR_A(255)
COLOR_MASK(0,0,0,1)
BLEND_FUNC(ZERO, ZERO)
BEGIN(RECTS)
VERTEX2F(1600, 1600)
VERTEX2F(3200, 3200)
COLOR_A(255) // Circle transparency
BLEND_FUNC(SRC_ALPHA, ZERO)
POINT_SIZE(800)
BEGIN(POINTS)
VERTEX2F(2400, 2400)
BLEND_FUNC(ZERO, ZERO)
POINT_SIZE(384)
BEGIN(POINTS)
VERTEX2F(2400, 2400)
//Anti-aliasing inner portion
BLEND_FUNC(ZERO, ONE_MINUS_SRC_ALPHA)
POINT_SIZE(416)
BEGIN(POINTS)
VERTEX2F(2400, 2400)
COLOR_RGB(245,58,41)
COLOR_A(255)
COLOR_MASK(1,1,1,1)
BLEND_FUNC(DST_ALPHA, ONE_MINUS_DST_ALPHA)
BEGIN(RECTS)
VERTEX2F(1600, 1600)
VERTEX2F(3200, 3200)
RESTORE_CONTEXT()
-
Thanks mmottola. Your tip works well.