Frame

From uGFX Wiki
Revision as of 17:52, 1 July 2014 by Tectu (Talk | contribs) (Created page with "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 butto...")

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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.

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.

Overlay

If you want to use the frame widget as some kind of message box, then you have to note the following: The window manager of uGFX does currently not handle transparent inputs. This means that widgets that are "below" the frame are still being triggered when the area "above" them is being touched. To workaround this issue, a root container can be created that fills the entire screen size. Every widget and container will be added as a child to this root container. Hide the root container before the frame widgets shows up using gwinHide() and make it visible again using gwinShow() once the frame has been closed.

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.

  1. #include "gfx.h"
  2. #include "stdio.h"
  3.  
  4. static GListener    gl;
  5. static GHandle      ghFrame1;
  6. static GHandle      ghSliderR, ghSliderG, ghSliderB;
  7. static GHandle      ghButton1, ghButton2, ghButton3;
  8. static GHandle      ghWindow1;
  9.  
  10. static void _updateColor(void) {
  11.     uint32_t color;
  12.  
  13.     color  = (unsigned)gwinSliderGetPosition(ghSliderR) << 16;
  14.     color |= (unsigned)gwinSliderGetPosition(ghSliderG) <<  8;
  15.     color |= (unsigned)gwinSliderGetPosition(ghSliderB) <<  0;
  16.  
  17.     gwinSetBgColor(ghWindow1, HTML2COLOR(color));
  18.     gwinClear(ghWindow1);
  19. }
  20.  
  21. static void _createWidgets(void) {
  22.     GWidgetInit wi;
  23.  
  24.     // Apply some default values for GWIN
  25.     gwinWidgetClearInit(&wi);
  26.     wi.g.show = TRUE;
  27.  
  28.     // Apply the frame parameters    
  29.     wi.g.width = 300;
  30.     wi.g.height = 200;
  31.     wi.g.y = 10;
  32.     wi.g.x = 10;
  33.     wi.text = "Colorpicker";
  34.     ghFrame1 = gwinFrameCreate(0, &wi, GWIN_FRAME_BORDER | GWIN_FRAME_CLOSE_BTN | GWIN_FRAME_MINMAX_BTN);
  35.  
  36.     // Apply the button parameters
  37.     wi.g.width = 60;
  38.     wi.g.height = 20;
  39.     wi.g.x = 10;
  40.     wi.g.y = 10;
  41.     wi.text = "Random";
  42.     wi.g.parent = ghFrame1;
  43.     ghButton1 = gwinButtonCreate(0, &wi);
  44.  
  45.     // Apply the slider parameters
  46.     wi.g.width = 200;
  47.     wi.g.height = 20;
  48.     wi.g.x = 80;
  49.     wi.g.y += 0;
  50.     wi.text = "Red";
  51.     wi.g.parent = ghFrame1;
  52.     ghSliderR = gwinSliderCreate(0, &wi);
  53.     gwinSliderSetRange(ghSliderR, 0, 255);
  54.     gwinSliderSetPosition(ghSliderR, 180);
  55.  
  56.     // Apply the button parameters
  57.     wi.g.width = 60;
  58.     wi.g.height = 20;
  59.     wi.g.x = 10;
  60.     wi.g.y += 25;
  61.     wi.text = "Random";
  62.     wi.g.parent = ghFrame1;
  63.     ghButton2 = gwinButtonCreate(0, &wi);
  64.  
  65.     // Apply the slider parameters
  66.     wi.g.width = 200;
  67.     wi.g.height = 20;
  68.     wi.g.x = 80;
  69.     wi.g.y += 0;
  70.     wi.text = "Green";
  71.     wi.g.parent = ghFrame1;
  72.     ghSliderG = gwinSliderCreate(0, &wi);
  73.     gwinSliderSetRange(ghSliderG, 0, 255);
  74.     gwinSliderSetPosition(ghSliderG, 60);
  75.  
  76.     // Apply the button parameters
  77.     wi.g.width = 60;
  78.     wi.g.height = 20;
  79.     wi.g.x = 10;
  80.     wi.g.y += 25;
  81.     wi.text = "Random";
  82.     wi.g.parent = ghFrame1;
  83.     ghButton3 = gwinButtonCreate(0, &wi);
  84.  
  85.     // Apply the slider parameters
  86.     wi.g.width = 200;
  87.     wi.g.height = 20;
  88.     wi.g.x = 80;
  89.     wi.g.y += 0;
  90.     wi.text = "Blue";
  91.     wi.g.parent = ghFrame1;
  92.     ghSliderB = gwinSliderCreate(0, &wi);
  93.     gwinSliderSetRange(ghSliderB, 0, 255);
  94.     gwinSliderSetPosition(ghSliderB, 235);
  95.  
  96.     // Color Preview
  97.     wi.g.width = 270;
  98.     wi.g.height = 65;
  99.     wi.g.x = 10;
  100.     wi.g.y = 90;
  101.     ghWindow1 = gwinWindowCreate(0, &wi.g);
  102.  
  103.     _updateColor();
  104. }
  105.  
  106. int main(void) {
  107.     GEvent* pe;
  108.  
  109.     // Initialize the display
  110.     gfxInit();
  111.  
  112.     // Attach the mouse input
  113.     gwinAttachMouse(0);
  114.  
  115.     // Set the widget defaults
  116.     gwinSetDefaultFont(gdispOpenFont("*"));
  117.     gwinSetDefaultStyle(&WhiteWidgetStyle, FALSE);
  118.     gdispClear(White);
  119.  
  120.     // create the widget
  121.     _createWidgets();
  122.  
  123.     // We want to listen for widget events
  124.     geventListenerInit(&gl);
  125.     gwinAttachListener(&gl);
  126.  
  127.     while(1) {
  128.         // Get an Event
  129.         pe = geventEventWait(&gl, TIME_INFINITE);
  130.  
  131.         switch(pe->type) {
  132.             case GEVENT_GWIN_SLIDER:
  133.                 if (((GEventGWinSlider *)pe)->slider == ghSliderR || \
  134.                                                         ghSliderG || \
  135.                                                         ghSliderB ) {
  136.                     _updateColor();
  137.                 }
  138.                 break;
  139.  
  140.             case GEVENT_GWIN_BUTTON:
  141.                 if (((GEventGWinButton *)pe)->button == ghButton1) {
  142.                     gwinSliderSetPosition(ghSliderR, rand() % 256);
  143.                 } else if (((GEventGWinButton *)pe)->button == ghButton2) {
  144.                     gwinSliderSetPosition(ghSliderG, rand() % 256);
  145.                 } else if (((GEventGWinButton *)pe)->button == ghButton3) {
  146.                     gwinSliderSetPosition(ghSliderB, rand() % 256);
  147.                 }
  148.  
  149.                 _updateColor();
  150.  
  151.             default:
  152.                 break;
  153.         }
  154.     }
  155.  
  156.     return 0;
  157. }