Create and Edit Masked Block Icon Using Graphical Icon Editor

You can create and edit the mask icon of a block using a graphical environment. The features in Graphical Icon Editor helps you to easily create icons. Launch Graphical Icon Editor from Mask Editor. You can also create and edit the block mask icons through a set of drawing commands. For more information, see Draw Mask Icon Using Mask Drawing Commands.

Using the Graphical Icon Editor, you can:

Preview the icon to check how it appears when the icon is horizontally stretched, flipped or scaled.
Use Grid and Snap to Grid to achieve perfectly positioned icon elements.
Name the elements and hide, lock, arrange, and regroup the icon.
Hide or unhide specific elements in the icon based on conditions on the block parameters or mask parameters.
Position each element on the icon relative to the canvas.

Edit the Properties of Block Mask Icon and Its Elements

The graphical mode of authoring has a set of tabbed panes that help you to author block mask icons. The options available in these tabbed panes are context sensitive.

Icon - Use the options in the Icon tab to control the properties of the icon such as the canvas height and width.
Element - All the properties specific to an element of the icon are available in the Element tab, for example, alignment options and transformation options.

Icon Properties

Section	Property	Functionality
Save	Save Mask	Save the mask.
Authoring Mode	Toggle Editor	Switch between the command and graphical editors.
Canvas	Height	Set the height of the canvas.
Canvas	Width	Set the width of the canvas.
Drawing Aids	Grid and Snap to grid	Enable these options to create perfectly positioned elements. It helps you to visualize the number of pixels each element scales. Snap to grid allows helps to snap the element to the nearest grid.
	Grid Size	Control the spacing between the grids.
	Grid Color	Select a color for the grid.
	Smart Guides and Rulers	Use smart guides and ruler to align or position an element with respect to all other elements in the icon as well as the canvas.
Configuration	Ports	Define the number of ports on the left, right, top, and bottom of the icon.
Configuration	Simulink Properties	Set Simulink properties such as aspect ratio, foreground, orientation.
Preview	Preview in Model	This option helps you to visualize the icon in its original scale and transformations like scaling, horizontally and vertical stretching, clockwise and, counterclockwise rotation.

Element Properties

Section	Property	Functionality
Transform	X, Y	Set the X and Y coordinates of the element.
Transform	H, W	Set the height and width of the element.
Shape	Stroke, Stroke Width, Bold, Italics, Underline, and Fill	These properties are enabled or disabled depending on the element.
Arrange	Group and Ungroup	Group and Ungroup elements in the icon.
	Flip Horizontal	Flip the selected element horizontally.
	Flip Vertical	Flip the selected element vertically.
Order	Send Backward	Send the element one spot backwards.
	Send to Back	Send the element to the back.
	Bring Forward	Bring the element to the front.
	Bring Front	Bring the element one spot forward.
Align	Align Left	Align the selected elements to the left. Select multiple elements to enable this option and the others in this section.
	Align Horizontal Center	Align the selected elements to the horizontal center.
	Align Right	Align the selected elements to the right.
	Align Bottom	Align the selected elements to the bottom.
	Align Top	Align the selected elements to the top.
	Align Vertical Center	Align the selected elements to the vertical center.
Port Binding	Bind Port or Unbind Port	Bind or unbind port labels and icon elements to a port. To bind the port and label or element, select the port and the label or element. Specify the port using Select Port. To know the number of elements bound to a port, click the port to highlight all the elements bound to the port. You can bind multiple elements to a port, but you cannot bind a single element to multiple ports. Select Unbind Port to unbind a label or element to a port. Binding the elements and labels to a port ensures that the elements and the labels are always with the port.

Drawing Tools

Tool	Functionality
Path	Create the desired shape using the path tool.
Rect	Draw a rectangle or square using the Rect tool.
Ellipse	Draw an ellipse or circle using the Ellipse tool.
Line	Draw lines using Line tool.
Curvature	This tool simplifies path creation. To draw curves, click on the canvas in two separate locations to create anchor points. Drag the center point to draw the curve. Drag the edge points of the curve to enlarge it. You can also rotate the curve to form loops.
Equation Tool	Create LaTeX equations. This tool is similar to the equation tool present in MATLAB® and Simulink.
Edit Shape	Use the edit shape tool to edit all supported shapes, for example, rectangles, ellipses, lines, and paths. To edit a shape, select the path tool and then hover over the shape to view all the edit points forming it. Click an edit point to edit the shape.
Scissor	Split a path or elements on the canvas at an anchor point or along a segment. Click a point on the path you want to split. To modify the object, select the anchor points that are created due to splitting.
Connector	Connect two or more open paths. This connection creates a single path element. Click the tool and drag to connect open paths.

Note

Along with using these tools to draw shapes, you can use predefined shapes from Electrical, Translational, and Rotational libraries. There are also basic shapes like Cylinder, Triangle, Axis, and Sine Wave.

Other Menu Options

Menu	Property	Functionality
Element Browser		The element browser provides you the following functionalities: For icons having many elements, it helps to identify each element using unique names. Hide or unhide an element so that it does not interfere while modifying other elements. Lock or unlock an element so that the position of the element gets locked in the icon. Arrange elements within the group. Delete elements. Maintain a stack order for the elements.
Properties	Transform	Change the position, rotation, and corner radius of an element in the icon.
Path Edit	X and Y	Select the edit point in the shape and then you can modify the X and Y coordinates of the edit point.
	Point Type	You can convert a smooth point to a corner point and vice versa.
	Symmetric Handles	Use this option to symmetrically move the handles of the edit point.
