Working on GuiColorPicker()

src/raygui.h

@@ -265,7 +265,7 @@ RAYGUIDEF float GuiProgressBar(Rectangle bounds, float value, float minValue, fl
 RAYGUIDEF int GuiSpinner(Rectangle bounds, int value, int minValue, int maxValue);                            // Spinner control, returns selected value
 RAYGUIDEF void GuiTextBox(Rectangle bounds, char *text, int textSize);                                        // Text Box control, updates input text
 RAYGUIDEF void GuiGroupBox(Rectangle bounds, const char *text);                                               // Group Box control with title name
-RAYGUIDEF Color GuiColorPicker(Rectangle bounds, Color color);                                                // Color Picker control
+RAYGUIDEF Color GuiColorPicker(Rectangle bounds, float hueLevel, Color color);                                // Color Picker control
 
 #if defined RAYGUI_STANDALONE
 // NOTE: raygui depend on some raylib input and drawing functions
@@ -295,6 +295,8 @@ RAYGUIDEF int GetStyleProperty(int guiProperty);                          // Get
 
 #include <stdio.h>          // Required for: FILE, fopen(), fclose(), fprintf(), feof(), fscanf()
                             // NOTE: Those functions are only used in SaveGuiStyle() and LoadGuiStyle()
+                            
+#include <math.h>           // Required for: sinf(), cosf()
 
 // Check if custom malloc/free functions defined, if not, using standard ones
 #if !defined(RAYGUI_MALLOC) && defined(RAYGUI_STYLE_SAVE_LOAD)
@@ -1367,6 +1369,140 @@ void GuiGroupBox(Rectangle bounds, const char *text)
     DrawText(text, bounds.x + 14, bounds.y - 5, 10, GuiTextColor());
 }
 
+
+Vector3 ColorTransformHue(Vector3 color, float hue)
+{
+    Vector3 result;
+
+    float U = cosf(hue*PI/180);
+    float W = sinf(hue*PI/180);
+
+    result.x = (.299+.701*U+.168*W)*color.x + (.587-.587*U+.330*W)*color.y + (.114-.114*U-.497*W)*color.z;
+    result.y = (.299-.299*U-.328*W)*color.x + (.587+.413*U+.035*W)*color.y + (.114-.114*U+.292*W)*color.z;
+    result.z = (.299-.3*U+1.25*W)*color.x + (.587-.588*U-1.05*W)*color.y + (.114+.886*U-.203*W)*color.z;
+    
+    return result;
+}
+
+//https://stackoverflow.com/questions/3018313/algorithm-to-convert-rgb-to-hsv-and-hsv-to-rgb-in-range-0-255-for-both
+//https://gist.github.com/mjackson/5311256
+typedef struct {
+    double r;       // a fraction between 0 and 1
+    double g;       // a fraction between 0 and 1
+    double b;       // a fraction between 0 and 1
+} rgb;
+
+typedef struct {
+    double h;       // angle in degrees
+    double s;       // a fraction between 0 and 1
+    double v;       // a fraction between 0 and 1
+} hsv;
+
+static hsv   rgb2hsv(rgb in);
+static rgb   hsv2rgb(hsv in);
+
+hsv rgb2hsv(rgb in)
+{
+    hsv         out;
+    double      min, max, delta;
+
+    min = in.r < in.g ? in.r : in.g;
+    min = min  < in.b ? min  : in.b;
+
+    max = in.r > in.g ? in.r : in.g;
+    max = max  > in.b ? max  : in.b;
+
+    out.v = max;                                // v
+    delta = max - min;
+    if (delta < 0.00001)
+    {
+        out.s = 0;
+        out.h = 0; // undefined, maybe nan?
+        return out;
+    }
+    if( max > 0.0 ) { // NOTE: if Max is == 0, this divide would cause a crash
+        out.s = (delta / max);                  // s
+    } else {
+        // if max is 0, then r = g = b = 0              
+        // s = 0, h is undefined
+        out.s = 0.0;
+        out.h = NAN;                            // its now undefined
+        return out;
+    }
+    if( in.r >= max )                           // > is bogus, just keeps compilor happy
+        out.h = ( in.g - in.b ) / delta;        // between yellow & magenta
+    else
+    if( in.g >= max )
+        out.h = 2.0 + ( in.b - in.r ) / delta;  // between cyan & yellow
+    else
+        out.h = 4.0 + ( in.r - in.g ) / delta;  // between magenta & cyan
+
+    out.h *= 60.0;                              // degrees
+
+    if( out.h < 0.0 )
+        out.h += 360.0;
+
+    return out;
+}
+
+rgb hsv2rgb(hsv in)
+{
+    double      hh, p, q, t, ff;
+    long        i;
+    rgb         out;
+
+    if(in.s <= 0.0) {       // < is bogus, just shuts up warnings
+        out.r = in.v;
+        out.g = in.v;
+        out.b = in.v;
+        return out;
+    }
+    hh = in.h;
+    if(hh >= 360.0) hh = 0.0;
+    hh /= 60.0;
+    i = (long)hh;
+    ff = hh - i;
+    p = in.v * (1.0 - in.s);
+    q = in.v * (1.0 - (in.s * ff));
+    t = in.v * (1.0 - (in.s * (1.0 - ff)));
+
+    switch(i) {
+    case 0:
+        out.r = in.v;
+        out.g = t;
+        out.b = p;
+        break;
+    case 1:
+        out.r = q;
+        out.g = in.v;
+        out.b = p;
+        break;
+    case 2:
+        out.r = p;
+        out.g = in.v;
+        out.b = t;
+        break;
+
+    case 3:
+        out.r = p;
+        out.g = q;
+        out.b = in.v;
+        break;
+    case 4:
+        out.r = t;
+        out.g = p;
+        out.b = in.v;
+        break;
+    case 5:
+    default:
+        out.r = in.v;
+        out.g = p;
+        out.b = q;
+        break;
+    }
+    return out;     
+}
+
 // Color Picker control
 // TODO: It can be divided in multiple controls:
 //      Color GuiColorPicker() 
