This section describes the basic flow of defining the items to be displayed on the screen, displaying them on the screen, waiting for key input, and processing.

  1. Define the combination of colors used on the screen with an array of color palettes (AM_ColorPalette structure).
    Color palette information:
    • Text color and background color
    • Text color and background color of focused text
    • Color of icons and other controls
    When specifying a color, specify it with the palette index (index number of this array).

    The following sample defines 8 color palettes. We have also defined palette index macros for the sake of clarity.
    Sample
    #define MENU_FORE_COLOR     RGB_WHITE
#define MENU_BACK_COLOR     0x427cbe    //Dull blue
#define MENU_BUTTON_COLOR   RGB_YELLOW
#define MENU_APPLY_COLOR    0xfcd9ff    //Color of Start icon (Light pink)
#define MENU_SELECT_COLOR   0x284a70    //Dark blue

#define FORE_COLOR          RGB_WHITTE
#define BACK_COLOR          0xf7f7f7    //Light gray
#define SELECT_COLOR        RGB_BLUE
#define DISABLE_COLOR       0xb0b0b0    //Gray
#define GIUDE_BUTTON        RGB_BLUE
#define APPLY_COLOR         RGB_MAGENTA
#define TITLE_SET_COLOR     RGB_BLUE
#define TITLE_TASK_COLOR    0x008000    //Dark Green

static const AM_ColorPalette CustomColor[] = {
    //ForeColor,        BackColor,        Select_ForeColor, Select_BackColor,  Control_ForeColor
    { MENU_FORE_COLOR,  MENU_BACK_COLOR,  RGB_WHITE,        MENU_SELECT_COLOR, MENU_BUTTON_COLOR }, //#0: Task menu base color
    { MENU_FORE_COLOR,  MENU_BACK_COLOR,  0,                0,                 MENU_APPLY_COLOR  }, //#1: Task menu apply color
    { RGB_BLACK,        BACK_COLOR,       RGB_WHITE,        SELECT_COLOR,      GIUDE_BUTTON      }, //#2: Base color
    { RGB_WHITE,        RGB_BLUE,         0,                0,                 0                 }, //#3: Title of Setting
    { GIUDE_BUTTON,     BACK_COLOR,       0,                0,                 GIUDE_BUTTON      }, //#4: Guide color
    { RGB_WHITE,        TITLE_TASK_COLOR, 0,                0,                 0                 }, //#5: Title 0f tasks
    { RGB_BLACK,        RGB_WHITE,        RGB_BLACK,        RGB_YELLOW,        RGB_BLUE          }, //#6: Input field color
    { APPLY_COLOR,      BACK_COLOR,       0,                0,                 APPLY_COLOR       }, //#7: Apply color
};
#define PX_MENU           0  // Task menu base color
#define PX_MENU_APPLY     1  // Task menu apply color
#define PX_BASE           2  // Base color
#define PX_TITLE_SETTING  3  // Title of Setting
#define PX_GUIDE          4  // Guide color
#define PX_TITLE_TASK     5  // Title 0f tasks
#define PX_EDIT           6  // Input field color
#define PX_APPLY          7  // Apply color

  2. Define options related to common items on the screen with AM_Option structure.
    Options:
    • Default text color and background color
    • Color of disabled items
    • Reference to the color palette array
    • Default font
    • Default line spacing
    • Other options
    Sample
    static const AM_Option MenuOption = {
    MENU_FORE_COLOR,                                // MenuForeColor
    DISABLE_COLOR,                                  // MenuDisabledForeColor
    MENU_BACK_COLOR,                                // MenuBackColor
    sizeof(CustomColor)/sizeof(AM_ColorPalette),      // NumberOfColorPalette
    (pAM_ColorPalette)CustomColor,                  // ColorPalettes
    0,                                              // OptionFlag
    HUGE_FONT,                                      // DefaultFont
    1                                               // DefaultLineSpacing
};

  3. Define an array of menu items (AM_MenuItem structure) to specify the display contents for one screen.
    Menu item：
    • Item ID: ID used to specify this item
    • Coordinates (row/column or pixel coordinates)
    • The string to display
    • Palette index
    • visible attribute: Specifies whether to display.
    • enabled attribute: Specifies whether to enable.
    • selectable attribute: Specifies whether the focus can be set.
    • Specifying check box and radio button.
    • Specifying icon.
    • For input fields, information that specifies the buffer and input operation (AM_EditParam structure)
    • For image fields, BMP file name.
    • Font
    • Other

    The following sample defines 6 menu items.
    Sample
    // Item ID
