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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "{| border=1 ||'''Visual Cue''' ||'''Narration''' |- || Slide: '''Title Slide''' || Welcome to the spoken tutorial on '''Icon and Diagram Views'''. |- || Slide: '''Learning...")
 
Line 16: Line 16:
  
 
* How to specify '''icon and diagram views''' of a '''class'''.
 
* How to specify '''icon and diagram views''' of a '''class'''.
−
* How to insert a '''polygon''' or '''ellipse''' in '''Icon/Diagram View'''.
+
* How to insert a '''polygon''' and '''ellipse''' in '''Icon/Diagram View'''.
  
 
|-
 
|-
Line 24: Line 24:
 
|| To record this tutorial, I am using:
 
|| To record this tutorial, I am using:
  
−
* '''OpenModelica 1.9.2'''
+
* '''OpenModelica version 1.9.2'''
−
* You may use any of the following operating systems:
+
* You may use any of the following operating systems to practice this tutorial:
  
−
'''Linux, Windows, Mac OS X''' or '''FOSSEE OS'''
+
'''Linux, Windows, Mac OS X''' or '''FOSSEE OS on ARM'''.
  
 
|-
 
|-
Line 35: Line 35:
 
|| * To understand and practice this tutorial, you need knowledge of class definition in '''Modelica'''.  
 
|| * To understand and practice this tutorial, you need knowledge of class definition in '''Modelica'''.  
  
−
* You need to know how to specify an annotation.
+
* You need to know how to specify annotations.
  
−
* Prerequisite tutorials are available on our website.  
+
* Prerequisite tutorials are mentioned on our website.  
  
 
Please go through them.
 
Please go through them.
Line 61: Line 61:
 
