svg Archives - Appunti e tutorial su front-end web technology

svgjs: binding eventi

Feb 252013

Terzo post dedicato a svgjs. Oggi ci occuperemo del binding degli eventi.
La base di partenza è il prmo post dedicato alla libreria:


<script src="js/svg.min.js"></script>
<style>
.box{ margin:10px; border:1px solid #000; float:left;}
</style>
</head>
<body>
<div id="box1"></div>
<script>
if (SVG.supported) {
var draw1 = svg('box1').size(200, 200);
var rect = draw1.rect(100, 100).attr({ fill: '#f06' });
}
else {alert('SVG not supported');}
</script>

Creati gli oggetti su cui operare assegniamo a una variabile fclick una funzione anonima che realizza una piccola animazione. Quindi, sulla scia, delle ultime versioni di jQuery, usiamo il metodo on per assegnare all’evento click la funzione fclick, quindi cliccando sul rettangolo verrà modificato il colore di riempimento.


var fclick = function() {rect.animate(2000).attr({ fill: '#ff0' });};
rect.on('click', fclick);

L’esempio

" data-image="" data-button=""> Share

svgjs: animare elementi svg

HTML5 No Responses »

Feb 232013

Approfondendo il discorso iniziato nel precedente post su svgjs, oggi proviam ad animare gli oggetti creati precedentemente tramite dei bottoni javascript. La libreria è abbastanza semplice, ma offre già un buon numero di metodi per interagire con i nostri oggetti.
Procediamo quindi con l’html del precedente post e la creazione degli elementi tramite la libreria:


<script src="js/svg.min.js"></script>
<style>
.box{ margin:10px; border:1px solid #000; float:left;}
</style>
...
<div id="box1"></div>
<div id="box2"></div>
<script>
if (SVG.supported) {
var draw1 = svg('box1').size(200, 200);
var rect = draw1.rect(100, 100).attr({ fill: '#f06' });

var draw2 = svg('box2').size(200, 200);
var circle = draw2.circle(100);
}
else {alert('SVG not supported');}
</script>

Per interagire con i nostri due elementi inseriremo 3 bottoni html, all’intenro dei quali intercetteremo l’evento onClick, poi questo passaggio operativamente potrebbe essere fatto in mille modi più intelligenti.


<input type="button" value="Nascondi" onClick="nascondi()">
<input type="button" value="Mostra" onClick="mostra()">
<input type="button" value="Animazione" onClick="animazione()">

Per quanto riguarda le prime due funzioni il codice è banale: gli elementi sono già disponibili in quanto definiti come variabili globali, si tratterà di utilizzare i metodi show() e hide() rispettivamente per mostrare e nascondere gli elementi.
Decisamente più interessante è invece la terza funzione: il metodo animate() mi permette di animare i miei elementi, il parametro passato determina la durata dell’animazione in millisecondi, un eventuale second parametro permetterebbe di definire l’accellerazione. In entrambi i casi procediamo a una traslazione di 75px verso sinistra e verso il basso, contemporanemaente nel primo caso procediamo con una rotazione di 45° mentrenel secondo modifichiamo il colore di riempimento. Ancora una volta si noti la comodità della conatenabilità che rende il codice decisamente sintetico.


function nascondi(){
rect.hide();
circle.hide();
}
function mostra(){
rect.show();
circle.show();
}
function animazione(){
rect.animate(2000).move(75, 75).rotate(45);
circle.animate(2000).move(75, 75).attr({ fill: '#f03' });
}

L’esempio

svgjs: una libreria javascript per svg

HTML5 No Responses »

Feb 212013

Svgjs è una leggerissima libreria molto utile per manipolare e animare elementi svg.
Anche la sintassi è abbastanza semplice e intuitiva e quindi potrebbe essere un utile strumento per lavorare agevolmente con questo linguaggio.
Facciamo qualche prova. Dopo aver scaricato e collegatlo la libreria

<script src="js/svg.min.js"></script>

Inseriamo nella nostra pagina un paio di div che useremo come target dove inserire le nostre creazioni e mostriamoli con un semplice css.

<style>
.box{ margin:10px; border:1px solid #000; float:left;}
</style>

<div id="box1"></div>
<div id="box2"></div>

A questo punto possiamo passare alla nostra libreria per disegnare gli elementi di nostro interesse, nello specifico un rettangolo e un cerchio. Prima però ci accerteremo che il nostro browser supporti svg, sono quindi esclusi dai giochi le versioni di internet explorer precedenti alla 9. In caso di supporto esistente definiremo una variabile a cui indicheremo il div target dove andare ad appendere l’SVG creato e le dimensioni e poi il metodo per creare l’oggetto di nostro interesse e le sue dimensioni. Nel caso del rettangolo aggiungiamo con la concatenazione un metodo attr per lavorare con le proprietà dell’oggetto, in questo caso colorarlo, Ecco il codice:


if (SVG.supported) {
var draw1 = svg('box1').size(200, 200);
var rect = draw1.rect(100, 100).attr({ fill: '#f06' });

var draw2 = svg('box2').size(200, 200);
var circle = draw2.circle(100);
}
else {alert('SVG not supported');}

L’esempio

Grafici animati

HTML5 No Responses »

Feb 232012

Riprendendo il post precedente potremmo aggiungere un’interessante integrazione: l’animazione al nostro grafico.

Questo significherà impostare nelle options la durata e l’easing dell’anomazione:


var options = {
width: 400,
height: 240,
animation:{duration: 1000,easing: ‘out’,},
vAxis: {minValue:0, maxValue:1200}
};

A questo punto impostiamo il nostro grafico a 0:


data.addRows([
['2008', 0, 0],
['2009', 0, 0],
['2010', 0, 0],
['2011', 0, 0]
]);

Predisponiamo un bottone sul quale mapperemo l’evento click:


var button = document.getElementById(‘button’);

e disbilitiamolo nell’esecuzione della funzione drawChart:


function drawChart() {
button.disabled = true;
google.visualization.events.addListener(chart, ‘ready’,
function() {button.disabled = false;});
chart.draw(data, options);
}

A questo punto sul click del bottone andiamo a modificare i value delle nostre righe che “cresceranno” con l’animazione prevista:


button.onclick = function() {
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
drawChart();
}

Ecco il nostro grafico animato

Grafici a colonne

HTML5 No Responses »

Feb 222012

Una versione molto popolare dei grafici è la rappresentazione a colonne.
Anche in questo caso, giusto per non inventare nulla, faremo ricorso a Google Chart:


<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“visualization”, “1″, {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

Quindi colleghiamo la libreria, carichiamo il package opportuno e tramite un callback richiamiamo la funzione che ci permetterà di operare:

Aggiungimo le 3 colonne che compongono il nostro grafico e il tipo di dato che contengono:


var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Anno’);
data.addColumn(‘number’, ‘Ricavi’);
data.addColumn(‘number’, ‘Spese’);

e infine i dati in nostro possesso ovvero le righe, il primo valore rappresenta l’asse x e poi a seguire gli N valori da rappresentare:


data.addRows([
['2008', 1000, 400],
['2009', 1170, 460],
['2010', 660, 1120],
['2011', 1030, 540]
]);

A questo punto andiamo a settare alcune opzioni di visualizzazione del grafico:


var options = {
width: 400, height: 240,
title: ‘Bilancio’,
hAxis: {title: ‘Anno’, titleTextStyle: {color: ‘red’}}
};

nell’ordine: dimensioni, titolo e formattazione della didascalia

Non resta che disegnare il grafico, agganciandolo agli elementi della pagina:


var chart = new google.visualization.ColumnChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

Ed ecco il nostro grafico

Mappa dinamica colorata (1)

HTML5 No Responses »

Feb 202012

E’ possibile colorare dinamicamente una nazione su una cartina senza ricorrere alla tradizionale soluzione in flash?
La risposta è sì e ci sono due opzioni: la prima passa attraverso google chart e svg, maentre la seconda, sempre tramite google chart, presente l’output sotto forma di immagine.

Vediamo la prima opzione, come sempre occorr collegare la libreria e chiamare la funzione vera e proprai all’onload:

<script type=’text/javascript’ src=’https://www.google.com/jsapi’></script>
<script type=’text/javascript’>
google.load(‘visualization’, ’1′, {‘packages’: ['geochart']});
google.setOnLoadCallback(drawRegionsMap);

Nella funzione come prima cosa impostiamo la label:


var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Country’);
data.addColumn(‘number’, ‘Articoli’);

e successivamente il paese da visualizzare, attenzione a utilizzare la nomeclatura standard ISO-3166-1


data.addRows([['Peru', 1]]);

potermmo già concludere il nostro lavoro con le seguenti istruzioni


var chart = new google.visualization.GeoChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

che permettono di disegnare la cartina, tuttavia è opprtuno settare alcune opzioni:


var options = {
colorAxis: {colors: ['FF0000']},
displayMode: ‘regions’,
region: ’005′,
width:’300′,
height:’225′,
legend:’none’,
datalessRegionColor:’000000′,
resolution:’countries’
};

dove colorAxis è il colore del paese da evidenziare, displayMode serve per impostare il livello di zoom, region serve per definire la regione da visualizzare (sempre secondo le codifiche standard), quindi larghezza e altezza del nostro oggetto, se vogliamo o meno visualizzare la legenda e per concludere risoluzione e colore delle regioni senza dati.

Vedi l’esempio competo.

Geomappa colorata

HTML5 No Responses »

Feb 122012

Google chart può essere utilizzato per creare mappe del mondo, di continenti o regioni e colorare con diffrenti tonalità aree geografiche ben precise. Proveremo ora a descrivere una mappa dove verranno visualizzate le 10 economie più forti nel 2006, il grafico mostrerà colorati i nostri paesi e con una tonalità dal più scuro al più chiaro in relazione ai valori inseriti.

Il primo step è il collegamento alla libreria:

<script type=’text/javascript’ src=’https://www.google.com/jsapi’></script>

successivamente accediamo al package di nostro interesse e impostiamo il callbak al caricamento:

google.load(‘visualization’, ’1′, {‘packages’: ['geomap']});
google.setOnLoadCallback(drawMap);

Nella funzione vera e propria creiamo il nostro oggetto:

var data = new google.visualization.DataTable();

Impostiamo le label:

data.addColumn(‘string’, ‘Paese’);
data.addColumn(‘number’, ‘PIL, miliardi di $, 2006′);

e aggiungiamo i dati veri e propri:

data.addRows(10);
data.setValue(0, 0, ‘United States’);
data.setValue(0, 1, 13164);
data.setValue(1, 0, ‘Japan’);
data.setValue(1, 1, 4368);

una coppia per ciascun paese, dove i 3 parametri di setValue sono rispettivamente l’indice della riga, l’indice della colonna e il valore.
Nel nostro caso non useremo opzioni particolari:

var options = {};
options['dataMode'] = ‘regions’;

e quindi possiamo agganciare l’elemento della pagina e produrre la mappa:

var container = document.getElementById(‘mappa’);
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);

Vai all’esempio

Grafici con Google Chart

HTML5 No Responses »

Feb 112012

Un’esigenza che si manifesta molto spesso è quella di creare dei grafici in modo dinamico,
senza ovviamente ricorrere a delle immagini da inserire nel proprio sito.
Esistno da tempo molte soluzioni ma per lo più consentono di realizzare istogrammi o altri grafici molto semplici.
Attraverso Google Chart possiamo realizzare grafici anche complessi senza troppo sforzo.

Vediamo un esempio di grafico a torta, la soluzione viene proposta in svg (adottano VML per le vecchie versioni di IE ):
come prima cosa bisogna inserire il collegamento alla libreria:

<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>

e poi passiamo alla parte di javascript:
come prima cosa carichiamo il package corretto:

google.load(‘visualization’, ’1.0′, {‘packages’:['corechart']});

ora impostiamo un callback quando l’applicazione viene caricata in modo da leggere i dati e fare le operazioni necessarie:

 google.setOnLoadCallback(disegnaGrafico);

Quindi creiamo il nostro oggetto:

var data = new google.visualization.DataTable();

Aggiungiamo la colonna che funzionerà da etichetta:

data.addColumn(‘string’, ‘Browser’);

e aggiungiamo una seconda etichetta numerica

data.addColumn(‘number’, ‘Slices’);

e ora i dati:

data.addRows([

['Firefox', 86],

['Chrome', 54],

['Internet explorer', 17],

['Safari', 15],

['Opera', 1]

]);

Non resta che settare titolo e dimensioni

var options = {‘title’:'Statistiche Browser’,'width’:400,’height’:300};

e implentare il nostro oggetto collegandolo al div che lo ospiterà:

var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

L’esempio

HTML5: svg

HTML5 No Responses »

Dec 122011

Fra le maggiorni novità di html5 c’è un diverso approcio alla grafica, da adesso in avanti flash avrà vita durissima, per esempio perché sarà possibile inserire della grafica vettoriale via svg, cioè xml, con totale controllo del codice, senza ricorrere a plug-in. Un primissimo esempio è dato da un abbozzo di grafico a barre realizzato con svg appunto.

Il rislutato finale sarà decisamente “acerbo” ma l’idea è vedere quanto sia banale inserire svg e utilizzare gli elementi più semplici.

E infatti per avere svg nelle pagine non c’è niente da fare asta inserirlo:


<body>
<h2>HTML5 SVG Un’idea di grafico</h2>
<svg id=”svgelem” height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<rect id=”greenrect” width=”250″ height=”20″ fill=”green” x=”0″ y=”0″ />
<rect id=”blurect” width=”200″ height=”20″ fill=”blue” x=”0″ y=”30″ />
<rect id=”redrect” width=”300″ height=”20″ fill=”red” x=”0″ y=”60″ />
</svg>
</body>

si visualizzeranno 3 semplici rettangoli uno a finaco a l’altro, la posizione è determinata dalle coordinate x e y, width ed height sono le dimensioni fill lo colora.

Il supporto dei browser? Assicurato da tutti i borwser moderni, internet explorer nelle versioni precedenti alla 9 dovrebbe aver bisogno del plug-in svg viewer.

L’esempio