@@ -1375,12 +1511,28 @@ void GuiGroupBox(Rectangle bounds, const char *text)
 //      Color GuiColorBarSat() [WHITE->color]
 //      Color GuiColorBarValue() [BLACK->color]), HSV / HSL
 //      unsigned char GuiColorBarLuminance() [BLACK->WHITE]
-Color GuiColorPicker(Rectangle bounds, Color color)
+Color GuiColorPicker(Rectangle bounds, float hueValue, Color color)
 {
     ControlState state = NORMAL;
     
     Vector2 mousePoint = GetMousePosition();
     
+    Vector2 pickerSelector = { 0 };
+    
+    // TODO: Get color picker selector box equivalent color from color value
+    
+    // Required HSV to RGB conversion formula
+    // Hue: 0 ≤ hueValue < 360
+    // 0 ≤ sat ≤ 1 and 0 ≤ V ≤ 1:
+    
+    //pickerSelector.x = bounds.x + colorPos.x*color.r;
+    //pickerSelector.y = bounds.y + colorPos.y*color.r;
+    rgb in = { (float)color.r/255.0f, (float)color.g/255.0f, (float)color.b/255.0f };
+    hsv out = rgb2hsv(in);
+    
+    pickerSelector.x = bounds.x + (float)out.s*bounds.width;
+    pickerSelector.y = bounds.y + (1.0f - (float)out.v)*bounds.height;
+    
     // NOTE: bounds define only the color picker box, extra bars at right and bottom
 
     // Update control
@@ -1390,33 +1542,62 @@ Color GuiColorPicker(Rectangle bounds, Color color)
     
     if (CheckCollisionPointRec(mousePoint, bounds))     // Check button state
     {
+        if (IsMouseButtonDown(MOUSE_LEFT_BUTTON))
+        {
+            if (!IsCursorHidden()) HideCursor();
+            
+            pickerSelector = mousePoint;
+            
+            // Calculate color from picker
+            Vector2 colorPos = { pickerSelector.x - bounds.x, pickerSelector.y - bounds.y }; 
+            
+            colorPos.x /= (float)bounds.width;     // Get normalized value on x
+            colorPos.y /= (float)bounds.height;    // Get normalized value on y
+            
+            color.r = 255*colorPos.y;
+            color.g = 255*colorPos.y;
+            color.b = 255*colorPos.y;
+        }            
         
+        if (IsMouseButtonUp(MOUSE_LEFT_BUTTON) && IsCursorHidden()) ShowCursor();
+    }
+    else
+    {
+        if (IsCursorHidden()) ShowCursor();
     }
     //--------------------------------------------------------------------
     
     // Draw control
     //--------------------------------------------------------------------
-    DrawRectangleGradientEx(bounds, WHITE, WHITE, BLUE, BLUE);
+    
-    DrawRectangleGradientEx(bounds, Fade(BLACK,0), BLACK, BLACK, Fade(BLACK,0));
+    // Draw color picker: color box
+    DrawRectangleGradientEx(bounds, WHITE, WHITE, color, color);
+    DrawRectangleGradientEx(bounds, Fade(BLACK, 0), BLACK, BLACK, Fade(BLACK, 0));
+    // Draw color picker: selector
+    DrawCircleV(pickerSelector, 4, WHITE);
 
+    // Draw hue bar: color bars
     DrawRectangleGradientEx((Rectangle){bounds.x + bounds.width + 10, bounds.y, 20, bounds.height/6}, (Color){255,0,0,255}, (Color){255,255,0,255}, (Color){255,255,0,255}, (Color){255,0,0,255}); // TEST
     DrawRectangleGradientEx((Rectangle){bounds.x + bounds.width + 10, bounds.y + bounds.height/6, 20, bounds.height/6}, (Color){255,255,0,255}, (Color){0,255,0,255}, (Color){0,255,0,255}, (Color){255,255,0,255}); // TEST
     DrawRectangleGradientEx((Rectangle){bounds.x + bounds.width + 10, bounds.y + 2*(bounds.height/6), 20, bounds.height/6}, (Color){0,255,0,255}, (Color){0,255,255,255}, (Color){0,255,255,255}, (Color){0,255,0,255}); // TEST
     DrawRectangleGradientEx((Rectangle){bounds.x + bounds.width + 10, bounds.y + 3*(bounds.height/6), 20, bounds.height/6}, (Color){0,255,255,255}, (Color){0,0,255,255}, (Color){0,0,255,255}, (Color){0,255,255,255}); // TEST
     DrawRectangleGradientEx((Rectangle){bounds.x + bounds.width + 10, bounds.y + 4*(bounds.height/6), 20, bounds.height/6}, (Color){0,0,255,255}, (Color){255,0,255,255}, (Color){255,0,255,255}, (Color){0,0,255,255}); // TEST
     DrawRectangleGradientEx((Rectangle){bounds.x + bounds.width + 10, bounds.y + 5*(bounds.height/6), 20, bounds.height/6}, (Color){255,0,255,255}, (Color){255,0,0,255}, (Color){255,0,0,255}, (Color){255,0,255,255}); // TEST
+    // Draw hue bar: selector
+    //DrawRectangle(bounds.x + bounds.width + 8, 120, 24, 4, WHITE);
+    DrawRectangleLines(bounds.x + bounds.width + 8, bounds.y + (float)out.h/360.0f*bounds.height - 2, 24, 4, BLACK);
+    
+    // Draw alpha bar: checked background
+    for (int i = 0; i < 38; i++) DrawRectangle(bounds.x + 10*(i%19), bounds.y + bounds.height + 10 + 10*(i/19), bounds.width/19, 10, (i%2) ? LIGHTGRAY : RAYWHITE);
+    // Draw alpha bar: color bar
+    DrawRectangleGradientEx((Rectangle){bounds.x, bounds.y + bounds.height + 10, bounds.width, 20}, Fade(WHITE, 0), Fade(WHITE, 0), BLUE, BLUE);
+    // Draw alpha bar: selector
+    DrawRectangle(bounds.x, bounds.y + bounds.height + 8, 5, 24, WHITE);
+    DrawRectangleLines(bounds.x, bounds.y + bounds.height + 8, 5, 24, BLACK);
 
-    // Draw checked background
+    // Draw selected color box
-    for (int i = 0; i < 38; i++) DrawRectangle(bounds.x + 10*(i%19), bounds.x + bounds.width + 10 + 10*(i/19), bounds.width/20, bounds.width/20, (i%2) ? GRAY : LIGHTGRAY);
+    DrawRectangle(bounds.x + bounds.width + 10, bounds.y + bounds.height + 10, 20, 20, color);
-
+    DrawRectangleLines(bounds.x + bounds.width + 9, bounds.y + bounds.height + 9, 22, 22, BLACK);
-    DrawRectangleGradientEx((Rectangle){bounds.x, bounds.x + bounds.width + 10, bounds.width, 20}, Fade(WHITE, 0), Fade(WHITE, 0), BLUE, BLUE);
-
-    DrawRectangle(bounds.x + bounds.width + 6, 120, 28, 5, WHITE);
-    DrawRectangleLines(bounds.x + bounds.width + 6, 120, 28, 5, BLACK);
-    DrawRectangle(196, bounds.y + bounds.height + 6, 5, 28, WHITE);
-    DrawRectangleLines(196, bounds.y + bounds.height + 6, 5, 28, BLACK);
-
-    DrawCircle(150, 150, 4, WHITE);
     
     switch (state)
     {

tools/rGuiStyler/rguistyler.c

@@ -35,7 +35,6 @@
 #include "raygui.h"
 
 #include "external/tinyfiledialogs.h"   // Open/Save file dialogs
-#include "colorpicker.h"                // Color picker image data
 
 #include <stdlib.h>
 #include <stdio.h>
@@ -119,12 +118,12 @@ int main()
 
     // Defines if the property to change is a Color or a value to update it accordingly
     // NOTE: 0 - Color, 1 - value
-    const unsigned char guiPropertyType[NUM_PROPERTIES] = { 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,  
+    const unsigned char guiPropertyType[NUM_PROPERTIES] = { 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 
-                                                            0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0,  
+                                                            0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 
-                                                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0,  
+                                                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 
-                                                            0, 0, 0, 0, 0, 0, 0, 1, 1, 1,   
+                                                            0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 
-                                                            1, 0, 0, 0, 0, 0, 0, 0, 0, 0,  
+                                                            1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
-                                                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  
+                                                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 
                                                             0, 0, 1, 1, 0, 0, 0, 0, 1 };
     int aux = 0;
     int guiPropertyPos[NUM_ELEMENTS];
@@ -180,56 +179,11 @@ int main()
     int selectWidth = screenWidth - 723;
     //int selectHeight = screenHeight;
     //------------------------------------------------------------
-    
+        
-    // Color picker cursor texture generation
-    //-----------------------------------------------------------
-    int sizeCursor = 16; // size must be POT
-    unsigned char *cursorData = (unsigned char *)malloc(sizeCursor*sizeCursor*2*sizeof(unsigned char));
-    
-    for (int w = 0; w < sizeCursor; w++)
-    {
-        for (int h = 0; h < sizeCursor; h++)
-        {
-            cursorData[w*sizeCursor*2 + 2*h] = 0;
-            if ((sizeCursor%2) == 0)
-            {
-                if (((w == (sizeCursor/2 - 1)) || (w == sizeCursor/2)) && ((h == (sizeCursor/2 - 1)) || (h == sizeCursor/2)))
-                {
-                    cursorData[w*sizeCursor*2 + 2*h + 1] = 0;
-                }
-                else if ((w == (sizeCursor/2 - 1)) || (w == sizeCursor/2)) cursorData[w*sizeCursor*2 + 2*h + 1] = 255;
-                else if ((h == (sizeCursor/2 - 1)) || (h == sizeCursor/2)) cursorData[w*sizeCursor*2 + 2*h + 1] = 255;
-                else cursorData[w*sizeCursor*2 + 2*h + 1] = 0;
-            }            
-        }
-    }
-    
-    Image imCursor = LoadImagePro(cursorData, sizeCursor, sizeCursor, UNCOMPRESSED_GRAY_ALPHA);
-    Texture2D texCursor = LoadTextureFromImage(imCursor);
-    UnloadImage(imCursor);
-    free(cursorData);
-    //-----------------------------------------------------------
-    
     // Color picker
     //-----------------------------------------------------------
     Vector2 colorPickerPos = { (float)screenWidth - 287, 20.0f };
-    
+    Vector2 cursorPickerPos = colorPickerPos;
-    Image colorPickerImage;
-    colorPickerImage.data = pickerData;
-    colorPickerImage.width = 256;
-    colorPickerImage.height = 256;
-    colorPickerImage.mipmaps = 1;
-    colorPickerImage.format = UNCOMPRESSED_R8G8B8;   
-
-    Texture2D texColorPicker = LoadTextureFromImage(colorPickerImage);
-
-    Vector2 cursorPickerPos = {colorPickerPos.x +(texColorPicker.width/2) - texCursor.width/2, colorPickerPos.y + (texColorPicker.height/2) - texCursor.height/2};
-    
-    Color *colorPickerPixels = GetImageData(colorPickerImage);
-    
-    Rectangle colorPickerBounds = (Rectangle){ (int)colorPickerPos.x, (int)colorPickerPos.y, texColorPicker.width, texColorPicker.height };
-
-    Vector2 colorPosition;
     Color colorPickerValue;
     Color colorSample[NUM_COLOR_SAMPLES];
     
@@ -244,15 +198,12 @@ int main()
     int alphaValue = 255;
     
     // Color samples
-    Rectangle colorSelectedBoundsRec = {colorPickerPos.x, colorPickerPos.y + texColorPicker.height + 2*rgbDelta, 2*rgbWidthLabel, 2*rgbWidthLabel};
-    bool colorSelectedHover = false;
-    
     Rectangle sampleBoundsRec[NUM_COLOR_SAMPLES];
     int sampleHover = -1; 
     int sampleSelected = 0;
         
-    for (int i = 0; i < NUM_COLOR_SAMPLES/2; i++) sampleBoundsRec[i] = (Rectangle) {colorPickerPos.x + 2*rgbWidthLabel + i*rgbWidthLabel + 3*rgbDelta + i*rgbDelta, colorPickerPos.y + texColorPicker.height + 2*rgbDelta, rgbWidthLabel, rgbWidthLabel - 2};
+    for (int i = 0; i < NUM_COLOR_SAMPLES/2; i++) sampleBoundsRec[i] = (Rectangle) {colorPickerPos.x + 2*rgbWidthLabel + i*rgbWidthLabel + 3*rgbDelta + i*rgbDelta, colorPickerPos.y + 300 + 2*rgbDelta, rgbWidthLabel, rgbWidthLabel - 2};
-    for (int i = NUM_COLOR_SAMPLES/2; i < NUM_COLOR_SAMPLES; i++) sampleBoundsRec[i] = (Rectangle) {colorPickerPos.x + 2*rgbWidthLabel + (i-5)*rgbWidthLabel + 3*rgbDelta + (i-5)*rgbDelta, colorPickerPos.y + texColorPicker.height + 2*rgbDelta + rgbWidthLabel + 2, rgbWidthLabel, rgbWidthLabel - 2};
+    for (int i = NUM_COLOR_SAMPLES/2; i < NUM_COLOR_SAMPLES; i++) sampleBoundsRec[i] = (Rectangle) {colorPickerPos.x + 2*rgbWidthLabel + (i-5)*rgbWidthLabel + 3*rgbDelta + (i-5)*rgbDelta, colorPickerPos.y + 300 + 2*rgbDelta + rgbWidthLabel + 2, rgbWidthLabel, rgbWidthLabel - 2};
     //------------------------------------------------------------
     
     // Value size selection
@@ -281,25 +232,6 @@ int main()
     char guiText[16] = "\0";
 
     bool isModified = false;
-    
-    // Checked texture generation
-    //-----------------------------------------------------------
-    int size = 8;
-    Color *pixels = (Color *)malloc(size*size*sizeof(Color)); 
-    
-    for (int y = 0; y < size; y++)
-    {
-        for (int x = 0; x < size; x++)
-        {
-            if (((x/(size/2) + y/(size/2)))%2 == 0) pixels[y*size + x] = RAYWHITE;
-            else pixels[y*size + x] = Fade(LIGHTGRAY, 0.5f);
-        }
-    }
-    
-    Image imChecked = LoadImagePro(pixels, size, size, UNCOMPRESSED_R8G8B8A8);
-    Texture2D texChecked = LoadTextureFromImage(imChecked);
-    UnloadImage(imChecked);
-    free(pixels);
     //-----------------------------------------------------------
     
     // Get current directory
@@ -407,46 +339,9 @@ int main()
                     SetStyleProperty(guiPropertySelected, sizeValueSelected);
                 }
             }
-        
+
-            // Color picker logic
-            if (CheckCollisionPointRec(GetMousePosition(), colorPickerBounds))
-            {
-                if (IsMouseButtonDown(MOUSE_LEFT_BUTTON))
-                {
-                    if (!IsCursorHidden()) HideCursor();
-                    
-                    cursorPickerPos = (Vector2){ GetMousePosition().x - texCursor.width/2, GetMousePosition().y - texCursor.height/2};
-                    colorPosition = (Vector2){ GetMousePosition().x - colorPickerPos.x, GetMousePosition().y - colorPickerPos.y};
-                    
-                    colorPickerValue = colorPickerPixels[(int)colorPosition.x + (int)colorPosition.y*texColorPicker.width];
-                    redValue = colorPickerValue.r;
-                    greenValue = colorPickerValue.g;
-                    blueValue = colorPickerValue.b;
-                    alphaValue = colorPickerValue.a;
-                }            
-                
-                if (IsMouseButtonUp(MOUSE_LEFT_BUTTON) && IsCursorHidden()) ShowCursor();
-            }
-            else
-            {
-                if (IsCursorHidden()) ShowCursor();
-                
-                colorPickerValue.r = redValue;
-                colorPickerValue.g = greenValue;
-                colorPickerValue.b = blueValue;
-                colorPickerValue.a = alphaValue;
-                
-                if ((guiPropertySelected >= 0) && (guiPropertyType[guiPropertySelected] == 0))
-                {                
-                    if (GetStyleProperty(guiPropertySelected) != GetHexValue(colorPickerValue))
-                    {
-                        SetStyleProperty(guiPropertySelected, GetHexValue(colorPickerValue));
-                        isModified = true;
-                    }
-                }
-            }
-        
             // Color samples
+            /*
             if (CheckCollisionPointRec(GetMousePosition(), colorSelectedBoundsRec)) 
             {
                 colorSelectedHover = true;
@@ -475,6 +370,7 @@ int main()
                     }               
                 }            
             }
+            */
 
             // Update style color value
             if (guiPropertySelected == DEFAULT_BACKGROUND_COLOR) bgColor = colorPickerValue;
@@ -571,62 +467,32 @@ int main()
                 default: break;
             }
             
