To make your MIStudio project's user interfaces (HMIs) viewable on all size screens, you can lay out your application panels in a responsive grid using the Project's main node and using the BootstrapConfig option. With a responsive layout the HTML web view from MIX will resize to fit the size of the web browser screen. In other words, the same user interface can be used on a wide high resolution monitor, a lower resolution panel pc, or a smaller tablet, or a mobile phone.

The BootstrapConfig uses any number (one or more) of the applications you have designed in MIStudio as “panels” in the bootstrap layout. As an example, here is the application node with six applications in it:

Each application can be organized into a single “Dashboard” using the BootstrapConifg configuration, for example, as a visual concept this layout:

The bootstrap layout is based on rows of application panels (one or more application panel per row). The panels for each row should be the same height when designed in MIStudio.

The rows are divided up into blocks of 12. So each each row should should fill all 12 columns, but this is not required (the right side of an unfilled row will be empty). A typical header application might have a width of 1200 to fill a whole row. You can use an application of width 600 to use all 12 units in a row, it will stretch to fill the row (but the height will also double). Or you can use two application panels of 600 each to fill the whole 1200 units, or likewise, one of 800 and one of 400.

So, in summary:

• Design applications for each row with the same height
• Design the width of a row to fit an even 1200 units with one or more application panels in the row

In MIStudio the application defaults to 800×600 (width x height). To change the application dimensions, click on the application name in the Applications node and use the Expert tab to change the width and/or height. In the image below the Footer application is set up to be 50 height x 1200 width.

For the layout concept above, the header, footer and Main panels are each 1200 wide, and the four summary panels are 300 wide (for a total of 1200). The height of all the summary panels is the same (300).

Using the visual concept above, with the header on top, followed by the four summary panels, the main panel, and then the footer, the BootstrapConfig can be used to lay out this design.

To start the bootstrap dashboard configuration, click on the property field “BootstrapConfig” on the project properties panel.

The new Bootstrap Layout panel looks like:

The layout is designed from the top down (top of screen first). When you start, there is one row in the layout. Select the Application “Header” to occupy this row.

The Header is set up to use the default “12” column units.

Next, add a row to the layout using the + button as shown below:

The next row is composed of the four “Summary” panels. You can select the first one, SummaryOne, for this column, and change it to use 3 of the 12 column units.

When you change the column units from “12” to “3” a “+” appears on the left side of the selected panel. This means you can add more panels to this row. Press the “+” to add another panel, SummaryTwo, set its column units to 3, and repeat for SummaryThree and Summary Four. Once SummaryFour is added and set to use the remaining three column units, this row is complete. There will be a “-” in this section to remove panels if desired.

To finish the layout add another row and select the Main panel for this, and finally add another row for the Footer panel.

Using the Preview button, you can view the general layout in the preview panel (the row heights are not to scale).