|| 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'''.  
  
−
As we saw in previous tutorials, '''annotations''' can be better understood as records.
+
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.
+
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.  
 
We will look at each one of them individually.  
Line 71: Line 71:
  
 
'''coordinateSystem'''
 
'''coordinateSystem'''
−
|| '''coordinateSystem''' may be considered as a record with the following fields:  
+
|| '''coordinateSystem''' may be considered as a '''record''' with the following fields:  
  
 
* '''extent''',  
 
* '''extent''',  
Line 84: Line 84:
  
 
'''Syntax of Icon/Diagram Annotation'''
 
'''Syntax of Icon/Diagram Annotation'''
−
|| Here is an example demonstrating syntax of '''Icon/Diagram Annotation'''.
+
|| Here is an example demonstrating the syntax of '''Icon/Diagram Annotation'''.
  
 
|-
 
|-
 
||  
 
||  
−
|| Let me go to '''OMEdit'''.  
+
|| Now et me switch to '''OMEdit'''.  
  
−
We shall understand '''icon and diagram annotations''' through an example named '''bouncingBallWithAnnotations'''.  
+
We will understand '''icon and diagram annotations''' through an example named '''bouncingBallWithAnnotations'''.  
  
 
Please download this file from our website.
 
Please download this file from our website.
Line 106: Line 106:
 
|| The model is now open in '''Icon View'''.  
 
|| The model is now open in '''Icon View'''.  
  
−
Switch to '''Icon View''' if it opens in '''Diagram or Text View'''.
+
Switch to '''Icon View''' if it opens in either '''Diagram''' or '''Text View'''.
  
 
|-
 
|-
Line 114: Line 114:
 
|-
 
|-
 
|| Right-click on white space. Select '''Properties'''.
 
|| Right-click on white space. Select '''Properties'''.
−
|| You can observe a circle on white background in the '''Icon View''' of this model.  
+
|| You can observe a circle on white background in '''Icon View''' of this model.  
  
 
I will be referring to the white space in '''Icon View''' as canvas.  
 
I will be referring to the white space in '''Icon View''' as canvas.  
Line 122: Line 122:
 
We will first learn how to manipulate the properties of canvas.  
 
We will first learn how to manipulate the properties of canvas.  
  
−
We shall then learn how to insert a circle and a polygon.  
+
Then We shall learn how to insert a circle and a polygon.  
  
−
Right click on the canvas and select '''Properties'''.
+
Right click on the canvas beside circle.
 +
 
 +
Select '''Properties'''.
  
 
|-
 
|-
 
|| '''OMEdit - Properties'''
 
|| '''OMEdit - Properties'''
−
|| A dialog box opens as shown.  
+
|| A dialog box pop ups as shown.  
 +
 
 +
Note that there are categories named
  
−
Note that there are categories named '''Extent''' and '''Grid'''.
+
*'''Extent''',
 +
*'''Grid''' and
 +
*'''Component'''.
  
 
|-
 
|-
Line 138: Line 144:
 
|-
 
|-
 
|| Hover over '''Left''' and '''Top'''.
 
|| Hover over '''Left''' and '''Top'''.
−
|| The fields named '''Left''' and '''Top''' correspond to coordinates of top left corner.  
+
|| The fields named '''Left''' and '''Top''' correspond to coordinates of top left corner of the canvas.  
  
−
'''Left''' corresponds to the horizontal coordinate and '''Top''' corresponds to vertical coordinate.
+
'''Left''' corresponds to the horizontal coordinate and '''Top''' corresponds to the vertical coordinate.
  
 
|-
 
|-
 
||  
 
||  
−
|| Similarly, '''Bottom''' and '''Right''' correspond to the horizontal and vertical coordinates of the bottom right corner.
+
|| Similarly, '''Bottom''' and '''Right''' correspond to the coordinates of bottom right corner of canvas.
−
 
+
 
|-
 
|-
 
|| ‘Left’ → -200.00
 
|| ‘Left’ → -200.00
Line 156: Line 161:
 
|-
 
|-
 
|| /* Icon View */
 
|| /* Icon View */
−
|| Note that the canvas expanded to the left.
+
|| Note that the canvas expanded to the left by '''100''' units.
  
 
|-
 
|-
 
|| Right-click on white space. Select '''Properties'''.
 
|| Right-click on white space. Select '''Properties'''.
−
|| Right-click on white space again.  
+
|| Right-click on canvas once again.  
  
−
Select '''Properties'''.
+
and select '''Properties'''.
  
 
|-
 
|-
Line 168: Line 173:
 
|| '''Grid''' signifies the size of grid.  
 
|| '''Grid''' signifies the size of grid.  
  
−
Note that the units of '''grid''' and '''extent''' differ by '''Scale Factor'''.
+
Note that the units of '''extent''' and '''grid''' differ by the '''Scale Factor'''.
 +
 
 +
Change horizontal field in grid to '''4''' units.
 +
 
 +
Click on '''OK'''.
  
 
|-
 
|-
 
||  
 
||  
−
|| Note that the horizontal spacing between grids increased.
+
|| Note that the size of grid has increased in the canvas.
  
−
These properties of '''Icon View '''can also be manipulated using '''Icon annotation''' in '''Text View'''.  
+
These properties of '''Icon View '''can also be manipulated using '''Icon annotation''' in the '''Text View'''.  
  
 
Note that any change in '''Icon View''' is accordingly reflected in '''Icon annotation'''.
 
Note that any change in '''Icon View''' is accordingly reflected in '''Icon annotation'''.
Line 182: Line 191:
 
|| Let us try to understand this.  
 
|| Let us try to understand this.  
  
−
Go to the top of '''modeling''' area.
+
Go to the top of '''modeling''' area and click on '''Text View'''.  
−
 
+
−
Click on '''Text View'''.  
+
  
 
Scroll down a little bit.
 
Scroll down a little bit.
Line 207: Line 214:
  
 
|-
 
|-
−
|| // Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, ..
+
|| // Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, .
  
 
//
 
//
Line 213: Line 220:
  
 
|-
 
|-
−
|| // Icon(coordinateSystem(extent = {{-200, -100}, {100, 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.
+
|| The first number of this pair that is '''-200''' denotes the horizontal coordinate of the top left hand corner of canvas.
  
 
|-
 
|-
−
|| // Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, ..
+
|| // Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, .
  
 
//
 
//
−
|| '''-200''' represents the vertical coordinate of the same point.
+
|| Similarly, '''-100''' represents the vertical coordinate of the same point.
  
 
|-
 
|-
Line 228: Line 235:
  
 
//
 
//
−
|| Similarly, the second pair represents the coordinates of bottom right corner of canvas.
+
|| The second pair represents the coordinates of bottom right corner of white space.
 +
 
 +
Note that these 4 numbers correspond to top, bottom, left and right fields, we have seen in '''Properties''' dialogue box.
  
 
|-
 
|-
 
||  
 
||  
−
|| Now, let me change '''extent''' in Icon View.  
+
|| Now, let me change '''extent''' using '''Properties''' dialogue box of '''Icon View'''.  
  
−
We will then see if it changes correspondingly in '''annotation'''.
+
We will then see if it changes correspondingly in '''annotation''' of '''Text View'''.
  
 
|-
 
|-
Line 242: Line 251:
 
|-
 
|-
 
|| Right-click on white space. Select '''Properties'''.
 
|| Right-click on white space. Select '''Properties'''.
−
|| Right-click on canvas.
+
|| Right-click on the canvas and select '''Properties'''.
−
 
+
−
Select '''Properties'''.
+
  
 
|-
 
|-
Line 254: Line 261:
 
|-
 
|-
 
|| Click on '''Text View'''.
 
|| Click on '''Text View'''.
−
|| Switch to '''Text View'''.
+
|| Click on '''Text View'''.
 +
 
 +
Scroll down.
  
 
|-
 
|-
Line 260: Line 269:
  
 
//
 
//
−
|| Notice that the first pair in '''extent''' changes to '''{-200,100}'''.  
+
|| Notice that the first pair of coordinates in '''extent''' has changed to '''{-150,-100}''' from '''{-200,-100}'''.
 +
 
 +
This is due to the change that we have made in '''Icon View''' using '''Properties''' dialogue box.
  
 
Hence, any change in '''Icon annotation''' creates a corresponding change in '''Icon View''' and vice-versa.
 
Hence, any change in '''Icon annotation''' creates a corresponding change in '''Icon View''' and vice-versa.
Line 268: Line 279:
  
 
//
 
//
−
|| A discussion of other fields of '''coordinateSystem''' like '''ScaleFactor''' are beyond the scope of this tutorial.
+
|| A discussion of other fields of '''coordinateSystem''' like '''ScaleFactor''' is beyond the scope of this tutorial.
  
 
|-
 
|-
Line 286: Line 297:
 
* '''Ellipse'''
 
* '''Ellipse'''
 
* '''Polygon'''
 
* '''Polygon'''
−
* '''Text'''
+
* '''Text''' and
 
* '''Bitmap'''
 
* '''Bitmap'''
  
−
Now, we will discuss how to insert these figures in '''Icon and Diagram views'''.
+
Now, we will discuss how to insert these items in '''Icon and Diagram views'''.
  
 
|-
 
|-
Line 307: Line 318:
 
|-
 
|-
 
|| // graphics = {Ellipse(lineColor = {0, 0, 255}, fillColor = {85, 170, 255}, fillPattern = FillPattern.Solid, extent = {{-100, 100}, {100, -100}}, endAngle = 360)} //
 
|| // 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.  
+
|| Note that an '''Ellipse''' is inserted and its properties specified in graphics field of icon annotation.
  
 
Let me go to '''Icon View'''.
 
Let me go to '''Icon View'''.
−
 
−
|-
 
−
|| Click on ‘''Icon View'''.
 
