Edit

Button Series Control Class

Brief Introduction of Button Series Control

Button is an essential control of human computer interaction in the user interface, and all the human computer interaction interfaces include button. In the design of mGNCS, button use conditions under different use environments are fully considered, and different properties and interfaces etc. are provided for the convenience of user componentization development. Buttons in mGNCS reconstruct built-in button control in MiniGUI 3.0 and conduct big adjustment. Two button types are added, greatly strengthening button control. Buttons in MiniGNCS include five types, common button, check box, single selection button, menu button and color selection button. Users can select or switch status of buttons through keyboard or mouse. Input of users will make buttons generate notification message, and applications can send messages to the buttons to change the status of the buttons. Each button type corresponds to one class, which contains style, property, event, method and renderer. Functions of the controls provided in mGNCS are usually stronger than the functions of the controls used on PC, providing more configurable information, and renderer editing is added.

In this document, button class and the properties in it will be introduced in detail, making it convenient for the users to further understand the details of buttons, thus buttons can be used more flexibly.

Class hierarchical relation related to buttons:

Control creating methods:

  • Automatic creation: through interface designer in miniStudio, corresponding button control is dragged. miniStudio will automatically create control and provide visual control configuration, and at the same time, creation codes are generated automatically.

  • Manual generation: according to mGNCS control creation process, through programming, corresponding control window class ID is imported and control is generated. Manual programming sets control property and event handling.

Button Class Renderer

mGNCS provides four types of renderers and defines renderer property setting set. The four types of renderers correspond to four kinds of renderer property setting set. For button class control, the four kinds of renderers defines which renderer property can be set in the button control and which effect can it be set to. mGNCS provides default renderer property. Of course, users can change these properties, thus different effects can be set. That is to say, users can change different renderer properties and create numerous renderer examples based on the four types of renderers.

mButton

  • Control window class: NCSCTRL_BUTTON

  • Control English name: Push Button

  • Brief introduction: It is button of press down mode. On the button, the simple ones can be represented by literals and can be marked by images, and they can be displayed by mixture of images and literals.

alt

To understand programming of buttons, firstly, it is necessary to understand the status of buttons. In mGNCS, the status of buttons is divided into four kinds, refer to appendix definition and note: ButtonState ButtonState

Style of mButton

Style of buttons includes two categories:

  • Firstly, it is defining button CHECK status, which is press down status, and setting is carried out through Checkable/Autocheck/ThreeDCheck in the property;

  • Secondly, it is setting button panel as displaying text or image or coexistence if image and text, which is done mainly through options in Label Type in property. Text by default, while layout of images and texts is set through other properties.

mButton is the foundation class of all buttons, which implements PushButton by default. Buttons of all other types are derived from it.

It is inherited from the style of mWidget.

Style ID

miniStudio property name

Comments

NCSS_BUTTON_CHECKABLE

Checkable

Set if the button can carry out CHECKED status conversion; if FALSE, CHECK status conversion is not carried out, and autocheck and ThreeDCheck are invalid

NCSS_BUTTON_AUTOCHECK

Autocheck

When CHECKED status conversion can be carried out, set if clicking can be carried out to automatically switch CHECK status

NCSS_BUTTON_3DCHECK

ThreeDCheck

Set button CHECK status as three status (unchecked-halfchecked-checked) or two status (unchecked-checked) switch

NCSS_BUTTON_IMAGE

LabelType->Image

Image button style, the button is label literal mode in LabelType by default

NCSS_BUTTON_IMAGELABEL

LabelType->ImageLabel

Button of horizontally arranged image text

NCSS_BUTTON_VERTIMAGELABEL

LabelType->VertImageLabel

Button of vertically arranged image text

Property of mButton

It is inherited from the property of mWidget.

Property ID name

miniStudio property name

Type

Permission

Comments

NCSP_BUTTON_ALIGN

Align

Alignment enumeration value

RW

Content on the button (image or literal) is aligned with the button according to the set mode in horizontal direction

NCSP_BUTTON_VALIGN

VAlign

Alignment enumeration value

RW

Content on the button (image or literal) is aligned with the button according to the set mode in vertical direction, and the alignment value is top – 0, bottom – 1, center – 2

NCSP_BUTTON_WORDWRAP

