OpenModelica/C3/Icon-and-Diagram-Views/English
| Visual Cue | Narration |
| Slide:
Title Slide |
Welcome to the spoken tutorial on Icon and Diagram Views. |
| Slide:
Learning Objectives |
In this tutorial, we are going to learn:
|
| Slide:
System Requirements |
To record this tutorial, I am using:
Linux, Windows, Mac OS X or FOSSEE OS |
| Slide:
Prerequisites |
* To understand and practice this tutorial, you need knowledge of class definition in Modelica.
Please go through them. |
| Slide:
Icon and Diagram Views |
Icon and Diagram Views enable viewing a model graphically.
Annotations can be used to specify Icon and Diagram Views of a model. Icon View is specified using Icon Annotation whereas Diagram View is specified using Diagram Annotation. They enable drag-and-drop functionality for component-oriented modeling. We will discuss more about this feature in upcoming tutorials. |
| Slide:
Icon/Diagram Annotation |
Now, let us try to understand the syntax of Icon and Diagram Annotations.
As we saw in previous tutorials, annotations can be better understood as records. Hence, Icon and Diagram annotations can be considered as records with coordinateSystem and graphics as the fields. We will look at each one of them individually. |
| Slide:
coordinateSystem |
coordinateSystem may be considered as a record with the following fields:
We will understand them through an example. |
| Slide:
Syntax of Icon/Diagram Annotation |
Here is an example demonstrating syntax of Icon/Diagram Annotation. |
| Let me go to OMEdit.
We shall understand icon and diagram annotations through an example named bouncingBallWithAnnotations. Please download this file from our website. This model was used in previous tutorials. Please watch prerequisite tutorials for more information on this model. I have already opened bouncingBallWithAnnotations in OMEdit. Double-click on its icon in Libraries Browser. | |
| The model is now open in Icon View.
Switch to Icon View if it opens in Diagram or Text View. | |
| Let me shift OMEdit window to the left for better visibility. | |
| Right-click on white space. Select Properties. | You can observe a circle on white background in the Icon View of this model.
I will be referring to the white space in Icon View as canvas. Note that the canvas is divided into grids. We will first learn how to manipulate the properties of canvas. We shall then learn how to insert a circle and a polygon. Right click on the canvas and select Properties. |
| OMEdit - Properties | A dialog box opens as shown.
Note that there are categories named Extent and Grid. |
| Extent signifies the extent of canvas. | |
| Hover over Left and Top. | The fields named Left and Top correspond to coordinates of top left corner.
Left corresponds to the horizontal coordinate and Top corresponds to vertical coordinate. |
| Similarly, Bottom and Right correspond to the horizontal and vertical coordinates of the bottom right corner. | |
| ‘Left’ → -200.00
Click on Ok. |
Now, let us change the Left field to -200 units.
Click on Ok. |
| /* Icon View */ | Note that the canvas expanded to the left. |
| Right-click on white space. Select Properties. | Right-click on white space again.
Select Properties. |
| Grid signifies the size of grid.
Note that the units of grid and extent differ by Scale Factor. | |
| Note that the horizontal spacing between grids increased.
These properties of Icon View can also be manipulated using Icon annotation in Text View. Note that any change in Icon View is accordingly reflected in Icon annotation. | |
| Click on Text View. | Let us try to understand this.
Go to the top of modeling area. Click on Text View. Scroll down a little bit. |
| /* bouncingBallWithAnnotations */
// Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, grid = {4, 2}) // |
coordinateSystem, as we have seen in slides, is a field in Icon annotation. |
| // Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, grid = {4, 2})
// |
extent is a field in coordinateSystem.
It has two pairs of numbers. We have already seen how to manipulate the extent using Properties Dialog box. |
| // Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, ..
// |
The first pair of numbers is {-200,-100}. |
| // Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, ..
// |
The first number that is -200 denotes the horizontal coordinate of the top left hand corner of canvas. |
| // Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, ..
// |
-200 represents the vertical coordinate of the same point. |
| // Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, preserveAspectRatio = true, initialScale = 0.1, grid = {4, 2})
// |
Similarly, the second pair represents the coordinates of bottom right corner of canvas. |
| Now, let me change extent in Icon View.
We will then see if it changes correspondingly in annotation. | |
| Click on Icon View. | Let me switch to Icon View. |
| Right-click on white space. Select Properties. | Right-click on canvas.
Select Properties. |
| Left → -150.00. Click on Ok. | Change the Left field to -150.00.
Click on Ok. |
| Click on Text View. | Switch to Text View. |
| // Icon(coordinateSystem(extent = {{-150, -100}, {100, 100}}, grid = {2, 2})
// |
Notice that the first pair in extent changes to {-200,100}.
Hence, any change in Icon annotation creates a corresponding change in Icon View and vice-versa. |
| // Icon(coordinateSystem(extent = {{-150, -100}, {100, 100}}, grid = {4, 2})
// |
A discussion of other fields of coordinateSystem like ScaleFactor are beyond the scope of this tutorial. |
| Let me go back to the slides. | |
| Slide:
Graphical Items |
We have discussed earlier that Icon annotation has coordinateSystem and graphics as its elements.
graphics record may have the following items:
Now, we will discuss how to insert these figures in Icon and Diagram views. |
| Let me go back to OMEdit. | |
| We shall understand these annotations in three steps.
bouncingBallWithAnnotations already has a circle inserted in its Icon View. The circle is obtained using Ellipse annotation. Let us first try to modify its properties. | |
| // graphics = {Ellipse(lineColor = {0, 0, 255}, fillColor = {85, 170, 255}, fillPattern = FillPattern.Solid, extent = {{-100, 100}, {100, -100}}, endAngle = 360)} // | Note that an Ellipse is inserted and its properties specified.
Let me go to Icon View. |
| Click on ‘Icon View'. | Click on Icon View. |
| Right-click on blue space. Select Properties. | Right-click on the blue space within circle.
Select Properties. |
| Hover over OriginX and OriginY. | OriginX is the horizontal coordinate of center of ellipse.
Similarly, OriginY is the vertical coordinate of center of ellipse. |
| Hover over Extent1X | Extent1X is the horizontal coordinate of leftmost point on the ellipse. |
| Hover over Extent1Y | Extent1Y is the vertical coordinate of topmost point on the ellipse. |
| Similarly, Extent2X and Extent2Y signify the right-most and bottommost points of the ellipse. | |
| Hover over Line Style | Line Style is used to vary the properties of border line |
| Click on Color. Choose Red in Color Palette. | Click on Color under Line Style.
This allows you to change the color of border. Let me choose Red. |
| Click on Pattern. | Click on Pattern under Line Style.
This allows you to change the pattern of border. I have chosen a solid line. |
| Click on Thickness. | Thickness field specifies the thickness of border.
Change it to 0.5. |
| Click on Ok. | Click on Ok |
| Notice the change in color of border Red and the increase in thickness. | |
| Right-click on Ellipse. Select Properties | Right click on the circle and select Properties. |
| Click on Color Fill Style | Under Fill Style, click on Color. |
| Choose Black in Color Palette. | Choose Black in Color Palette.
It appears as the first color. |
| Click on FillPattern. | Click on Fill Pattern drop-down menu.
Choose FillPattern.Horizontal. |
| Click on Ok. | Click on Ok. |
| Note that the fill color changed to black.
The pattern changed from solid to horizontal lines. | |
| Click on Text View | Let me now switch to Text View to explain Ellipse annotation. |
| // graphics = {Ellipse(lineColor = {0, 0, 255}, fillColor = {85, 170, 255}, fillPattern = FillPattern.Solid, extent = {{-100, 100}, {100, -100}}, endAngle = 360) // | lineColor takes three numbers which define the color of border.
Each of these three numbers can take values between 0 and 255. They correspond to the RGB intensity of the color used. |
| graphics = {Ellipse(lineColor = {0, 0, 255}, fillColor = {85, 170, 255}, fillPattern = FillPattern.Solid, extent = {{-100, 100}, {100, -100}}, endAngle = 360) | fillColor specifies the color to be filled in the interior of ellipse. |
| graphics = {Ellipse(lineColor = {0, 0, 255}, fillColor = {85, 170, 255}, fillPattern = FillPattern.Horizontal, extent = {{-100, 100}, {100, -100}}, endAngle = 360) | fillPattern specifies the pattern to be filled in the interior. |
| graphics = {Ellipse(lineColor = {0, 0, 255}, fillColor = {85, 170, 255}, fillPattern = FillPattern.Horizontal, extent = {{-100, 100}, {100, -100}}, endAngle = 360) | extent is identical in context to extent field in coordinateSystem.
Note that all these fields can be changed using Properties dialog box as we’ve already seen. |
| Click on Icon View. | Now, let me construct a new ellipse in the Icon View using the tool bar.
Switch to Icon View. |
| Let me rearrange the existing ellipse to free up some space. | |
| Right-click on ellipse and select Properties. | Right click on the ellipse.
Choose properties. |
| ‘Extent2Y’ → 0
Click on Ok. |
Change Extent2Y field to 0.
Click on Ok. |
| Click on Ellipse button in the toolbar | Click on Ellipse button in the toolbar. |
| Hold and drag the cursor | Click somewhere in the white space.
Hold the mouse and drag it. Leave the mouse after creation of ellipse. |
| Right-click on Ellipse | Right-click on the ellipse and change its properties as you wish.
Click on Ok |
Hover over the following tools:
|
Similarly, you may insert a Line, Polygon, Rectangle and Text using the Tool Bar. |
| Click on Diagram View | Now, let us try to understand Diagram View.
Click on Diagram View. |
| Note that a line has been inserted here.
The properties of this line are specified in Diagram annotation. | |
| Click on Text View. | Switch to Text View to understand Diagram annotation. |
| Diagram(...) | Diagram annotation is similar to Icon annotation.
Diagram annotation has coordinateSystem and graphics records. |
| Diagram(...,, graphics = {Line(origin = {-10, 0}, points = {{-50, -50}, {50, 50}}, color = {0, 0, 255}, pattern = LinePattern.Dash, thickness = 3)}) | The properties of Line are specified here.
The fields of Line can be easily understood. Now, let us understand the difference between Icon and Diagram Views. |
| Let me shift OMEdit Window to the right.
Save the model by pressing Ctrl + S. | |
| The figure shown in Icon View appears in the Libraries Browser.
This is the difference between Icon View and Diagram View. | |
| Diagram View is significantly used in component-oriented modeling.
We’ll learn more about it in upcoming tutorials. | |
| Let me go back to the slides. | |
| Slide: Ellipse | Ellipse has the following fields as we already discussed. |
| Slide:
Assignment |
As an assignment, insert a line, polygon, rectangle and text in Icon View.
Modify their properties and understand their annotations. |
| This brings us to the end of this tutorial. | |
| Slide:
About the Spoken Tutorial project |
Watch the video available at the following link.
It summarises spoken tutorial project. |
| Slide:
Spoken Tutorial Workshops |
We conduct workshops using spoken tutorials
Gives certificates please contact us. |
| Slide:
Forum to answer questions |
If you have any questions in this spoken tutorial, please visit the following website. |
| Slide:
Textbook Companion Project |
We coordinate coding of solved examples of popular books.
Please visit the website shown. |
| Slide:
Lab Migration Project |
We help migrate commercial simulator labs to OpenModelica.
Please contact us. |
| Slide:
Acknowledgements |
Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India |
| Slide:
Thanks |
We thank the development team of OpenModelica for their support.
This is Bhargava signing off! Goodbye! |
