jQuery.canvasmetter

jQuery.canvasmetter é um plugin para jQuery que utiliza o elemento HTML5 <canvas> para exibir um medidor multiuso, no estilo de medidores de velocidade ou barômetros.

Tanto os valores do medidor, como as cores de cada marcação são totalmente configuráveis.

A idéia surgiu após ler a mensagem de um usuário da lista jquery-br, que procurava um medidor estilo barômetro, feito com JavaScript. Comecei a fazer alguns testes, usando jQuery e <canvas>, até mesmo como um treinamento, já que eu procurava, a algum tempinho, um passatempo para aprender a usar o elemento <canvas>, e em poucas horas concluí o básico dele, evoluindo-o em seguida em um plugin para jQuery.

Para utilizá-lo, basta chamar a função $.canvasmetter(), passando como parâmetros, o elemento onde ele será adicionado (preferenciamente um <div>, devendo este ter largura e altura definidas via css), um Array multidimensional, com os valores e cores de cada marcação do medidor (ex.: [[5, 'blue'],[10, 'yellow'],[20,'#ff0000']]) e, opcionalmente, um objeto com opções extras, sobrescrevendo as configurações padrões.

Exemplo de uso:

$.canvasmetter(
    '#canvas-metter',
    [
        [5,'#00FFFF'],
        [50, '#0000ff'],
        [75, 'green'],
        [90, 'yellow'],
        [100, 'rgb(255,0,0)']
    ],
    {} //configurações extras - opcional
);

O objeto com as configurações, passado como terceiro parâmetro, deve possuir o formato {config: ‘valor’}, e as seguintes configurações são permitidas:

markerHeight: a altura dos marcadores, padrão = 10px;
innerColor: a cor do arco interior, padrão = branco/white;
arrowColor: a cor do ponteiro, padrão = vermelho/red;
arrowCap: o tipo de ponta usado no ponteiro ['butt'|'round'|'square'], padrão = round;

O plugin, assim como uma página de exemplo, pode ser obtido na página de download ou, alternativamente, do wave jQuery.canvasmetter, onde planejo manter o script atualizado, e os interessados podem participar a vontade.

A página de exemplo requer também o core do jQuery e o script Explorer Canvas, para funcionar no MSIE.

Pretendo melhorá-lo e adicionar novas funcionalidades com o tempo. Atualmente ele é funcional, mas simples, e funciona com FF, MSIE, Safari, Opera e Google Chrome.