Wordwrap

int

RW

Automatic wrap property of the literals on the button, when the single line length of the literal content is bigger than the control width, automatic wrap can be selected. TRUE: automatic wrap FALSE: single line, and the exceeding part is not displayed

NCSP_BUTTON_IMAGE

Image

PBITMAP

RW

Image, corresponding to button property pbmp, which is image pointer, it must be valid when NCSS_BUTTON_IMAGE or NCSS_BUTTON_IMAGELABEL or NCSS_BUTTON_VERTIMAGELABEL is set

NCSP_BUTTON_CHECKSTATE

None

mButtonCheckState

RW

Set or get check status, valid when NCSS_BUTTON_CHECKABLE is set, NCS_BUTTON_HALFCHECKED is regarded as valid value when NCSS_BUTTON_3DCHECK is set

NCSP_BUTTON_IMAGE_SIZE_PERCENT

ImageSizePercent

int

RW

Under the style of coexistence of image and text, set proportion of image on the control (take value 15~85, representing 15% to 85%), and the remaining is occupied by the text

NCSP_BUTTON_GROUPID

GroupID

int

RW

When there is NCSS_BUTTON_CHECKABLE style, ID of a mButtonGroup can be set to the window, it will automatically get a corresponding mButtonGroup object and set

NCSP_BUTTON_GROUP

None

mButtonGroup*

RW

When there is NCSS_BUTTON_CHECKABLE style, set a mButtonGroup object pointer, and all the buttons adding to the group has the automatic switching ability of Radio style

Event of mButton

It is inherited from the event of mWidget.

Event notification code

Explanation

Parameter

NCSN_BUTTON_PUSHED

Key pressed down

NCSN_BUTTON_STATE_CHANGED

After status changes

New status

Note, the control inherits NCSN_WIDGET_CLICKED event of the parent class.

Renderer of mButton

For the usage of renderer, see look and feel renderer.

mButton Classic renderer

The basic style under classic renderer is as shown in the figure below:

Drawing of mButton Classic renderer is as below: for the drawing of non client area, please refer to the renderer of mWidget.

Property ID

Meaning

miniStudio property name

Value type

Schematic diagram of the valid region

Value range

NCS_FGC_3DBODY

Text foreground color

FgColor3DBody

DWORD (ARGB)

push-button-classic-fg3dcolor.png

NCS_BGC_3DBODY

Background color

BgColor3DBody

DWORD (ARGB)

push-button-classic-bg3dcolor.png

NCS_FGC_DISABLED_ITEM

Text foreground color when the window is invalid

TextDisableColor

DWORD (ARGB)

<img src=figures/push-button-classic-fgdisable.png" alt="push-button-classic-fgdisable.png"/>

NCS_BGC_DISABLED_ITEM

background color when the window is invalid

BgColorDisable

DWORD (ARGB)

<img src=figures/push-button-classic-bgdisable.png" alt="push-button-classic-bgdisable.png"/>

  • High light effect: through enhancing the brightness of the background color (NCS_BGC_3DBODY), as the high light color

  • check effect: implement through drawing invaginated border

  • Three status Check effect: implement half selection through drawing high light color in the invaginated border

Schematic diagram:

alt

mButton Skin Renderer

Refer to Appendix B: Specification for the Image Resources Used by Skin Renderer.

mButton Fashion Renderer

For the drawing of non client area, please refer to the drawing of Fashion renderer of mWidget.

Property ID

Meaning

miniStudio property name

Value type

Schematic diagram of the valid region

Value range

NCS_FGC_3DBODY

Text foreground color

FgColor3DBody

DWORD (ARGB)

Same as Classic renderer

NCS_FGC_DISABLED_ITEM

Text foreground color when the window is invalid

TextDisableColor

DWORD (ARGB)

Same as Classic renderer

NCS_BGC_3DBODY

Background color

BgColor3DBody

DWORD (ARGB)

push-button-fashion-bgcolor.png

NCS_BGC_DISABLED_ITEM

Text background color when the window is invalid

BgColorDisable

DWORD (ARGB)

push-button-fashion-bgdisalbe.png

NCS_MODE_BGC

Gradual change fill mode

GradientMode

int

push-button-fashion-gradientmode.png

GradientMode

