Medidor com ponteiro
Cléverson
aqueles medidores de gás ou de pressão, com cores verde/amarela/
vermelha)?
O objetivo é criar um medidor onde possa-se passar um valor máximo
para a cor verde, outro para amarela e outro para vermelha o plugin
montaria visualmente esse medidor já com as cores/valores. E passando
um outro valor que seria o "status atual", criaria o ponteiro
mostrando o valor correspondente ao valor desse status.
Paulo Diovani
pouquinho de trabalho...
Aliás, gostei da sua idéia Cléverson. Eu estava mesmo procurando algo
divertido pra fazer com <canvas>. Vou tentar desenvolver um script aqui e,
se tiver sucesso, te envio.
__
Paulo Diovani Gonçalves
pa...@diovani.com
http://diovani.com
> -----Mensagem original-----
> De: jque...@googlegroups.com [mailto:jque...@googlegroups.com] Em
> nome de Cléverson
> Enviada em: quinta-feira, 14 de janeiro de 2010 09:10
> Para: jQuery (Brasil)
> Assunto: [jquery-br] Medidor com ponteiro
Paulo Diovani
Olá novamente cléverson...
Segue é o primeiro protótipo (bemmm básico). Estou apenas desenhando o fundo do medidor, por hora.
É necessário uma página HTML com um elemento <canvas> com a seguinte definição:
<canvas id="canvas" width="150" height="150"></canvas>
E eis o JavaScript para desenhar o fundo do marcador:
<script type="text/javascript" src="canvas.js">
window.onload = function() {
draw();
};
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
//the degrees are calculated as follows:
// PERCENT * 180 / 100 + 180
//main/outer arc
ctx.beginPath();
ctx.arc(75,75,70,0,(Math.PI/180)*180,true);
ctx.stroke();
// 0% to 50% arc area
ctx.beginPath();
ctx.moveTo(75,75);
ctx.arc(75,75,70,(Math.PI/180)*270,(Math.PI/180)*180, true);
ctx.lineTo(75,75);
ctx.fillStyle = "green";
ctx.fill();
// 50% to 80% arc area
ctx.beginPath();
ctx.moveTo(75,75);
ctx.arc(75,75,70,(Math.PI/180)*324,(Math.PI/180)*270, true);
ctx.lineTo(75,75);
ctx.fillStyle = "yellow";
ctx.fill();
// 80% to 100% arc area
ctx.beginPath();
ctx.moveTo(75,75);
ctx.arc(75,75,70,0,(Math.PI/180)*324, true);
ctx.lineTo(75,75);
ctx.fillStyle = "red";
ctx.fill();
//inner arc (white)
ctx.beginPath();
ctx.arc(75,75,50,0,(Math.PI/180)*180,true);
ctx.fillStyle = "#cccccc";
ctx.stroke();
ctx.fill();
}
</script>
Como pode ver, os valores de inicio/fim de cada marcação podem ser computados a partir de porcentagens. Assim fica fácil utilizar quaisquer valores, e definir as marcações dinamicamente.
Assim que me sobrar mais um tempinho (provavelmente amanhã), faço um script, já com jQuery, para criar este fundo do medidor dinamicamente.
Depois começo a pensar no ponteiro...
NOTA: o modo que fiz ficou um pouco gambi, porque oculto os arcos coloridos com outro (o cinza), acho que o ideal seria desenhar apenas os arcos e unílos com linhas, mas para isso preciso de alguns cálculos para determinar os pontos por onde os arcos passam.
Qualquer ajuda é bem-vinda.
__
Paulo Diovani Gonçalves
> -----Mensagem original-----
> De: jque...@googlegroups.com [mailto:jque...@googlegroups.com] Em
> nome de Cléverson
> Enviada em: quinta-feira, 14 de janeiro de 2010 09:10
> Para: jQuery (Brasil)
> Assunto: [jquery-br] Medidor com ponteiro
>
> Alguém já viu algum plugin que criaria um medidor com ponteiro (tipo
Tanure
Cléverson Tambosi
--
Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery (Brasil)" dos Grupos do Google.
Para postar neste grupo, envie um e-mail para jque...@googlegroups.com.
Para cancelar a inscrição nesse grupo, envie um e-mail para jquery-br+...@googlegroups.com.
Para obter mais opções, visite esse grupo em http://groups.google.com/group/jquery-br?hl=pt-BR.
--
Prof. Cléverson Tambosi
------------------------------------
Uniasselvi - Sistemas de Informação / Desenvolvimento Web
Pública Informática - Projetos Web
ctam...@gmail.com
F: 8429-5545
Paulo Diovani
Cléverson...
Primeira versão (alpha) concluída:
Pretendo colocar em meu site hoje a noite, mas por hora fica num pastebin mesmo.
Ainda não tive tempo de fazer o ponteiro (o que não torna o medidor muito útil... hehe :P) mas pelo menos os valores e cores já são definidos dinamicamente.
Para usar, basta chamar a função o construtor $.canvasmetter() passando como parâmetros o elemento <div> onde será exibido, um array com os valores e cores e, opcionalmente, a cor da parte interior.
EX.:
$.canvasmetter(‘#myCanvas’, [[5,’blue’], [8, ‘yellow’],[10,’red’]], ‘#cccccc’);
Ainda estou pensando se coloco o ponteiro como uma imagem (aliás, se for imagem terão de ser várias) ou se desenho ele com <canvas> tb.
Aliás, para saber a posição correta do ponteiro, vou precisar aprender matemática :/. Se alguém quiser dar uma ajuda com isso será bem-vindo.
Obs.: ainda não testado com jQuery 1.4... mas deve funcionar.
Cléverson Tambosi
Ainda não tinha visto sua resposta.
Amanhã, acho que já consigo testá-lo.
Paulo Diovani
Olá novamente, Cléverson.
Ainda ontem concluí a primeira versão, diga-se, estável.
De melhorias quanto a que mandei anteriormente:
· Corrigido script para funcionar corretamente como um plugin para jQuery. Retornando o objeto, e podendo ser usado em vários elementos diferentes (várias instâncias);
· Adicionado o ponteiro, o qual é desenhado com o método drawArrow(), podendo ser usado com setTimeout() ou setInterval() para atualizações em tempo real.
· O terceiro parâmetro agora é um objeto, opcional, usado para sobrescrever as configurações padrões (cor, largura dos medidores, formato do ponteiro, etc.);
· Etc.
Exemplo de uso:
<script type="text/javascript">
var metter01 = $.canvasmetter('#canvas-metter01', [[5,'cyan'],[50, '#0000ff'], [75, 'green'], [90, 'yellow'], [100, 'rgb(255,0,0)']]);
//o método a seguir desenha o ponteiro, e pode ser usado dentro
//de uma função chamada por window.setInterval(),
//obtendo o valor de value via Ajax ou outra fonte...
metter01.drawArrow(value);
</script>
Link para o script:
Ainda não publiquei no meu blog, mas esta semana faço isso.
Qualquer dúvida, reclamação ou sugestão, me avisem.
PS: postei o script no pastebin via links, um navegador de terminal, por isso não pude conferir ele muito bem, então se houver algum probleminha me avisem que posto novamente.
Cléverson Tambosi
Paulo Diovani
criei um Wave para o plugin:
https://wave.google.com/wave/?pli=1#restored:wave:googlewave.com!w%252BPOJ7yqi9A.4
Assim quem quiser participar ou baixar os fontes atualizados basta seguí-lo.
2010/1/19 Cléverson Tambosi <ctam...@gmail.com>:
--
Paulo Diovani
pa...@diovani.com
+55 51 8146 5413
___________________
http://www.diovani.com
iGoR Pimentel
in this wave.
On 19 jan, 19:23, Paulo Diovani <pa...@diovani.com> wrote:
> Enquanto ainda não tive tempo pra fazer um post decente no meu blog,
> criei um Wave para o plugin:
>
> https://wave.google.com/wave/?pli=1#restored:wave:googlewave.com!w%25...
>
> Assim quem quiser participar ou baixar os fontes atualizados basta seguí-lo.
>
> 2010/1/19 Cléverson Tambosi <ctamb...@gmail.com>:
> >> ctamb...@gmail.com
> >> F: 8429-5545
>
> >> --
> >> Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery
> >> (Brasil)" dos Grupos do Google.
> >> Para postar neste grupo, envie um e-mail para jque...@googlegroups.com.
> >> Para cancelar a inscrição nesse grupo, envie um e-mail para
> >> jquery-br+...@googlegroups.com.
> >> Para obter mais opções, visite esse grupo em
> >>http://groups.google.com/group/jquery-br?hl=pt-BR.
>
> >> --
> >> Prof. Cléverson Tambosi
> >> ------------------------------------
> >> Uniasselvi - Sistemas de Informação / Desenvolvimento Web
> >> Pública Informática - Projetos Web
> >> ctamb...@gmail.com
> >> F: 8429-5545
>
> >> --
> >> Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery
> >> (Brasil)" dos Grupos do Google.
> >> Para postar neste grupo, envie um e-mail para jque...@googlegroups.com.
> >> Para cancelar a inscrição nesse grupo, envie um e-mail para
> >> jquery-br+...@googlegroups.com.
> >> Para obter mais opções, visite esse grupo em
> >>http://groups.google.com/group/jquery-br?hl=pt-BR.
>
> > --
> > Prof. Cléverson Tambosi
> > ------------------------------------
> > Uniasselvi - Sistemas de Informação / Desenvolvimento Web
> > Pública Informática - Projetos Web
> > F: 8429-5545
>
> > --
> > Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery
> > (Brasil)" dos Grupos do Google.
> > Para postar neste grupo, envie um e-mail para jque...@googlegroups.com.
> > Para cancelar a inscrição nesse grupo, envie um e-mail para
> > jquery-br+...@googlegroups.com.
> > Para obter mais opções, visite esse grupo em
> >http://groups.google.com/group/jquery-br?hl=pt-BR.
>
> --
> Paulo Diovani ...
>
> mais »
Paulo Diovani
Vou ver o que tenho que fazer pra tornar ele público.
No início da tarde faço isso e aviso aqui.
__
Paulo Diovani Gonçalves
pa...@diovani.com
http://diovani.com
> -----Mensagem original-----
> De: jque...@googlegroups.com [mailto:jque...@googlegroups.com] Em
> nome de iGoR Pimentel
> Enviada em: terça-feira, 19 de janeiro de 2010 23:44
> Para: jQuery (Brasil)
> Assunto: [jquery-br] Re: Medidor com ponteiro
> > >> Para postar neste grupo, envie um e-mail para jquery-
> b...@googlegroups.com.
> > >> Para cancelar a inscrição nesse grupo, envie um e-mail para
> > >> jquery-br+...@googlegroups.com.
> > >> Para obter mais opções, visite esse grupo em
> > >>http://groups.google.com/group/jquery-br?hl=pt-BR.
> >
> > >> --
> > >> Prof. Cléverson Tambosi
> > >> ------------------------------------
> > >> Uniasselvi - Sistemas de Informação / Desenvolvimento Web Pública
> > >> Informática - Projetos Web ctamb...@gmail.com
> > >> F: 8429-5545
> >
> > >> --
> > >> Você está recebendo esta mensagem porque se inscreveu no grupo
> > >> "jQuery (Brasil)" dos Grupos do Google.
> > >> Para postar neste grupo, envie um e-mail para jquery-
> b...@googlegroups.com.
> > >> Para cancelar a inscrição nesse grupo, envie um e-mail para
> > >> jquery-br+...@googlegroups.com.
> > >> Para obter mais opções, visite esse grupo em
> > >>http://groups.google.com/group/jquery-br?hl=pt-BR.
> >
> > >> --
> > >> Prof. Cléverson Tambosi
> > >> ------------------------------------
> > >> Uniasselvi - Sistemas de Informação / Desenvolvimento Web Pública
> > >> Informática - Projetos Web ctamb...@gmail.com
> > >> F: 8429-5545
> >
> > >> --
> > >> Você está recebendo esta mensagem porque se inscreveu no grupo
> > >> "jQuery (Brasil)" dos Grupos do Google.
> > >> Para postar neste grupo, envie um e-mail para jquery-
> b...@googlegroups.com.
> > >> Para cancelar a inscrição nesse grupo, envie um e-mail para
> > >> jquery-br+...@googlegroups.com.
> > >> Para obter mais opções, visite esse grupo em
> > >>http://groups.google.com/group/jquery-br?hl=pt-BR.
> >
> > > --
> > > Prof. Cléverson Tambosi
> > > ------------------------------------
> > > Uniasselvi - Sistemas de Informação / Desenvolvimento Web Pública
> > > Informática - Projetos Web ctamb...@gmail.com
> > > F: 8429-5545
> >
> > > --
> > > Você está recebendo esta mensagem porque se inscreveu no grupo
> > > "jQuery (Brasil)" dos Grupos do Google.
> > > Para postar neste grupo, envie um e-mail para jquery-
> b...@googlegroups.com.
Jean
ainda mal tentei =p
2010/1/20 Paulo Diovani <pa...@diovani.com>:
> Para postar neste grupo, envie um e-mail para jque...@googlegroups.com.
> Para cancelar a inscrição nesse grupo, envie um e-mail para jquery-br+...@googlegroups.com.
> Para obter mais opções, visite esse grupo em http://groups.google.com/group/jquery-br?hl=pt-BR.
>
>
>
--
[]´s Jean a.k.a Suissa
Tecnólogo em Análise de Sistemas - UTF-PR
131
Junior Messias
--
-------------------------------------------------------
Israel Messias Junior
e-mail: jrme...@gmail.com
cel: [49] 88198409
Paulo Diovani
Obrigado Messias, você me salvou. J
Acho que agora quem quiser pode seguir o Wave: https://wave.google.com/wave/?pli=1#restored:wave:googlewave.com!w%252BPOJ7yqi9A.1