UI Main Menu

Design

With a physical screen size limited to a height of 127 pixels and a width of 177 pixels it is important to design the UI to provide maximum information. After consultation with Dr. Ludi, the best method of implementing the UI main menu was through the implementation of an XBM style main menu.

Modifications

Implementing Menu Selection - UI ENTER

Since the menus are automatically selected there was a bit of modification needed to implement a menu select screen. The first requirement was to only enter a detailed screen when the user finally pressed enter on their chosen menu.

Two flags were needed to check the ENTER_BUTTON one was required to evaluate the button press confirmTMP, and the other was a flag that toggled via button press confirmFlag. This flag was used as a conditional to switch context from the main menu to the sub menu.

Testing the ENTER_BUTTON for usage

ConfirmSelect:							      //      // Test for ENTER
  UI_BUTTON(SHORTPRESS,ENTER_BUTTON,confirmTMP)                       //      UI_BUTTON(SHORTPRESS,ENTER_BUTTON,confirm)
  JR_EQ16(confirmTMP,0, NotSelected)                                  //      if ( confirm )
Selected:							      //      {
  MOVE16_16(1, confirmFlag )	          			      //        confirmFlag = 1;
  JR(SelectDone)						      //      }
NotSelected:							      //      else
  MOVE16_16(0, confirmFlag )					      //         confirmFlag = 0;
SelectDone:	

Implementing Menu Selection - Switching to Sub Menus

The First 2 values in the switch statement

                                                                      //      switch (State)
                                                                      //      {
SwitchState1:                                                         //                                                                    
  JR_NEQ16(State,STATE_PLAYRECENT,SwitchState2)                       //        case STATE_PLAYRECENT :
                                                                      //        {
  UI_DRAW(FILLWINDOW,BG_COLOR,0,0)                                    //          UI_DRAW(FILLWINDOW,BG_COLOR,0,0)
  UI_DRAW(BMPFILE,FG_COLOR,0,13,PLAYRECENTSCREEN)                     //          UI_DRAW(BMPFILE, FG_COLOR, 0, 13, 
                                                                      //                  PLAYRECENTSCREEN )
  UI_DRAW(UPDATE)                                                     //          UI_DRAW(UPDATE)
								      //
  JR_NEQ16(confirmFlag, 1, SwitchStateEnd);			      //          if( confirmFlag )
  CALL(PlayrecentScreen)                                              //            CALL(FileScreen)
								      //          else
 								      //            break;
                                                                      //        }
  JR(SwitchStateEnd)                                                  //        break;
SwitchState2:                                                         //                                                                    
  JR_NEQ16(State,STATE_FILE,SwitchState3)                             //        case STATE_FILE :
                                                                      //        {
  UI_DRAW(FILLWINDOW,BG_COLOR,0,0)                                    //          UI_DRAW(FILLWINDOW,BG_COLOR,0,0)
  UI_DRAW(BMPFILE,FG_COLOR,0,13,FILESCREEN)                           //	  UI_DRAW(BMPFILE, FG_COLOR, 0, 13,
                                                                      //                  FILESCREEN )	
  UI_DRAW(UPDATE)                                                     //          UI_DRAW(UPDATE)
                                                                      //
  JR_NEQ16(confirmFlag, 1, SwitchStateEnd);			      //          if( confirmFlag )
  CALL(FileScreen)                                                    //            CALL(FileScreen)
								      //          else
   								      //            break;
                                                                      //        }
  JR(SwitchStateEnd)                                                  //        break;

Updating and drawing of the menu was done in the scheduler ( since it's the menu ), once a user confirmed their selection the confirmation flag is toggled high and the menu is able to call its corresponding sub menu routine.

Implementing Menu Selection - The Graphics

Since the UI is nothing but bitmaps I created 4 new images to be used as the main menu.

Play Recent Menu Selected

Filesystem Menu Selected

Brick Apps Menu Selected

Settings Menu Selected