Implement a menu technology which uses the inexor tree for loading menu items, actions and submenus

[aschaeffer]

Tiles Menus (a flat 2D menu)

Arbitrary tiles configuration:

• e.g. 3x3 tiles = 9 tiles = 9 menu entries
• e.g. 4x4 tiles = 16 tiles = 16 menu entries
• e.g. 5x3 tiles = 15 tiles = 15 menu entries

Why tiles?

• clearly arranged
• takes less room than 1D menus
• easy navigation with keyboard and without mouse
• you can represent simple dialogues using menus
  • e.g. Yes/No or Ok/Cancel: 1x2 tiles
  • e.g. Map voting for 4 maps: 2x2 tiles with map screenshot as background
• you can represent a 1D menu as well (e.g. 1x10 tiles)

Web User Interface (inexor-game/ui-client-menu)

Navigation

• The current tile is highlighted
• You can navigate using WASD and the arrow keys
• Select a tile/menu entry by pressing Enter, Return, Space oder Left Mouse Button
• Navigate back by pressing ESC, Backspace or Right Mouse Button
• Directly select a tile by pressing number keys
  • The numeration is like the NUMPAD (1 left bottom, 9 right top)
• Best practices
  • By default, the center tile is highlighted for shortest paths
  • By default, the most often used menu entry is in the center position

Inexor Tree Data Structure

Again: everything is in the tree

• /tree/ui
  • /currentmenu
    • /name = [String] 'NewGame'
    • /row = [Number] 1
    • /column = [Number] 1
  • /menus
    • /[name] = [Node, String] (z.B. 'NewGame')
      • /label = [String] 'Start New Game'
      • /description = [String] 'Starts a new game'
      • /rows = [Number] 3
      • /columns = [Number] 3
      • /startRow = [Number] 1
      • /startColumn = [Number] 1
      • /actions = [Node]
        • /back = [String] e.g. OpenMenu('MainMenu'), CloseMenu()
      • /entries = [Node]
        • /[rownumber] = [Node, Number]
          • /[columnnumber] = [Node, Number]
            • /label = [String] 'New Bot Game'
            • /styles = [Node]
              • /normal
                • /color [String]
                • /backgroundColor [String]
                • /backgroundImage [String]
              • highlighted
                • /color [String]
                • /backgroundColor [String]
                • /backgroundImage [String]
            • /action = [String] e.g. OpenMenu('NewBotGame'), CloseMenu(), OpenApplication('TextureBrowser'), ExecuteCommand('CMD LINE COMMAND')

InexorFlex

Service MenuManager

• createMenu(name, description, rows, columns)
• removeMenu(name)
• setDescription(name, description)
• setDimensions(name, rows, columns, startRow, startColumn)
• setBackAction(name, action)
• setEntryLabel(name, row, column, label)
• setEntryStyleNormal(name, row, column, color, backgroundColor, backgroundImage)
• setEntryStyleHighlighted(name, row, column, color, backgroundColor, backgroundImage)
• setEntryAction(name, row, column, action)
• openMenu(instanceId, name)
• closeMenu(instanceId)
• openApplication(instanceId, applicationName)
• executeCommand(instanceId, commandLineApiCommand)
• loadMenu(tomlFile)
• saveMenu(tomlFile)

REST API

• POST /menus
  • MenuManager.createMenu
• DELETE /menus/[name]
  • MenuManager.removeMenu
• POST /menus/[name]/backAction
  • MenuManager.removeMenu
    ...

CommandLineAPI Commands

• menu create <name> <description> <rows> <columns>
• menu remove <name>
• menu description <name> <description>
• menu dimensions <name> <rows> <columns>
• menu entry label <name> <row> <column> <label>
• menu entry style normal <name> <row> <column> <color> <backgroundColor> <backgroundImage>
• menu entry style highlighted <name> <row> <column> <color> <backgroundColor> <backgroundImage>
• menu entry action <name> <row> <column> <action>
• menu open <instance_id> <name>
• menu close <instance_id>

[MartinMuzatko]

@aschaeffer can you please document what the intended use-cases are?
E.g. is this used as a general means of navigation through the entire main UI? Or is this used as a menu for ingame interactions? E.g.

• vote for next map
• Load map Yes/No

While I think it is nice to have a basic framework for these kind of interactions, where these menus can be re-used throughout the UI or even created on the fly via the API, I have yet to see how we are implementing this together with the other UIs. Do we open that UI through other UIs?

Thanks!

[MartinMuzatko]

I think I found the relevant wiki page: https://github.com/inexorgame/inexor-core/wiki/User-interface-Menu