NCS_METRICS_3DBODY_ROUNDX

Window rectangle round corner X radius

RoundX

int

0 to 1/2 of the window width

NCS_METRICS_3DBODY_ROUNDY

Window rectangle round corner Y radius

RoundY

int

0 to 1/2 of the window height

  • Gradual change color: the gradual change color gives different brightness factor from the ground color (NCS_BGC_3DBODY or NCS_BGC_DISABLED_ITEM), and calculates the two objective colors. Gradually change from the center (ground color) to the two sides or top and bottom (highlighted color achieved through calculation)

  • High light color: after the ground color is highlighted, the gradual change color calculates to obtain on the foundation of this

  • Representing method of check status: after the ground color undergoes darkening processing, calculate the gradual change color

  • Representing method of three status check: besides the method is the same as above in check status, in half selection status, use the window ground color (NCS_BGC_WINDOW) as the whole ground color to draw

Schematic diagram:

alt

mButton Flat Renderer

For the drawing of non client area, please refer to the drawing of Flat renderer of mWidget.

Property ID

Meaning

miniStudio property name

Value type

Schematic diagram of the valid region

Value range

NCS_FGC_3DBODY

Text foreground color

FgColor3DBody

DWORD (ARGB)

Same as Classic renderer

NCS_FGC_DISABLED_ITEM

Text foreground color when the window is invalid

TextDisableColor

DWORD (ARGB)

Same as Classic renderer

NCS_BGC_3DBODY

background color

BgColor3DBody

DWORD (ARGB)

Same as Classic renderer

NCS_METRICS_3DBODY_ROUNDX

Window rectangle round corner X radius

RoundX

int

0 to 1/2 of the window width

NCS_METRICS_3DBODY_ROUNDY

Window rectangle round corner Y radius

RoundY

int

0 to 1/2 of the window height

  • High light: draw small prompting symbols to implement around the control

  • check status: draw lines at right-bottom edition, and compose inverted “L” realization

  • check representing method of three status: in half selection status, draw lines at left-top, forming fell flat “L”

Schematic diagram:

alt

Programming Example of mButton

  • Operation screen shot:

alt

  • This program uses Fashion renderer to create buttons of four different styles, which are common button, image button, Autocheck style button and three status button.

  • Complete example code of common button:

List 1 button.c

