Difference between revisions of "OpenModelica/C3/Icon-and-Diagram-Views/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "{| border=1 ||''' Time ''' ||'''Narration''' |- || 00:01 || Welcome to the spoken tutorial on '''Icon and Diagram Views'''. |- ||00:06 || In this tutorial, we are going to l...")
 
 
Line 5: Line 5:
 
|-
 
|-
 
|| 00:01
 
|| 00:01
−
|| Welcome to the spoken tutorial on '''Icon and Diagram Views'''.
+
|| Welcome to the '''spoken tutorial''' on '''Icon and Diagram Views'''.
  
 
|-
 
|-
 
||00:06
 
||00:06
−
|| In this tutorial, we are going to learn: How to specify '''icon and diagram views''' of a '''class'''.
+
|| In this tutorial, we are going to learn:  
 +
how to specify '''icon and diagram views''' of a '''class''',
 
   
 
   
 
|-
 
|-
 
||00:14
 
||00:14
−
||How to insert a '''polygon''' and '''ellipse''' in '''Icon/Diagram View'''.
+
||how to insert a polygon and '''ellipse''' in '''Icon/Diagram View'''.
  
 
|-
 
|-
 
|| 00:20
 
|| 00:20
−
|| To record this tutorial, I am using:  '''OpenModelica version 1.9.2'''
+
|| To record this tutorial, I am using:  '''OpenModelica version 1.9.2'''.
 
   
 
   
 
|-
 
|-
 
||00:27
 
||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'''.
+
||You may use any of the following '''operating system'''s to practice this tutorial: '''Linux, Windows, Mac OS X''' or '''FOSSEE OS''' on '''ARM'''.
  
 
|-
 
|-
 
|| 00:39
 
|| 00:39
−
||  To understand and practice this tutorial, you need knowledge of class definition in '''Modelica'''.  You need to know how to specify annotations.
+
||  To understand and practice this tutorial, you need knowledge of class definition in '''Modelica'''.  You need to know how to specify '''annotation'''s.
  
 
  |-
 
  |-
Line 53: Line 54:
 
|-
 
|-
 
|| 01:30
 
|| 01:30
−
|| Now, let us try to understand the syntax of '''Icon and Diagram Annotations'''.  
+
|| Now, let us try to understand the syntax of Icon and Diagram Annotations.  
  
 
|-
 
|-
Line 61: Line 62:
 
|-
 
|-
 
||01:44
 
||01:44
−
||Hence, '''Icon and Diagram annotations''' can be considered  as '''records''' with '''coordinateSystem'''  
+
||Hence, Icon and Diagram annotations can be considered  as '''records''' with '''coordinateSystem'''  
−
and '''graphics''' as the fields.  
+
and '''graphics''' as the '''field'''s.  
  
 
|-
 
|-
Line 83: Line 84:
 
|-
 
|-
 
|| 02:22
 
|| 02:22
−
|| Now et me switch to '''OMEdit'''.  
+
|| Now, let me switch to '''OMEdit'''.  
  
 
|-
 
|-
Line 131: Line 132:
 
|-
 
|-
 
|| 03:27
 
|| 03:27
−
||Note that the '''canvas''' is divided into grids.
+
||Note that the '''canvas''' is divided into '''grid'''s.
  
 
|-
 
|-
Line 139: Line 140:
 
|-
 
|-
 
|| 03:37
 
|| 03:37
−
||Then we shall learn how to insert a '''circle''' and a '''polygon'''.  
+
||Then we shall learn how to insert a circle and a polygon.  
  
 
|-
 
|-
 
||03:43
 
||03:43
−
||Right-click on the canvas beside '''circle'''. Select '''Properties'''.
+
||Right-click on the canvas beside circle. Select '''Properties'''.
  
 
|-
 
|-
 
|| 03:51
 
|| 03:51
−
|| A dialog box pop ups as shown.  
+
|| A dialog-box pops up as shown.  
  
 
|-
 
|-
Line 159: Line 160:
 
|-
 
|-
 
|| 04:07
 
|| 04:07
−
|| The fields named '''Left''' and '''Top''' correspond to coordinates of top left corner of the '''canvas'''.  
+
|| The '''field'''s named '''Left''' and '''Top''' correspond to coordinates of top left corner of the '''canvas'''.  
  
 
|-
 
|-
Line 191: Line 192:
 
|-
 
|-
 
||05:04
 
||05:04
−
||Change horizontal field in grid to '''4''' units. Click on '''OK'''.
+
||Change '''Horizontal''' field in grid to '''4''' units. Click on '''OK'''.
  
 
|-
 
|-
Line 207: Line 208:
 
|-
 
|-
 
|| 05:32
 
|| 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.
+
|| Let us try to understand this. Go to the top of '''modeling''' area and click on '''Text View'''.  Scroll-down a little bit.
  
 
|-
 
|-
Line 219: Line 220:
 
|-
 
|-
 
|| 05:57
 
|| 05:57
−
||We have already seen how to manipulate the '''extent''' using '''Properties''' dialog box.
+
||We have already seen how to manipulate the '''extent''', using '''Properties''' dialog box.
  
 
|-
 
|-
Line 227: Line 228:
 
|-
 
|-
 
|| 06:09
 
|| 06:09
−
|| The first number of this pair that is '''-200''' denotes the horizontal coordinate of the top left hand corner of canvas.
+
|| The first number of this pair that is '''-200''' denotes the '''horizontal''' coordinate of the top left hand corner of canvas.
  
 
|-
 
|-
 
|| 06:20
 
|| 06:20
−
|| Similarly, '''-100''' represents the vertical coordinate of the same point.
+
|| Similarly, '''-100''' represents the '''vertical''' coordinate of the same point.
  
 
|-
 
|-
Line 263: Line 264:
 
|-
 
|-
 
|| 07:14
 
|| 07:14
−
|| Click on '''Text View'''.Scroll down.
+
|| Click on '''Text View'''. Scroll down.
  
 
|-
 
|-
Line 303: Line 304:
 
|-
 
|-
 
|| 08:29
 
|| 08:29
−
|| We shall understand these annotations in three steps.  '''bouncingBallWithAnnotations''' already has a '''circle''' inserted in its '''Icon View'''.  
+
|| We shall understand these annotations in three steps.  '''bouncingBallWithAnnotations''' already has a circle inserted in its '''Icon View'''.  
  
 
|-
 
|-
 
|| 08:40
 
|| 08:40
−
||The '''circle''' is obtained using '''Ellipse''' annotation.  Let us first try to modify its properties.
+
||The circle is obtained using '''Ellipse''' annotation.  Let us first try to modify its properties.
  
 
|-
 
|-
 
|| 08:49
 
|| 08:49
−
|| Note that an '''Ellipse''' is inserted and its properties specified in graphics field of icon annotation.
+
|| Note that an '''Ellipse''' is inserted and its properties specified in graphics field of '''icon''' annotation.
  
 
|-
 
|-
Line 319: Line 320:
 
|-
 
|-
 
|| 09:02
 
|| 09:02
−
|| Right-click on the blue space within '''circle'''.  Select '''Properties'''.
+
|| Right-click on the blue space within circle.  Select '''Properties'''.
  
 
|-
 
|-
Line 359: Line 360:
 
|-
 
|-
 
|| 10:05
 
|| 10:05
−
|| Click on '''Pattern''' drop down menu under '''Line Style'''.  
+
|| Click on '''Pattern''' drop down menu, under '''Line Style'''.  
  
 
|-
 
|-
 
|| 10:10
 
|| 10:10
−
||This allows you to change the pattern of border.  I have chosen a solid line.
+
||This allows you to change the pattern of border.  I have chosen a '''solid''' line.
  
 
|-
 
|-
Line 383: Line 384:
 
|-
 
|-
 
|| 10:34
 
|| 10:34
−
|| Now right click on the circle once again and select '''Properties'''.
+
|| Now, right click on the circle once again and select '''Properties'''.
  
 
|-
 
|-
Line 399: Line 400:
 
|-
 
|-
 
|| 10:56
 
|| 10:56
−
|| Now click on Fill Pattern''' drop-down menu.  
+
|| Now click on '''Fill Pattern''' drop-down menu.  
  
 
|-
 
|-
Line 439: Line 440:
 
|-
 
|-
 
|| 12:02
 
|| 12:02
−
||Note that all these fields can be changed using '''Properties''' dialog box as we have already seen.
+
||Note that all these '''field'''s can be changed using '''Properties''' dialog box as we have already seen.
  
 
|-
 
|-
Line 447: Line 448:
 
|-
 
|-
 
|| 12:19
 
|| 12:19
−
|| Let me rearrange the existing '''circle''' to free up some space.
+
|| Let me rearrange the existing circle to free up some space.
  
 
|-
 
|-
 
|| 12:24
 
|| 12:24
−
|| Right click on the '''circle''' and choose '''properties'''.
+
|| Right click on the circle and choose '''properties'''.
  
 
|-
 
|-
Line 463: Line 464:
 
|-
 
|-
 
||12:42
 
||12:42
−
|| Left click somewhere in the '''canvas''' and hold the mouse and drag it.  
+
|| Left click somewhere in the '''canvas''' and hold the '''mouse''' and drag it.  
  
 
|-
 
|-
Line 515: Line 516:
 
|-
 
|-
 
||14:09
 
||14:09
−
||Save the model by pressing '''Ctrl + S'''.
+
||'''Save''' the model by pressing '''Ctrl + S'''.
  
 
|-
 
|-
Line 523: Line 524:
 
|-
 
|-
 
|| 14:22
 
|| 14:22
−
|| Whereas the '''Diagram View''' is used significantly in '''component-oriented modeling'''.  
+
|| Whereas, the '''Diagram View''' is used significantly in '''component-oriented modeling'''.  
  
 
|-
 
|-
Line 555: Line 556:
 
|-
 
|-
 
|| 15:08
 
|| 15:08
−
|| We conduct workshops using spoken tutorials Please contact us.
+
|| We conduct workshops using spoken tutorials. Please contact us.
  
 
|-
 
|-
Line 575: Line 576:
 
|-
 
|-
 
|| 15:39
 
|| 15:39
−
|| Spoken Tutorial Project is funded by '''NMEICT, MHRD''', Government of India.
+
|| '''Spoken Tutorial Project''' is funded by '''NMEICT, MHRD''', Government of India.
  
 
|-
 
|-
 
||15:46
 
||15:46
 
|| We thank the development team of '''OpenModelica''' for their support.  Thank you for joining me in this tutorial.
 
|| We thank the development team of '''OpenModelica''' for their support.  Thank you for joining me in this tutorial.

Latest revision as of 12:48, 21 August 2018

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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=OpenModelica/C3/Icon-and-Diagram-Views/English-timed&oldid=44104"