−
|| Click on '''Icon View'''.
 
  
 
|-
 
|-
Line 325: Line 332:
 
|| '''OriginX''' is the horizontal coordinate of center of ellipse.  
 
|| '''OriginX''' is the horizontal coordinate of center of ellipse.  
  
−
Similarly, '''OriginY''' is the vertical coordinate of center of ellipse.
+
Similarly, '''OriginY''' is the vertical coordinate of the center of ellipse.
  
 
|-
 
|-
 
|| Hover over '''Extent1X'''
 
|| Hover over '''Extent1X'''
−
|| '''Extent1X''' is the horizontal coordinate of leftmost point on the ellipse.
+
|| '''Extent1X''' is the horizontal coordinate of left-most point on the ellipse.
  
 
|-
 
|-
 
|| Hover over '''Extent1Y'''
 
|| Hover over '''Extent1Y'''
−
|| '''Extent1Y''' is the vertical coordinate of topmost point on the ellipse.
+
|| '''Extent1Y''' is the vertical coordinate of top-most point on the ellipse.
  
 
|-
 
|-
 
||  
 
||  
−
|| Similarly, '''Extent2X''' and '''Extent2Y''' signify the right-most and bottommost points of the ellipse.
+
|| Similarly, '''Extent2X''' and '''Extent2Y''' correspond to the right-most and bottom-most points on the ellipse.
  
 
|-
 
