Changing Menu Icons

User can change the default icons of Menu by following this guide. In this example, user will learn how to change the icons for menu items “Phonebook” and “Games”. You can select any one of your own choice. You can find free icons from iconfinder. Size of each icon is 44x44 pixels in WiPhone. So you can change accordingly the size of icons you downloaded and save them in white and black colors for regular and selected states. Default main Menu of WiPhone looks like the screen below.

_images/DefaultMainMenu.png

Default Phonebook Menu Icon

How to Do this in Firmware

The ‘typedef struct’ for Menu Icons is defined in GUI.h which is used to draw the Menu Icons. Each icon has two states, one when icon is in regular state and one when icon is in selected state. As shown below;

typedef struct GUIMenuItemIcons {
  const int16_t ID;
  const unsigned char* icon1;       // icon in regular (not selected) state
  const uint16_t iconSize1;
  const unsigned char* icon2;       // icon in selected state
  const uint16_t iconSize2;
} GUIMenuItemIcons;

Desired Icon is first converted into an array of data and later Save it in header file icons.h located at WiPhone "\"src"\"assets

*Note: Icons data is saved in the program memory of WiPhone. To learn how to save the picture/ Icon data in program memory, kindly checkout documentation for detailed procedure.

Name of Icons for main Menu are as below, you need to place the data for new icons with same name in icons.h.

GUIMenuItemIcons menuIcons[6] PROGMEM = {
  { 2,    icon_Phonebook_w, sizeof (icon_Phonebook_w), icon_Phonebook_b, sizeof (icon_Phonebook_b) },
  { 20,   icon_Messages_w, sizeof (icon_Messages_w), icon_Messages_b, sizeof (icon_Messages_b) },
  { 3,    icon_Tools_w, sizeof (icon_Tools_w), icon_Tools_b, sizeof (icon_Tools_b) },
  { 4,    icon_Games_w, sizeof (icon_Games_w), icon_Games_b, sizeof (icon_Games_b) },
  { 13,   icon_Reboot_w, sizeof (icon_Reboot_w), icon_Reboot_b, sizeof (icon_Reboot_b) },
  { 5,    icon_Settings_w, sizeof (icon_Settings_w), icon_Settings_b, sizeof (icon_Settings_b) },
};

Upload the modified firmware to WiPhone, on next Reboot, you will see the new Menu Icons.

_images/NewMainMenu.png

Updated Phonebook Menu icon