Se trovi utile il mio blog sostienimi con una piccola donazione. GRAZIE

11 – Grafica SVG

<– INDIETROAVANTI–>

Molto spesso si devono cotruire pagine per HMI che comprendono la rappresentazione schematica dell’impianto come P&I o viste in pianta od alzato.

In questi casi spesso ci si ritrova a ‘litigare’ con il posizionamento dei widget senza riuscire ad ottenere esattamente quello che si voleva a causa della complessità del LayOut che si deve rappresetare.

In tutti questi casi pvbrowser ci viene incontro con la possibilità di implementare grafica di tipo SVG nelle nostre pagine semplificandoci in modo notevole il lavoro.

Il termine SVG  (Scalable Vector Graphics) indica una tecnologia in grado di visualizzare oggetti di grafica vettoriale e, pertanto, di gestire immagini scalabili dimensionalmente.

Più specificamente si tratta di un linguaggio derivato dall’XML, cioè di un’applicazione del metalinguaggio posto a base degli sviluppi del Web da parte del consorzio W3C, che si pone l’obiettivo di descrivere figure bidimensionali statiche e animate.

Per creare queste immagini possiamo utilizzare un software Open Source che si chiama Inkscape .

Inkscape è un’applicazione multipiattaforma, che può essere eseguita sui sistemi operativi Microsoft Windows, Mac OS X e Unix-like ed è scaricabile da: http://inkscape.org/?lang=it .

Ora che abbiamo introdotto l’argomento iniziamo con il nostro piccolo tutorial .

Per prima cosa ovviamente dovrete installare sul vostro PC Inkscape e creare un disegno simile a quello  sotto .

Immagine per il tutorial

Siccome dovremo interagire con le diverse parti del disegno dovremo dare ad ognuna un nome univoco .

Quindi per prima cosa dovremo , dall’interno di inkscape , selezionare l’oggetto che ci interessa (per es. il cerchio rosso) e poi con un clik destro aprire il menù contestuale e scegliere la voce proprietà.

Menu contestuale

Questo causerà l’apertura della finestra delle proprietà dalla quale potremo assegnare un nome ai vari elementi .

Nel caso dei cerchi , siccome vogliamo utilizzarli come pulsanti in pvbrowser , dovremo far precedere al nome scelto la desinenza “pv.” in modo da poter assegnare un evento all’oggetto.

Proprietà dell'elemento SVG

Per gli elementi del disegno che vorremo manipolare , ma non legare ad eventi , ci basterà assegnare loro un nome qualunque ma comunque univoco .

Sotto ad esempio stiamo assegnando il nome TXT1 al primo testo.

Proprietà

Ora possiamo passare a pdevelop e creare il nostro nuovo progetto e nella maschera 1 andremo ad inserire un widget Draw/SVG .

Ora nella sezione Header del nostro progetto dovremo includere la libreria per gli svg animator come sotto riportato :

#include "processviewserver.h"
#include "rlsvganimator.h"              // includo la libreria per svg animator
// todo: comment me out
//#include "rlmodbusclient.h"
//#include "rlsiemenstcpclient.h"
//#include "rlppiclient.h"
//#include "modbusdaemon.h"             // this is generated
//#include "siemensdaemon.h"            // this is generated
//#include "ppidaemon.h"                // this is generated

Ora in pdevelop dovremo creare un’oggetto di tipo rlSvgAnimator e la funzione di disegno del file SVG che verrà richiamata dalla slotInit .

La slotInit viene richiamata ogni volta che la maschera 1 deve essere essere reinizializzata.

typedef struct // (todo: define your data structure here)
{
 rlSvgAnimator svgAnimator;
}
DATA;

//Definizione della funzione per disegnare il file svg
static int drawSVG1(PARAM *p, int id, DATA *d)
{
 if(d == NULL) return -1;
 gBeginDraw(p,id);
 d->svgAnimator.writeSocket();
 gEndDraw(p);
 return 0;
}

static int slotInit(PARAM *p, DATA *d)
{
 if(p == NULL || d == NULL) return -1;
 //memset(d,0,sizeof(DATA));
 d->svgAnimator.setSocket(&p->s);    // setto il socket
 d->svgAnimator.setId(obj1);         // setto l'id targhet
 d->svgAnimator.read("disegno.svg"); // leggo il file da visualizzare
 drawSVG1(p,obj1,d);                 // chiamo la funzione per disegnare il tutto
 return 0;
}

A questo punto avviamo il pserver e collegandoci con pvbrowser otterremo la maschera sotto :

SVG in un pvbrowser

Ora dovremo andare ad intercettare gli eventi che vengono generati dal clik sui due cerchi .

Gli eventi generati da un SVG vengono inviati allo slot slotTextEvent e sarà quindi nostro compito capire quale elemento ha generato l’evento come riporto sotto :

static int slotTextEvent(PARAM *p, int id, DATA *d, const char *text)
{
 if(p == NULL || id == 0 || d == NULL || text == NULL) return -1;
 printf("objectname=%s\n",svgObjectName(text)); // stampo il nome di tutti gli oggetti che generano eventi per questo slot

// Nel file SVG gli oggetti se devono generare eventi devono essere chiamati pv.qualcosa

// Se il click è sul cerchio chiamato pv.C1 cambio il testo
 if (strcmp(svgObjectName(text),"pv.C1") == 0)
 {
 drawSVG1(p,obj1,d);
 d->svgAnimator.svgTextPrintf("TXT1", "Cerchio 1 clikkato");
 d->svgAnimator.svgTextPrintf("TXT2", "Testo 2");
 drawSVG1(p,obj1,d);
 }
// Se il click è sul cerchio chiamato pv.C2 cambio il testo
 if (strcmp(svgObjectName(text),"pv.C2") == 0)
 {
 drawSVG1(p,obj1,d);
 d->svgAnimator.svgTextPrintf("TXT1", "Testo 1");
 d->svgAnimator.svgTextPrintf("TXT2", "Cerchio 2 clikkato");
 drawSVG1(p,obj1,d);
 }
 return 0;
}

Ora quando faremo un clik su uno dei due cerchi i testi cambieranno a seconda dell’evento generato come nell esempio sotto :

Nel caso voleste cambiare lo sfondo dell’immagine SVG (essendo un disegno trasparente) dovrete mettere la riga di codice che vi riporto sotto nello slotinit della maschera e cambiare a vostro piacimento i valori di R,G,B :

pvSetPaletteBackgroundColor(p,obj1,100,10,100);

Dai link che riporto di seguito potete scaricare il sorgente del tutoria completo :

Tutorial2.tar.gz oppure Tutorial2.zip

<– INDIETROAVANTI–>