/*
** button.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

#define ID_BTN  101
#define ID_BTN1 102
#define ID_BTN5 106
#define ID_BTN6 107
#define ID_BTN7 108
#define ID_BTN8 109

// START_OF_HANDLERS
static BITMAP bmp;
static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    //set image
//START_SET_IMAGE
    if(LoadBitmapFromFile(HDC_SCREEN, &bmp, "icon_button.png")!=0)
    {
        printf("cannot load image file \"icon_button.png\"\n");
    }

    mButton *mb1 = (mButton*)ncsGetChildObj(self->hwnd, ID_BTN1);

    if(mb1)
        _c(mb1)->setProperty(mb1, NCSP_BUTTON_IMAGE, (DWORD)&bmp);
//END_STE_IMAGE
    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
NCS_RDR_ELEMENT btn_rdr_elements[] =
{
    { NCS_MODE_USEFLAT, 1},
    { -1, 0 }
};
static NCS_RDR_INFO btn_rdr_info[] =
{
    {"fashion","fashion", btn_rdr_elements}
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
static NCS_WND_TEMPLATE _ctrl_templ[] = {
//START_DCL_DEF_PUSHBUTTON
    {
        NCSCTRL_BUTTON,
        ID_BTN,
        30, 30, 80, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_DEF_PUSHBUTTON
//START_DCL_IMAGEBUTTON
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 30, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_IMAGE,
        WS_EX_NONE,
        "Image",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_IMAGEBUTTON
//START_DCL_AUTOCHECKBTN
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        30, 80, 80, 25,
        WS_VISIBLE  | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE,
        WS_EX_NONE,
        "Auto button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_AUTOCHECKBTN
//START_DCL_3DAUTOCHECKBTN
    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 80, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE \
            | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "3D button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
//END_DCL_3DAUTOCHECKBTN
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_MAINWND,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Push Button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    MainWindowThreadCleanup(mydlg->hwnd);

    ncsUninitialize ();

    return 0;
}

  • Define common button

    {
        NCSCTRL_BUTTON,
        ID_BTN,
        30, 30, 80, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },

  • Define Image button, generally it is handled in onCreate event of the main window

    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 30, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_IMAGE,
        WS_EX_NONE,
        "Image",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },

  • Load and set Image

    if(LoadBitmapFromFile(HDC_SCREEN, &bmp, "icon_button.png")!=0)
    {
        printf("cannot load image file \"icon_button.png\"\n");
    }

    mButton *mb1 = (mButton*)ncsGetChildObj(self->hwnd, ID_BTN1);

    if(mb1)
        _c(mb1)->setProperty(mb1, NCSP_BUTTON_IMAGE, (DWORD)&bmp);

  • Define button of Autocheck style

    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        30, 80, 80, 25,
        WS_VISIBLE  | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE,
        WS_EX_NONE,
        "Auto button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },

  • Define button of three status check style

    {
        NCSCTRL_BUTTON,
        ID_BTN1,
        150, 80, 80, 25,
        WS_VISIBLE | NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_CHECKABLE \
            | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "3D button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },

mCheckButton

  • Control window class: NCSCTRL_CHECKBUTTON

  • Control English name: CheckButton

  • Brief introduction: Check box button, mainly used on multi-selection occasion. The common pattern is a box, and the user checks or unchecks the box.

alt

Property of mCheckButton

It is inherited from the property of mButton.

Event of mCheckButton

It is inherited from the event of mButton.

Renderers of mCheckButton

mCheckButton Classic Renderer

  • Drawing of renderer in the mCheckButton Classic text region is as below: for the drawing of non client area, please refer to the renderer of mWidget.

Property ID

Meaning

miniStudio property name

Value type

Schematic diagram of the valid region

Value range

NCS_FGC_3DBODY

Text foreground color

FgColor3DBody

DWORD (ARGB)

checkbutton_classic_fgc.png

NCS_FGC_DISABLED_ITEM

Text foreground color when the window is invalid

TextDisableColor

DWORD (ARGB)

checkbutton_classic_textdisable.png

  • Classic renderer of Check box fills and draws through loading image resource. (image resource is minigui-res by default, and installed in /usr/local/share/minigui/res/bmp/classic_check_button.bmp）by default

  • Specification of image: the image is composed of eight parts from left to right, and each part is a square (13x13), corresponding to eight statuses of checkbutton:

  • 0~3: common, highlight, pressed down and banned statuses when not selected

  • 4~7: common, highlight, pressed down and banned statuses when selected

  • If the image is bigger than the drawing region, the image will be reduced to draw; if the image is smaller or equal to the drawing region, the image actual size will be adopted to draw

  • Example

alt

mCheckButton Skin Renderer

Refer to Appendix B : Specification for the Image Resource Used by Skin Renderer

mCheckButton Fashion Renderer

  • Drawing of mCheckButton Fashion text region renderer is as follows: for the drawing of non client area, please refer to the renderer of mWidget.

Property ID

Meaning

miniStudio property name

Value type

Schematic diagram of the valid region

Value range

NCS_FGC_3DBODY

Text foreground color

FgColor3DBody

DWORD (ARGB)

checkbtn_fashion_fgc.png

NCS_FGC_DISABLED_ITEM

Text foreground color when the window is invalid

TextDisableColor

DWORD (ARGB)

checkbtn_fashion_disable.png

  • Fashion renderer of Check box fills and draws through loading image resource. (Note: the image resource is minigui-res by default, and installed in /usr/local/share/minigui/res/bmp/fashion_check_btn.bmp by default)

  • Specification of the image: the image is composed of eight parts from top to bottom, and each part is a square (13x13), corresponding to eight statuses of checkbutton:

  • 0~3: common, highlight, pressed down and banned status when not selected

  • 4~7: Common, highlight, pressed down and banned status when selected

  • If the image is bigger than the drawing region, the image will be reduced to draw; if the image is smaller or equal to the drawing region, the image actual size will be adopted to draw

  • Example

alt

mCheckButton Flat Renderer

  • Drawing of text region and check box of mCheckButton Flat renderer is as below: for the drawing of non area region, please refer to the renderer of mWidget.

Property ID

Meaning

miniStudio property name

Value type

Schematic diagram of the valid region

Value range

NCS_FGC_3DBODY

Text foreground color

FgColor3DBody

DWORD (ARGB)

checkbtn_flat_fgc.png

NCS_BGC_3DBODY

Background color

BgColor3DBody

DWORD (ARGB)

checkbtn_flat_bgc.png

Programming Example of mCheckbutton

  • Operation screen shot:

alt

  • Check box example code

List 2 checkbutton.c

/*
** checkbutton.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

// START_OF_HANDLERS
static BOOL mymain_onCreate(mWidget* _this, DWORD add_data)
{
    return TRUE;
}

static void mymain_onClose(mWidget* _this, int message)
{
    DestroyMainWindow(_this->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
NCS_RDR_ELEMENT btn_rdr_elements[] =
{
    { NCS_MODE_USEFLAT, 1},
    { -1, 0 }
};

static NCS_RDR_INFO btn_rdr_info[] =
{
    {"flat","flat", btn_rdr_elements}
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
#define ID_BTN  101
#define ID_BTN1 102
#define ID_BTN2 103
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN,
        20, 30, 120, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "option1",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN1,
        20, 60, 120, 25,
        WS_BORDER | WS_VISIBLE | NCSS_BUTTON_AUTOCHECK,
        WS_EX_NONE,
        "option2",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN2,
        20, 90, 120, 25,
        WS_BORDER | WS_VISIBLE |NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "option3",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Check button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    ncsUninitialize ();

    return 0;
}

#define ID_BTN  101
#define ID_BTN1 102
#define ID_BTN2 103
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN,
        20, 30, 120, 25,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "option1",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN1,
        20, 60, 120, 25,
        WS_BORDER | WS_VISIBLE | NCSS_BUTTON_AUTOCHECK,
        WS_EX_NONE,
        "option2",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    },
    {
        NCSCTRL_CHECKBUTTON,
        ID_BTN2,
        20, 90, 120, 25,
        WS_BORDER | WS_VISIBLE |NCSS_BUTTON_AUTOCHECK | NCSS_BUTTON_3DCHECK,
        WS_EX_NONE,
        "option3",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Check button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};

mRadioButton

  • Control window class: NCSCTRL_RADIOBUTTON

  • Control English name: RadioButton

  • Brief introduction: Single selection button, matched with mButtonGroup. mButtonGroup concludes multiple single selection buttons into one group. Among the buttons in the group, only one is in the selected status. After a button is selected, the originally selected button will cancel the selection. When the single selection button is used independently, its behavior is similar to that of a mCheckbutton.

alt

Property of mRadiobutton

It is inherited from the property of mButton`.

Event of mRadiobutton

It is inherited from the event of mButton.

Renderers of mRadiobutton

mRadiobutton Classic Renderer

  • For the drawing of mRadiobutton Classic non client area, please refer to the renderer of mWidget.

Property ID

Meaning

miniStudio property name

Value type

Schematic diagram of the valid region

Value range

NCS_FGC_3DBODY

Text foreground color

FgColor3DBody

DWORD (ARGB)

radiobutton_classic_fgc.png

NCS_FGC_DISABLED_ITEM

Text foreground color when the window is invalid

TextDisableColor

DWORD (ARGB)

radiobutton_classic_textdisable.png

  • Classic renderer of Check Box of Radiobutton fills and draws through loading image resource. (the image resource is minigui-res by default, and installed in /usr/local/share/minigui/res/bmp/classic_radio_button.bmp by default)

  • Specification of the image: the image is composed of eight parts from left to right, and each part is a square (13x13), corresponding to eight statuses of checkbutton:

  • 0~3: common, highlight, pressed down and banned status when not selected

  • 4~7: common, highlight, pressed down and banned status when selected

  • If the image is bigger than the drawing region, the image will be reduced to draw; when the image is smaller than or equal to the drawing region, the image actual size is adopted to draw

  • Example

alt

mRadiobutton Skin Renderer

Refer to Appendix B : Specification for the Image Resource Used by Skin Renderer.

mRadiobutton Fashion Renderer

  • For the drawing of mRadiobutton Fashion non client area, please refer to the renderer of mWidget.

Property ID

Meaning

miniStudio property name

Value type

Schematic diagram of the valid region

Value range

NCS_FGC_3DBODY

Text foreground color

FgColor3DBody

DWORD (ARGB)

radiobtn_fashion_fgc.png

NCS_FGC_DISABLED_ITEM

Text foreground color when the window is invalid

TextDisableColor

DWORD (ARGB)

radiobtn_fashion_disable.png

  • Fashion renderer of Check Box of Radiobutton fills and draws through loading image resource. (The image resource is minigui-res by default, and installed in /usr/local/share/minigui/res/bmp/fashion_radio_btn.bmp by default)

  • Specification of the image: the image is composed of eight parts from top to bottom, and each part is a square (13x13), corresponding to eight statuses of checkbutton:

  • 0~3: common, highlight, pressed down and banned status when not selected

  • 4~7: common, highlight, pressed down and banned status when selected

  • If the image is bigger than the drawing region, the image will be reduced to draw; when the image is smaller than or equal to the drawing region, the image actual size is adopted to draw

  • Example

alt

mRadiobutton Flat Renderer

  • For the drawing of mRadiobutton Flat non client area, please refer to the renderer of mWidget.

Property ID

Meaning

miniStudio property name

Value type

Schematic diagram of the valid region

Value range

NCS_FGC_3DBODY

Text foreground color

FgColor3DBody

DWORD (ARGB)

radiobtn_flat_fgc.png

NCS_BGC_3DBODY

Background color

BgColor3DBody

DWORD (ARGB)

radiobtn_flat_bgc.png

Programming Example of mRadiobutton

  • Operation screen shot:

alt

  • Single selection button example code

static NCS_PROP_ENTRY radioGroup_props [] = {
    {NCSP_BUTTON_GROUPID, 200},
    {0, 0}
};

static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_BUTTONGROUP ,
        ID_GROUP,
        5, 10, 200, 120,
        WS_VISIBLE|NCSS_NOTIFY,
        WS_EX_NONE,
        "Button Group",
        NULL,          //props,
        btn_rdr_info,  //rdr_info
        NULL,          //handlers,
        NULL,          //controls
        0,
        0              //add data
    },
    {
        NCSCTRL_RADIOBUTTON,
        ID_BTN1,
        20, 30, 80, 25,
        WS_VISIBLE,
        WS_EX_NONE,
        "option1",
        radioGroup_props, //props,
        btn_rdr_info,     //rdr_info
        NULL,             //handlers,
        NULL,             //controls
        0,
        0                 //add data
    },
    {
        NCSCTRL_RADIOBUTTON,
        ID_BTN2,
        20, 60, 80, 25,
        WS_VISIBLE,
        WS_EX_NONE,
        "option2",
        radioGroup_props, //props,
        btn_rdr_info,     //rdr_info
        NULL,             //handlers,
        NULL,             //controls
        0,
        0                 //add data
    },
    {
        NCSCTRL_RADIOBUTTON,
        ID_BTN2,
        20, 90, 80, 25,
        WS_VISIBLE,
        WS_EX_NONE,
        "option3",
        radioGroup_props, //props,
        btn_rdr_info,     //rdr_info
        NULL,             //handlers,
        NULL,             //controls
        0,
        0                 //add data
    },
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Radio button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};

mMenuButton

  • Control window class: NCSCTRL_MENUBUTTON

  • Control English name: MenuButton

  • Brief introduction: Menu button. Click the button, and the menu will pop up. Select the menu item through keyboard or mouse, and the selected menu item will display on the button.

alt

mMenuButton is inherited from mPopMenuMgr Class.

Property of mMenuButton

It is inherited from the property of mButton`.

Property name

Type

Permission

Explanation

NCSP_MNUBTN_POPMENU

mPopMenuMgr*

RW

Set PopMenu object pointer

NCSP_MNUBTN_CURITEM

int

RW

Get or set the currently selected id of Menu Item

Event of mMenuButton

It is inherited from the event of mButton`.

Event notification code

Explanation

Parameter

NCSN_MNUBTN_ITEMCHANGED

When MenuItem changes

id value of the new Item

Programming Example of mMenuButton

mMenuButton is mainly implemented through creating mPopMenuMgr object.

  • Operation screen shot:

alt
alt

  • Menu button example code:

/*
** menubutton.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

#define ID_BTN  101

// START_OF_HANDLERS
static void menubutton_onitemchanged(mMenuButton *self, int id, int nc,
                                     DWORD add_data)
{
    char szText[100];
    sprintf(szText,"id=%d",id);
    MessageBox(self->hwnd, szText,"Menu ID",0);
}

static NCS_EVENT_HANDLER menubutton_handlers[] = {
    NCS_MAP_NOTIFY(NCSN_MNUBTN_ITEMCHANGED, menubutton_onitemchanged),
    {0, NULL}
};

static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    mPopMenuMgr * popmenu = NEW(mPopMenuMgr);

    _c(popmenu)->addItem(popmenu,0, "menuitem 1", NULL, 200, 0, NULL, 0);
    _c(popmenu)->addItem(popmenu,0, "menuitem 2", NULL, 201, 0, NULL, 0);
    _c(popmenu)->addItem(popmenu,0, "menuitem 3", NULL, 202, 0, NULL, 0);

    mButton *mb1 = (mButton*)ncsGetChildObj(self->hwnd, ID_BTN);
    if(mb1)
    {
        _c(mb1)->setProperty(mb1, NCSP_MNUBTN_POPMENU, (DWORD)popmenu);
    }

    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
NCS_RDR_ELEMENT btn_rdr_elements[] =
{
    { NCS_MODE_USEFLAT, 1},
    { -1, 0 }
};
static NCS_RDR_INFO btn_rdr_info[] =
{
    {"skin", "skin", NULL},
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_MENUBUTTON,
        ID_BTN,
        40, 40, 100, 30,
        WS_BORDER | WS_VISIBLE,
        WS_EX_NONE,
        "menu button",
        NULL,                //props,
        btn_rdr_info,        //rdr_info
        menubutton_handlers, //handlers,
        NULL,                //controls
        0,
        0                    //add data
    },
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_DIALOGBOX,
    1,
    0, 0, 260, 180,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Menu button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    MainWindowThreadCleanup(mydlg->hwnd);

    ncsUninitialize ();

    return 0;
}

mColorButton

  • Control window class: NCSCTRL_COLORBUTTON

  • Control English name: ColorButton

  • Brief introduction: Color selection button, which is used to select color. When clicking the button, color selection box pops up, and the user selects the color. After confirmation, the selected color displays effect on the button panel.

alt

mColorButton uses ColorSelectDialog of mgutils to select color, and the selected color displays in the middle box.

Property of mColorButton

It is inherited from the property of mButton.

Property name

Type

Permission

Explanation

NCSP_CLRBTN_CURCOLOR

DWORD (ARGB)

RW

Set or get Color value

Event of mColorButton

It is inherited from the event of mButton.

Event notification code

Explanation

Parameter

NCSN_CLRBTN_COLORCHANGED

Update after being selected by the user

DWORD (ARGB)

Programming Example of mColorButton

  • Operation screen shot

alt

  • Color button example code:

/*
** colorbutton.c: Sample program for mGNCS Programming Guide
**      The first mGNCS application.
**
** Copyright (C) 2009 ~ 2019 FMSoft Technologies.
*/

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

