BrainModular

sdkFillRect colors and border

2015-12-27T15:36:27+02:00

yeah sorry i should have told about that^^. when i often draw recs on a non square canvas i generally compute a general "CANVAS_RATIO " variable,

like CANVAS_RATIO = sdkHeightPercentToPixel(1) / sdkWidthPercentToPixel(1);

wich is computed once on init or refreshed if needed on the 'onResize' procedure, if feeded then on the fonction should work in a nicer manner^^

Statistics: Posted by 23fx23 — 27 Dec 2015, 14:36

sdkFillRect colors and border

2015-12-27T13:55:22+02:00

I was just fiddling with your routine for ages wondering why the corners were not symetrical, then I realised (doh !) that due to the usine proportional coordinates, it will only look right if the panel is square ! Of course I can use the ratio parameter to fix that
Simon

Statistics: Posted by sm_jamieson — 27 Dec 2015, 12:55

sdkFillRect colors and border

2015-12-26T19:18:20+02:00

you can in most cases just use bool.
from what i understand LongBool is some type of bool that is defined by the sdk for usine compatibility on some events like layout options. so it will also work on booth platform as sdk files are included.

the specifific need of LongBool over bool is when creating sdkAddSettingLineBoolean, it will not accept bool but only longbool. here in my exemple the bool options are contolled in tabs, thats why i used longbool. if it was trigged only inside the code or from for exemple a switch input param could be bool instead.

Statistics: Posted by 23fx23 — 26 Dec 2015, 18:18

sdkFillRect colors and border

2015-12-26T18:35:55+02:00

OK thanks, very interesting. By the way, should we use LongBool to be compatible with multi-platform ?
I have been using the standard C++ "bool" type.
Thanks,
Simon.

Statistics: Posted by sm_jamieson — 26 Dec 2015, 17:35

sdkFillRect colors and border

2015-12-26T13:16:46+02:00

here is the custom function i use her in case interested in. it should be located in the main code:

void Touch_Fader::DRAW_ROUND_PATH(TRectF IN_RECT, LongBool ROUNDED, float ROUND_SIZE, float RATIO, float ROUND_SMOOTHNESS)
{
float L, R, T, B;
L = IN_RECT.left;
R = IN_RECT.right;
T = IN_RECT.top;
B = IN_RECT.bottom;

if (!ROUNDED)
{
sdkDrawPathStart();
sdkDrawPathMoveTo(sdkPointF(L, B));
sdkDrawPathLineTo(sdkPointF(L, T));
sdkDrawPathLineTo(sdkPointF(R, T));
sdkDrawPathLineTo(sdkPointF(R, B));
sdkDrawPathClose();
}
else //rounded
{
float ROUND_SIZE_Y = ROUND_SIZE;
float ROUND_SIZE_X = ROUND_SIZE_Y*RATIO;

ROUND_SIZE_Y = fminf(ROUND_SIZE_Y, (B - T) / 2.0);
ROUND_SIZE_X = fminf(ROUND_SIZE_X, (R - L) / 2.0);

sdkDrawPathStart();
sdkDrawPathMoveTo(sdkPointF(L, B - ROUND_SIZE_Y));
sdkDrawPathQuadCurveTo(sdkPointF(L, T + ROUND_SIZE_Y), sdkPointF(L, T + ROUND_SIZE_Y));
sdkDrawPathQuadCurveTo(sdkPointF(L + (ROUND_SIZE_X * ROUND_SMOOTHNESS), T), sdkPointF(L + ROUND_SIZE_X, T));
sdkDrawPathQuadCurveTo(sdkPointF(R - ROUND_SIZE_X, T), sdkPointF(R - ROUND_SIZE_X, T));
sdkDrawPathQuadCurveTo(sdkPointF(R, T + (ROUND_SIZE_Y * ROUND_SMOOTHNESS)), sdkPointF(R, T + ROUND_SIZE_Y));
sdkDrawPathQuadCurveTo(sdkPointF(R, B - ROUND_SIZE_Y), sdkPointF(R, B - ROUND_SIZE_Y));
sdkDrawPathQuadCurveTo(sdkPointF(R - (ROUND_SIZE_X * ROUND_SMOOTHNESS), B), sdkPointF(R - ROUND_SIZE_X, B));
sdkDrawPathQuadCurveTo(sdkPointF(L + ROUND_SIZE_X, B), sdkPointF(L + ROUND_SIZE_X, B));
sdkDrawPathQuadCurveTo(sdkPointF(L, B - (ROUND_SIZE_Y * ROUND_SMOOTHNESS)), sdkPointF(L, B - ROUND_SIZE_Y));
sdkDrawPathClose();
}

}// end draw path
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

then on the onPaint procedure when i want to draw i call the function , fill it and/or draw the border like this:

DRAW_ROUND_PATH(MY_RECT, RECT_IS_ROUND, RECT_ROUND_SIZE, XY_RATIO, ROUND_SMOOTHNESS);

sdkDrawPathFill(FILL_COLOR);
sdkDrawPathDraw(BORDER_COLOR, BORDER_SIZE);

it has the advantage of chosing if round or not, chosing to fill or only draw border or both, and behaves as you would expect regarding transparency as there are no ovelaps of two shapes.