enum _MAIN_ITEM_ID {
    MENU_ID_TASK1 = 1,
    MENU_ID_TASK2,
    MENU_ID_TASK3,
    MENU_ID_NOTASK,
    MENU_ID_START,
};
// Table of the menu items for the task menu screen
static const AM_MenuItem MainMenuTable[] = {
//   itemID,        y,           x, menuText,     Palette,       visible, enabled, selectable, showControl,   checked, font
    {MENU_ID_TASK1, 1,           1, " Task #1 ",  PX_MENU,       true,    true,    true,       AM_NO_CONTROL},
    {MENU_ID_TASK2, 2,           1, " Task #2 ",  PX_MENU,       true,    true,    true,       AM_NO_CONTROL},
    {MENU_ID_TASK3, 3,           1, " Task #3 ",  PX_MENU,       true,    true,    true,       AM_NO_CONTROL},
    {MENU_ID_NOTASK,1,           1, "No task",    PX_MENU,       false,   true,    false,      AM_NO_CONTROL},
    {0,             AM_PIX(114), 0, "Settings",   PX_MENU,       true,    true,    false,      AM_F1_ICON,    false,   MEDIUM_FONT},
    {MENU_ID_START, AM_PIX(129), 0, "Start task", PX_MENU_APPLY, true,    true,    false,      AM_SCAN_ICON,  false,   MEDIUM_FONT},
    {-1}
};

  4. Call AM_CreateMenu function with the information defined in the previous steps to generate a menu resource and get a menu handle.
    Sample
        MENU_HANDLE hMenu;
    ...
    hMenu = AM_CreateMenu(MainMenuTable, (const pAM_Option)&MenuOption);

  5. Call AM_ShowMenu with the menu handle to display the screen.
    Sample
        AM_ShowMenu(hMenu, AM_SELECT_ANY_ID);

    You can display the screen as shown below with the sample code so far.
  6. You can change the menu item dynamically by specifying the item ID defined in the menu item.
    The following functions are available.
    AM_SetVisible function, AM_SetVisibleRange function
    AM_SetEnabled function, AM_SetEnabledRange function
    AM_SetSelectable function
    AM_SetPaletteIndex function
    AM_SetText function, AM_SetTextEx function
    AM_SetChecked function
    AM_SelectLine function

  7. Waits for key input with AM_ExecMenu function and processes the event.
    The AM_ExecMenu function provides the following functions.
    • Display the highlight on the menu item that has focus.
    • Moves the focus forward or backward when you press the [Q1] key or the [Q2] key.
    • When the menu item that has a check box has the focus, pressing the [SCAN] key switches the check box on and off.
    • When the menu item with a radio button has focus, pressing the [SCAN] key turns the radio button on.
    • When the input field has the focus, the input editing is performed.
    • When the barcode reader is enabled, pressing the [SCAN] key starts scanning the barcode.
    • Returns an event if there is any input.
    • If there is no input, wait for input while calling Idle function.
    In the following sample, when the [SCAN] key is pressed, the item ID of the focused menu item is acquired by AM_GetSelectedLine function and the process branches.
    Sample
    while(1){
  event = AM_ExecMenu(hMenu);
  if (event == F1_KEY){
      ...
      break;
  }else if (event == SCAN_KEY){
      task = AM_GetSelectedLine(hMenu);
      switch (task){
      case MENU_ID_TASK1:
          ...
          break;
      case MENU_ID_TASK2:
          ...
          break;
      case MENU_ID_TASK3:
          ...
          break;
      default:
          continue;
      }
      break;
  }
}

  8. To close the screen, call AM_ReleaseMenu function with the menu handle to release the menu resource.
    Since the main function of the user application cannot be terminated, it is not possible to release the menu resource of the screen for the main function. If you have generated a menu resource by calling the AM_CreateMenu function for a subscreen, be sure to release the menu resource.
    Sample
        AM_ReleaseMenu(hMenu);

Sample

///////////////////////////////////////////////////////////////////
// Color palettes
///////////////////////////////////////////////////////////////////
#define MENU_FORE_COLOR     RGB_WHITE
#define MENU_BACK_COLOR     0x427cbe    //Dull blue
#define MENU_BUTTON_COLOR   RGB_YELLOW
#define MENU_APPLY_COLOR    0xfcd9ff    //Color of Start icon (Light pink)
#define MENU_SELECT_COLOR   0x284a70    //Dark blue

#define FORE_COLOR          RGB_WHITTE
#define BACK_COLOR          0xf7f7f7    //Light gray
#define SELECT_COLOR        RGB_BLUE
#define DISABLE_COLOR       0xb0b0b0    //Gray
#define GIUDE_BUTTON        RGB_BLUE
#define APPLY_COLOR         RGB_MAGENTA
#define TITLE_SET_COLOR     RGB_BLUE
#define TITLE_TASK_COLOR    0x008000    //Dark Green

