Difference between revisions of "Frame"

From uGFX Wiki
Jump to: navigation, search
Line 1: Line 1:
 
[[File:Frame_example_1.PNG|right|frame|Color picker example using the frame widget.]]The frame widget is based on the [[container]]. It behaves like a window similar to the ones you know from your computer. It has a border, a window title and an optional button to close it.
 
[[File:Frame_example_1.PNG|right|frame|Color picker example using the frame widget.]]The frame widget is based on the [[container]]. It behaves like a window similar to the ones you know from your computer. It has a border, a window title and an optional button to close it.
 +
 +
== API reference ==
 +
The API reference for the basic container can be found [http://ugfx.org/images/resources/doxygen/master/group___frame.html here].
 +
 +
== Custom Draw Routines ==
 +
The frame widget predefines a number of custom draw routines. They can be set using <code>gwinSetCustomDraw()</code> or by specifying the custom draw routine in the GWidgetInit structure during creation. The predefined custom draw routines are:
 +
{| class="wikitable"
 +
! scope="col"|Custom Draw Routine
 +
! scope="col"|Description
 +
|-
 +
|gwinFrameDraw_Std
 +
| The client area is filled with the background color.
 +
|-
 +
|gwinFrameDraw_Transparent
 +
| The client area is not filled in at all.
 +
|-
 +
|gwinFrameDraw_Image
 +
| The parameter is an open gdispImage that is tiled to fill the client area of the frame.
 +
|}
  
 
== Window title ==
 
== Window title ==
Line 8: Line 27:
  
 
The close button can be enabled by passing <code>GWIN_FRAME_CLOSE_BTN</code> as a flag to the <code>gwinFrameCreate()</code> routine.
 
The close button can be enabled by passing <code>GWIN_FRAME_CLOSE_BTN</code> as a flag to the <code>gwinFrameCreate()</code> routine.
 
== API reference ==
 
The API reference for the basic container can be found [http://ugfx.org/images/resources/doxygen/master/group___frame.html here].
 
  
 
== Example ==
 
== Example ==

Revision as of 14:18, 16 August 2014

Color picker example using the frame widget.
The frame widget is based on the container. It behaves like a window similar to the ones you know from your computer. It has a border, a window title and an optional button to close it.

API reference

The API reference for the basic container can be found here.

Custom Draw Routines

The frame widget predefines a number of custom draw routines. They can be set using gwinSetCustomDraw() or by specifying the custom draw routine in the GWidgetInit structure during creation. The predefined custom draw routines are:

Custom Draw Routine Description
gwinFrameDraw_Std The client area is filled with the background color.
gwinFrameDraw_Transparent The client area is not filled in at all.
gwinFrameDraw_Image The parameter is an open gdispImage that is tiled to fill the client area of the frame.

Window title

The frames window title can either be set using the wi.g.text parameter of the initialization struct or the gwinSetText() API call.

Buttons

The frame widget can optionally implement a close button. It shows up as an 'x' in the top right hand corner. If the button is pressed, gwinDestroy() is automatically called on the frame widget. Therefore, the entire widget including all its children will be destroyed.

The close button can be enabled by passing GWIN_FRAME_CLOSE_BTN as a flag to the gwinFrameCreate() routine.

Example

The following example shows how to create and use the frame widget. Several other widgets are added to the frame in order to create some kind of color picker dialog.

#include "gfx.h"
#include "stdio.h"
 
static GListener    gl;
static GHandle      ghFrame1;
static GHandle      ghSliderR, ghSliderG, ghSliderB;
static GHandle      ghButton1, ghButton2, ghButton3;
static GHandle      ghWindow1;
 
static void _updateColor(void) {
    uint32_t color;
 
    color  = (unsigned)gwinSliderGetPosition(ghSliderR) << 16;
    color |= (unsigned)gwinSliderGetPosition(ghSliderG) <<  8;
    color |= (unsigned)gwinSliderGetPosition(ghSliderB) <<  0;
 
    gwinSetBgColor(ghWindow1, HTML2COLOR(color));
    gwinClear(ghWindow1);
}
 
static void _createWidgets(void) {
    GWidgetInit wi;
 
    // Apply some default values for GWIN
    gwinWidgetClearInit(&wi);
    wi.g.show = TRUE;
 
    // Apply the frame parameters    
    wi.g.width = 300;
    wi.g.height = 200;
    wi.g.y = 10;
    wi.g.x = 10;
    wi.text = "Colorpicker";
    ghFrame1 = gwinFrameCreate(0, &wi, GWIN_FRAME_BORDER | GWIN_FRAME_CLOSE_BTN | GWIN_FRAME_MINMAX_BTN);
 
    // Apply the button parameters
    wi.g.width = 60;
    wi.g.height = 20;
    wi.g.x = 10;
    wi.g.y = 10;
    wi.text = "Random";
    wi.g.parent = ghFrame1;
    ghButton1 = gwinButtonCreate(0, &wi);
 
    // Apply the slider parameters
    wi.g.width = 200;
    wi.g.height = 20;
    wi.g.x = 80;
    wi.g.y += 0;
    wi.text = "Red";
    wi.g.parent = ghFrame1;
    ghSliderR = gwinSliderCreate(0, &wi);
    gwinSliderSetRange(ghSliderR, 0, 255);
    gwinSliderSetPosition(ghSliderR, 180);
 
    // Apply the button parameters
    wi.g.width = 60;
    wi.g.height = 20;
    wi.g.x = 10;
    wi.g.y += 25;
    wi.text = "Random";
    wi.g.parent = ghFrame1;
    ghButton2 = gwinButtonCreate(0, &wi);
 
    // Apply the slider parameters
    wi.g.width = 200;
    wi.g.height = 20;
    wi.g.x = 80;
    wi.g.y += 0;
    wi.text = "Green";
    wi.g.parent = ghFrame1;
    ghSliderG = gwinSliderCreate(0, &wi);
    gwinSliderSetRange(ghSliderG, 0, 255);
    gwinSliderSetPosition(ghSliderG, 60);
 
    // Apply the button parameters
    wi.g.width = 60;
    wi.g.height = 20;
    wi.g.x = 10;
    wi.g.y += 25;
    wi.text = "Random";
    wi.g.parent = ghFrame1;
    ghButton3 = gwinButtonCreate(0, &wi);
 
    // Apply the slider parameters
    wi.g.width = 200;
    wi.g.height = 20;
    wi.g.x = 80;
    wi.g.y += 0;
    wi.text = "Blue";
    wi.g.parent = ghFrame1;
    ghSliderB = gwinSliderCreate(0, &wi);
    gwinSliderSetRange(ghSliderB, 0, 255);
    gwinSliderSetPosition(ghSliderB, 235);
 
    // Color Preview
    wi.g.width = 270;
    wi.g.height = 65;
    wi.g.x = 10;
    wi.g.y = 90;
    ghWindow1 = gwinWindowCreate(0, &wi.g);
 
    _updateColor();
}
 
int main(void) {
    GEvent* pe;
 
    // Initialize the display
    gfxInit();
 
    // Attach the mouse input
    gwinAttachMouse(0);
 
    // Set the widget defaults
    gwinSetDefaultFont(gdispOpenFont("*"));
    gwinSetDefaultStyle(&WhiteWidgetStyle, FALSE);
    gdispClear(White);
 
    // create the widget
    _createWidgets();
 
    // We want to listen for widget events
    geventListenerInit(&gl);
    gwinAttachListener(&gl);
 
    while(1) {
        // Get an Event
        pe = geventEventWait(&gl, TIME_INFINITE);
 
        switch(pe->type) {
            case GEVENT_GWIN_SLIDER:
                if (((GEventGWinSlider *)pe)->slider == ghSliderR || \
                                                        ghSliderG || \
                                                        ghSliderB ) {
                    _updateColor();
                }
                break;
 
            case GEVENT_GWIN_BUTTON:
                if (((GEventGWinButton *)pe)->button == ghButton1) {
                    gwinSliderSetPosition(ghSliderR, rand() % 256);
                } else if (((GEventGWinButton *)pe)->button == ghButton2) {
                    gwinSliderSetPosition(ghSliderG, rand() % 256);
                } else if (((GEventGWinButton *)pe)->button == ghButton3) {
                    gwinSliderSetPosition(ghSliderB, rand() % 256);
                }
 
                _updateColor();
 
            default:
                break;
        }
    }
 
    return 0;
}