Upload de Arquivos com Rails usando Paperclip

Hoje vamos tratar de uma funcionalidade muito usada em sistemas web: upload de arquivos.
No rails existe uma gem que facilita muito o trabalho que é a gem Paperclip.
Primeiro passo, vamos instalar a gem.
Adicione a seguinte linha no seu arquivo Gemfile (fica na raiz do seu projeto):

gem "paperclip", "~> 3.0"

No prompt de comando rode:

bundle install

Agora digamos que a intenção é usar um model que você já tem chamado “User”, e justamente você quer que seu usuário possa associar uma foto ao seu perfil, um “avatar”. Então usamos o generator do Paperclip.

rails generate paperclip user avatar

Vai ser criado um arquivo de migração que vai adicionar na tabela “users” as colunas que ele precisa. Então, rode:

rake db:migrate

Agora você precisa adicionar ao seu model (o arquivo app/model/user) o avatar, ficando assim:

class User < ActiveRecord::Base
  has_attached_file :avatar, :styles => { 
    :medium => "300x300>", 
    :thumb => "100x100>" }
end

Toda vez que você subir um arquivo de imagens e salvar no model User, o Paperclip irá gerar versões de tamanhos diferentes.

Lembre-se que o formulário HTML precisa ter a opção de multipart habilitado:

<% form_for :user, @user, :url => user_path, 
:html => { :multipart => true } do |form| %>
  <%= form.file_field :avatar %>
  <%= form.submit %>
<% end %>

Ao salvar a imagem será redimensionada e colocada em pastas padrão.
Agora coloque uma dessas linhas na view show (na pasta app/views/users):

<%= image_tag @user.avatar.url %>
<%= image_tag @user.avatar.url(:medium) %>
<%= image_tag @user.avatar.url(:thumb) %>

Pronto, para concluir você precisa ter o programa ImageMagick e instalar a gem RMagick

Aqui tem um link para download do programa e da gem:
http://rubyforge.org/frs/download.php/64917/RMagick-2.12.0-ImageMagick-6.5.6-8-Q8.zip

Instale o ImageMagick(ImageMagick-6.5.6-8-Q8-windows-dll.exe)

Instale também a gem RMagick (gem install<caminho da pasta que foi extraído o rmagick>\rmagick-2.12.0-x86-mswin32.gem)

Rode o projeto: rails server.

Pronto, o upload de arquivo vai estar funcionando.
Valeu, até a próxima!

Introdução ao Ruby on Rails

Hoje vou começar minha série de posts sobre o Ruby on Rails. Como vou utilizar esse framework no meu TCC, pretendo fazer várias postagens sobre ele.
O Ruby on Rails é um framework projetado para agilizar o desenvolvimento de aplicações web, utilizando a linguagem Ruby.
Seguindo o “Rails Way” (ou o “modo Rails” de fazer as coisas) você irá ganhar em tempo e produtividade. Basta respeitar as convenções, ou seja, as regras do Rails.

Você pode instalar facilmente o Rails no Windows em poucos cliques com o Rails Installer.
O Rails Installer contém o interpretador Ruby (na versão 1.8.7-p330), o framework Ruby on Rails (3.0.3), o gerenciador de versões Git (1.7.3.1), o banco de dados SQLite (3.7.3) e o DevKit. Após a instalação, todas essas peças funcionam automaticamente de forma integrada.

Primeira Aplicação

A primeira aplicação que vamos desenvolver vai ser um mini blog.
Um blog pode ter posts, um post pode ter vários comentários, entretanto cada comentário pertence a um post.
Com a facilidade do Rails, vamos desenvolver esse mini exemplo, que é um CRUD(create, read, update e delete) completo com apenas poucos comandos.

Criando um novo projeto

Vamos criar nosso projeto. No Rails, um projeto é uma estrutura de pastas usada para armazenar os arquivos que irão compor sua aplicação. Para o desenvolvimento vamos usar o prompt de comandos (no windows) ou o terminal (no linux). Para criar o projeto, acesse o prompt de comando ou terminal e digite o comando abaixo.

$ rails new blog

Este comando irá fazer com que o Rails crie um diretório chamado blog, o rails vai gerar automaticamente uma estrutura padrão de pastas e arquivos.

Scaffold