-            // Value editor
+            // Draw color picker
-            // -- Color picker
+            GuiColorPicker((Rectangle){ colorPickerPos.x, colorPickerPos.y, 240, 240 }, 60.0f, ORANGE);
-            DrawRectangleRec((Rectangle){colorPickerPos.x - 2, colorPickerPos.y - 2, texColorPicker.width + 4, texColorPicker.height + 4}, COLOR_REC);
-            DrawTextureV(texColorPicker, colorPickerPos, WHITE);
-            DrawTextureV(texCursor, cursorPickerPos, WHITE);
             
-            //DrawRectangleV(GetMousePosition(), (Vector2){ 4, 4 }, RED);
+            // Draw color samples
-
+            /*
-            // -- Color value result
-            if (colorSelectedHover) DrawRectangle(colorPickerPos.x - 3, colorPickerPos.y - 3 + texColorPicker.height + 2*rgbDelta, 2*rgbWidthLabel + 6, 2*rgbWidthLabel + 6, BLACK);
-            else DrawRectangle(colorPickerPos.x - 2, colorPickerPos.y - 2 + texColorPicker.height + 2*rgbDelta, 2*rgbWidthLabel + 4, 2*rgbWidthLabel + 4, Fade(COLOR_REC, 0.8f));
-            DrawRectangleRec (colorSelectedBoundsRec, WHITE);
-            DrawRectangleRec (colorSelectedBoundsRec, colorPickerValue);
-            
-            // -- Color samples
             for (int i = 0; i < NUM_COLOR_SAMPLES/2; i++) 
             {
-                if (i == sampleSelected) DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + i*rgbWidthLabel + 3*rgbDelta + i*rgbDelta - 2, colorPickerPos.y - 2 + texColorPicker.height + 2*rgbDelta, rgbWidthLabel + 4, rgbWidthLabel + 2, BLACK); 
+                if (i == sampleSelected) DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + i*rgbWidthLabel + 3*rgbDelta + i*rgbDelta - 2, colorPickerPos.y - 2 + 300 + 2*rgbDelta, rgbWidthLabel + 4, rgbWidthLabel + 2, BLACK); 
-                else if (i == sampleHover) DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + i*rgbWidthLabel + 3*rgbDelta + i*rgbDelta - 2, colorPickerPos.y - 2 + texColorPicker.height + 2*rgbDelta, rgbWidthLabel + 4, rgbWidthLabel + 2, Fade(COLOR_REC, 0.8f));
+                else if (i == sampleHover) DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + i*rgbWidthLabel + 3*rgbDelta + i*rgbDelta - 2, colorPickerPos.y - 2 + 300 + 2*rgbDelta, rgbWidthLabel + 4, rgbWidthLabel + 2, Fade(COLOR_REC, 0.8f));
-                else DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + i*rgbWidthLabel + 3*rgbDelta + i*rgbDelta - 1, colorPickerPos.y - 1 + texColorPicker.height + 2*rgbDelta, rgbWidthLabel + 2, rgbWidthLabel, Fade(COLOR_REC, 0.6f));
+                else DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + i*rgbWidthLabel + 3*rgbDelta + i*rgbDelta - 1, colorPickerPos.y - 1 + 300 + 2*rgbDelta, rgbWidthLabel + 2, rgbWidthLabel, Fade(COLOR_REC, 0.6f));
-                DrawRectangle(colorPickerPos.x + 2*rgbWidthLabel + i*rgbWidthLabel + 3*rgbDelta + i*rgbDelta, colorPickerPos.y + texColorPicker.height + 2*rgbDelta, rgbWidthLabel, rgbWidthLabel - 2, colorSample[i]);  
+                DrawRectangle(colorPickerPos.x + 2*rgbWidthLabel + i*rgbWidthLabel + 3*rgbDelta + i*rgbDelta, colorPickerPos.y + 300 + 2*rgbDelta, rgbWidthLabel, rgbWidthLabel - 2, colorSample[i]);  
             }
             
             for (int i = NUM_COLOR_SAMPLES/2; i < NUM_COLOR_SAMPLES; i++) 
             {
-                if (i == sampleSelected) DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + (i-5)*rgbWidthLabel + 3*rgbDelta + (i-5)*rgbDelta - 2, colorPickerPos.y - 2 + texColorPicker.height + 2*rgbDelta + rgbWidthLabel + 2, rgbWidthLabel + 4, rgbWidthLabel + 2, BLACK); 
+                if (i == sampleSelected) DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + (i-5)*rgbWidthLabel + 3*rgbDelta + (i-5)*rgbDelta - 2, colorPickerPos.y - 2 + 300 + 2*rgbDelta + rgbWidthLabel + 2, rgbWidthLabel + 4, rgbWidthLabel + 2, BLACK); 
-                else if (i == sampleHover) DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + (i-5)*rgbWidthLabel + 3*rgbDelta + (i-5)*rgbDelta - 2, colorPickerPos.y - 2 + texColorPicker.height + 2*rgbDelta + rgbWidthLabel + 2, rgbWidthLabel + 4, rgbWidthLabel + 2, Fade(COLOR_REC, 0.8f));
+                else if (i == sampleHover) DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + (i-5)*rgbWidthLabel + 3*rgbDelta + (i-5)*rgbDelta - 2, colorPickerPos.y - 2 + 300 + 2*rgbDelta + rgbWidthLabel + 2, rgbWidthLabel + 4, rgbWidthLabel + 2, Fade(COLOR_REC, 0.8f));
-                else DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + (i-5)*rgbWidthLabel + 3*rgbDelta + (i-5)*rgbDelta - 1, colorPickerPos.y - 1 + texColorPicker.height + 2*rgbDelta + rgbWidthLabel + 2, rgbWidthLabel + 2, rgbWidthLabel, Fade(COLOR_REC, 0.6f));
+                else DrawRectangle (colorPickerPos.x + 2*rgbWidthLabel + (i-5)*rgbWidthLabel + 3*rgbDelta + (i-5)*rgbDelta - 1, colorPickerPos.y - 1 + 300 + 2*rgbDelta + rgbWidthLabel + 2, rgbWidthLabel + 2, rgbWidthLabel, Fade(COLOR_REC, 0.6f));
-                DrawRectangle(colorPickerPos.x + 2*rgbWidthLabel + (i-5)*rgbWidthLabel + 3*rgbDelta + (i-5)*rgbDelta, colorPickerPos.y + texColorPicker.height + 2*rgbDelta + rgbWidthLabel + 2, rgbWidthLabel, rgbWidthLabel - 2, colorSample[i]);  
+                DrawRectangle(colorPickerPos.x + 2*rgbWidthLabel + (i-5)*rgbWidthLabel + 3*rgbDelta + (i-5)*rgbDelta, colorPickerPos.y + 300 + 2*rgbDelta + rgbWidthLabel + 2, rgbWidthLabel, rgbWidthLabel - 2, colorSample[i]);  
             }
-              
+            */
-            // -- RGBA sliders
-            //GuiLabelEx((Rectangle){colorPickerPos.x, colorPickerPos.y + texColorPicker.height + 14*rgbDelta, rgbWidthLabel, rgbHeightLabel}, FormatText("%d", redValue), BLACK, COLOR_REC, RED);
-            redValue = GuiSlider((Rectangle){colorPickerPos.x + rgbWidthLabel + rgbDelta, colorPickerPos.y + texColorPicker.height + 14*rgbDelta, texColorPicker.height - rgbWidthLabel - rgbDelta, rgbHeightLabel}, redValue, 0, 255);
 
