Nancyvarkey at 02:03, 30 March 2016

2016-03-30T02:03:40Z

Kaushik Datta at 10:50, 29 March 2016

2016-03-29T10:50:35Z

Kaushik Datta: Created page with "{| border=1 ||'''Visual Cue''' ||'''Narration''' |- || Slide: '''Title Slide''' || Welcome to the spoken tutorial on '''Icon and Diagram Views'''. |- || Slide: '''Learning..."

2016-03-29T08:04:54Z

Created page with "{| border=1 ||'''Visual Cue''' ||'''Narration''' |- || Slide: '''Title Slide''' || Welcome to the spoken tutorial on '''Icon and Diagram Views'''. |- || Slide: '''Learning..."

New page

{| border=1
||'''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''' or '''ellipse''' in '''Icon/Diagram View'''.

|-
|| Slide:

'''System Requirements'''
|| To record this tutorial, I am using:

* '''OpenModelica 1.9.2'''
* You may use any of the following operating systems:

'''Linux, Windows, Mac OS X''' or '''FOSSEE OS'''

|-
|| Slide:

'''Prerequisites'''
|| * To understand and practice this tutorial, you need knowledge of class definition in '''Modelica'''.

* You need to know how to specify an annotation.

* Prerequisite tutorials are available 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 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:

* '''Line'''
* '''Rectangle'''
* '''Ellipse'''
* '''Polygon'''
* '''Text'''
* '''Bitmap'''

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:

* '''Line'''
* '''Polygon'''
* '''Rectangle'''
* '''Text'''

|| 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!

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

Nancyvarkey at 02:03, 30 March 2016

Kaushik Datta at 10:50, 29 March 2016

Kaushik Datta: Created page with "{| border=1 ||'''Visual Cue''' ||'''Narration''' |- || Slide: '''Title Slide''' || Welcome to the spoken tutorial on '''Icon and Diagram Views'''. |- || Slide: '''Learning..."