Num comando simples, o scaffold gera o modelo, o controle, e as visões (dentre outras coisas), adiantando bastante o seu trabalho.

Priemeiro, para acessar os arquivos do nosso projeto, vamos acessar a pasta da nossa aplicação

$ cd blog/

Depois, dentro do diretório blog, basta uma única linha de comando. Nosso post terá o nome do autor, o titulo do post, e o conteúdo.

$ rails generate scaffold post titulo:string conteudo:text

Atente-se ao padrão do comando, que é formado pelo nome do modelo (post), seguido dos campos com seus respectivos tipos de dados (por exemplo, titulo:string e conteudo:text).

Como dito antes, esse comando gera um monte de arquivos. Ele cria o modelo chamado post.rb na pasta app/models, o posts_controller.rb (no plural) na pasta app/controllers, além de criar também as visões na pasta app/views. Ressalto que o Rails organiza as views através de pastas com o nome dos modelos existentes. Então, o scaffold vai gerar uma pasta dentro de app/views com o nome posts, contendo quatro arquivos dentro dela: index.html.erb, edit.html.erb, show.html.erb e new.html.erb. Ou seja, o Rails já criou uma view para algumas ações básicas relacionadas ao item post.

Usando scaffold para criar os comentários
Da mesma forma como criamos os posts, vamos criar também os comentários usando scaffold, através do comando abaixo.

$ rails generate scaffold comentario autor:string conteudo:text post:references

Desta vez, temos algo diferente no fim do comando. Informamos que cada comentário faz referência a post. Isso vai ajudar o Rails a montar o relacionamento entre as tabelas no banco de dados. O Rails saberá que deve criar um campo de chave estrangeira na tabela comentarios, ligando com a chave primária da tabela posts.

Relacionando os modelos Post e Comentario
No banco de dados está tudo OK, mas ainda será necessário explicitar o relacionamento entre post e comentario nos modelos das entidades. Para isso, acesse a pasta app/models e faça uma alteração no arquivo post.rb.

Abra o arquivo e acrescente nele a informação de que há muitos comentários para cada post.

class Post < ActiveRecord::Base
has_many :comentarios
end

O arquivo comentario.rb, como foi criado por último e recebeu o post:references em sua definição, já possui a informação de que cada comentário pertence a um post. Então, no model comentario.rb não será necessário mexer.

O Banco de Dados
Você pode deixar o gerenciamento do banco de dados nas mãos do Rails. Em alguns casos, vai ser preciso configurar o arquivo database.yml com as informações do banco de dados que deseja utilizar. A partir de então, outras tarefas como criar tabelas, colunas, etc recomenda-se que sejam feitas a partir do Rails, para maior controle.

No nosso caso, vamos usar o banco de dados SQLite, que já vem configurado por padrão quando criamos uma aplicação Rails. Caso você quisesse usar outro banco de dados, como o MySQL, poderia ter informado já na criação da aplicação, como valor do parâmetro d.

$ rails new blog -d mysql

Continuando nossa aplicação, vamos mandar o Rails criar o banco de dados, usando o comando Rake.

$ rake db:create

Pronto, temos nosso banco de dados SQLite criado. Se fosse um MySQL ou qualquer outro que ele suporte, seria a mesma coisa: também teríamos criado a base de dados da mesma forma com esse comando.

As migrações
No Rails, migração é a mudança do banco de dados de um estado para outro. Por exemplo, ao criar uma nova tabela, você altera o estado do banco de dados. Ao incluir/excluir uma coluna de determinada tabela, você altera o estado do banco de dados. Ou seja, alterações na estrutura do banco mudam seu estado, e as migrações permitem que você volte o banco de dados a estados anteriores, desfazendo alterações mal-sucedidas ou desnecessárias.

Quando usamos o scaffold para criar o post e o comentário, também foram criadas suas respectivas migrações, contendo as alterações que serão necessárias fazer ao banco de dados (como criar as tabelas com as colunas informadas). As migrações podem ser conferidas na forma de arquivos individuais na pasta db/migrate.

Vamos executar as migrações pendentes para que os modelos post e comentario possam armazenar seus respectivos dados no banco.

$ rake db:migrate

O Rake é uma ferramenta muito útil do Rails, com várias funções.

