App Mapa de Imagem: mudanças entre as edições

De Pontão Nós Digitais
Ir para navegaçãoIr para pesquisar
(Nova página: = Especificação (Pedro Markun) = App1 - Mapa de Participação dos Comicios Sistema que permite taggear pedaços de uma imagem. A idéia é uma interface de tela inteira, com uma ...)
 
 
(6 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 1: Linha 1:
= Integrantes =
VilsonVieira
[[Danilo Roberto Shiga]]
= Especificação (Pedro Markun) =
= Especificação (Pedro Markun) =


Linha 19: Linha 25:
Deu pra sacar? Tem alguns detalhes não-resolvidos nesse sistema. Mas na minha cabeça a idéia é fazer (ou modificar algo já existente) um sistema que seja só o meio de campo mesmo. Então coisas como 'o que vai nesse popup?' seriam resolvidos fora desse plugin javascript.
Deu pra sacar? Tem alguns detalhes não-resolvidos nesse sistema. Mas na minha cabeça a idéia é fazer (ou modificar algo já existente) um sistema que seja só o meio de campo mesmo. Então coisas como 'o que vai nesse popup?' seriam resolvidos fora desse plugin javascript.


= Ideias =
= Source =
 
* v0.2
** Disponível para testes em http://automata.cc/src/imagemap/index.html
** Source:
 
    git clone ssh://USERNAME@labmacambira.git.sourceforge.net/gitroot/labmacambira/imagemap
 
= Tarefas =
 
== Prioritárias ==
1. terminar o form acrescentando nome, descrição, data de nascimento e foto (foto pode colocar opção de enviar um arquivo). [https://sourceforge.net/apps/trac/labmacambira/ticket/128]
 
2. persistir os dados: armazenar os marcadores e esses dados entrados no form em dicionários (por enquanto, o Capi do thacker já está integrando com o BD, então depois as rotinas para gravar no dicionário irão gravar no BD). [https://sourceforge.net/apps/trac/labmacambira/ticket/129]


Usar <canvas> para pegar cada pixel da imagem e tratar neles eventos onclick/onmouseover. Podemos dividir a imagem em vários <canvas> para não sobrecarregar. Os efeitos podem ser implementados diretamente no <canvas> (muito gasto computacional) ou usando CSS3 ou SVG por cima da imagem.
3. a cada vez que a página (ou uma imagem) for carregada, buscar os dados nesse dicionário e exibir os marcadores já criados anteriormente. [https://sourceforge.net/apps/trac/labmacambira/ticket/130]


= Versões/Tarefas =
== Outras ==


== 0.1 ==
* Efeito blur na imagem toda [https://sourceforge.net/apps/trac/labmacambira/ticket/106]
* Tornar uma lib js compatível com json


* Implementar uma versão de teste com uma imagem de tela inteira em canvas e tratar cada pixel com onclick/onmouseover
== Usos ==
* Disparar popup com esses eventos ou algo configurado por JSON
* Apresentar ao Pedro


== 0.2 ==
* Brado Retumbante [http://bradoretumbante.org.br]


* Implementar efeitos (direto em <canvas> ou CSS3 ou SVG?)
[[Category:Lab Macambira]]
* Dividir imagem em vários <canvas>
* Apresentar ao Pedro

Edição atual tal como às 23h34min de 19 de setembro de 2011

Integrantes

VilsonVieira

Danilo Roberto Shiga

Especificação (Pedro Markun)

App1 - Mapa de Participação dos Comicios

Sistema que permite taggear pedaços de uma imagem.

A idéia é uma interface de tela inteira, com uma grande imagem (ou precisariam ser varias pequenas imagens - tipo tiles?) dos comicios das diretas. O usuário pode selecionar (ou clicar e isso geraria um ponto a partir do centro com um raio pŕe-definido) em um pedaço da imagem e se marcar lá. Isso abre um popup para o cara inserir dados adicionais.

O sistema precisa mostrar todos os objetos taggeados simultaneamente - com algum tipo de solução pra não ficar um em cima do outro. E deve também ter suporte a mouseover e onclick nesses elementos. (Ai a idéia é que abra um popup para o cara ver as informações).

Por fim, a idéia é que os pontos marcados fiquem destacados de alguma forma. A idéia que isso possa ser configurado posteriormente, mas só para exemplificar:

  • Um canvas preto por cima da imagem. Quando o cara for passando o mouse, ele consegue ver a imagem por baixo do mouse. Quando ele clica, o sistema 'marca' aquele pedaço como transparente.
  • Uma imagem preto-e-branco. Quando o cara for passando o mouse, a imagem fica colorida. Quando ele clica, o sistema 'marca' aquele pedaço e fica colorido.
  • Uma imagem pixelada. Quando o cara for passando o mouse, a imagem fica com boa resolução. Quando ele clica, o sistema 'marca' aquele pedaço com boa resolução.

Queria que o sistema fosse independente de banco de dados. Somente lendo e cuspindo um formato padrão de JSON. Ai a plataforma cuidaria de armazenar e expor esses dados pro sistema.

Deu pra sacar? Tem alguns detalhes não-resolvidos nesse sistema. Mas na minha cabeça a idéia é fazer (ou modificar algo já existente) um sistema que seja só o meio de campo mesmo. Então coisas como 'o que vai nesse popup?' seriam resolvidos fora desse plugin javascript.

Source

    git clone ssh://USERNAME@labmacambira.git.sourceforge.net/gitroot/labmacambira/imagemap

Tarefas

Prioritárias

1. terminar o form acrescentando nome, descrição, data de nascimento e foto (foto pode colocar opção de enviar um arquivo). [1]

2. persistir os dados: armazenar os marcadores e esses dados entrados no form em dicionários (por enquanto, o Capi do thacker já está integrando com o BD, então depois as rotinas para gravar no dicionário irão gravar no BD). [2]

3. a cada vez que a página (ou uma imagem) for carregada, buscar os dados nesse dicionário e exibir os marcadores já criados anteriormente. [3]

Outras

  • Efeito blur na imagem toda [4]
  • Tornar uma lib js compatível com json

Usos

  • Brado Retumbante [5]