|-
 
|| Hover over '''Line Style'''
 
|| Hover over '''Line Style'''
−
|| '''Line Style''' is used to vary the properties of border line
+
|| '''Line Style''' is used to vary the properties of border line.
  
 
|-
 
|-
Line 349: Line 356:
 
This allows you to change the color of border.  
 
This allows you to change the color of border.  
  
−
Let me choose '''Red'''.
+
Let me choose '''Red''' and click on '''OK'''.
  
 
|-
 
|-
 
|| Click on '''Pattern'''.
 
|| Click on '''Pattern'''.
−
|| Click on '''Pattern''' under '''Line Style'''.  
+
|| Click on '''Pattern''' drop down menu under '''Line Style'''.  
  
 
This allows you to change the pattern of border.  
 
This allows you to change the pattern of border.  
Line 363: Line 370:
 
|| '''Thickness''' field specifies the thickness of border.  
 
|| '''Thickness''' field specifies the thickness of border.  
  
−
Change it to '''0.5'''.
+
Change it to '''0.5''' units.
  
 
|-
 
|-
Line 371: Line 378:
 
|-
 
|-
 
||  
 
||  
−
|| Notice the change in color of border '''Red''' and the increase in thickness.
+
|| Notice the change in color of border to '''Red''' and the increase in thickness.
  
 
|-
 
|-
 
|| Right-click on '''Ellipse'''. Select '''Properties'''
 
|| Right-click on '''Ellipse'''. Select '''Properties'''
−
|| Right click on the circle and select '''Properties'''.
+
|| Now right click on the circle once again and select '''Properties'''.
  
 
|-
 
|-
Line 383: Line 390:
 
|-
 
|-
 
|| Choose '''Black''' in '''Color Palette'''.
 
|| Choose '''Black''' in '''Color Palette'''.
−
|| Choose '''Black''' in '''Color Palette'''.
+
|| Choose '''Black''' in the '''Color Palette'''.
  
−
It appears as the first color.
+
Click on '''Ok'''.
 +
 
 +
This color represents the color to be filled in the interior of the ellipse.
  
 
|-
 
|-
 
|| Click on '''FillPattern'''.
 
|| Click on '''FillPattern'''.
−
|| Click on Fill Pattern''' drop-down menu.  
+
|| Now click on Fill Pattern''' drop-down menu.  
  
−
Choose '''FillPattern.Horizontal'''.
+
Choose '''FillPattern.Horizontal''' and click on '''Ok'''.
−
 