Executando
Pronto! Com apenas esse comandos já desenvolvemos nossa aplicação básica. Como o Rails é voltado para aplicações web, será necessário usar um servidor web para rodar o sistema. O próprio Rails possui um servidor chamado Webrick, que serve justamente para ajudar o desenvolvedor a acompanhar o progresso da aplicação.

Inicie o servidor com o comando abaixo no prompt/terminal:

$ rails server

Agora, abra o navegador web de sua preferência e acesse o endereço http://localhost:3000/posts para ver o que aparece. Localhost é o endereço local de sua máquina, 3000 é a porta que o servidor Webrick normalmente usa e posts é o nome do controle que desejamos acessar. Por padrão, essa URL irá acionar o método “index” de posts_controller.rb, que por sua vez utilizará a visão “index.html.erb” dentro da pasta app/views/posts.

Quando você clica no link New Post, o navegador acessa o endereço http://localhost:3000/posts/new, que contém um formulário para adicionar novos posts. Nesse momento, você está acionando o método “new” de posts_controller.rb, que irá chamar a visão “new.html.erb” na pasta app/views/posts.

Ao clicar no botão Create Post, seu post será salvo e o navegador redirecionado à URL http://localhost:3000/posts/show/1, que mostra os detalhes do post. Essa URL chama o metodo “show” do controle posts_controller.rb, passando como valor o id do post cujos detalhes deverão ser mostrados. No caso, está sendo apresentado o detalhe do post de código “1″, através da view “show.html.erb“.

Clique em “New Post” e faça alguns cadastros. Teste os links “Show“, “Edit” e “Destroy“. Tudo funcionando. Por isso que o Ruby on Rails faz tanto sucesso. Até aqui, temos um cadastro de posts plenamente funcional, feito em pouco tempo e com meia dúzia de comandos simples. Caso queira encerrar o servidor e liberar o prompt/terminal, tecle Control + C.

Até o próximo post sobre Rails!

Contador de Passos usando a plataforma Android SDK

Bem pessoal, hoje vou falar de um aplicativo que fiz para dispositivos Android. Esse aplicativo é um contador de passos que foi minha primeira experiência com desenvolvimento para a plataforma Android.

Como Usar:

Você aperta o botão “Start”, coloca o aparelho celular no bolso e começa a caminhar então o aplicativo vai contar quantos passos você caminhou.

Funcionamento:

O aplicativo usa os valores recebidos do Acelerômetro do celular para fazer a contagem dos passos.

Para saber mais o que é acelerômetro veja a postagem anterior:  https://ismaiasmoreira.wordpress.com/2012/11/04/acelerometro-sensor-de-aceleracao/

Desenvolvimento:

Como nunca tinha desenvolvido antes para a plataforma Android, primeira coisa que fiz foi seguir os passos desse tutorial:

http://www.forumweb.com.br/artigo/38/instalando-o-plugin-adt-no-eclipse-e-criando-um-projeto-android.

Mas para quem já tem conhecimento pode pular essa parte.

Para começar a desenvolver o aplicativo a classe Activity (Classe Principal) tem que implementar a interface SensorEventListener que possui os métodos que vão trabalhar com os sensores.

O método que faz a contagem dos passos é o onSensorChanged que é chamado toda vez que algum sensor muda de valor.

Dentro do método segue-se esses passos:

– Primeiro, verificamos se o evento que chamou o método é um evento do sensor de aceleração.

– Depois pegamos os valores da aceleração dos três eixos: x, y e z.

– Fazemos um cálculo para pegar a dimensão da aceleração somando o quadrado dos valores dos três eixos.

– Salvamos o resultado em uma lista de valores.

– Quando a lista chegar a conter 50 valores, comparamos o valor atual da aceleração com os 49 anteriores

–  Se algum desses valores tiver uma diferença maior que 9 m/s² (valor qualquer que foi testado e pode ser alterado para mudar a sensibilidade do movimento) conta-se um passo.

Depois é só passar a quantidade de valores para interface da aplicação.

Para ajudar a construir a interface tem esse link:

http://www.dibbus.com/2011/02/gradient-buttons-for-android/

Então é isso pessoal, espero que tenham gostado e até a próxima.

Fonte:

http://developer.android.com/guide/topics/sensors/sensors_motion.html

http://pallergabor.uw.hu/common/pllsteps.pdf

Acelerômetro – Sensor de Aceleração

Todo dispositivo móvel, pelo menos os mais modernos, possuem sensores. O Android está pronto para usar diversos sensores, como: aceleração (Accelerometer), bússola (Compass), proximidade (Proximity), pressão (Pressure) entre outros. Tudo depende do tipo de aparelho que você tem.

O sensor mais comumente utilizado para jogos é o acelerômetro:

Cada vez mais empregado nos aparelhos eletrônicos portáteis, o acelerômetro possibilita uma nova interação com a máquina.

Quase todo celular hoje possui um acelerômetro, que é o dispositivo que informa ao sistema do seu celular quando ele vira de um lado para o outro ou de cima para baixo. O Acelerômetro (Accelerometer), que mede a força aplicada ao dispositivo, em cada um dos seus três eixos:

 

 

Para entender melhor, existe um video apresentado pelo Bill Hammack em inglês, capaz de exemplificar com detalhes o funcionamento dessa preciosa ferramenta.

 

 

Fonte:

http://www.tecmundo.com.br/curiosidade/2652-o-que-e-um-acelerometro-.htm

http://www.appleboy.com.br/blog/o-que-e-acelerometro-como-funciona

Simulando 3D

O experimento de hoje não envolve programação, não vamos precisar de nenhuma linha de código. Vou mostrar como criar uma imagem 3D simulada a partir de duas ou mais fotos 2D.

As duas imagens 2D quando rapidamente trocadas dão a ilusão tridimensional. Veja:

É fácil perceber que o truqe é apenas tirar duas fotos de uma mesma cena só que de ângulos diferentes. E depois salvar as imagens é uma GIF animada.

Para criar essa GIF eu usei um aplicativo do meu próprio celular chamado “Câmera3D” para celulares com a tecnologia Android. Mas existem diversas maneiras de criar uma GIF animada. Basta pesquisar um programa para criar essas gifs.

Vejam mais exemplos de imagens 3D:

Bom pessoal, isso é tudo por hoje. Até a próxima!

Combinando Fontes de Luz

Hoje vou mostrar um experimento usando fotografias de uma mesma cena tiradas por diferentes fontes de luz.

Primeiramente foi tirada uma foto de um objeto com uma fonte de luz do lado esquerdo, depois com a fonte de luz apenas do lado direito e por último com as duas fontes de luz.

Imagem de referência (Duas luzes acesas)

          

Fonte de Luz à esquerda

Fonte de luz à direita

Como a resolução da imagem não era muito importante as fotos foram tiradas pela webcam de um notebook. Pois com o notebook era mais fácil tirar as fotos sem tremer, pois eu coloquei o notebook em uma mesa e tirei as fotos com o mouse apoiado  em outra mesa.

A posição das luzes não favoreceu e também como as fotos foram tiradas de dia houve um pouco de iluminação solar. Por isso, teve uma iluminação mais forte do lado esquerdo da imagem.

Agora, utilizando o Processing.org foi feito um processamento com a soma dos pixels das duas últimas imagens:

Simulação das duas fontes de luz

Vocês podem ver que o resultado é uma imagem idêntica a primeira imagem.

Por fim, você pode brincar com as imagens simulando efeitos de fontes de luz de cores diferentes:

vermelho à esquerda e verde à direita

azul à esquerda e verde à direita

verde à esquerda e vermelho à direita

Agora vamos para o código, apesar do resultado interessante a implementação é bastante simples basta fazer a média dos pixels das duas imagens e salvar em uma terceira imagem:

Código-Fonte

Para fazer a brincadeira das cores, basta aumentar a  multiplicar o valor do red, green ou blue das imagens.

Bem pessoal, espero que tenham gostado do post e que também tentem fazer esse experimento é bastante interessante.

Aguardo comentários!

Operações de convolução com máscaras

Nesse post vou falar de processamento de imagens usando convolução. Convolução é um operador que, a partir de duas funções, produz uma terceira.

Usando as operações de convolução podemos fazer com que uma imagem resulte em outra. Existem várias máscaras que fazem encontrar características na imagem, como algumas que vou mostrar agora:

Gaussian Blur

| 0.111, 0.111, 0.111 |

| 0.111, 0.111, 0.111 |

| 0.111, 0.111, 0.111 |

Detecção de bordas:

Sobel

Laplaciano

Resultados da aplicação da máscara do laplaciano:  3 x 3,  5 x 5 e 9 x 9

Código-Fonte:

O método convolution retorna o resultado da convolução para cada pixel.

Fontes: 

http://processing.org/reference

http://www.learningprocessing.com

http://www.urisantiago.br/computacao/thiago/livros/processamento%20de%20imagens%20digital.pdf

Introdução ao Processing

Processing é uma linguagem de programação de código aberto e ambiente de desenvolvimento integrado (IDE), construído para as artes eletrônicas e comunidades de design visual com o objetivo de ensinar noções básicas de programação de computador em um contexto visual e para servir como base para cadernos eletrônicos.

Instalação:

Link do download do Processing: http://processing.org/download/

Basta extrair a arquivo do download, abrir o aplicativo e você já estará pronto para começar a usar o Processing.

Desenhar Linhas:

Sintaxe:         line(x1, y1, x2, y2);

Parâmetros :

x1 –      coordenada horizontal do primeiro ponto

y1 –     coordenada vertical do primeiro ponto

x2 –      coordenada horizontal do segundo ponto

y2 –      coordenada vertical do segundo ponto

Ex.:     line(10, 20, 30, 70);

 

Desenhar elipse e circulo:

Sintaxe:         ellipse(x, y, largura, altura);

Parâmetros :

x –     coordenada horizontal da elipse

y –     coordenada vertical da elipse

largura –     largura da elipse

altura –       altura da elipse

Ex.:     ellipse(40, 45, 55, 55);

Ex.:    ellipse(40, 45, 30, 60);

 

Mudar cor e largura das linhas:

stroke(color);

strokeWeight(width);

 

Controlar o tamanho da janela:

size(largura, altura);

 

Interatividade:

Para dar um exemplo de interatividade eu criei um programa que desenha um boneco. Ele é desenhado de acordo com a posição do mouse.

Quando o mouse é movimentado o boneco também é movimentado e seus olhos mudam de cor. Se clicar com o mouse, a cor do corpo do boneco é alterada.

A interatividade é feita através dessas variáveis:

mouseX – variável de sistema contém sempre a coordenada horizontal atual do mouse.

mouseY – variável de sistema contém sempre a coordenada vertical atual do mouse.

pmouseX – variável de sistema contém sempre a posição horizontal do mouse no quadro anterior ao quadro atual.

pmouseY – variável de sistema contém sempre a posição vertical do mouse no quadro anterior ao quadro atual.

mousePressed() – chamado uma vez após cada vez que um botão do mouse é pressionado.

 

Código completo:

int value = 0;

void setup() {

size(200,200);   // Controla o tamanho da janela

smooth();   // Melhora a qualidade da imagem

frameRate(30);   // A taxa de quadros é definido como 30 quadros por segundo.

}

void draw() {

background(255);  // Desenha o fundo branco

ellipseMode(CENTER); // Define elipses e retângulos para o modo CENTER

rectMode(CENTER);

// Desenha o corpo

stroke(0);   // Define a cor usada para desenhar linhas e bordas em torno de formas

fill(0,value,255-value);  //  Define a cor usada para preencher as formas

rect(mouseX,mouseY,20,100);

// Desenha a cabeça

stroke(0);

fill(255);

ellipse(mouseX,mouseY-30,50,50);

// Desenha os olhos

// A cor dos olhos é determinada pela localização do mouse.

fill(mouseX,0,mouseY);

ellipse(mouseX-15,mouseY-30,12,20);

ellipse(mouseX+15,mouseY-30,12,20);

// Os braços e pernas são desenhados de acordo com a localização do mouse e da localização anterior do mouse.

// Desenha os braços

stroke(0);

line(mouseX-10,mouseY,pmouseX-20,pmouseY+40);

line(mouseX+10,mouseY,pmouseX+20,pmouseY+40);

// Desenha as pernas

stroke(0);

line(mouseX-10,mouseY+50,pmouseX-10,pmouseY+80);

line(mouseX+10,mouseY+50,pmouseX+10,pmouseY+80);

}

void mousePressed() {

if (value==250){

value = 0;

}

value+=50;

}

 

Fontes: 

http://processing.org/reference/

http://www.learningprocessing.com