nb: XYratio is 1 for square but can be different if playing with rectangle of various xy ratios. round_smoothness allow to vary from hexagonal shapes to rounded shapes.

Statistics: Posted by 23fx23 — 26 Dec 2015, 12:16

sdkFillRect colors and border

2015-12-25T03:32:40+02:00

You can if using sdkdrawpath procedures.
sdkDrawPathFill will fill the path of wanted color and sdkDrawPathDraw will draw the outline of wanted size with ie the border color.
What i did personally is a custom function that draw a path from the TRectf i feed, then either i only fill inside, draw the outline or both.

Statistics: Posted by 23fx23 — 25 Dec 2015, 02:32

sdkFillRect colors and border

2015-12-25T01:49:58+02:00

A couple of things I have noticed about sdkFillRect.

1. If you have borders, they always have square corners, i.e. the radius parameter is ignored.

2. If you have a transparent color with a border, the border color is visible through the transparent color across the whole rectangle - it is obviously implemented as a rectangle of the border color with a slightly reduced size main rectangle containing the main color.

I have not tried the poly line functions that I believe were added to the SDK a while back. But unless those enable it, for the moment you cannot have a transparent color with a border using the SDK !

Happy Christmas / Joyeux Noel,

Simon.

Statistics: Posted by sm_jamieson — 25 Dec 2015, 00:49

sdkFillRect colors and border

2015-12-27T15:36:27+02:00

Statistics: Posted by 23fx23 — 27 Dec 2015, 14:36

sdkFillRect colors and border

2015-12-27T13:55:22+02:00

Statistics: Posted by sm_jamieson — 27 Dec 2015, 12:55

sdkFillRect colors and border

2015-12-26T19:18:20+02:00

Statistics: Posted by 23fx23 — 26 Dec 2015, 18:18

sdkFillRect colors and border

2015-12-26T18:35:55+02:00

OK thanks, very interesting. By the way, should we use LongBool to be compatible with multi-platform ?
I have been using the standard C++ "bool" type.
Thanks,
Simon.

Statistics: Posted by sm_jamieson — 26 Dec 2015, 17:35

sdkFillRect colors and border

2015-12-26T13:16:46+02:00

here is the custom function i use her in case interested in. it should be located in the main code:

void Touch_Fader::DRAW_ROUND_PATH(TRectF IN_RECT, LongBool ROUNDED, float ROUND_SIZE, float RATIO, float ROUND_SMOOTHNESS)
{
float L, R, T, B;
L = IN_RECT.left;
R = IN_RECT.right;
T = IN_RECT.top;
B = IN_RECT.bottom;

if (!ROUNDED)
{
sdkDrawPathStart();
sdkDrawPathMoveTo(sdkPointF(L, B));
sdkDrawPathLineTo(sdkPointF(L, T));
sdkDrawPathLineTo(sdkPointF(R, T));
sdkDrawPathLineTo(sdkPointF(R, B));
sdkDrawPathClose();
}
else //rounded
{
float ROUND_SIZE_Y = ROUND_SIZE;
float ROUND_SIZE_X = ROUND_SIZE_Y*RATIO;

ROUND_SIZE_Y = fminf(ROUND_SIZE_Y, (B - T) / 2.0);
ROUND_SIZE_X = fminf(ROUND_SIZE_X, (R - L) / 2.0);

sdkDrawPathStart();
sdkDrawPathMoveTo(sdkPointF(L, B - ROUND_SIZE_Y));
sdkDrawPathQuadCurveTo(sdkPointF(L, T + ROUND_SIZE_Y), sdkPointF(L, T + ROUND_SIZE_Y));
sdkDrawPathQuadCurveTo(sdkPointF(L + (ROUND_SIZE_X * ROUND_SMOOTHNESS), T), sdkPointF(L + ROUND_SIZE_X, T));
sdkDrawPathQuadCurveTo(sdkPointF(R - ROUND_SIZE_X, T), sdkPointF(R - ROUND_SIZE_X, T));
sdkDrawPathQuadCurveTo(sdkPointF(R, T + (ROUND_SIZE_Y * ROUND_SMOOTHNESS)), sdkPointF(R, T + ROUND_SIZE_Y));
sdkDrawPathQuadCurveTo(sdkPointF(R, B - ROUND_SIZE_Y), sdkPointF(R, B - ROUND_SIZE_Y));
sdkDrawPathQuadCurveTo(sdkPointF(R - (ROUND_SIZE_X * ROUND_SMOOTHNESS), B), sdkPointF(R - ROUND_SIZE_X, B));
sdkDrawPathQuadCurveTo(sdkPointF(L + ROUND_SIZE_X, B), sdkPointF(L + ROUND_SIZE_X, B));
sdkDrawPathQuadCurveTo(sdkPointF(L, B - (ROUND_SIZE_Y * ROUND_SMOOTHNESS)), sdkPointF(L, B - ROUND_SIZE_Y));
sdkDrawPathClose();
}

}// end draw path
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Statistics: Posted by 23fx23 — 26 Dec 2015, 12:16

sdkFillRect colors and border

2015-12-25T03:32:40+02:00

Statistics: Posted by 23fx23 — 25 Dec 2015, 02:32

sdkFillRect colors and border

2015-12-25T01:49:58+02:00

Statistics: Posted by sm_jamieson — 25 Dec 2015, 00:49