Color themes and gradient power.

Hey!

This time I would like to talk how the shapes are getting drawn using the list of color themes.

The new GUI system includes a color theme support. Generally you define a unique color for each element of the widget shape. All the unique colors are stored in one list. By making another list with the same color names but with different color values, it is possible to apply new color values  to the GUI widgets without making changes within the widget itself.

I made a separate file which is part of the skin. By default it is called themes.cfg .
It holds different themes and each of them can hold different color values. Like this:



<theme>
            name = "default"
            <colors>
                    window_fill                         = RGBA{ 0.4 , 0.4 , 0.4 , 1.0 }
                   button_fill                             = RGBA{ 0.5 , 0.5 , 0.5 , 1.0 }
                   button_hover_start_fill    = RGBA{ 0.0 , 1.0 , 0.0 , 0.1 }
                   button_hover_end_fill       = RGBA{ 0.0 , 1.0 , 0.0 , 0.0 }
      </colors>
</theme>

<theme>
      name = "blue"
      <colors>
                    window_fill                       = RGBA{ 0.0 , 0.0 , 0.4 , 1.0 }
                    button_fill                          = RGBA{ 0.2 , 0.2 , 0.5 , 1.0 }
                    button_hover_start_fill  = RGBA{ 0.0 , 0.0 , 1.0 , 0.1 }
                    button_hover_end_fill    = RGBA{ 0.0 , 0.0 , 1.0 , 0.0 }
      </colors>
</theme>
 

It is really easy and straightforward to change these values or add another theme.

The gradient effect is created using only 2 colors from the theme table.



As you can see on this picture there are 2 points. Generally they are used for defining the gradient and texture coordinate values. They are referenced in the strokes.cfg file:


<frame>
          gradient = "vertical"
          <point>
                theme = "button_hover_start_fill"
                uv = UV{ 0.0 , 0.0 }
          </point>
          <point>
                theme = "button_hover_end_fill"
                uv = UV{ 1.0 , 1.0 }
          </point>
</frame>



As you can see the shape is defined here using vertical gradient type.
The color values for each vertex are interpolated depending on the initial point color values and the vertex position relative to the point1 and point2.

There are also other different gradient types that can be used for defining shape appearance:

Solid - only point1 color is used:


Horizontal:


Linear - this is where it is possible to define the gradient angle = 0..360 degrees:


This is probably all there is to know about the gradient and colors in the new GUI system.