Introduction
The Engineering Dashboard has a "tile" or "panel" based interface that provides access to the data:
These tiles have default presentation settings, but this can be modified and tailored to your requirements. For example:
- Tile colours can be changed
- Tile positions can be changed
- Tile contents can be changed
- Tile size can be changed
- New tiles can be added
- A white separator tile can be added to help organise tiles
Editing your tiles presentation
The default tile presentation is defined in the following file:
WAR 1.x CATALINA_HOME\webapps\<dashboard>\engineering\resources\ed.json WAR ≥ 2.x CATALINA_HOME\webapps\<dashboard>\WEB-INF\classes\config\ed\ed.json ZIP ≥ 2.x <unpacked_zip>\configurations\config\ed\ed.json
To modify the presentation, edit the .json file with a text editor (Notepad or other similar application). CAST recommends:
- creating a copy of the default .json files that can be used as a replacement if an error occurs during editing
- first changing existing parameters such as color and title and also moving Tiles around before you begin making large scale and more complex changes
Viewing the changes in your browser
There is no need to restart the application server or application itself if you edit and save the .json file: changes are immediate on saving the file. However, you may find that the changes are not immediately visible in the Engineering Dashboard. This is because the .json file is loaded into the browser's cache, therefore CAST recommends that you empty your browser cache to force the changes to become visible.
If you are using Google Chrome the following tip can be used to automatically empty the browser cache:
- Tap F12 to open the Developer Tools window at the bottom of the page.
- Click the Settings icon (a cog) to the right of the Developer Tools window
- Tick the Disable cache (while DevTools is open) option and close the Settings window.
- In this state, when you then tap F12 followed by F5 to refresh the page, the browser cache will be automatically emptied.
Changing the positions of tiles
Tiles are displayed in the Engineering Dashboard using a column and row configuration defined within each individual tile configuration. Therefore to move a Tile, you need to change its configuration in the .json file. More information about the column and row configuration is provided in Tile Sizing and Positioning.
Configuring a white separator tile
It is possible to add a single or multiple white separator tiles so that you can more easily organise tiles into groups. It acts as a separator and can be resized and moved along both horizontal and vertical axes. An example is shown below. Note that the white tile cannot be configured to be clicked to other data:
Configuration
type: tile type "MockTile"
color : tile color i.e. white or "".
title: title of tile, configurable ("Additional Information")
other parameters for sizing and positioning of the tile - see Tile Sizing and Positioning
Example
{
"type": "MockTile",
"color": "",
"parameters": {},
"col": 1,
"row": 5,
"sizex": 6,
"sizey": 1,
"max-sizex": 8,
"max-sizey": 6,
"title": "Additional Information",
"id": "c928"
}
Tile Sizing and Positioning
All tiles (custom and default) are sized and positioned using a set of options in the tile configuration settings. These options govern how large the tile can be expanded to, how small it can be reduced to, the default size and the default position of the tile on the landing/home page. End users are free to move and resize tiles themselves using drag and drop options - using the Reset homepage option (see Engineering Dashboard) will bring the tiles back to the size and position configured in the tile itself.
The Sizing and Positioning settings are provided via these options in each tile, an explanation of each follows:
"col": 7, "row": 2, "sizex": 2, "sizey": 2, "min-sizex": 2, "min-sizey": 1, "max-sizex": 4, "max-sizey": 5
The landing/homepage is divided into a grid of columns and rows of fixed size. This grid is used to position and size the tiles as follows:
| Example option | Description |
|---|---|
| "col": 7 | The upper left corner of the tile is located in column 7. |
| "row": 2 | The upper left corner of the tile is located in row 2. |
| "sizex": 2 | Defines the size of the tile on the X axis (horizontally) - i.e. the number of columns used by the tile. |
| "sizey": 2 | Defines the size of the tile on the Y axis (vertically) - i.e. the number of row used by the tile. |
| "min-sizex": 2 | Defines the minimum size of the tile on the X axis (horizontally) - i.e. the minimum number of columns the column can use. |
| "min-sizey": 1 | Defines the minimum size of the tile on the Y axis (vertically) - i.e. the minimum number of rows the column can use. |
| "max-sizex": 4 | Defines the maximum size of the tile on the X axis (horizontally) - i.e. the maximum number of columns the column can use. |
| "max-sizey": 5 | Defines the maximum size of the tile on the Y axis (vertically) - i.e. the maximum number of rows the column can use. |
Structure of the .json file
The .json file is divided into various different sections, each corresponding to a tile in the Engineering Dashboard. Various Tiles (or Panels) are defined, for example, the "out-of-the-box" tile Rules, Measures, Distributions tile:
{
"type": "QualityModelOverview",
"color": "pink",
"parameters": {},
"col": 1,
"row": 1,
"sizex": 2,
"sizey": 2,
"max-sizex": 2,
"max-sizey": 2
},
Click the tile you want to know more about:
