CDU

In SimBox, you can create your own CDU for specific aircraft. All the examples below are based on the ATR CDU, that is already available in the SimBox Control app.

This guide will show you how to create a CDU from scratch using "pop-out" method. This means that the CDU will be extracted from the simulator and displayed in the SimBox Client app using a virtual display. You can read more about the "pop-out" method in the FMC/MCDU docs.

Initial setup

This is the base JSON structure needed for the CDU to work. More properties will be added in the next steps.

{
  "template": {
    "comp": {
      "name": "custom",
      "menu": {
        "name": "MCDU",
        "hideWhileInSimPanel": true
      }
    }
  }
}

name - Component name. It should be set to custom
menu - Menu properties
- name - Menu name. It will be displayed in the SimBox Client app
- hideWhileInSimPanel - If set to true, the CDU will be hidden when SimBox Client is displayed inside the simulator toolbar panel (because it doesn't support the virtual display)

Components

CDU consists of 3 elements:

Panel image
Keyboard
Display

Panel image

Panel image is a background image of the CDU. It can be a photo of a real CDU or a custom image (recommended). The image should be in PNG format, be high quality and have a transparent background.

Example panel image:

Please note, that there is a "hole" in the panel image where the display will be placed.

Add the panel image to the assets folder in your profile assets directory.

TODO add where to find it

Next, update your profile JSON file:

{
  "assets": {
    "panel-atr": "atr/panel.png"
  },
  "template": {
    "comp": {
      "panelImage": "panel-atr",
      "containerSize": {
        "width": 824,
        "height": 1059
      }
    }
  }
}

assets - Assets used in the profile
- panel-atr - Panel image path in the assets directory
template - Template properties
- comp - Page properties
  - panelImage - Panel image name
  - containerSize - Container size. Container size is the size of the panel image
    - width - Width in pixels
    - height - Height in pixels

Keyboard

With buttons already placed on the panel image, now you need to tell SimBox where exactly are they. To do this, please follow update profile JSON file as follows:

{
  "template": {
    "comp": {
      "name": "custom",
      "buttons": {
        "eventPrefix": "mcdu",
        "types": {
          "BUTTON_1": {
            "size": {
              "width": 55,
              "height": 40
            },
            "radius": 3
          }
        },
        "buttons": [
          {
            "event": "MENU_L_1",
            "position": {
              "left": 26,
              "top": 147
            },
            "type": "BUTTON_1"
          }
        ]
      }
    }
  },
  "action": {
    "event": {
      "mcdu_MENU_L_1": {
        "events": [
          {
            "setSimVar": ["L:MSATR_MCDU1_L1", "number", 1]
          }
        ]
      }
    }
  }
}

template - Template properties
- comp - Page properties
  - buttons - Buttons properties
    - eventPrefix - Event prefix. It will be added to the event name
    - types - Button types
      - BUTTON_1 - Button type name
        size - Button size
        width - Button width in pixels
        height - Button height in pixels
        radius - Button radius in pixels
    - buttons - List of buttons
      - event - Button event name
      - position - Button position
        left - Left position in pixels
        top - Top position in pixels
      - type - Button type

tip

You can have multiple button types in your CDU - for example rounded buttons, square buttons, etc. Thanks to separate button types properties, you won't have to repeat the same properties for each button.

By default, buttons are transparent. Placing your buttons around the panel may be time consuming. To make it easier, you can enable the "dev mode" in the SimBox Control app. This will display a red overlay on each button, so you can see where the buttons are placed. You'll also get a text on each button with event name.

note

To enable dev mode, go to the "Settings" tab in the SimBox Control app and hit Ctrl + D. This will show developer input. Paste this: profileDev and hit 'Save'.

Display

Now it's time to fill the "hole" in the panel image with the display. The display is an HTML element that will stream the video from the virtual display, where the CDU should be "extracted" from the simulator and placed.

{
  "template": {
    "comp": {
      "displayContainerStyle": {
        "top": 93,
        "left": 124,
        "width": 572,
        "height": 514
      },
      "frame": {
        "width": 572,
        "backgroundColor": "#06060e",
        "videoStyle": [
          "width: 100%;",
          "transform: scaleX(1.8) scaleY(1.77);",
          "top: 108px;"
        ]
      }
    }
  }
}

template - Template properties
- comp - Page properties
  - displayContainerStyle - Display container style. Display container is the position of the screen inside the panel image (the "hole")
    - top - Top position in pixels
    - left - Left position in pixels
    - width - Width in pixels
    - height - Height in pixels
  - frame - Frame properties. Frame is an HTML element that wraps the display and streams the video from the CDU display. You can use these properties to style the frame (for example stretch the video to fit the frame)
    - width - Frame width in pixels
    - backgroundColor - Frame background color
    - videoStyle - Video style
      - width - Video width
      - transform - Video transform
      - top - Video top position

TODO add example of the display

Final setup

This is the final JSON structure. Please be aware that it has only one button and one event, to make it easier to understand and read.

{
  "assets": {
    "panel-atr": "atr/panel.png"
  },
  "template": {
    "comp": {
      "name": "custom",
      "panelImage": "panel-atr",
      "buttons": {
        "eventPrefix": "mcdu",
        "types": {
          "BUTTON_1": {
            "size": {
              "width": 55,
              "height": 40
            },
            "radius": 3
          }
        },
        "buttons": [
          {
            "event": "MENU_L_1",
            "position": {
              "left": 26,
              "top": 147
            },
            "type": "BUTTON_1"
          }
        ]
      },
      "displayContainerStyle": {
        "top": 93,
        "left": 124,
        "width": 572,
        "height": 514
      },
      "containerSize": {
        "width": 824,
        "height": 1059
      },
      "menu": {
        "name": "MCDU",
        "hideWhileInSimPanel": true
      },
      "frame": {
        "width": 572,
        "backgroundColor": "#06060e",
        "videoStyle": [
          "width: 100%;",
          "transform: scaleX(1.8) scaleY(1.77);",
          "top: 108px;"
        ]
      }
    }
  },
  "action": {
    "event": {
      "mcdu_MENU_L_1": {
        "events": [
          {
            "setSimVar": ["L:MSATR_MCDU1_L1", "number", 1]
          }
        ]
      }
    }
  }
}

Tips

tip

Open SimBox Client in the browser while working on the CDU. This way you can see the changes in real-time and use build-in developer tools to inspect the elements and move them around before updating the profile.

CDU

Initial setup​

Components​

Panel image​

Keyboard​

Display​

Final setup​

Tips​