Shape/Element	Fill	Choose color for primary and secondary elements. The color of the secondary element is usually a lighter shade of the primary element.
	Stroke	Choose stroke color and transparency for primary and secondary elements. Set the stroke width and style (solid, dashed, and so on).
	Cap type	Select the cap type of the ends of the stroke.
	Join type	Select the style of the joints that connect the strokes.
	End points	Choose the beginning arrowhead and ending arrowhead of an open element.
Text	Font Size	Select the size of the text from the available options.
	Style	Select the style of the text. The style allows you to bold, italicize, underline, and strike through the text on the icon.
	Letter case	Choose the font casing. You can also format the text as superscript or subscript.
	Fill	Select the color for the text. You can also choose the transparency of the text.
	Stroke	Select the color for the border of the text. You can also choose the transparency for the border of the text.

Add Dynamic Behavior to Masked Icons

Add dynamic behavior to your icon with Conditional Visibility, Text Parameterization, Layout Constraints, and First-fit features. The effect of these features are visible only when you preview the icon in Simulink.

Hide or Unhide Elements in the Icon Based Block or Mask Parameters Values

Hide or unhide elements in the icon by applying certain conditions to the block parameters.

For example, the condition in the following figure sets uvec element in a Gain block to be visible only when the value of the Multiplication parameter is Matrix_Ku_Vector.

visible condition set to multType==Matrix_Ku_Vector

Position Elements Relatively Using Layout Constraints

Layout constraints help you to position each element relative to other elements on the canvas. Select the source and relative elements from the drop-down in the pinning panel. Select the Source element and the Relative to element. Pin both the source element and the relative to element using the pinning panel. Specify the offset. The available options are left, right, top, bottom, horizontal center, and vertical center. You can also use complex conditions to set the relative position of elements. Click More to specify complex conditions. You must preview the icon in Simulink to see the effect of layout constraints.

For example, the constraints in the following figure force the Gain, the left bracket of the matrix to be three pixels to the left of the last element of the matrix.

Layout constraints for the left bracket element

Text Parameterization

You can view the evaluated value of a block parameter on the block icon. Enter the parameter name, the evaluated value of the parameter appears on the block icon during runtime. Enter the block parameter name or a placeholder in Parameter/Value that will returns the text or value during runtime. To see the evaluated value of a block parameter on the block icon, preview the icon on Simulink canvas.

Display Elements That Fit Size of Icon

You can create a block icon that dynamically changes sizes when you resize the block. Each element in the canvas is stored as an array. The element that exactly fits in the block size gets rendered.

For example, the following figure shows the Gain block with four elements of different sizes that are grouped under a first-fit element. When you resize the block, the element that fits in the size of the Gain block appears as the icon of the block.

first fit

Create Block Mask Icon

Block mask icons can be created using Graphical Icon Editor and Mask Drawing commands. You can toggle between the two modes from Mask Editor. This example shows how to draw a block icon with the following features using the Graphical Icon Editor.

The icon has the elements as shown in the following image.
Depending on the value of the block parameter FieldType, the permanent magnet or the spring is be visible on the icon.
The text that appears in the center of the icon takes the value of the block parameter CenterText defined in the Mask Editor.

To create the block icon:

Add a Subsystem block. To create mask on the block, right-click the block, then select Mask > Create.
Select Icon > Graphical in the Icon Authoring tab.
Draw the icon.
- Select the Rect tool from the drawing tools and draw a square.
  
  Note
  Enable the Grid and Snap to grid options to help shapes perfectly align with each other.
- Select the Line to draw a horizontal line touching the middle of the square.
  
  Note
  Enable the Rulers and Smart Guides options to align the element relative to other elements in the canvas.
- Select the square and line elements and make a copy of them. Flip the copies horizontally.
- Select Ellipse to draw a circle joining the two squares.
- Add the text element DC in the center of the icon.
- To draw the magnet, select Rect and draw a rectangle. Make a copy of the rectangle and place the rectangles next to each other. Fill the left rectangle.
- You can hide the magnet element to position the spring element in the place of the magnet. To hide the magnet, select the magnet element, right-click, and select Hide. To draw the spring element, select Inductor and place it on the canvas. Flip the inductor element to achieve a spring shape. Adjust the loops of the inductor element.
Note
You can rename the elements in the Element Browser for easy identification. You can also group or ungroup elements as per your requirements.
Bind ports to the icon.
- Enter the labels for the left and right ports using the text element.
- Bind the ports and port labels of the icon to align the port labels to the port in the canvas, so that even when you resize the icon the ports and port labels remain intact. To bind the port to the port labels, select the port label, go to Port Binding and select the port. You can also unbind the port.
Hide or unhide spring and magnet elements based on the block parameter condition.
Configure the spring element to be visible when the FieldType parameter is Wound and the magnet element to be visible when the parameter is Permanent magnet
- Right-click the magnet element and select Conditional Visibility > Add Condition.
- Enter the condition FieldType=='Permanent magnet'.
- Similarly, enter the condition FieldType=='Wound' for the spring element.
Parameterize text.
- Define the mask block parameter CenterText in the Mask Editor. The value of this block parameter appears in the center of the icon.
- Select the text element and click Text Parameterization.
- Enter the mask block parameter name CenterText in Parameter/Value.
  Parameter/Value returns the text or value during runtime. To see the evaluated value of a block parameter on the block icon, preview the icon on the Simulink^® canvas.
Preview the icon in Simulink.
Click Save Mask to save the mask. Mask editor also allows you to save the icon separately as a SVG file.

Note
If you have changes in both Command Editor and Graphical Editor, you can save the changes in either one of the modes.