// START_OF_INCS
#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>

#include <mgncs/mgncs.h>
// END_OF_INCS

#define ID_BTN  101

// START_OF_HANDLERS
static BOOL mymain_oncolorchanged(mMainWnd* self, mColorButton *sender,
        int id, DWORD param)
{
    SetWindowBkColor(self->hwnd, DWORD2PIXEL(HDC_SCREEN, param));
    InvalidateRect(self->hwnd, NULL, TRUE);

    return FALSE;
}

static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    mColorButton *btn = (mColorButton*)_c(self)->getChild(self, ID_BTN);
    if(btn)
    {
        _c(btn)->setProperty(btn, NCSP_CLRBTN_CURCOLOR, PIXEL2DWORD(HDC_SCREEN,
            GetWindowBkColor(self->hwnd)));
        ncsAddEventListener((mObject*)btn, (mObject*)self,
            (NCS_CB_ONPIECEEVENT)mymain_oncolorchanged,
            NCSN_CLRBTN_COLORCHANGED);
    }

    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};
// END_OF_HANDLERS

// START_OF_RDRINFO
static NCS_RDR_INFO btn_rdr_info[] =
{
      {"fashion", "fashion", NULL},
};
// END_OF_RDRINFO

// START_OF_TEMPLATE
static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_COLORBUTTON,
        ID_BTN,
        40, 40, 80, 30,
        WS_VISIBLE|NCSS_NOTIFY,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_MAINWND,
    1,
    0, 0, 180, 140,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Color button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};
