Working with drawings and illustrations in VIGO6

SIMPLE DRAWINGS AND ILLUSTRATIONS

First thing to be aware of when starting to create custom illustrations for your program is, to understand how the drawings is created and implemented in VIGO6 and in the COPP code.

All drawings are created in the “paint method” of a view. When creating general drawings we use (Basic_view) and create a “new type” based on that specific view. If we instead needed a type dedicated drawing, then we would create a “new type based on” view to that specific control component.

Here is some further explanation on the two types of drawings:   

Type dedicated drawing:

A drawing created to a specific control component. This could for example be if you had a specific valve component and the view was only supposed to be used to show that valve. In this way you need the control component to be able to get the type dedicated drawing in your project.

General drawing:

A general drawing is a drawing which can be used on any view list in any project. Therefore you need to, be aware when making these drawing, that they will be accessible to everybody when published to the server.  

Before you start making drawing code you have to learn how we write our code.  

Pen:

Pen is used to setup everything which refers to pen. In VIGO6 we use the pen to change the properties for how we should draw the lines. All different properties is listed and explained below.
 

Pen.Color:=<!Red:= 0, Green:= 0, Blue:= 0!>

Pen.Join:=Miter

Pen.Ending:=Flat

Pen.Width:=2[mm]

 

Pen color is used to decide which color you want the pen to be. You can either choose the color directly by using the RGB utility. If you instead would like to use some predefined colors, VIGO6 also provides you with a kit of that.

This could both be “Pen.Color:=Named_colors[?]” or “Pen.Color:=Palette[?]”.

“Named_colors” is decided by the color theme that you use on your project, and can therefore be different from project to project.

“Palette” is a predefined color palette which provides a wide choice of different colors and is consistent from project to project.

Color Palette

Pen Join is used to decide how the lines join together when drawing more than one line; also known as a "path". In this example you have a chance to see what the three “joins” look like.

Miter: Is a sharp normal join.

Round: Is a round join.

Bevel: Is a flat corner join.

Pen ending is used to decide how the lines end if the path is incomplete. In this example you are also provided with a drawing which illustrates the different endings.

Flat: Is a flat ending

Round: Is a round ending

Square: Is an ending with a square in the end.

Last but not least is “pen width” which is pretty self-explanatory, though not insignificant. The pen width is used to decide the width of the line. The unit of the width needs to be written as well.

Brush:

Brush is used to setup the fill property. In this example you will only get the examples below explained.

Brush.Color:= <!Red:= 0, Green:= 0, Blue:= 0!>

Brush Color is used to fill our “paths” with color. This means that every time we end a path, we can decide to add a fill color via the "brush command"

The color is implemented in the same way as it is for the pen.

Brush.Color:=Named_colors[?]

Brush.Color:=Palette[?]

Besides these examples we also do have two other uses of the brush which comprises of below examples.

Brush.GradientColor :=<!Red:= 0, Green:= 0, Blue:= 0!>

Brush.GradientKind:= ?

Lines and paths:

Lines are essential for us when drawing in VIGO6. Without using lines you are very limited in your drawing options. When drawing lines we also often use paths because it simplifies things, both visually and in coding.

 

Paths:

To begin a path we use “Begin_path()”, to end a path we use “End_path(Style:= ?)”.

When ending a path we have different options. We need to use one of the different styles which is mentioned and explained below.

 

Stroke:

Draws stroke with current pen.

 

Fill:

Fills the path with current brush.

Fill rule is non-zero/winding.

 

Stroke_and_fill:

Fills the path with current brush and draws the stroke.

Fill rule is non-zero/winding

 

Fill_even_odd:

Fills the path with current brush.

Fill rule is Even/Odd.

 

Stroke_and_fill_even_odd:

Fills the path with current brush and draws the outline with current Pen.

Fill rule is Even/Odd.

Besides these style endings, we also have a “close_path()” ending. This ending, as the name refers to, closes the path without doing any further. This is very helpful in many ways. If you for example has a path consistent of 3 lines and needed to end the path. Here you can just use the close_path() and the line will automatically find your first “x,y coordinate" and close the path.

You can also combine the two “endings” and first close the path to return the line to starting point and then end the path with a style.

 

Lines:

Before drawing lines we need to know where we want to start our new lines.

Therefore we use a method “Move_to(X:= ? [mm], Y:= ? [mm])”, which changes the starting “x,y” position.

After doing this, we are ready to start drawing lines. We draw lines by using the following method “Line_to (X:= ?[mm], Y:= ?[mm])”.

Example:

 

“Display.” before the code is used to avoid complications in local names and the displays names. If you for example had a local variable called Line_to as well, then there would be a problem. In that case the editor will automatically assume that you want to use your own Line_to and put “Comp.” before the line_to like with the display.   

Example:

Drawing Examples:

