SVG

4D v16

SVG

Video script

Bonjour,

dans cette vidéo nous allons apprendre à créer une zone SVG et y tracer des objets (formes, textes) en utilisant le composant 4DSVG.

********************Note: Cette étape est désormais inutile, vous pouvez l'ignorer.********************
Pour commencer, nous devons ajouter le composant, donc :

quitter 4D
mettre le composant dans le dossier Components
et redémarrer 4D.

********************

Ensuite il faut savoir qu'une zone SVG est une image avec laquelle 4D va interagir. Il sera donc possible de tracer des objets dans cette zone, objets pouvant représenter des données de la base de données bien évidemment, mais également lors de la manipulation des objets dans la zone, récupérer l'information dans 4D pour la traiter et agir en conséquence.

Le principe est de

créer en mémoire la zone à représenter
puis l'exporter vers une image.

Il nous faut donc un formulaire avec une image pour voir progresser notre programmation.

Nous créons un formulaire appelé SVG dans lequel nous mettons une variable de type image. il faut savoir que 4D la typera automatiquement à partir du moment où elle est de type image (ça n'est valable que pour les types image). La zone sera non saisissable et nous allons l'appeler vImgSVG.

Ensuite on crée un bouton et dans ce bouton nous allons créer une nouvelle zone SVG :

SVG_New

par exemple de 300 par 500 pixels.

Nous utiliserons par la suite cet identifiant pour faire référence à cette zone puisque bien évidemment on peut avoir plusieurs zones SVG en mémoire.

Ensuite nous aurons les lignes qui permettront de tracer et donc de constituer la zone SVG puis la commande d'export donc :

EXPORTER VERS IMAGE
la zone
vers l'image svg
et on y copie le source de données XML

Ces 2 lignes sont suffisantes pour créer la zone en mémoire et charger l'image.

Au milieu nous pouvons tracer avec par exemple ces lignes de programmation.

 $PosX1:=10

 $PosX2:=50

 $PosY1:=10

 $PosY2:=200

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

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

nous allons tester immédiatement le résultat nous obtenons donc bien une lignée tracée d'un point de coordonnées x1;y1 à x2;y2.

on peut également y tracer un rectangle

 $PosX1:=100

 $PosX2:=250

 $PosY1:=30

 $PosY2:=80

 $Arrondi_EnPixels:=10

 $CouleurInterieur:="lightgrey"

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

 vRefRect:=SVG_New_rect(vID_SVG;$PosX1;$PosY1;$PosX2;$PosY2;$Arrondi_EnPixels;$Arrondi_EnPixels;$CouleurInterieur;$Color)

On voit que le rectangles tronqué car il dépasse la taille limite des 300 pixels que nous avions fixée en largeur. Si nous passons la zone à 400 et retraçons, le rectangle est complet.

on peut y ajouter un texte simple

$textID:=SVG_New_text(vID_SVG;"Texte à afficher";10;100)

le texte apparaît ici

puis un texte avec mise en forme, un texte stylé :

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

on voit ici que le texte est gras et italique car dans la commande nous avons demandé 1+2, puisque les attributs peuvent se cumuler. Si nous demandions 1+2+4, le texte va être souligné également.

on peut y ajouter la liste des techniciens

 $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

dont les noms seront espacés de 15 pixels à chaque fois.

Maintenant que vous avez vu le principe de fonctionnement d'ajout d'informations dans une zone SVG, vous pourrez regarder l'exemple qui est fourni en tant que SVG2 qui permet de tracer un petit planning dans lequel vous pouvez :

gérer la hauteur de la ligne de titres
le nombre de colonnes
éventuellement le nombre de lignes
le nombre d'interlignes
le fait de les afficher ou non
naviguer dans les dates
éventuellement aller à une date particulière sur laquelle vous verrez tracées 3 cases qui pourraient correspondre à des rendez-vous par exemple.