Mambo italiano per la creazione di badge

Presentiamo oggi un plugin di uno sviluppatore italiano, Valerio Barrilà , plugin che nonostante sia nato quasi per gioco, è estremamente utile e di facile utilizzo.

Mambo (questo il suo nome) è un plugin per jQuery in licenza MIT che permette di creare facilmente badge rotondi utilizzando elementi canvas.

Può essere utilizzato per la creazione di badge colorati con etichette testuali, percentuali, immagini od entrambi.
L’autore sostiene di averlo creato per evitare il caos di utilizzare immagini realizzate ad-hoc per la visualizzazione di “badge percentuali” ma, soprattutto, come una scusa per iniziare a giocare con i canvas!

Il plugin deve essere configurato con alcune opzioni in formato JSON:

• percentage:   la percentuale rappresentata nel badge
• image: se un percorso immagine viene specificato l’opzione label non verrà presa in considerazione. L’immagine verrà automaticamente ridimensionata alla dimensione massima del badge, in modo da adattarla perfettamente allo stesso.
• label: etichetta visualizzata nel badge. A causa di limitazioni tecniche la sua lunghezza massima è di 3 caratteri. Se non vengono impostate nè l’etichetta nè l’immagine, il badge mostrerà la percentuale.
• labelColor: colore del testo. Tale coloro verrà applicato anche al valore se impostato.
• displayValue:  indica se il valore deve essere visualizzata o meno sopra il testo. Se l’etichetta non viene specificata,  verrà mostrato automaticamente il valore.
• circleColor: il colore utilizzato per il riempimento del badge.
• circleBorder: il colore utilizzato per il bordo del badge.
• ringStyle:  Se impostato a “percentage” l’anello esterno del badge viene disegnato in modo proporzionale al valore impostato nella percentuale; ad esempio 100 significa un cerchio completo intorno al badge, 50 mezzo cerchio e così via. Se impostato  a “full” viene generato un anello completo senza prendere in considerazione il valore percentuale.
• ringColor: Il colore utilizzato per l’anello esterno.
• ringBackground: Se si sceglie di disegnare un anello completo con l’opzione ringstyle: “full” la parte restante del cerchio sarà riempita con questo colore.
• drawShadow: disegnare una piccola ombra sul bordo del badge.

Queste le future caratteristiche che lo sviluppatore ha in mente di implementare nel suo (poco) tempo libero:

• animazione del badge al mouseEnter e mouseLeave eventi in modo che la barra percentuale venga ridisegnata utilizzando una funzione di easing.
• inserimento di un’opzione che permetta di configurare la dimensione dell’anello esterno.
• possibilità di inserire etichette con più di 3 caratteri e scelta del font

Il plugin funziona perfettamente con Firefox, Chrome, Safari, Opera ed IE10+ (personalmente testato).

Demo, caratteristiche e documentazione le trovate su http://www.valeriobarrila.com/mambo.html