// END_OF_TEMPLATE

int MiniGUIMain(int argc, const char* argv[])
{
    ncsInitialize();

    mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect
                (&mymain_templ, HWND_DESKTOP);

    _c(mydlg)->doModal(mydlg, TRUE);

    MainWindowThreadCleanup(mydlg->hwnd);

    ncsUninitialize ();

    return 0;
}

  • Definition processing function

static BOOL mymain_oncolorchanged(mMainWnd* self, mColorButton *sender,
        int id, DWORD param)
{
    SetWindowBkColor(self->hwnd, DWORD2PIXEL(HDC_SCREEN, param));
    InvalidateRect(self->hwnd, NULL, TRUE);

    return FALSE;
}

static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
    mColorButton *btn = (mColorButton*)_c(self)->getChild(self, ID_BTN);
    if(btn)
    {
        _c(btn)->setProperty(btn, NCSP_CLRBTN_CURCOLOR, PIXEL2DWORD(HDC_SCREEN,
            GetWindowBkColor(self->hwnd)));
        ncsAddEventListener((mObject*)btn, (mObject*)self,
            (NCS_CB_ONPIECEEVENT)mymain_oncolorchanged,
            NCSN_CLRBTN_COLORCHANGED);
    }

    return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
    DestroyMainWindow(self->hwnd);
    PostQuitMessage(0);
}

