Buttons GUI

Buttons GUI

I am going to take one of my programs (csv2dxf.c) and replace Zenity with my Dialog.h header file.

Lets call my GUI "Buttons", as it is conceptually a grid of buttons but with differing properties. The main constraint is that the grid is fixed width and fixed height.

So the following image is a two column by ten row grid. Each cell is 160 pixels wide by 50 pixels high.

Obviously I can merge cells such as the title and sub-titles.

Here is how the grid is defined:

//  Here is our basic cell grid defintions  --------------------
#define cellWidth                   160
#define cellHeight                   50
#define cellColCnt                    2
#define cellRowCnt                   10
#define cellCnt                      20

Cells 

Cells are defined by a structure:

//  The master cell structure  ---------------------------------
enum modes {hidden,label,input,cancel,okay,toggle,button};
struct CELL {
int Id;
int Forward;
enum modes Mode;
int Width;
int Height;
int PosX;
int PosY;
bool Selected;
int ButtonClr;
int PaddingWidth;
int PaddingClr;
int SideWidth;
int SideLightClr;
int SideDarkClr;
int FontSize;
char FontName[64];
char Label[32];
} cells[cellCnt];

Note button types or modes are defined in the enum structure.

Button Style and Colours

The defaults for every cells are:

//  Default cell properties  -----------------------------------
#define cellMode                 hidden
#define cellSelected              false
#define cellButtonClr       (160)*65793
#define cellPaddingWidth              5
#define cellPaddingClr (256-32/2)*65793
#define cellSideWidth                 5
#define cellSideLightClr (160+64)*65793
#define cellSideDarkClr  (160-32)*65793
#define cellFontSize                 15
#define cellFontName       fontName9x15
#define cellLabel               "Label"

I have used a grey for my buttons but it is configurable.

Fonts

Fonts are based on what is available under the X11 system. There are 948 fonts on my system but I only bound 18 fonts named in the font alias file. The font alias file is for backward compatibility. The aliases map to real font names.

For example:

    "variable"

maps to

"    -*-helvetica-bold-r-normal-*-*-120-*-*-*-*-iso8859-1"

   which maps to

"-adobe-helvetica-bold-r-normal--0-0-0-0-p-0-iso8859-1"

  which maps to

 "-urw-nimbus sans l-bold-r-normal--0-0-0-0-p-0-iso8859-1"

Not all fonts work, but those with character set "iso8859-1" appears to be good.

One problem is that the X11 system uses bit maps and therefore don't re-scale well. 

const char *fontNameFixed    = "fixed";   //  Same as 6x13
const char *fontNameVariable = "variable";//  Helvetica Bold 13
const char *fontName5x7      = "5x7";
const char *fontName5x8      = "5x8";
const char *fontName6x9      = "6x9"; 
const char *fontName6x10     = "6x10";
const char *fontName6x12     = "6x12";
const char *fontName6x13     = "6x13";
const char *fontName6x13bold = "6x13bold";
const char *fontName7x14     = "7x14";
const char *fontName7x14bold = "7x14bold";
const char *fontName8x13     = "8x13";
const char *fontName8x13bold = "8x13bold";
const char *fontName8x16     = "8x16";
const char *fontName9x15     = "9x15";    //  Nice fixed default
const char *fontName9x15bold = "9x15bold";
const char *fontName10x20    = "10x20";   // Good Sub-tile
const char *fontName12x24    = "12*24";   // Good title

Layout

Best to draw a grid for your GUI numbering the cells from 0 to cellCnt-1 by column and then row:

Cell 0: Title	Cell 1: Title continued
Cell 2: Sub-title	Cell 3: Sub-title continued
Cell 4: Label	Cell 5: Input
Cell 6: Label	Cell 7: Input
Cell 8: Sub-title	Cell 9: Sub-title continued
Cell 10: Label	Cell 11: Input
Cell 12: Label	Cell 13: Input
Cell 14: Label	Cell 15: Input
Cell 16: Label	Cell 17: Input
Cell 18: Cancel	Cell 19: Okay

Overwrite the button defaults as required.

Here is the first row:

// Row 1: Title
cells[0].Mode=label
strcpy(cells[0].Label,"      CSV to DXF");
strcpy(cells[0].FontName,fontName12x24);
cells[0].FontSize=24;
cells[0].Width=2*cellWidth;
cells[1].Mode=hidden;
cells[1].Forward=0;

 The updates include:

• setting the Label to "CSV to DXF"
• setting the FontName to "12x24"
• setting the FontSize to 24
• expanding the cell width to cover the next cell
• hiding the next cell no. 1
• forwarding mouse clicks for cell no. 1 to the previous cell no. 0

Here is the third row:

// Row 2: Input CSV File
cells[4].Mode=label;
strcpy(cells[4].Label,"Input CSV File");
cells[5].Mode=input;
strcpy(cells[5].Label,"ClarkY.csv");

The updates include:

• setting the Label for cell no 4 to "Input CSV File"
• setting the Mode for cell no 5 to input
• setting the Label for cell no 5 to "ClarkY.csv"

Finally for Row 10, add Cancel and Okay buttons:

// Row 10: Cancel & Okay
cells[18].Mode=cancel;
strcpy(cells[18].Label,"  CANCEL");
strcpy(cells[18].FontName,fontName12x24);
cells[18].FontSize=24;
cells[19].Mode=okay;
strcpy(cells[19].Label,"   OKAY");
strcpy(cells[19].FontName,fontName12x24);
cells[19].FontSize=24;

Two Other Button Types

 I have included button mode(s) "toggle" and "button".

The toggle mode turns on or turns off and stay that way until pressed again. Good to binary or true/false options. The toggle button is persistent and can be tested by the main program after the dialog window has closed.

The "button" mode only  turns on while being pushed. The buttons can call a process while the dialog window is active. This type of button could for example, call a file manager to return a selected file name.

TBC ...