4D Doc Center : Video script

4D v13

SVG

Video script

In this video, we're going to learn to create an SVG area and draw objects (such as forms, texts, and so on) in it, using the 4DSVG component.

First, we need to add the component, so we:

Quit 4D
Put the component in the Components folder
And re-launch 4D.

Next, you need to know that an SVG area is a picture that 4D interacts with. You can draw objects in this area that represent database data and, when working with these objects, you can retrieve information from 4D, so as to process it and act accordingly.

Here's how it works:

Create the area to be represented in memory
Then export it into a picture.

To proceed with our programming, we'll need a form with a picture.

Let's create a form called SVG where we can place a picture type variable. 4D automatically types variables when they are of the picture type. The area is not enterable and we'll call it vSVGPict.

Next we create a button and in it, we create a new area:

SVG (svg_new) for example 300 by 500 pixels.

Later we'll use this ID to refer to this specific area since obviously we can have more than one SVG area in memory.

Next we have a few lines that allow us to create the SVG area and then the export command:

SVG EXPORT TO PICTURE
the area
to the SVG picture
and here we copy the SML data source

These 2 lines are all we need to create the area in memory and to load the picture.

Inside, we can draw, for instance, using the following lines of code:

 $PosX1:=10

 $PosX2:=50

 $PosY1:=10

 $PosY2:=200

 $Color:="RED" //"lightgrey"

 $IdLine:=SVG_New_line(vID_SVG;$PosX1;$PosX2;$PosX2;$PosY2;$Color;5)

We're going to test the results immediately and we get a line drawn from x1;y1 to x2;y2.

We can also draw a rectangle:

 $PosX1:=100

 $PosX2:=250

 $PosY1:=30

 $PosY2:=80

 $Rounded_InPixels:=10

 $InsideColor:="lightgrey"

 $Color:="RED" //"lightgrey"

 vRefRect:=SVG_New_rect(vID_SVG;$PosX1;$PosY1;$PosX2;$PosY2;$Rounded_InPixels;$Rounded_InPixels;$InsideColor;$Color)

We see that the rectangle is truncated because it exceeds the size limit of 300 pixels that we set for the width. If we switch the area to 400 and draw it again, the rectangle is now whole.

We can add a simple text to it

$textID:=SVG_New_text(vID_SVG;"Text to display";10;100)

And the text appears here.

Then a text with formatting, a styled text:

$textID:=SVG_New_textArea(vID_SVG;"TextArea";50;200;80;40;"Fancy New Regular";18;1+2;3)

We now see that the text is bold and italic since we requested 1+2 in the command, because attributes can be combined. If we had requested 1+2+4, the text would be underlined as well.

We can add the list of technicians to it:

 $Offset:=0

 While(Not(End selection([TECHNICIANS])))

    $textID:=SVG_New_text(vID_SVG;[TECHNICIANS]First_Name+" "+[TECHNICIANS]Last_Name;10;$Offset)

    $Offset:=$Offset+15

    NEXT RECORD([TECHNICIANS])

 End while

where the last names will be spaced 15 pixels apart each time.

Now that you have seen how to add information to an SVG area, you can take a look at the example provided as SVG2 that lets you draw a small schedule where you can:

manage the title row height
the number of columns
if necessary, the number of rows
the line spacing
whether or not they are displayed
browse by date
and if necessary, go to a specific date where you will see 3 boxes drawn, which could correspond to appointments, for example.