static NCS_EVENT_HANDLER mymain_handlers[] = {
    {MSG_CREATE, mymain_onCreate},
    {MSG_CLOSE, mymain_onClose},
    {0, NULL}
};

  • Define the window template

static NCS_WND_TEMPLATE _ctrl_templ[] = {
    {
        NCSCTRL_COLORBUTTON,
        ID_BTN,
        40, 40, 80, 30,
        WS_VISIBLE|NCSS_NOTIFY,
        WS_EX_NONE,
        "button",
        NULL,         //props,
        btn_rdr_info, //rdr_info
        NULL,         //handlers,
        NULL,         //controls
        0,
        0             //add data
    }
};

static NCS_MNWND_TEMPLATE mymain_templ = {
    NCSCTRL_MAINWND,
    1,
    0, 0, 180, 140,
    WS_CAPTION | WS_BORDER | WS_VISIBLE,
    WS_EX_NONE,
    "Color button",
    NULL,
    NULL,
    mymain_handlers,
    _ctrl_templ,
    sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
    0,
    0, 0,
};

Appendix:A

GrandientMode

It must be one of the values below:

  • MP_LINEAR_GRADIENT_MODE_HORIZONTAL: horizontal gradual change, gradual change from the center to the left and right

  • MP_LINEAR_GRADIENT_MODE_VERTICAL: vertical gradual change, gradual change from the center to the top and bottom The two values are defined in mGPlus (<mgplus/mgplus.h>). Although mGPlus defines other gradual change modes as well, it is not supported in mGNCS.

ButtonState

One of the following four statuses:

  • Normal: normal status.

  • Hilight: the status when the mouse is moved to the button and not clicked, also referred to as highlight status.

  • Checked: the button is in the status of being clicked, also referred to as checked status. In this status, different statuses are subdivided, refer to the definition of ButtonCheckState status below.

  • Disabled: the button is in disabled status.

ButtonCheckState

/* Button CHECK status subdivided definition */
enum mButtonCheckState{
        /* Button CHECK status subdivided definition */
        NCS_BUTTON_UNCHECKED = 0,

        /* Under three status condition, the status is valid, which can be understood as the middle transition status */
        NCS_BUTTON_HALFCHECKED,

        /* Represent pressed down status */
        NCS_BUTTON_CHECKED
};

<< Static Box and Derived Control Classes | Table of Contents | Panel and Derived Classes >>

PreviousStatic Box Series Control ClassNextPanel and Its Derived Class

Last updated