Now that most common used drawing code has been covered let’s try a drawing example. In the following examples you’ll be creating a rectangle in 2 different ways. First method is to show how you’ll use lines and paths to create the Rectangle. Second method is to show the simple way. The end result will be identical for both methods.

 First method/hard method:

To use this method you’ll need to combine all the knowledge you just got by reading this tutorial.

 

  • First thing you need to do is to setup your view_region. This is the first thing we do every time we have a view of anything in VIGO6.

Type ConstantsView_Region → BottomRight/TopLeft → X/Y

 

  • Now we can start to make our drawing code. First thing in the code is to setup our Pen and Brush.
  • Next is to make the drawing itself. Here we need to use both paths and lines.
  • Now we finished drawing our rectangle. Following is the end result:

Second method/Easy method:   

For this method you will need to use one of VIGO6’s built in methods. We will use the method called “Rectangle”.

 

  • First thing you need to do here is also to setup your view_region. This is the first thing we do every time we have a view of anything in VIGO6 as mentioned before.

Type ConstantsView_Region → BottomRight/TopLeft → X/Y

 

  • When finished setting up our view_region we are ready to make our code.
  • Now we finished making our drawing code for the second rectangle. Following is the end result:

 

You should now be prepared to make your own simple drawings. How to make more advanced drawings will be explained in another tutorial.

ADVANCED DRAWINGS AND ILLUSTRATIONS

For more advanced drawings and illustrations we have a little more user friendly method of implementing these drawings in VIGO6. Instead of drawing every line manually we have a external program to do this, which is included when buying VIGO6

The program is named "SVG to COPP converter" and the is used to convert SVG vector graphic to COPP code. This is very helpfull so we don't have to draw our more advanced illustrations manually how we just did in the example above.  

We advice you to use either Illustrator or the free alternative Inkscape which we know is supported by our converter. Below is some information which is needed when saving the svg files to insure a usable result in VIGO6

Illustrator:

When using Illustrator be sure that you are saving as SVG and not exporting as SVG.

You also have to make sure that you use the "SVG Tiny 1.1" SVG profile when saving your svg file.

To make sure that the drawing is located at right position on the window in the converter, make sure to uncheck the "Responsive" checkbox in the save window.  

 

Recap of most important things to be aware of when using Illustrator to make your drawings/illustrations. 

  • Save as SVG 
  • Use "SVG Tiny 1.1" SVG Profile when saving
  • Uncheck "Responsive" in more options of the SVG save window 

 

 

Inkscape:

When using Inkscape there is two thing to be adware of.

First thing is before you even start using the program to draw.
We need to make sure the right settings is chosen in inkscape:

Shift+Ctrl+D is the shortcut for opening the Document Properties.

In this properties panel we need to make sure that both our "Display Units" and our "Units" are set to pixels (px).

Another REALLY important thing is that we set our "Scale x:" to 1. Normally it's set to 0.265, which would make the source into mm instead of pixels. 

When you made sure that your settings look like the picture on the right, you are ready to start drawing in Inkscape!

When you are finished and want to save the drawing you just made, follow the step below: 

Only thing to be adware of when saving is that you save as "Plain SVG" and not "Inkscape SVG". Only "Plain SVG" will work in the converter.

 

Below is an explanation with illustrations, on how to use the converter itself.

To the right is a illustration which shows the "SVG to COPP converter".

The converter is easy to use, and you will in a few minutes be able to have your drawing/illustration in VIGO6, if you followed the instructions above.

 

  • Resolution is the first thing to choose when importing a SVG file to the converter.The converter tells u which DPI is used in both Inkscape and Illustrator. Therefore we advice you to choose according to which program you use. Otherwise size in accordance with orginal file will be different

 

  • Next is to choose if you want a different scale than the input SVG file provide. Choose as you like.

 

  • Default lenght unit is default [mm] and can be chanced to your liking acording to chosen quantity in VIGO6.

 

  • To import the SVG file itself press the big "Load SVG file" button and use the windows window to navigate to the fill and press open.

 

  • When a SVG file is imported to the conveter you get the chance to choose where you want the "Origo" to be. This means where you want the drawing/illustration to align to. You have 9 different align options. The red "crosshair" show the selected align position.

 

  • To the right of "Origo" you will be getting up to date x,y lenght information in wanted length unit. This means that if scale is updated x,y lenght is updated aswell. In this example it is showed in [mm]. 

 

  • Under "Origo" there is one more big button. This button is used to copy the end result to your clipboard. This result can afterwards be pasted into VIGO6 and viewed.  

 

  • In the middle of the converter window u will be provided with a "preview" of how the end result will look in VIGO6.

 

  • Last at the bottom is the COPP code displayed, which is the result that is copied to the clipboard with the button above. 

If you want to watch how to use the conveter, here is a little explanatory video.

Now let us move to the next tutorial