Main Content

Create Dashboard Panel

This example shows how to create a climate control screen for an automotive infotainment system, modeled as a dashboard panel. You can use panels to model and test the user interface of a real system. To model displays and controls on the panel, such as gauges, lamps, knobs, buttons, and switches, you can promote dashboard blocks to the panel. Dashboard blocks are blocks from the Dashboard library, the Customizable Blocks library, and the Aerospace Blockset™ Flight Instruments library.

Video Walkthrough

For a walkthrough of the example, play the video.

Create Dashboard Panel for Climate Control System

Open Model

In this example, you promote a set of blocks to a panel. You add a tab to the panel and populate the tab. Then, you use the panel to monitor and control values in the climate control system during simulation. Note that the climate control system model uses highly simplified heat transfer models and serves here only to demonstrate a type of potential use case for panels. For information about the assumptions in the model, see Simulating Automatic Climate Control Systems.

The climate control screen you create has these controls:

  • A dial for fan speed, modeled using a Slider Switch block

  • A button to turn air recirculation in the cabin on and off, modeled using a Push Button block

  • Two buttons for increasing or decreasing desired cabin temperature, modeled using Callback Button blocks

  • A button for switching temperature units between Celsius and Fahrenheit, modeled using a Callback Button block

The climate control screen has these displays:

  • Cabin temperature, modeled using a Display block

  • Outside temperature, modeled using a Display block

  • Current date and time, modeled using a Display block

  • A picture of the sun or moon to indicate time of day, modeled using a Lamp block

For examples on how to customize blocks from the Customizable Blocks library to look like controls and displays in real systems, see Control Simulations with Interactive Displays.

To try out the finished panel without working through this example, open the sldemo_climate_control_panel.slx model by entering this command in the MATLAB® Command Window:

open_system('sldemo_climate_control_panel.slx')

Promote Blocks to Panel

When you open this example, the sldemo_climate_control_dashboard_blocks.slx model opens and shows the Dashboard Blocks subsystem. The subsystem contains a set of blocks from the Dashboard and Customizable Blocks libraries.

The blocks are on top of an image annotation. The image annotation is the same image as the background image for the panel.

Unlike the blocks, you cannot promote the image to a panel. Promote the blocks to a panel, then add the background image to the panel. To promote the blocks to a panel, marquee select all the blocks on top of the image. Where you release your cursor, an ellipsis (...) appears.

Pause on the ellipsis. In the action menu that expands, click Promote to Panel.

A message appears in the Simulink Editor to remind you that only dashboard blocks can be promoted to a panel. The message appears because the image annotation is not promoted to the panel.

Add Panel Background Image

When you add a background image to a panel, the image resizes to fit the panel. If the panel has a different aspect ratio than the image, the image is distorted.

Before you add the background image to the panel, resize the panel to be the same size as the background image. To resize the panel:

  1. Select the panel.

  2. To enter panel edit mode, in the Simulink® Toolstrip, on the Panels tab, in the Edit section, click Edit Panels.

  3. Drag the edges of the panel until they align with the borders of the image annotation in the canvas.

The last step shows how you can use image annotations to guide the process of resizing the panel. For information about how to add image annotations to the canvas, see Create Image Annotations.

Now, add the background image. In the toolstrip, on the Panels tab, in the Edit section, click Add Background. In the CabinClimateControlPanel folder, select the climate-control-panel-background.png file.

Remove the image annotation in the canvas:

  1. To exit panel edit mode, click anywhere in the canvas.

  2. To access the image annotation, grab the panel name or any part of the panel where there are no blocks and drag the panel aside so that you can see the image annotation.

  3. Select the image annotation in the canvas.

  4. Press Delete.

Add Tabs to Panel

Suppose that while testing the climate control screen, you want to pull up a plot of the cabin temperature without opening extra windows or adding more blocks to the climate control screen. You can do so by adding a tab to the panel and populating the tab with a Dashboard Scope block. Then, you can switch between the climate control screen and the plot by clicking the corresponding panel tabs.

To add a tab to the panel, in the toolstrip, on the Panels tab, in the Edit section, click Add Tab.

If you accidentally create too many tabs, you can delete the extra tabs. Click the tab you want to remove and press Delete.

Rename Tabs

The panel now has two tabs. Give the tabs names that reflect their contents:

  1. Click the left tab.

  2. In the toolstrip, on the Panels tab, in the Edit section, click Rename Panel.

  3. In the Property Inspector Name text box, enter Climate Control Screen.

  4. Click the right tab.

  5. In the Property Inspector Name text box, enter Cabin Temp.

Populate Tabs

To create the plot, exit panel edit mode by clicking anywhere on the canvas.

To add a Dashboard Scope block to the model, double-click the canvas. In the Quick Insert menu, type dashboard scope. If needed, use your arrow keys to select the entry for the Dashboard Scope block, then press Enter.

To promote the Dashboard Scope block to the panel tab named Cabin Temp, enter panel edit mode. To enter panel edit mode, select the panel. Then, in the toolstrip, on the Panels tab, in the Edit section, click Edit Panel.

Drag the Dashboard Scope block onto the panel tab named Cabin Temp.

Increase the size of the block until it fills the panel by dragging the corners outwards.

Exit panel edit mode by clicking anywhere in the canvas.

Connect the Dashboard Scope block on the Cabin Temp tab to the signal the block should display during simulation.

  1. Select the Dashboard Scope block.

  2. In the Simulink Toolstrip, on the Scope tab, in the Connect section, click Connect.

  3. Navigate to the top level of the model.

  4. Drag the panel to one side of the model window so you can see the right half of the model diagram.

  5. Click the signal line that connects to the Scope block named Thermometer Display. The signal is in the lower right of the model diagram.

  6. In the menu that appears, select the check box for the signal named Subsystem:1.

  7. Click the Dashboard Scope block.

  8. In the Simulink Toolstrip, on the Scope tab, in the Connect section, click Done Connecting.

The panel is complete.

Monitor and Display Values During Simulation Using Panel

To run the simulation, in the Simulink toolstrip, on the Simulation tab, in the Simulate section, click Run.

While the simulation is running, try using the controls on the climate control screen.

  1. To set the fan speed to the second-to-highest setting, on the fan speed dial, click the second largest circle.

  2. To change the desired cabin temperature to 20 degrees Celsius, click the plus button in the upper right corner of the panel five times.

  3. To activate air recirculation in the cabin, click the cabin air recirculation button on the car windscreen in the panel.

  4. To see all the temperatures on the climate control screen in degrees Fahrenheit, click the temperature units button in the lower left corner of the panel.

To see the effect of the controls on the cabin air temperature, after changing a control setting, click the Cabin Temp tab.

Manage Panel Visibility

Suppose you want to take a closer look at the model in the canvas. To minimize the panel, double-click the panel. To restore the panel, double-click the panel.

Suppose you want to view only the panel. You can open the panel in a new window, then minimize the model window. You can run and stop the simulation from the panel window, and you can operate the controls in the panel.

  1. Select the panel.

  2. In the toolstrip, in the Panels tab, in the Manage section, click Pop Out Panel.

  3. Minimize the model window.

  4. To run the simulation, click the Run button at the top of the panel window.

  5. On the Climate Control Screen tab, change the setting of one of the controls. For example, click the minus button in the upper right to decrease the desired cabin temperature.

  6. To stop the simulation, click the Stop button at the top of the panel window.

Learn More About Panels

For more information about creating panels, editing panels, and managing panel visibility, see Getting Started with Panels.

Related Topics