Main Content

Design Custom Gauges

You can design custom gauges that look like displays in a real system or animate a signal using the Circular Gauge, Horizontal Gauge, and Vertical Gauge blocks. This example gives step-by-step guidance to design a thermometer using the Vertical Gauge block and an ammeter using the Circular Gauge block.

The model for this example includes several customized gauges connected to the output of a Sine Wave block. The example gives step-by-step instructions to design the gauge blocks in the canvas of the model. The model includes a panel that contains additional customized gauges you can explore on your own. The example directory includes a folder with all the SVG images used to create the gauges.

Design a Thermometer Using the Vertical Gauge Block

The thermometer designed using the Vertical Gauge block uses a background image to define the shape of the thermometer and the value bar of the Vertical Gauge block to indicate the value of the connected signal during simulation. The Battery Level block in the panel uses a similar design strategy.

To design a thermometer, add a Vertical Gauge to the model and use the Design tab in the Property Inspector. To display the Property Inspector, on the Modeling tab, under Design, select Property Inspector. Select the Vertical Gauge block. Then, in the Property Inspector, select the Design tab and click Edit Design. In design mode, the Design tab of the Property Inspector is active, and a toolbar appears above the Vertical Gauge block.

Add the thermometer background image.

  1. Select the Background Image component in the Design tab.

  2. In the Select Image section, click the plus button.

  3. Navigate inside the CustomGaugeImages folder and select the Thermometer.svg file.

The thermometer design uses the value bar, not the needle, to indicate the value of the connected signal. To remove the needle image, in the Design tab, select the Needle component. Then, in the Select Image section, click the X button.

Next, adjust the scale range, color, position, and size.

  1. In the Design tab, select the Scale component.

  2. In the Range section, change the Maximum to 50.

  3. In the Ticks section and the Labels section, change Color to black so the tick marks are more visible on the white background.

  4. Resize the scale so it fits inside the white column of the thermometer background image. You can adjust the width and height of the scale interactively on the block or by using the Design tab. To use the Design tab, in the Size and Position section, adjust the Width and Height.

  5. Align the zero point on the scale with the top of the red area of the background image.

Finally, change the value bar width and color.

  1. In the Design tab, select the Value Bar component.

  2. In the Value Preview section, adjust the slider to preview what the value bar shows when the input value is greater than the minimum scale value.

  3. In the Value Bar section, change Color to red.

  4. Widen the value bar so it fills the majority of the thermometer. You can use interactive controls on the block or use the Design tab. In the Design tab, under Value Bar, adjust Size.

  5. Decrease the value bar opacity so the labels are easier to read.

When you finish adjusting the design for the thermometer, exit design mode. On the Design tab, click Edit Design. Before you simulate the model, connect the Vertical Gauge block to the Sine Wave with Offset signal.

  1. Select the Vertical Gauge block.

  2. Click the Connect button that appears above the block.

  3. Select the Sine Wave with Offset signal.

  4. Select the Sine Wave with Offset option in the table that appears below the selected signal.

  5. Click the X in the upper-right of the canvas.

To see the thermometer in action, simulate the model.

Design an Ammeter Using the Circular Gauge Block

The ammeter designed using the Circular Gauge block uses a background image to define the appearance of the ammeter and a needle image to indicate the value of the connected signal during simulation. The Pressure Gauge block in the panel uses a similar design strategy.

To design an ammeter, add a Circular Gauge block to the model and use the Design tab in the Property Inspector. Select the Circular Gauge block. Then, in the Property Inspector, select the Design tab and click Edit Design. In design mode, the Design tab of the Property Inspector is active, and a toolbar appears above the Circular Gauge block.

First, add the ammeter background image.

  1. Select the Background Image component in the Design tab.

  2. In the Select Image section, click the plus button.

  3. Select the Ammeter.svg file.

Change the scale limits and color, and hide the value bar.

  1. In the Design tab, select the Scale component.

  2. In the Range section, change the Minimum to -50 and the Maximum to 50.

  3. In the Ticks section and the Labels section, change the Color to black so the tick marks are more visible on the white background.

  4. Select the Value Bar component.

  5. In the Value Bar section, change the Opacity to 0.

Adjust the arc of the scale so the scale starts and ends on the horizontal crosshairs. The scale Start Angle specifies the position for the scale minimum, and the scale Arc specifies the extent of the scale arc, both in degrees. In the Design tab, under Range, change the Start Angle and the Arc to 180.

Adjust the scale position so the entire scale fits within the display area of the ammeter background image, with the center of the needle positioned approximately at the center of the semicircle.

Replace the needle image.

  1. In the Design tab, select the Needle component.

  2. In the Select Image section, click the plus button.

  3. Select the Needle.svg file.

The needle image is a straight black line. The saved image is too large for the size of the block and oriented so that the needle does not point to the zero point on the scale. To rotate the needle image, click the needle rotation button in the block. Then, use the needle grab handles in the block to resize and reposition the needle so it starts at the center of the semicircle in the background image and ends before the label for the scale minimum.

When you finish adjusting the design for the ammeter, exit design mode. On the Design tab, click Edit Design. Before you simulate the model, connect the Circular Gauge block to the output signal from the Sine Wave block.

  1. Select the Circular Gauge block.

  2. Click the Connect button that appears above the block.

  3. Select the Sine Wave block output signal.

  4. Select the Sine Wave option in the table that appears below the selected signal.

  5. Click the X in the upper-right of the canvas.

To see the ammeter in action, simulate the model.

Explore More Customized Gauges

The panel in the model contains more examples of customized gauges built using the Circular Gauge, Horizontal Gauge, and Vertical Gauge blocks. To view the panel, double-click the panel icon in the model. You can drag the panel into the canvas or resize the window to view the panel. To see how the gauges respond to changing input values, simulate the model. The CustomGaugeImages folder includes the SVG images used to create each gauge so you can try replicating the designs on your own.

See Also

Blocks

Related Topics