-            //GuiLabelEx((Rectangle){colorPickerPos.x, colorPickerPos.y + texColorPicker.height + 15*rgbDelta + rgbHeightLabel, rgbWidthLabel, rgbHeightLabel}, FormatText("%d", greenValue), BLACK, COLOR_REC, GREEN);
+            // Draw Load and Save buttons
-            greenValue = GuiSlider((Rectangle){colorPickerPos.x + rgbWidthLabel + rgbDelta, colorPickerPos.y + texColorPicker.height + 15*rgbDelta + rgbHeightLabel, texColorPicker.height - rgbWidthLabel - rgbDelta, rgbHeightLabel}, greenValue, 0, 255);
+            if (GuiButton((Rectangle){ colorPickerPos.x, screenHeight - 3*rgbWidthLabel - rgbDelta - STATUS_BAR_HEIGHT, 260, rgbWidthLabel}, "Load Style")) BtnLoadStyle();
+            if (GuiButton((Rectangle){ colorPickerPos.x, screenHeight - 2*rgbWidthLabel - STATUS_BAR_HEIGHT, 260, rgbWidthLabel}, "Save Style")) BtnSaveStyle();
 
-            //GuiLabelEx((Rectangle){colorPickerPos.x, colorPickerPos.y + texColorPicker.height + 16*rgbDelta + 2*rgbHeightLabel, rgbWidthLabel, rgbHeightLabel}, FormatText("%d", blueValue), BLACK, COLOR_REC, BLUE);
-            blueValue = GuiSlider((Rectangle){colorPickerPos.x + rgbWidthLabel + rgbDelta, colorPickerPos.y + texColorPicker.height + 16*rgbDelta + 2*rgbHeightLabel, texColorPicker.height - rgbWidthLabel - rgbDelta, rgbHeightLabel}, blueValue, 0, 255);
-            
-            DrawTextureRec(texChecked, (Rectangle){0,0,rgbWidthLabel, rgbHeightLabel}, (Vector2){colorPickerPos.x, colorPickerPos.y + texColorPicker.height + 17*rgbDelta + 3*rgbHeightLabel}, WHITE);   
-            DrawRectangle(colorPickerPos.x, colorPickerPos.y + texColorPicker.height + 17*rgbDelta + 3*rgbHeightLabel, rgbWidthLabel, rgbHeightLabel, Fade(colorPickerValue, (float)alphaValue/100));            
-            alphaValue = GuiSlider((Rectangle){colorPickerPos.x + rgbWidthLabel + rgbDelta, colorPickerPos.y + texColorPicker.height + 17*rgbDelta + 3*rgbHeightLabel, texColorPicker.height - rgbWidthLabel - rgbDelta, rgbHeightLabel}, alphaValue, 0, 255);
-            DrawRectangleLines(colorPickerPos.x,colorPickerPos.y + texColorPicker.height + 17*rgbDelta + 3*rgbHeightLabel,rgbWidthLabel, rgbHeightLabel, COLOR_REC);
-            
-            // -- VALUE Spinner 
-            GuiLabel((Rectangle){ colorPickerPos.x + 2*rgbDelta, colorPickerPos.y + texColorPicker.height + 10*rgbHeightLabel, rgbWidthLabel, rgbWidthLabel}, "Value");
-            sizeValueSelected = GuiSpinner((Rectangle){ colorPickerPos.x + 2*rgbWidthLabel, colorPickerPos.y + texColorPicker.height + 10*rgbHeightLabel, texColorPicker.height - 2*rgbWidthLabel, rgbWidthLabel}, sizeValueSelected, 0, 50);
-
-            // -- Load and Save buttons
-            if (GuiButton((Rectangle){ colorPickerPos.x, screenHeight - 3*rgbWidthLabel - rgbDelta - STATUS_BAR_HEIGHT, texColorPicker.width, rgbWidthLabel}, "Load Style")) BtnLoadStyle();
-            if (GuiButton((Rectangle){ colorPickerPos.x, screenHeight - 2*rgbWidthLabel - STATUS_BAR_HEIGHT, texColorPicker.width, rgbWidthLabel}, "Save Style")) BtnSaveStyle();
-
-            //GuiLabel((Rectangle){colorPickerPos.x, screenHeight - 2*rgbWidthLabel - STATUS_BAR_HEIGHT + rgbDelta, 2*rgbWidthLabel, rgbWidthLabel}, "File name");
-            //fileName = GuiTextBox((Rectangle){colorPickerPos.x + 2*rgbWidthLabel, screenHeight - 2*rgbWidthLabel - STATUS_BAR_HEIGHT + rgbDelta, texColorPicker.width - 2*rgbWidthLabel, rgbWidthLabel}, fileName);
             
             // Draw GUI Elements text
             for (int i = 0; i < NUM_ELEMENTS; i++) DrawText(guiElementText[i], guiElementRec[i].width/2 - MeasureText(guiElementText[i], FONT_SIZE)/2, 15 + i*ELEMENT_HEIGHT, FONT_SIZE, BLACK);
@@ -648,13 +514,6 @@ int main()
     }
     // De-Initialization
     //--------------------------------------------------------------------------------------    
-    // Unload all loaded data (textures, fonts, audio)
-    UnloadTexture(texColorPicker);
-    UnloadTexture(texChecked);
-    UnloadTexture(texCursor);
-
-    free(colorPickerPixels);
-    
     ClearDroppedFiles();    // Clear internal buffers
     
     CloseWindow();          // Close window and OpenGL context