Sandhya.np14 at 07:18, 21 August 2018

2018-08-21T07:18:15Z

Jyotisolanki: 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..."

2017-10-10T10:41:53Z

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..."

New page

{| 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 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 et 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 pop ups 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.

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

Sandhya.np14 at 07:18, 21 August 2018

Jyotisolanki: 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..."