static const AM_ColorPalette CustomColor[] = {
    //ForeColor,        BackColor,        Select_ForeColor, Select_BackColor,  Control_ForeColor
    { MENU_FORE_COLOR,  MENU_BACK_COLOR,  RGB_WHITE,        MENU_SELECT_COLOR, MENU_BUTTON_COLOR }, //#0: Task menu base color
    { MENU_FORE_COLOR,  MENU_BACK_COLOR,  0,                0,                 MENU_APPLY_COLOR  }, //#1: Task menu apply color
    { RGB_BLACK,        BACK_COLOR,       RGB_WHITE,        SELECT_COLOR,      GIUDE_BUTTON      }, //#2: Base color
    { RGB_WHITE,        RGB_BLUE,         0,                0,                 0                 }, //#3: Title of Setting
    { GIUDE_BUTTON,     BACK_COLOR,       0,                0,                 GIUDE_BUTTON      }, //#4: Guide color
    { RGB_WHITE,        TITLE_TASK_COLOR, 0,                0,                 0                 }, //#5: Title 0f tasks
    { RGB_BLACK,        RGB_WHITE,        RGB_BLACK,        RGB_YELLOW,        RGB_BLUE          }, //#6: Input field color
    { APPLY_COLOR,      BACK_COLOR,       0,                0,                 APPLY_COLOR       }, //#7: Apply color
};
#define PX_MENU           0  // Task menu base color
#define PX_MENU_APPLY     1  // Task menu apply color
#define PX_BASE           2  // Base color
#define PX_TITLE_SETTING  3  // Title of Setting
#define PX_GUIDE          4  // Guide color
#define PX_TITLE_TASK     5  // Title 0f tasks
#define PX_EDIT           6  // Input field color
#define PX_APPLY          7  // Apply color

///////////////////////////////////////////////////////////////////
// Task menu screen
///////////////////////////////////////////////////////////////////

// Options for the task menu screen
static const AM_Option MenuOption = {
    MENU_FORE_COLOR,                                // MenuForeColor
    DISABLE_COLOR,                                  // MenuDisabledForeColor
    MENU_BACK_COLOR,                                // MenuBackColor
    sizeof(CustomColor)/sizeof(AM_ColorPalette),      // NumberOfColorPalette
    (pAM_ColorPalette)CustomColor,                  // ColorPalettes
    0,                                              // OptionFlag
    HUGE_FONT,                                      // DefaultFont
    1                                               // DefaultLineSpacing
};

// Definition of the task menu screen
// Item ID
enum _MAIN_ITEM_ID {
    MENU_ID_TASK1 = 1,
    MENU_ID_TASK2,
    MENU_ID_TASK3,
    MENU_ID_START,
};
// Table of the menu items for the task menu screen
static const AM_MenuItem MainMenuTable[] = {
//   itemID,        y,           x, menuText,     Palette,       visible, enabled, selectable, showControl,   checked, font
    {MENU_ID_TASK1, 1,           1, " Task #1 ",  PX_MENU,       true,    true,    true,       AM_NO_CONTROL},
    {MENU_ID_TASK2, 2,           1, " Task #2 ",  PX_MENU,       true,    true,    true,       AM_NO_CONTROL},
    {MENU_ID_TASK3, 3,           1, " Task #3 ",  PX_MENU,       true,    true,    true,       AM_NO_CONTROL},
    {0,             AM_PIX(114), 0, "Settings",   PX_MENU,       true,    true,    false,      AM_F1_ICON,    false,   MEDIUM_FONT},
    {MENU_ID_START, AM_PIX(129), 0, "Start task", PX_MENU_APPLY, true,    true,    false,      AM_SCAN_ICON,  false,   MEDIUM_FONT},
    {-1}
};

void main(void)
{
    MENU_HANDLE hMenu;
    int event;
    int task;

    hMenu = AM_CreateMenu(MainMenuTable, (const pAM_Option)&MenuOption);

    while(1){
        AM_ShowMenu(hMenu, AM_SELECT_ANY_ID);

        while(1){
            event = AM_ExecMenu(hMenu);
            if (event == F1_KEY){
                // Open setting screen
                ...

                break;
            }else if (event == SCAN_KEY){
                // Open screen of selected task.
                task = AM_GetSelectedLine(hMenu);
                switch (task){
                case MENU_ID_TASK1:
                    // Task1
                    ...

                    break;
                case MENU_ID_TASK2:
                    // Task2
                    ...

                    break;
                case MENU_ID_TASK3:
                    // Task3
                    ...

                    break;
                default:
                    continue;
                }
                break;
            }
        }
    }
}

See also

Sample program: Menu display functions

Last updated: 2020/10/17

Copyright © 2020 OPTOELECTRONICS CO.,LTD. All rights reserved.