OpenModelica/C3/Icon-and-Diagram-Views/English-timed

Time	Narration
00:01	Welcome to the spoken tutorial on Icon and Diagram Views.
00:06	In this tutorial, we are going to learn: how to specify icon and diagram views of a class,
00:14	how to insert a polygon and ellipse in Icon/Diagram View.
00:20	To record this tutorial, I am using: OpenModelica version 1.9.2.
00:27	You may use any of the following operating systems to practice this tutorial: Linux, Windows, Mac OS X or FOSSEE OS on ARM.
00:39	To understand and practice this tutorial, you need knowledge of class definition in Modelica. You need to know how to specify annotations.
00:51	Prerequisite tutorials are mentioned on our website. Please go through them.
00:57	Icon and Diagram Views enable viewing a model graphically.
01:03	Annotations can be used to specify Icon and Diagram Views of a model.
01:09	Icon View is specified using Icon Annotation whereas Diagram View is specified using Diagram Annotation.
01:19	They enable drag-and-drop functionality for component-oriented modeling.
01:25	We will discuss more about this feature in upcoming tutorials.
01:30	Now, let us try to understand the syntax of Icon and Diagram Annotations.
01:37	As we saw in previous tutorials, annotations can be better understood as records.
01:44	Hence, Icon and Diagram annotations can be considered as records with coordinateSystem and graphics as the fields.
01:55	We will look at each one of them individually.
01:58	coordinateSystem may be considered as a record with the following fields: extent, initialScale, preserveAspectRatio and grid.
02:10	We will understand them through an example.
02:15	Here is an example demonstrating the syntax of Icon/Diagram Annotation.
02:22	Now, let me switch to OMEdit.
02:26	We will understand icon and diagram annotations through an example named bouncingBallWithAnnotations.
02:35	Please download this file from our website.
02:39	This model was used in previous tutorials.
02:42	Please watch prerequisite tutorials for more information on this model.
02:48	I have already opened bouncingBallWithAnnotations in OMEdit.
02:54	Double-click on its icon in Libraries Browser.
02:58	The model is now open in Icon View.
03:02	Switch to Icon View if it opens in either Diagram or Text View.
03:08	Let me shift OMEdit window to the left for better visibility.
03:14	You can observe a circle on white background in Icon View of this model.
03:21	I will be referring to the white space in Icon View as canvas.
03:27	Note that the canvas is divided into grids.
03:32	We will first learn how to manipulate the properties of canvas.
03:37	Then we shall learn how to insert a circle and a polygon.
03:43	Right-click on the canvas beside circle. Select Properties.
03:51	A dialog-box pops up as shown.
03:55	Note that there are categories named Extent, Grid and Component.
04:04	Extent signifies the extent of canvas.
04:07	The fields named Left and Top correspond to coordinates of top left corner of the canvas.
04:16	Left corresponds to the horizontal coordinate and Top corresponds to the vertical coordinate.
04:24	Similarly, Bottom and Right correspond to the coordinates of bottom right corner of canvas.
04:33	Now, let us change the Left field to -200 units. Click on Ok.
04:41	Note that the canvas expanded to the left by 100 units.
04:47	Right-click on canvas once again and select Properties.
04:53	Grid signifies the size of grid.
04:57	Note that the units of extent and grid differ by the Scale Factor.
05:04	Change Horizontal field in grid to 4 units. Click on OK.
05:11	Note that the size of grid has increased in the canvas.
05:16	These properties of Icon View can also be manipulated using Icon annotation in the Text View.
05:24	Note that any change in Icon View is accordingly reflected in Icon annotation.
05:32	Let us try to understand this. Go to the top of modeling area and click on Text View. Scroll-down a little bit.
05:43	coordinateSystem, as we have seen in slides, is a field in Icon annotation.
05:50	extent is a field in coordinateSystem. It has two pairs of numbers.
05:57	We have already seen how to manipulate the extent, using Properties dialog box.
06:04	The first pair of numbers is {-200,-100}.
06:09	The first number of this pair that is -200 denotes the horizontal coordinate of the top left hand corner of canvas.
06:20	Similarly, -100 represents the vertical coordinate of the same point.
06:27	The second pair represents the coordinates of bottom right corner of white space.
06:35	Note that these 4 numbers correspond to top, bottom, left and right fields, we have seen in Properties dialog box.
06:45	Now, let me change extent using Properties dialog box of Icon View.
06:52	We will then see if it changes correspondingly in annotation of Text View.
06:59	Let me switch to Icon View.
07:02	Right-click on the canvas and select Properties.
07:07	Change the Left field to -150.00. Click on Ok.
07:14	Click on Text View. Scroll down.
07:18	Notice that the first pair of coordinates in extent has changed to {-150,-100} from {-200,-100}.
07:30	This is due to the change that we have made in Icon View using Properties dialog box.
07:37	Hence, any change in Icon annotation creates a corresponding change in Icon View and vice-versa.
07:46	A discussion of other fields of coordinateSystem like ScaleFactor is beyond the scope of this tutorial.
07:54	Let me go back to the slides.
07:57	We have discussed earlier that Icon annotation has coordinateSystem and graphics as its elements.
08:06	graphics record may have the following items: Line , Rectangle , Ellipse , Polygon, Text and Bitmap.
08:17	Now, we will discuss how to insert these items in Icon and Diagram views.
08:25	Let me go back to OMEdit.
08:29	We shall understand these annotations in three steps. bouncingBallWithAnnotations already has a circle inserted in its Icon View.
08:40	The circle is obtained using Ellipse annotation. Let us first try to modify its properties.
08:49	Note that an Ellipse is inserted and its properties specified in graphics field of icon annotation.
08:59	Let me go to Icon View.
09:02	Right-click on the blue space within circle. Select Properties.
09:09	OriginX is the horizontal coordinate of center of ellipse.
09:15	Similarly, OriginY is the vertical coordinate of the center of ellipse.
09:22	Extent1X is the horizontal coordinate of left-most point on the ellipse.
09:29	Extent1Y is the vertical coordinate of top-most point on the ellipse.
09:36	Similarly, Extent2X and Extent2Y correspond to the right-most and bottom-most points on the ellipse.
09:48	Line Style is used to vary the properties of border line.
09:53	Click on Color under Line Style.
09:57	This allows you to change the color of border.
10:01	Let me choose red and click on OK.
10:05	Click on Pattern drop down menu, under Line Style.
10:10	This allows you to change the pattern of border. I have chosen a solid line.
10:17	Thickness field specifies the thickness of border.
10:21	Change it to 0.5 units.
10:25	Click on Ok
10:27	Notice the change in color of border to red and the increase in thickness.
10:34	Now, right click on the circle once again and select Properties.
10:40	Under Fill Style, click on Color.
10:44	Choose Black in the Color Palette. Click on Ok.
10:49	This color represents the color to be filled in the interior of the ellipse.
10:56	Now click on Fill Pattern drop-down menu.
11:00	Choose FillPattern.Horizontal and click on Ok.
11:06	Note that the fill color changed to black and the pattern changed from solid to horizontal lines.
11:15	Let me now switch to Text View to explain Ellipse annotation. Click on Text View. Scroll down.
11:25	lineColor takes three numbers which define the color of border.
11:31	Each of these three numbers can take values between 0 and 255.
11:38	They correspond to the RGB intensity of the color used.
11:44	fillPattern specifies the pattern to be filled in the interior.
11:51	extent is identical in context to the extent field of coordinateSystem.
11:57	LineThickness represents the thickness of border.
12:02	Note that all these fields can be changed using Properties dialog box as we have already seen.
12:10	Now, let me switch to Icon View to construct a new ellipse using the tool bar. Click on Icon View.
12:19	Let me rearrange the existing circle to free up some space.
12:24	Right click on the circle and choose properties.
12:29	Change Extent2Y to 0 units. Click on Ok.
12:35	Now to insert a new ellipse, click on Ellipse button in the toolbar.
12:42	Left click somewhere in the canvas and hold the mouse and drag it.
12:50	Leave the mouse after an ellipse has been created.
12:55	Right-click on the ellipse and select Properties to change its properties as you wish. Click on Ok
13:05	Similarly, you may insert a Line, Polygon, Rectangle and Text using the Tool Bar.
13:13	Now, let me explain Diagram View. Click on Diagram View.
13:19	Note that a line has been inserted here. The properties of this line are specified in Diagram annotation.
13:28	Switch to Text View to understand Diagram annotation. Scroll down.
13:35	Diagram annotation is similar in its syntax to Icon annotation.
13:41	It has coordinateSystem and graphics as its component records.
13:47	The properties of the Line inserted in Diagram View are specified here.
13:53	The fields of Line annotation can be easily understood.
13:58	Now, let us understand the difference between Icon and Diagram Views.
14:04	Let me shift OMEdit Window to the right.
14:09	Save the model by pressing Ctrl + S.
14:13	The figure shown in Icon View appears as an icon in the Libraries Browser as can be seen here.
14:22	Whereas, the Diagram View is used significantly in component-oriented modeling.
14:29	We shall learn more about component-oriented modeling in the upcoming tutorials.
14:35	Now let me go back to the slides.
14:39	Ellipse has the following fields as we have already discussed.
14:44	As an assignment, insert a line, polygon, rectangle and text in the Icon View of model.
14:53	Modify their properties and understand their annotations.
14:58	This brings us to the end of this tutorial.
15:02	Watch the video available at the following link. It summarises the spoken tutorial project.
15:08	We conduct workshops using spoken tutorials. Please contact us.
15:14	If you have questions in this spoken tutorial, please visit the following website.
15:20	We coordinate coding of solved examples of popular books. Please visit the website shown.
15:28	We help migrate commercial simulator labs to OpenModelica.
15:33	Please visit the website for more information on our lab migration project.
15:39	Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
15:46	We thank the development team of OpenModelica for their support. Thank you for joining me in this tutorial.

Contributors and Content Editors

Jyotisolanki, Sandhya.np14