+
−
|-
+
−
|| Click on '''Ok'''.
+
−
|| Click on '''Ok'''.
+
  
 
|-
 
|-
 
||  
 
||  
−
|| Note that the fill color changed to black.
+
|| Note that the fill color changed to black
  
−
The pattern changed from solid to horizontal lines.
+
and the pattern changed from solid to horizontal lines.
  
 
|-
 
|-
 
|| Click on '''Text View'''
 
|| Click on '''Text View'''
 
|| Let me now switch to '''Text View''' to explain '''Ellipse''' annotation.
 
|| Let me now switch to '''Text View''' to explain '''Ellipse''' annotation.
 +
 +
Click on '''Text View'''.
 +
 +
Scroll down.
  
 
|-
 
|-
Line 414: Line 423:
  
 
They correspond to the '''RGB''' intensity of the color used.
 
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.
 
  
 
|-
 
|-
Line 425: Line 430:
 
|-
 
|-
 
|| graphics = {Ellipse(lineColor = {0, 0, 255}, fillColor = {85, 170, 255}, fillPattern = FillPattern.Horizontal, extent = {{-100, 100}, {100, -100}}, endAngle = 360)
 
|| 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'''.
+
|| '''extent''' is identical in context to the '''extent''' field of '''coordinateSystem'''.
  
−
Note that all these fields can be changed using '''Properties''' dialog box as we’ve already seen.
+
'''LineThickness''' represents the thickness of border.
 +
 
 +
Note that all these fields can be changed using '''Properties''' dialog box as we have already seen.
  
 
|-
 
|-
 
|| Click on '''Icon View'''.
 
|| Click on '''Icon View'''.
−
|| Now, let me construct a new ellipse in the '''Icon View''' using the tool bar.  
+
|| Now, let me switch to '''Icon View''' to construct a new ellipse using the tool bar.  
  
−
Switch to '''Icon View'''.
+
Click on '''Icon View'''.
  
 
|-
 
|-
 
||  
 
||  
−
|| Let me rearrange the existing ellipse to free up some space.
+
|| Let me rearrange the existing circle to free up some space.
  
 
|-
 
|-
−
|| Right-click on '''ellipse''' and select '''Properties'''.
+
|| Right-click on '''circle''' and select '''Properties'''.
−
|| Right click on the '''ellipse'''.
+
|| Right click on the '''circle''' and choose '''properties'''.
−
 
+
−
Choose '''properties'''.
+
  
 
|-
 
|-
Line 449: Line 454:
  
 
Click on '''Ok'''.
 
Click on '''Ok'''.
−
|| Change '''Extent2Y''' field to '''0'''.  
+
|| Change '''Extent2Y''' to '''0''' units.
  
 
Click on '''Ok'''.
 
Click on '''Ok'''.
Line 455: Line 460:
 
|-
 
|-
 
|| Click on '''Ellipse''' button in the toolbar
 
|| Click on '''Ellipse''' button in the toolbar
−
|| Click on '''Ellipse''' button in the toolbar.
+
|| Now to insert a new ellipse click on '''Ellipse''' button in the toolbar.
  
 
|-
 
|-
 
|| Hold and drag the cursor
 
|| Hold and drag the cursor
−
|| Click somewhere in the white space.
+
|| Left click on somewhere in the canvas and hold the mouse and drag it.  
−
 
+
−
Hold the mouse and drag it.  
+
  
−
Leave the mouse after creation of ellipse.
+
Leave the mouse after an ellipse has been created.
  
 
|-
 
|-
 
|| Right-click on '''Ellipse'''
 
|| Right-click on '''Ellipse'''
−
|| Right-click on the ellipse and change its properties as you wish.  
+
|| Right-click on the ellipse and select '''Properties''' to change its properties as you wish.  
  
 
Click on '''Ok'''
 
Click on '''Ok'''
Line 478: Line 481:
 
* '''Rectangle'''
 
* '''Rectangle'''
 
* '''Text'''
 
* '''Text'''
−
 
  
 
|| Similarly, you may insert a Line, Polygon, Rectangle and Text using the '''Tool Bar'''.
 
|| Similarly, you may insert a Line, Polygon, Rectangle and Text using the '''Tool Bar'''.
Line 484: Line 486:
 
|-
 
|-
 
|| Click on '''Diagram View'''
 
|| Click on '''Diagram View'''
−
|| Now, let us try to understand '''Diagram View'''.  
+
|| Now, let me explain '''Diagram View'''.  
  
 
Click on '''Diagram View'''.
 
Click on '''Diagram View'''.
Line 497: Line 499:
 
|| Click on '''Text View'''.
 
|| Click on '''Text View'''.
 
|| Switch to '''Text View''' to understand '''Diagram''' annotation.
 
|| Switch to '''Text View''' to understand '''Diagram''' annotation.
 +
 +
Scroll down.
  
 
|-
 
|-
 
|| Diagram(...)
 
|| Diagram(...)
−
|| Diagram annotation is similar to Icon annotation.  
+
|| '''Diagram''' annotation is similar in its syntax to '''Icon''' annotation.  
  
−
Diagram annotation has '''coordinateSystem''' and '''graphics''' records.
+
It has '''coordinateSystem''' and '''graphics''' as its component records.
  
 
|-
 
|-
 
|| Diagram(...,, graphics = {Line(origin = {-10, 0}, points = {{-50, -50}, {50, 50}}, color = {0, 0, 255}, pattern = LinePattern.Dash, thickness = 3)})
 
|| 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 properties of the '''Line''' inserted in '''Diagram View''' are specified here.  
  
−
The fields of '''Line''' can be easily understood.  
+
The fields of '''Line''' annotation can be easily understood.  
  
 
Now, let us understand the difference between '''Icon and Diagram Views'''.
 
Now, let us understand the difference between '''Icon and Diagram Views'''.
Line 520: Line 524:
 
|-
 
|-
 
||  
 
||  
−
|| The figure shown in '''Icon View''' appears in the '''Libraries Browser'''.
+
|| The figure shown in '''Icon View''' appears as an icon in the '''Libraries Browser''' as can be seen here.
−
 
+
−
This is the difference between '''Icon View''' and '''Diagram View'''.
+
  
 
|-
 
|-
 
||  
 
||  
−
|| '''Diagram View''' is significantly used in '''component-oriented modeling'''.  
+
|| Whereas the '''Diagram View''' is used significantly in '''component-oriented modeling'''.  
  
−
We’ll learn more about it in upcoming tutorials.
+
We shall learn more about '''component-oriented modeling''' in the upcoming tutorials.
  
 
|-
 
|-
 
||  
 
||  
−
|| Let me go back to the slides.
+
|| Now let me go back to the slides.
  
 
|-
 
|-
 
|| Slide: Ellipse
 
|| Slide: Ellipse
−
|| '''Ellipse''' has the following fields as we already discussed.
+
|| '''Ellipse''' has the following fields as we have already discussed.
  
 
|-
 
|-
Line 542: Line 544:
  
 
'''Assignment'''
 
'''Assignment'''
−
|| As an assignment, insert a line, polygon, rectangle and text in '''Icon View'''.  
+
|| As an assignment, insert a line, polygon, rectangle and text in the '''Icon View''' of model.  
  
 
Modify their properties and understand their annotations.
 
Modify their properties and understand their annotations.
Line 556: Line 558:
 
|| Watch the video available at the following link.  
 
|| Watch the video available at the following link.  
  
−
It summarises '''spoken tutorial project'''.
+
It summarises the '''spoken tutorial project'''.
  
 
|-
 
|-
Line 564: Line 566:
 
|| We conduct workshops using spoken tutorials
 
|| We conduct workshops using spoken tutorials
  
−
Gives certificates please contact us.
+
Please contact us.
  
 
|-
 
|-
Line 570: Line 572:
  
 
'''Forum to answer questions'''
 
'''Forum to answer questions'''
−
|| If you have any questions in this spoken tutorial, please visit the following website.
+
|| If you have questions in this spoken tutorial, please visit the following website.
  
 
|-
 
|-
Line 586: Line 588:
 
|| We help migrate commercial simulator labs to '''OpenModelica'''.  
 
|| We help migrate commercial simulator labs to '''OpenModelica'''.  
  
−
Please contact us.
+
Please visit the website for more information on our lab migration project.
  
 
|-
 
|-
Line 592: Line 594:
  
 
'''Acknowledgements'''
 
'''Acknowledgements'''
−
|| Spoken Tutorial Project is funded by '''NMEICT, MHRD''', Government of India
+
|| Spoken Tutorial Project is funded by '''NMEICT, MHRD''', Government of India.
  
 
|-
 
|-
Line 600: Line 602:
 
|| We thank the development team of '''OpenModelica''' for their support.  
 
|| We thank the development team of '''OpenModelica''' for their support.  
  
−
This is Bhargava signing off! Goodbye!
+
Thank you for joining me in this tutorial.

Revision as of 16:20, 29 March 2016

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:
  • How to specify icon and diagram views of a class.
  • How to insert a polygon and ellipse in Icon/Diagram View.
Slide:

System Requirements

To record this tutorial, I am using:
  • OpenModelica version 1.9.2
  • You may use any of the following operating systems to practice this tutorial:

Linux, Windows, Mac OS X or FOSSEE OS on ARM.

Slide:

Prerequisites

* To understand and practice this tutorial, you need knowledge of class definition in Modelica.
  • You need to know how to specify annotations.
  • Prerequisite tutorials are mentioned on our website.

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:
  • extent,
  • initialScale,
  • preserveAspectRatio and
  • grid.

We will understand them through an example.

Slide:

Syntax of Icon/Diagram Annotation

Here is an example demonstrating the syntax of Icon/Diagram Annotation.
Now et me switch to OMEdit.

We will 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 either 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 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.

Then We shall learn how to insert a circle and a polygon.

Right click on the canvas beside circle.

Select Properties.

OMEdit - Properties A dialog box pop ups as shown.

Note that there are categories named

  • Extent,
  • Grid and
  • Component.
Extent signifies the extent of canvas.
Hover over Left and Top. The fields named Left and Top correspond to coordinates of top left corner of the canvas.

Left corresponds to the horizontal coordinate and Top corresponds to the vertical coordinate.

Similarly, Bottom and Right correspond to the coordinates of bottom right corner of canvas.
‘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 by 100 units.
Right-click on white space. Select Properties. Right-click on canvas once again.

and select Properties.

Grid signifies the size of grid.

Note that the units of extent and grid differ by the Scale Factor.

Change horizontal field in grid to 4 units.

Click on OK.

Note that the size of grid has increased in the canvas.

These properties of Icon View can also be manipulated using Icon annotation in the 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 and 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 of this pair that is -200 denotes the horizontal coordinate of the top left hand corner of canvas.
// Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, .

//

Similarly, -100 represents the vertical coordinate of the same point.
// Icon(coordinateSystem(extent = {{-200, -100}, {100, 100}}, preserveAspectRatio = true, initialScale = 0.1, grid = {4, 2})

//

The second pair represents the coordinates of bottom right corner of white space.

Note that these 4 numbers correspond to top, bottom, left and right fields, we have seen in Properties dialogue box.

Now, let me change extent using Properties dialogue box of Icon View.

We will then see if it changes correspondingly in annotation of Text View.

Click on Icon View. Let me switch to Icon View.
Right-click on white space. Select Properties. Right-click on the canvas and select Properties.
Left → -150.00. Click on Ok. Change the Left field to -150.00.

Click on Ok.

Click on Text View. Click on Text View.

Scroll down.

// Icon(coordinateSystem(extent = {{-150, -100}, {100, 100}}, grid = {2, 2})

//

Notice that the first pair of coordinates in extent has changed to {-150,-100} from {-200,-100}.

This is due to the change that we have made in Icon View using Properties dialogue box.

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 is 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:

  • Line
  • Rectangle
  • Ellipse
  • Polygon
  • Text and
  • Bitmap

Now, we will discuss how to insert these items 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 in graphics field of icon annotation.

Let me go to 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 the center of ellipse.

Hover over Extent1X Extent1X is the horizontal coordinate of left-most point on the ellipse.
Hover over Extent1Y Extent1Y is the vertical coordinate of top-most point on the ellipse.
Similarly, Extent2X and Extent2Y correspond to the right-most and bottom-most points on 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 and click on OK.

Click on Pattern. Click on Pattern drop down menu 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 units.

Click on Ok. Click on Ok
Notice the change in color of border to Red and the increase in thickness.
Right-click on Ellipse. Select Properties Now right click on the circle once again and select Properties.
Click on Color Fill Style Under Fill Style, click on Color.
Choose Black in Color Palette. Choose Black in the Color Palette.

Click on Ok.

This color represents the color to be filled in the interior of the ellipse.

Click on FillPattern. Now click on Fill Pattern drop-down menu.

Choose FillPattern.Horizontal and click on Ok.

Note that the fill color changed to black

and the pattern changed from solid to horizontal lines.

Click on Text View Let me now switch to Text View to explain Ellipse annotation.

Click on Text View.

Scroll down.

// 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.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 the extent field of coordinateSystem.

LineThickness represents the thickness of border.

Note that all these fields can be changed using Properties dialog box as we have already seen.

Click on Icon View. Now, let me switch to Icon View to construct a new ellipse using the tool bar.

Click on Icon View.

Let me rearrange the existing circle to free up some space.
Right-click on circle and select Properties. Right click on the circle and choose properties.
‘Extent2Y’ → 0

Click on Ok.

Change Extent2Y to 0 units.

Click on Ok.

Click on Ellipse button in the toolbar Now to insert a new ellipse click on Ellipse button in the toolbar.
Hold and drag the cursor Left click on somewhere in the canvas and hold the mouse and drag it.

Leave the mouse after an ellipse has been created.

Right-click on Ellipse Right-click on the ellipse and select Properties to change its properties as you wish.

Click on Ok

Hover over the following tools:
  • Line
  • Polygon
  • Rectangle
  • Text
Similarly, you may insert a Line, Polygon, Rectangle and Text using the Tool Bar.
Click on Diagram View Now, let me explain 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.

Scroll down.

Diagram(...) Diagram annotation is similar in its syntax to Icon annotation.

It has coordinateSystem and graphics as its component records.

Diagram(...,, graphics = {Line(origin = {-10, 0}, points = {{-50, -50}, {50, 50}}, color = {0, 0, 255}, pattern = LinePattern.Dash, thickness = 3)}) The properties of the Line inserted in Diagram View are specified here.

The fields of Line annotation 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 as an icon in the Libraries Browser as can be seen here.
Whereas the Diagram View is used significantly in component-oriented modeling.

We shall learn more about component-oriented modeling in the upcoming tutorials.

Now let me go back to the slides.
Slide: Ellipse Ellipse has the following fields as we have already discussed.
Slide:

Assignment

As an assignment, insert a line, polygon, rectangle and text in the Icon View of model.

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 the spoken tutorial project.

Slide:

Spoken Tutorial Workshops

We conduct workshops using spoken tutorials

Please contact us.

Slide:

Forum to answer questions

If you have 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 visit the website for more information on our lab migration project.

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.

Thank you for joining me in this tutorial.

Contributors and Content Editors

Kaushik Datta, Nancyvarkey

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