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. |
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. |
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. |
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:
| |
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
.
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.
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.
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 isWound
and the magnet element to be visible when the parameter isPermanent 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.