GEuser's CUSTOMIZABLE GUI LIBRARY: Arced Bar

[GEuser]

BASIC INFORMATION



Everything works as expected just disappointed with the drawing quality. The problem is all the drawing functions use integer values not floats/doubles so you cannot use fractional poistioning (using Sin & Cos) to create smooth curves and fills.

There's always a way around things so I'll leave this for now and move on to the next widget (definitely going to came back to this, not a happy bunny, lol).

I'm new to GE and am hoping to learn stuff by sharing and experimenting. Feel free to alter and improve all my wiget codes. Hopefully, when I've completed the library with all the widgets I can get on with sharing actual games/apps that I make from using them (and add all the graphic frills and pretty colours for later advanced versions of these).

You can get the bar to flow anticlockwise (barFlow = 0) or clockwise (barFlow = 1). Add global code provided as arcBar and arcBar (your preferences here); code to the canvas that you are using for the arcBar. See my other widget posts for more details on usage ( http://game-editor.com/forum/viewtopic.php?f=8&t=12376 ).

If you manage to improve drawing quality please post here if you can. Here's the culprits, GE canvas drawing functions all use int.

SOURCE: http://game-editor.com/docs/script_reference.htm

setpen
Define the actual pen for the Event Actor
void setpen(int r, int g, int b, double transp, int pensize)

r: red component (0 - 255)
g: green component (0 - 255)
b: blue component (0 - 255)
transparency: (0.0 - 1.0)
pensize: size of pen

moveto
Move the Event Actor's pen to (x, y) coordinates.
void moveto(int x, int y)

lineto
Draw a line on Event Actor to (x, y) coordinates using actual pen
void lineto(int x, int y)

putpixel
Draw a single pixel on Event Actor in (x, y) coordinates using actual pen.
void putpixel(int x, int y)

GLOBAL CODE

Code: Select all

void arcBar(int barValue, int barFlow, int barMax, int barStart, int barRadius, int barHeight, int border_R, int border_G, int border_B, int back_R, int back_G, int back_B, int fill_R, int fill_G, int fill_B)
{

    int bar_i=0;
    int itsCentre=barHeight+barRadius+1;
 

//  ---------------------------  Create background  ----------------------

    setpen(back_R, back_G, back_B, 0.0, 1);
    for (bar_i=barStart; bar_i <= barStart+barMax; bar_i++)
    {
        moveto ((barRadius+1) * sin(degtorad(bar_i))+itsCentre, (barRadius+1) * cos(degtorad(bar_i))+itsCentre);
        lineto ((barRadius+barHeight) * sin(degtorad(bar_i))+itsCentre, (barRadius+barHeight) * cos(degtorad(bar_i))+itsCentre);
    }


//  ---------------------------  Create border  ----------------------

    setpen(border_R, border_G, border_B, 0.0, 1);
    for (bar_i=barStart; bar_i <= barStart+barMax; bar_i++)
    {
        putpixel(barRadius * sin(degtorad(bar_i))+itsCentre, barRadius * cos(degtorad(bar_i))+itsCentre);
    }

    for (bar_i=barStart; bar_i <= barStart+barMax; bar_i++)
    {
        putpixel((barRadius+barHeight+1) * sin(degtorad(bar_i))+itsCentre, (barRadius+barHeight+1) * cos(degtorad(bar_i))+itsCentre);
    }

    moveto ((barRadius+barHeight+1) * sin(degtorad(barStart))+itsCentre, (barRadius+barHeight+1) * cos(degtorad(barStart))+itsCentre);
    lineto (barRadius * sin(degtorad(barStart))+itsCentre, barRadius * cos(degtorad(barStart))+itsCentre);
 
    moveto ((barRadius+barHeight+1) * sin(degtorad(barStart+barMax))+itsCentre, (barRadius+barHeight+1) * cos(degtorad(barStart+barMax))+itsCentre);
    lineto (barRadius * sin(degtorad(barStart+barMax))+itsCentre, barRadius * cos(degtorad(barStart+barMax))+itsCentre);
 


//  ---------------------------  Create Value Bar  ----------------------
    if(barFlow==0)
    {
        // flow is Anti-clockwise
        setpen(fill_R, fill_G, fill_B, 0.0, 1);
        for (bar_i=barStart+1; bar_i <= barStart+barValue; bar_i++)
        {
            moveto ((barRadius+1) * sin(degtorad(bar_i))+itsCentre, (barRadius+1) * cos(degtorad(bar_i))+itsCentre);
            lineto ((barRadius+barHeight-1) * sin(degtorad(bar_i))+itsCentre, (barRadius+barHeight-1) * cos(degtorad(bar_i))+itsCentre);
        }

    }
    else
    {
        // flow is clockwise
        setpen(fill_R, fill_G, fill_B, 0.0, 1);
        for (bar_i=barStart+barMax-1; bar_i >= (barStart+barMax)-barValue; bar_i--)
        {
            moveto ((barRadius+1) * sin(degtorad(bar_i))+itsCentre, (barRadius+1) * cos(degtorad(bar_i))+itsCentre);
            lineto ((barRadius+barHeight-1) * sin(degtorad(bar_i))+itsCentre, (barRadius+barHeight-1) * cos(degtorad(bar_i))+itsCentre);
        }
 
    }

}


More widgets to come...

[GEuser]

Just amended some typos including a missed a +1 in the second line of code.

Changed this bit:

Code: Select all

int itsCentre=barHeight+barRadius;

to this new bit:

Code: Select all

int itsCentre=barHeight+barRadius+1;

It doesn't improve the quality problem but it does stop the top of the bar from being clipped by 1 pixel (certain bars looked wonky). However, it doesn't matter because I'll be changing the code soon to cure the problem.



DRAWING QUALITY ISSUE

Found a fantastic way to solve the problem. Once I've redone the coding I'll do my fancy graphics explanation for all to benefit. Hopefully, I can avoid using cosine / sine altogather. Hey, if it works to as planned expect some cool widgets to come...

[Jagmaster]

I changed the size of the brush in the setpen function on all the draws (except the outline) to 2. This at least filled bar in, and gave a slightly less wonky result. The outline was still a tad sketchy though, so it's not a complete (albeit simple) fix. Just wanted to throw that out there, I look forward to seeing what your fix for this problem is -along with your fancy graphical explanation.



I hadn't tried this on a larger bar though. If you had a really big one, you'd want the thickness to be four on the fill, and perhaps 2 on the outline.

I just wanted to add, that this is a very impressive function. I wouldn't know enough trig to pull it off myself I'm afraid.

+score.

[Soullem]

Everythings great... But I dont like the spelling of CENTRE, if I use this ill definitely change it to CENTER. +1

[GEuser]

@ JagMaster

Hey thanks, just added minor tweaks (border and background synched up with your 2pix increase in pen size).

Will need to learn more maths stuff to do proper justice to this draw quality issue but as you mentioned if your using reasonably decent sizes it should be okay. On a different note, you can create some cool subtle effects using alpha settings (will include these in call function parts with major update not planned for the recent future). The Alphas hide certain abberations. Also, the colours defs in call hog all the parameter space so will use hex code eventually for most of my stuff.

Oh, thanks for the links in your post on pixel art. very impressive, wish I could draw (I cheat with short cuts). The dithering effects are great for experimenting with in art program filters.



@ Soullem

you can call it whatever you want. thanks for the +score.

[GEuser]

Oops! sorry forgot to add the code with the minor edits. The bits highlighted in red are what you need to change to play with the alpha's (0.0 to 1.0).

// --------------------------- Create background ----------------------

setpen(back_R, back_G, back_B, 0, 2);



// --------------------------- Create border ----------------------

setpen(border_R, border_G, border_B, 0, 2);



// --------------------------- Create Value Bar ----------------------
if(barFlow==0)
{
// flow is Anti-clockwise
setpen(fill_R, fill_G, fill_B, 0, 2);

// flow is clockwise
setpen(fill_R, fill_G, fill_B, 0, 2);


HERE@S THE CODE:

Code: Select all

void arcBar(int barValue, int barFlow, int barMax, int barStart, int barRadius, int barHeight, int border_R, int border_G, int border_B, int back_R, int back_G, int back_B, int fill_R, int fill_G, int fill_B)
{

    int bar_i=0;
    int itsCentre=barHeight+barRadius+2;
 

//  ---------------------------  Create background  ----------------------

    setpen(back_R, back_G, back_B, 0, 2);
    for (bar_i=barStart; bar_i <= barStart+barMax; bar_i++)
    {
        moveto ((barRadius) * sin(degtorad(bar_i))+itsCentre, (barRadius) * cos(degtorad(bar_i))+itsCentre);
        lineto ((barRadius+barHeight) * sin(degtorad(bar_i))+itsCentre, (barRadius+barHeight) * cos(degtorad(bar_i))+itsCentre);
    }


//  ---------------------------  Create border  ----------------------

    setpen(border_R, border_G, border_B, 0, 2);
    for (bar_i=barStart-1; bar_i <= barStart+barMax+1; bar_i++)
    {
        putpixel((barRadius-1) * sin(degtorad(bar_i))+itsCentre, (barRadius-1) * cos(degtorad(bar_i))+itsCentre);
    }

    for (bar_i=barStart; bar_i <= barStart+barMax; bar_i++)
    {
        putpixel((barRadius+barHeight+1) * sin(degtorad(bar_i))+itsCentre, (barRadius+barHeight+1) * cos(degtorad(bar_i))+itsCentre);
    }

    moveto ((barRadius+barHeight-1) * sin(degtorad(barStart))+itsCentre, (barRadius+barHeight-1) * cos(degtorad(barStart))+itsCentre);
    lineto (barRadius * sin(degtorad(barStart))+itsCentre, barRadius * cos(degtorad(barStart))+itsCentre);
 
    moveto ((barRadius+barHeight+1) * sin(degtorad(barStart+barMax))+itsCentre, (barRadius+barHeight+1) * cos(degtorad(barStart+barMax))+itsCentre);
    lineto (barRadius * sin(degtorad(barStart+barMax))+itsCentre, barRadius * cos(degtorad(barStart+barMax))+itsCentre);
 


//  ---------------------------  Create Value Bar  ----------------------
    if(barFlow==0)
    {
        // flow is Anti-clockwise
        setpen(fill_R, fill_G, fill_B, 0, 2);
        for (bar_i=barStart+1; bar_i <= barStart+barValue-1; bar_i++)
        {
            moveto ((barRadius+1) * sin(degtorad(bar_i))+itsCentre, (barRadius+1) * cos(degtorad(bar_i))+itsCentre);
            lineto ((barRadius+barHeight) * sin(degtorad(bar_i))+itsCentre, (barRadius+barHeight) * cos(degtorad(bar_i))+itsCentre);
        }

    }
    else
    {
        // flow is clockwise
        setpen(fill_R, fill_G, fill_B, 0, 2);
        for (bar_i=barStart+barMax-1; bar_i >= (barStart+barMax+1)-barValue; bar_i--)
        {
            moveto ((barRadius+1) * sin(degtorad(bar_i))+itsCentre, (barRadius+1) * cos(degtorad(bar_i))+itsCentre);
            lineto ((barRadius+barHeight) * sin(degtorad(bar_i))+itsCentre, (barRadius+barHeight) * cos(degtorad(bar_i))+itsCentre);
        }
 
    }

}



[Jagmaster]

@ JagMaster

Hey thanks, just added minor tweaks (border and background synched up with your 2pix increase in pen size).

Will need to learn more maths stuff to do proper justice to this draw quality issue but as you mentioned if your using reasonably decent sizes it should be okay. On a different note, you can create some cool subtle effects using alpha settings (will include these in call function parts with major update not planned for the recent future). The Alphas hide certain abberations. Also, the colours defs in call hog all the parameter space so will use hex code eventually for most of my stuff.

Oh, thanks for the links in your post on pixel art. very impressive, wish I could draw (I cheat with short cuts). The dithering effects are great for experimenting with in art program filters.

You're welcome! And those alpha borders look nice, I like the fifth one best.

If you were to code a hex to rgba function in itself, I would be forever grateful. Not to mention it'd be very useful in this function. I would love to be able to input a hex value into an actor to change the color and alpha of said actor, as it would eliminate 4 lines of code (four lines of code I use often). If I'm savvy enough to remember, I make a rgba(r, g, b, transp); type function to save some of that mess, but hex would be so much cleaner (like you said).

Anyways, I look forward to your Improvements on this function. I'm glad those art links served useful. And, yeah haha I often feel that "I wish I could..." feeling after browsing cgsociety or some type of digital painting or concept art forums. And maths, math can do it too sometimes.

I often say "maths" in the United States just to see what people's reactions are. It's fun.

[skydereign]

If you were to code a hex to rgba function in itself, I would be forever grateful.

You mean something like this?

Code: Select all

// converts a hex string into an unsigned int
unsigned int
hex_to_hexint (char* string)
{
    unsigned int hex = 0;
    sscanf(string, "%x", &hex);
    return hex;
}

// converts rgba into an unsigned int
unsigned int
rgba_to_hexint (int r, int g, int b, double a)
{
    return (r<<24) + (g<<16) + (b<<8) + a*255.0;
}

// converts rgba into a hex string
void
rgba_to_hex (int r, int g, int b, double a, char* hex)
{
    sprintf(hex, "%X", rgba_to_hexint(r, g, b, a));
}

// converts a hex string into rgba
void
hex_to_rgba (char* hex, int* r, int*g, int*b, double*a)
{
    unsigned int hex_c = hex_to_hexint(hex);
    *r = (hex_c>>24);
    *g = (hex_c<<8)>>24;
    *b = (hex_c<<16)>>24;
    *a = ((hex_c<<24)>>24)/255.0;
}

// converts unsigned int into hex
void
hexint_to_hex (unsigned int hexint, char* hex)
{
    sprintf(hex, "%x", hexint);
}

sprintf can parse hex with the %x parameter and bit shifting can be used to isolate the actual bits you want (r, g, b, and a). With these functions you can use unsigned ints or strings to represent hex. You can convert hex into rgba and rgba into hex. I believe I got all the permutations, though adding any if I missed some would be easy. In the function names I use hexint to represent the unsigned int representation of hex.

[Jagmaster]

Wow, I didn't know that sprintf even had that parameter. But yeah, those functions made my day! Thanks a bunch!

I'll examine the code a little later and probably ask some analytical questions.
+

Edit: Sky's point count = 444 xD

[GEuser]

Sky, this is brillant

Still having difficulty familiarising myself with pointers, de-referencing and all that. Managed to do something after pulling all my hair out and several crashes. I hope you don't mind me adding the setFontColor() to my library, I'll give you credit for the hex codes. Haven't experimented with the other functions yet...

Those bitwise operator's are amazing stuff, can imagine lots of useful stuff with that after a steep learning curve of course. Once again many thanks

+ score

one of (four) skydereign's code posts, added as global code: hex_to_hexint

Code: Select all

// convert a hex string into a n unsigned int
unsigned int hex_to_hexint (char* string)
{
    unsigned int hex=0;
    sscanf(string, "%x" , &hex);
    return hex;
}


Created this function, added as global code: setFontColor()
Allows the colour & alpha settings of any text actor's font to be changed during run time.

BASIC INFO.




THE GLOBAL CODE

Code: Select all

void setFontColor (const char* colorHex) // hex color string parsed in
{

    char* hexByte=(char*) malloc(8); // allocate memory for strncopy (Color size 8 bytes, including alpha)

    strncpy(hexByte, colorHex+0, 2); // get first pair of bytes (RED COLOR 0 - 255)
    r=hex_to_hexint(hexByte);  // store in actors built in 'r' variable.

    strncpy(hexByte, colorHex+2, 2); // get second pair of bytes (GREEN COLOR 0 - 255)
    g=hex_to_hexint(hexByte);  // store in actors built in 'g' variable.
 
    strncpy(hexByte, colorHex+4, 2);  // get third pair of (BLUE COLOR 0 - 255)
    b=hex_to_hexint(hexByte);   // store in actors built in 'b' variable.

    strncpy(hexByte, colorHex+6, 2);   // get fourth pair of (ALPHA 0 - 255)
    transp=hex_to_hexint(hexByte)/255.0; // Convert alpha to double ( /255.0 ) & store
                                               // in actors 'transp' built in actor variable.
    free(hexByte); // free up the memory
}


Code in text actor's CREATE ACTOR EVENT

Code: Select all

sprintf(text, " %s", "TEXT ACTOR'S TANTRUM: Give me back my monochromatic identity and leave my alpha's alone!");
setFontColor("FFFFFF00");


[GEuser]

@ Sky

I can see how redundant that conversion code in setFontColor is compared to one of your codes.

I seem to be having problems with the hex_to_rgba code. Don't know why it doesn't accept the real value. Any idea? Here's the details:-

[skydereign]

The problem is you aren't using addresses. You need to use &lblRGBA.iRed, &lblRGBA.iGreen, and so on. The function hex_to_rgba uses the idea pass by reference. Normally a function can return only one value, but in a function like this, we want it to return 4 values (r, g, b, and a). Normally what happens is the function will create a local copy of the variable you pass, that way if the variable is changed in the function, it isn't changed outside the function. Using pointers bypasses this problem, since the address is now the local copy, but it still points to the same place in memory. Anyway, that is why there are two errors. It is calling the int to int* conversions suspicious, as well as telling you you can't convert a double into a double pointer.

[GEuser]

@ Sky, thanks!

I decided to go the old fashioned way and get readiing some stuff at the town library (good computer selection there). Been shying away from pointers and memory management functions for too long. This stuff really is the heart of C language. Don't learn to grasp it and your won't get far. No gain without brain pain I suppose

* look of determination *
Right! heading towards library sci fi, fiction, yoga, Ah! computer science...

[GEuser]

skydereign's codes were fine it was just that I had to implement using text actors. Needed to spend some time with on it to get things right because will be using it often for things like palete maker / color picking widgets (example: player team colors, player ship/character coloring or game palette set up, etc...).

Been testing it out with following test program. Values entered in light grey blocks and other color blocks clicked to test function:



Alpha was causing problems with RGBA to Hex integer & to Hex string. It was a rounding off issue with the double value. It turned out that I had to format it with atof() function and using floor() with a few adjustments:

Code: Select all

aVal=floor((atof(TXT_A.text)*100000))/100000;


Had to convert the hex integer text displayed into an unsigned integer format before parsing/converting to Hex String format for actor displays:

Code: Select all

unsigned int tempHexInt=0;
tempHexInt= hex_to_hexint (HexInt.text);


Hex_Conversion.zip

zip file of program with linux, mac and windows executables.

(2.99 MiB) Downloaded 149 times

Anyway, another BIG THANK YOU to skydereign beacuse this will be really useful for a lot of stuff am doing. Learn't alot messing around with it.