Ambiente de Imerso

Manual de montagem

Sumrio
O Manual...........................................................................................4 LAGEAR...............................................................................................5 Tripartite Network.................................................................................6 Interface Oratrio................................................................................7 Viso geral..........................................................................................8 Sistema local.....................................................................................10 Etapas do funcionamento...................................................................12 Aparato digitalizador de desejos..........................................................14 Sistema eletro-mecnico.....................................................................18 Luminria.....................................................................................22 Caneta + Reed Switch .................................................................24 Motor de passo + Driver...............................................................26 Webcam + Projetor......................................................................28 Programao.....................................................................................29 Arduino........................................................................................30 Processing....................................................................................32 MySQL.........................................................................................39 PHP , HTML, CSS, Javascript............................................................40

Laboratrio Grfico para Experimentao Arquitetnica Escola de Arquitetura . Universidade Federal de Minas Gerais

O Manual
Este manual foi desenvolvido durante a pesquisa Tripartite Network, no LAGEAR (Laboratrio Grfico para Experimentao Arquitetnica) financiado pela Fapemig no edital Grupos Emergentes. Pretende-se tornar a pesquisa pblica e divulgar de maneira simples e objetiva a montagem e replicao do sistema desenvolvido. Embora a construo deste ambiente de imerso seja simples, recomendase conhecimento bsico do software Processing, do hardware Arduino, da linguagem de programao PHP e Javascript, do sistema de banco de dados MySQL e das linguagens HTML e CSS.

LAGEAR
O LAGEAR um laboratrio computacional da Escola de Arquitetura da Universidade Federal de Minas Gerais, voltado tanto para o ensino quanto para a pesquisa na rea de arquitetura e novas mdias. Os trabalhos desenvolvidos vo da investigao sobre o uso de novas tecnologias digitais para o incremento de construo de habitao popular em processo de mutiro, at pesquisas de linguagem visual e desenho de interface. Atualmente uma das principais reas de investigao a implementao de ambientes de imerso de baixo custo associados a sistemas rudimentares de computao fsica. A equipe do laboratrio formada por professores especializados, arquitetos pesquisadores, doutorandos, mestrandos e estudantes da graduao.

mais informaes e contato

arq.ufmg.br/lagear facebook.com/lagear.ufmg lagear.ufmg@gmail.com

Tripartite Network
Esse projeto tem por intuito consolidar o IBPA (Instituto Brasileiro de PerformanceArquitetura) como grupo de pesquisa por meio de uma rede para espacializao da informao e comunicao gerando arquiteturas efmerashbridas, a partir do desenvolvimento de kits de equipamentos e interfaces digitais colaborativas. Tal rede foi experimentada em trs etapas e cada etapa ativou pelo menos dois pontos para a constituio da rede propriamente dita. As trs etapas (tripartite) criaram eventos de naturezas distintas que usualmente acontecem em espaos arquitetnicos fsicos tradicionais e que, na era das tecnologias digitais, precisam ser reformulados para ampliar tanto seu alcance quanto seu potencial colaborativo e interativo. So eles o ensino, a interao social e a divulgao e interveno no patrimnio artstico e arquitetnico. Pretende-se tambm avaliar tanto os aspectos tcnicos do funcionamento da rede quanto os eventos propiciados remotamente, visando futuras indicaes para a rede de arquiteturas efmeras-hbridas.

Interface Oratrio
Objetivo
Criar uma interface compartilhada e aberta a vrios inputs, em que pessoas se expressem por meio de pedidos e desejos, sejam estes escritos fisicamente em uma instalao ou enviados pela internet. Por meio da exibio e uma possvel manipulao desses pedidos nessa interface, estabelecer uma comunicao entre pessoas de diferentes lugares, baseada em um imaginrio comum da f. A partir dessa situao pretende-se estudar interfaces de comunicao entre espaos e suas possibilidades.

A Instalao
A interface foi desenvolvida para um primeiro teste em Bichinho, vilarejo prximo a Tiradentes, onde a equipe de pesquisadores estava trabalhando juntamente com estudantes de graduao em intervenes na cidade. Desenvolvemos a instalao oratrio, em frente a Igreja principal, que consiste em um aparato (caixa, estruturas tensegrity, roldanas, fita e projetor) em que possvel escrever pedidos em bilhetes e projet-los. O objetivo criar uma interao entre as pessoas por meio do imaginrio da f, materializada pela escrita dos pedidos. Na caixa esto disponveis bilhetes e uma caneta. Aps a escrita do pedido, o bilhete fotografado na caixa, percorre um caminho de ascenso nas estruturas tensegrity e retorna a caixa, sendo apagado quando passa por uma bacia com lcool. A imagem digitalizada do bilhete catalogada em um banco de dados e exibida em uma projeo na fachada da igreja.

Viso geral

Os desejos podem ser identificados usando-se cane tas de cores diferentes para cada lugar ou algum detalhe na transparncia.

Cidade Um
Aparato digitalizador de desejos e controlador do sistema de exibio.

Cidade Dois
internet

Cidade Trs
8

Servidor
Os desejos ficam armazenados no servidor organizados por data e local.

possvel enviar e visua lizar desejos de qualquer lugar por uma interface disponvel na internet.

Lugar Qualquer
9

Sistema local
Aparato digitalizador de Desejos
Este aparelho controla todo o sistema: a digitalizao dos desejos, o movimento das transparncias pelo varal e a projeo.

Sistema de movimentao dos bilhetes

O caminho percorrido pelos bilhetes definido pelo posicionamento das roldanas. Em nosso experimento no era possvel fixar as roldanas na parede, ento construmos dois tensegrities de bambu, que so estruturas autoportantes capazes de receber o peso do varal.

Projeo
Os desejos podem ser identificadas usandose canetas de cores diferentes para cada lugar ou algum detalhe na transparncia.

10

11

Etapas do funcionamento
4 3 1

1. Retirar caneta
Na ponta da tampa da caneta h um im e no caneteiro, um reed switch. Ao retirar a caneta, o reed switch ativado e manda um sinal para o sistema parar ao chegar uma transparncia.

2. Escrever o desejo
2
Com a caneta o usurio escreve um desejo na transparncia e ao colocar a caneta no caneteiro o sistema volta a funcionar.

3. Digitalizar
O bilhete caminha alguns centmetros at chegar no local onde ser digitalizado.

4. Percorrer caminho
Aps digitalizado o bilhete percorre um caminho de asceno at retornar ao aparato.

5. Limpeza
O trajeto concludo quando o bilhete passa pela bacia com lcool e apagado, sendo que a transparncia limpa retorna para o sistema.

12

13

Aparato digitalizador de desejos

1 2

1. Luminria
A luminria melhora a iluminao para a digitalizao. Pode ser feita de madeira ou papel paran e pintada de branco.

2. Caneta
A caneta informa ao sistema de quando este deve parar. uma caneta com tinta solvel em lcool para ser apagada da transparncia.

3. Caixa
Essa caixa armazena a maior parte do sistema eletrnico, inclusive o com-

putador. Pode ser feita de madeira ou caixa de plstico. O tamanho varia de

4 5

acordo com o computador usado, mas possvel encontrar caixas plsticas prontas.

4. Banco
Para suportar a caixa, pode-se fabricar uma estrutura de madeira ou fix-la em um banco comum de madeira.

5. Roldana inferior
A roldana inferior presa por uma barra rosqueada no banco e importante para a limpeza do bilhete.

14

15

Aparato digitalizador de desejos

1
b a

1. Conector jacar
Para facilitar a manuteno, o topo da caixa dever ser mvel. Para simplificar o processo de abertura, recomenda-se o uso de plugs jacar nas partes do sistema eletrnico que so fixadas na tampa.

2. Barra rosqueada
A luminria deve ser removvel para facilitar o transporte, por isso, devem ser usadas barras rosqueadas aparafusadas na caixa da luminria.

c d e f g

3
h

3. Sistema eletro-mecnico
O sistema eletro-mecnico ser explicado mais detalhadamente no prxi mo captulo. Seus componentes esto indicados pelas letras na imagem ao lado: A: Luminria, B: Caneta + Im + Reed Switch, C: Webcam, D: Computador, E: Motor de passo, F: Driver controlador, G: Arduino, H: Filtro de linha.

4. Banco + Bacia
4
A bacia pode ser colocada em qualquer local do percurso, mas optamos por apoi-la no banco que suporta o kit para facilitar o transporte e montagem.

16

17

Sistema eletro-mecnico
1 2 3

1. luminria
A luminria garante boas condies de iluminao para a digitalizao do bilhete pela webcam. Ela ligado por um interruptor e alimentada por uma fonte 9V ligada ao filtro de linha.

2. webcam
A webcam est ligada diretamente no computador e tira fotos dos bilhetes conforme a programao.

4 5 7 8 9

3. projetor
O projetor est ligado diretamente no computador e exibe imagens dos bilhetes digitalizados.

4. Caneta + Reed Switch

A caneta funciona como um interruptor. Ao ser retirada do caneteiro um im em sua tampa ativa o reed switch ordenando a parada do sistema assim que chega um bilhete limpo. Ao ser colocada de volta, o mecanismo retoma o movimento.

10
18

5. Computador
O computador controla todo o sistema enviando imagens para o projetor e comandos para o Arduino. Usamos um Mac Mini no experimento.

19

Sistema eletro-mecnico
1 2 3

6. Filtro de linha
O filtro de linha usado como uma extenso do nmero de tomadas disponveis.

7. Arduino
O Arduino o responsvel pela comunicao entre o computador e os sistemas eltricos mais simples como o driver controlador do motor de passo e o reed switch no caneteiro.

4 5 7 8 9

8. Driver
Para controlar o motor de passo necessrio um driver especfico que pode ser controlado pelo Arduino.

9. Motor de passo
O motor de passo controla o sistema de movimentao dos bilhetes. Existem diferentes motores de passo, portanto saiba qual voc usar para comprar o driver correto.

10. Bacia com lcool

10
20
A bacia com lcool a ltima etapa do percurso. Nela a tinta no bilhete removida, quando este mergulhado no lcool.

21

Sistema eletro-mecnico
Luminria
led
Trs grupos com quatro LEDs de alto brilho conectados em srie. Esta configurao pode mudar caso a fonte de energia seja diferente de 12V ou os LEDs operem em tenses diferentes de 3V.

Estrutura
A estrutura pode ser feita de papelo (paran, calandrado) cortada e colada com cola quente ou cola branca.

Fio de cobre
O fio de cobre conecta os componentes, e o acabamento pode ser feito com termo retrtil.

Barra + Porca
Para fixar a luminria na caixa principal, pode-se usar uma barra rosqueada para fusada com porca borboleta.

Interruptor
Utilizar um interruptor SPST, ou SPDT para ligar e desligar os leds.

Fonte
Fonte transformadora AC/DC com sada de 12V. possvel adaptar carregadores de celular.

22

23

Sistema eletro-mecnico
Caneta + Reed Switch
Caneta
Caneta com tinta solvel em lcool.

Conexo do reed switch com o arduino

Reed Switch

Resistncia 1k Tampa + Im
O im deve ser fixado na tampa da caneta e dever ser capaz de ativar o reed swtich.

Caneteiro +Reed Switch

O reed switch dever ser acoplado ao caneteiro que por sua vez estar fixado na tampa da caixa.

Arduino
O Arduino l o estado do reed switch, ou seja, se ele est ligado ou desligado. Quando a caneta retirada, o o reed switch desliga indicando para o Arduino parar o sistema para a pessoa escrever um bilhete.

GND

PIN 5 +5V

Arduino
A conexo com o Arduino est detalhada na prxima pgina.

Computador
No experimento foi usado um Mac Mini, mas qualquer computador que execute o Processing e tenha conexo com a internet pode ser usado.

24

25

Sistema eletro-mecnico
Motor de passo + Driver
Motor de passo
O motor de passo tem mais preciso e fora que os motores DC convencionais. Pode ser retirados de equipamentos de preciso como impressoras e scanners. Existem vrios tipos de motor de passo, como bipolar e unipolar.

Fonte
Fonte transformadora AC/DC com sada de 12V. possvel adaptar carregadores de celular.

GND Driver Controlador

Como o Arduino no fornece energia suficiente para o motor de passo necessrio utilizar um driver.

+12V

Roldanas
As roldanas podem ser compradas ou fabricadas com carretis ou madeira. A fixao no motor importante pois deve evitar o travamento da rotao por excesso de cola.

GND Arduino

PINOS DIGITAIS

Corda
Procure utilizar um corda leve para no sobrecarregar o motor e opaca para evitar acidentes.

Computador

26

27

Sistema eletro-mecnico
Webcam + Projetor
Projetor
O projetor dever ser ligado diretamente no computador. Para projetar em ambientes claros, importante que o projetor tenha um bom contraste e que o fluxo luminoso, medido em lumens, seja alto.

Programao
Arduino
O Arduino, alm de um microcontrolador, possui um software para programao das placas disponvel em http://arduino.cc/. Alm deste programa, podem ser necessrias configuraes extras que esto disponveis neste guia http://arduino.cc/en/Guide/HomePage. O cdigo usado no experimento est disponvel em anexo so necessrios diversos ajustes em funo da diferena entre os motores de passo e na montagem do sistema.

Processing
O Processing o software utilizado para desenvolver a interface responsvel pela comunicao do computador com o Arduino, a webcam, o servidor e o projetor. O cdigo est disponvel em anexo e para utiliz-lo necessrio fazer o download do Processing, disponvel em: http://processing.org/, e de algumas bibliotecas informadas no cdigo. Para o funcionamento em sistemas diferentes podem ser necessrios diversos ajustes.

Computador

Webcam
importante testar a webcam com o programa antes de compra-l para garantir a compatibilidade.

PHP + HTML + CSS + MySQL + Javascript

Para armazenar os bilhetes online necessrio ter um servidor conectado permanentemente internet, com IP fixo e com suporte a MySQL e PHP . Este tipo de servio pode ser alugado e chamado de hospedagem de websites. O cdigo est em anexo mas para a instalao recomenda-se ter conhecimento prvio de desenvolvimento web ou assistncia tcnica.

28

29

Programao
Arduino
// Desenvolvido por LAGEAR UFMG (http://arq.ufmg.br/lagear/) #include <Stepper.h> #define STEPS 200 int circuito = 100; // total de passos do circuito int passo = 0; int intervalo = 10; int fotoDist = 5; int fotoPasso = 0; int nbilhete = circuito/intervalo; boolean caneta = true; boolean canetaAnterior = true; boolean tirarFoto = false; int ledPin = 8; Stepper stepper(STEPS, 10, 9, 12, 11); void setup() { Serial.begin(9600); pinMode(13,INPUT); pinMode(8,OUTPUT); stepper.setSpeed(150); } void mover() { if(passo<circuito) { passo++; } else { passo = 0; } stepper.step(STEPS); } void loop() { if(digitalRead(13) == 0) { caneta = true; } else { caneta = false; } if(caneta){ if(!canetaAnterior) {

tirarFoto = true; } if(tirarFoto && fotoPasso==fotoDist) { fotoPasso = 0; tirarFoto = false; Serial.print(byte(1)); ` delay(2000); digitalWrite(ledPin, LOW); } else { if(tirarFoto) { digitalWrite(ledPin, HIGH); fotoPasso++; } mover(); } } else if(passo%intervalo != 0) { mover(); } canetaAnterior = caneta; //if(caneta) {Serial.println(true);}else{Serial.println(false);} //Serial.println(passo);

30

31

Programao
Processing
// library to send archives via http (see more: http://libraries.seltar.org/ postToWeb/javadoc/org/seltar/Bytes2Web/ImageToWeb.html) import org.seltar.Bytes2Web.*; // library to access cameras connected with the computer import processing.video.*; // library to communicate via serial port (this case with arduino) import processing.serial.*; // java basic, needed to threads import java.lang.*; // manipulate image import javax.swing.ImageIcon; import java.awt.*; import java.awt.image.PixelGrabber; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import javax.imageio.ImageIO; //flip buffered image import java.awt.image.AffineTransformOp; import java.awt.geom.AffineTransform; // fullscreen library import fullscreen.*; //physics library import fisica.*; FWorld mundo; int nbilhetes = 20; FBox[] bilhetes = new FBox[nbilhetes]; class takeAndSendPhoto extends Thread { Capture cam; Serial port; ImageToWeb imgtw; String url; String folderName; boolean running; takeAndSendPhoto(Capture c, Serial s, String u, ImageToWeb itw) { cam = c; port = s; url = u; folderName = test; running = false; imgtw = itw;

} void start() { running = true; super.start(); } void run() { while(running) { if(port.available()>0) { // test if the serial port is available byte[] input = port.readBytes(); // get the bytes from the serial port println(input); if(input[0] == 1) { sendPhoto(takePhoto()); } } } } void quit() { running = false; interrupt(); } BufferedImage flipHor(BufferedImage image) { AffineTransform tx = AffineTransform.getScaleInstance(-1, 1); tx.translate(-image.getWidth(null), 0); AffineTransformOp op = new AffineTransformOp(tx, AffineTransformOp.TYPE_NEAREST_NEIGHBOR); return op.filter(image, null); } // take photo from the webcam BufferedImage takePhoto() { if(cam.available()) { // test if the camera is available cam.read(); // refresh the camera pixels BufferedImage bfimg = toBufferedImage(cam.getImage()); // get an Image object from the camera object and transforms ina BufferedImage object return flipHor(bfimg); } else { return null; } } // transfom an Image into a BufferedImage BufferedImage toBufferedImage(Image image) { if (image instanceof BufferedImage) {return (BufferedImage)image;} image = new ImageIcon(image).getImage(); // This code ensures that all the pixels in the image are loaded boolean hasAlpha = hasAlpha(image); // Determine if the image has transparent pixels BufferedImage bimage = null; // Create a buffered image with a format thats

32

33

compatible with the screen GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment(); try { int transparency = Transparency.OPAQUE; // Determine the type of transparency of the new buffered image if (hasAlpha == true) {transparency = Transparency.BITMASK;} // Create the buffered image GraphicsDevice gs = ge.getDefaultScreenDevice(); GraphicsConfiguration gc = gs.getDefaultConfiguration(); bimage = gc.createCompatibleImage(image.getWidth(null), image. getHeight(null), transparency); } catch (HeadlessException e) {} //No screen if (bimage == null) { int type = BufferedImage.TYPE_INT_RGB; // Create a buffered image using the default color model if (hasAlpha == true) {type = BufferedImage.TYPE_INT_ARGB;} bimage = new BufferedImage(image.getWidth(null), image.getHeight(null), type); } Graphics g = bimage.createGraphics(); // Copy image to buffered image g.drawImage(image, 0, 0, null); // Paint the image onto the buffered image g.dispose(); return bimage; } // check if the image has alpha boolean hasAlpha(Image image) { // If buffered image, the color model is readily available if (image instanceof BufferedImage) {return ((BufferedImage)image).getColorModel().hasAlpha();} // Use a pixel grabber to retrieve the images color model; // grabbing a single pixel is usually sufficient PixelGrabber pg = new PixelGrabber(image, 0, 0, 1, 1, false); try {pg.grabPixels();} catch (InterruptedException e) {} return pg.getColorModel().hasAlpha(); // Get the images color model } // send photo to the server void sendPhoto(BufferedImage bfimg) { imgtw.setType(ImageToWeb.PNG); // choose PNG type to export image imgtw.post(folderName,url,imagem,false,toByteArray(bfimg)); // send to server } // transform BufferedImage into a PNG byte array byte[] toByteArray(BufferedImage bfimg) { ByteArrayOutputStream out = new ByteArrayOutputStream(); try { ImageIO.write(bfimg, png, out); } catch(Exception e) { e.printStackTrace();

} return out.toByteArray();

//retrive a photo from a webserver class retrivePhoto extends Thread { boolean running; boolean available; int id; int nextId; PImage img; String url; retrivePhoto(String u) { running = true; available = false; id = 0; url = u; nextId = 0; } void start() { running = true; super.start(); } void run() { while(running) { if(!available) { img = retrive(); available = true; } } } void quit() { running = false; interrupt(); } PImage retrive() { String[] imgAddress = loadStrings(url+id); //println(imgAddress); delay(2000); try { nextId = int(imgAddress[1]); } catch(Exception e) {} return loadImage(imgAddress[0]); } boolean available() {

34

35

return available;

PImage imagem() { available = false; if(nextId != id) { id = nextId; } else { id = 0; } return img; }

//Bilhete[] bilhetes = new Bilhete[6]; int i = 0; // Create the fullscreen object FullScreen fs; void setup() { // Initiate physics world Fisica.init(this); mundo = new FWorld(); mundo.setEdges(); mundo.remove(mundo.top); mundo.remove(mundo.bottom); mundo.setGravity(0, -10); // Create the fullscreen object fs = new FullScreen(this); // enter fullscreen mode fs.enter(); // set screen size size(1280,768); //println(Serial.list()); Serial s = new Serial(this,Serial.list()[0],9600); //println(Capture.list()); Capture c = new Capture(this,400,300,Capture.list()[2],30); ImageToWeb itw = new ImageToWeb(this); tasp = new takeAndSendPhoto(c, s, http://lagear/upload.php, itw); tasp.start(); photo = new retrivePhoto(http://lagear/getImage.php?id=); photo.start(); } void draw() { background(0); strokeCap(SQUARE); strokeWeight(width/60); stroke(255); int s = second()*width/60; line(s,height-20,s,height); if(photo.available()) { if(i<bilhetes.length) { //Bilhete newBilhete = new Bilhete(photo.imagem(),random(width400),random(height-300),width,height); //bilhetes[i] = newBilhete; bilhetes[i] = new FBox(120,90); PImage img = loadImage(D:/Dropbox/LAGEAR/Tripartite/Website/img/ test/20110331-175133-imagem.png); img.resize(120,90); bilhetes[i].attachImage(img); bilhetes[i].setVelocity(0, random(120)*(-1));

class Bilhete { PImage img; float x; float y; int w; int h; int xd = 1; int yd = 1; int vel = 1; Bilhete(PImage i, float px, float py, int wi, int he) { img = i; x = px; y = py; w = wi; h = he; } float[] getPos() { float [] pos = {x,y}; return pos; } float[] move() { if(x<0 || x>w-400) { xd *= -1; } if(y<0 || y>h-300) { yd *= -1; } x += xd*vel; y += yd*vel; return getPos(); } PImage getPhoto() { return img; } } takeAndSendPhoto tasp; retrivePhoto photo;

36

37

bilhetes[i].adjustPosition(random(width), height+random(400)); mundo.add(bilhetes[i]); i++; } else { i = 0; }

Programao
MySQL
Para criar a tabela no banco de dados use o seguite cdigo.
SET SQL_MODE=NO_AUTO_VALUE_ON_ZERO; --- Banco de Dados: `tripartite` --- ---------------------------------------------------------- Estrutura da tabela `messages` -CREATE TABLE IF NOT EXISTS `messages` ( `id` int(5) unsigned NOT NULL, `name` varchar(255) DEFAULT NULL, `relative_path` varchar(255) DEFAULT NULL, `created` timestamp NULL DEFAULT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8; --- Extraindo dados da tabela `messages` --

/* for(int j=0;j<bilhetes.length;j++) { try { float[] pos = bilhetes[j].getPos(); image(bilhetes[j].getPhoto(),pos[0],pos[1],200,150); } catch(Exception e) {} } */ // set the new opacity of the bilhetes for(int i = 0;i < nbilhetes;i++) { bilhetes[i].setImageAlpha(bilhetes[i].getY()*255/height); } // Draw world mundo.step(); mundo.draw();

38

39

PHP, HTML, CSS, Javascript

O programa no servidor web composto de vrios arquivos, todos devero estar na pasta principal com exceo do plugin jQuery que estar dentro da pasta js. A organizao da pasta raiz a seguinte: functions.php getImage.php index.php nextImage.php upload.php pasta: img (nesta pasta sero armazenadas as imagens) pasta: js (faa o download da verso mais recente do jQuery em http:// jquery.com/ e cole nesta pasta)

functions.php
<?php function HandleUploadedFile($fieldName, $destinationDir, $allowedExtensions) { global $debugData; if (isset($_FILES[$fieldName])) { $error = $_FILES[$fieldName][error]; switch ($error) { case UPLOAD_ERR_OK: break; case UPLOAD_ERR_INI_SIZE: case UPLOAD_ERR_FORM_SIZE: return array(, File too big!); case UPLOAD_ERR_PARTIAL: return array(, Incomplete upload, please retry.); case UPLOAD_ERR_NO_FILE: return array(, No file! Give a file in the upload field...); case UPLOAD_ERR_TMP_DIR: case UPLOAD_ERR_CANT_WRITE: return array(, Bad server config! Sorry...); case UPLOAD_ERR_EXTENSION: return array(, Bad file extension.); default: return array(, Error when uploading: $error); } $tempLocation = $_FILES[$fieldName][tmp_name]; $debugData .= Uploaded file is in: $tempLocation<br>\n; $debugData .= Other info given by browser (size, type): {$_FILES[$fieldName] [size]}, {$_FILES[$fieldName][type]}<br>\n; $fileSize = filesize($tempLocation); $debugData .= Real file size: $fileSize<br>\n; if ($fileSize == 0) { return array(, File is empty!); } if ($fileSize > MAX_FILE_SIZE) { return array(, File too big!); } $file = $_FILES[$fieldName][name]; $debugData .= Original file name: $file<br>\n; $file = preg_replace(!.*?([^\\/]+)$!, $1, $file); $debugData .= Filter 1: $file<br>\n; $file = preg_replace(/[^a-zA-Z0-9.-]+/, _, $file); $debugData .= Filter 2: $file<br>\n; if (preg_match(/^(.+)\.([^.]+)$/, $file, $m) == 0) { $extension = ; } else {

40

41

$file = $m[1]; $extension = $m[2];

getImage.php
<?php if(isset($_GET)) { $rootDir = /; $con = mysql_connect(localhost,root,root); if (!$con) die(Could not connect: .mysql_error()); mysql_select_db(tripartite, $con); $query = SELECT * FROM messages WHERE id>=.$_GET[id]. ORDER BY id LIMIT 2; if($result = mysql_query($query)) { $row = mysql_fetch_array($result); echo http:// . $_SERVER[SERVER_NAME] . $rootDir . $row[relative_ path] . $row[name].\n; $row = mysql_fetch_array($result); echo $row[id]; } mysql_close($con); } ?>

$debugData .= Split: $file $extension<br>\n; $file = substr($file, 0, MAX_FILE_NAME_LENGTH); $debugData .= Truncated: $file<br>\n; if ($extension != && !in_array($extension, $allowedExtensions)) { return array(, File format not allowed.); } $destinationDir = preg_replace(!([^/])$!, $1/, $destinationDir); if(!file_exists($destinationDir)) { if(!mkdir_recursive($destinationDir, 0777)){ return array(, Cannot create project folder. . (dest.: $destinationDir)); } chmod($destinationDir, 0777); } $prefix = date(Ymd-His-); $destinationFile = $prefix . $file . ($extension != ? . . $extension : ); $debugData .= Destination file: $destinationFile<br>\n; $destinationPath = $destinationDir . $destinationFile; $debugData .= Destination path: $destinationPath<br>\n; if (!move_uploaded_file($tempLocation, $destinationPath)) { return array(, Failed to move upload file. . (dest.: $destinationPath)); } chmod($destinationDir.$destinationFile, 0777); return array($destinationFile, $destinationPath); } else { return array(, Field not found); } } function mkdir_recursive($pathname, $mode) { is_dir(dirname($pathname)) || mkdir_recursive(dirname($pathname), $mode); return is_dir($pathname) || @mkdir($pathname, $mode); } function savePathToDatabase($name,$relativePath) { $con = mysql_connect(localhost,root,root); if (!$con) return die(Could not connect: .mysql_error()); mysql_select_db(tripartite, $con); $query = INSERT INTO messages (name, relative_path, created) VALUES (.$name. ,.$relativePath.,NOW()); if(!mysql_query($query)) return Could not save in database.\n; mysql_close($con); } ?>

index.php
<!DOCTYPE html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /> <title>LAGEAR</title> <style type=text/css> body { margin: 5px 0 0 5px; } h1 { font-weight: normal; text-align: center; } ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline; } a { text-decoration: none; } img.show { display: none;

42

43

 border: 2px solid #999; margin: 0 5px 5px 0; width: 100px; height: 75px; } img.show:hover { border-color: #f00; } </style> <script type=text/javascript src=js/jquery-1.4.4.min.js></script> <script type=text/javascript> $(document).ready(function(){ var id = 1; var nextid; var go = false; setInterval( function nextImage() { if(nextid==null) {nextid=id;} if(go) { $.ajax({ url: http://lagear/nextImage.php?id=+nextid, success: function(data){ $(#imagens).append(data); id = $(#imagens .show:last).attr(title); nextid = $(#imagens .id:last).attr(title); $(#imagens .show:last).fadeIn(500); if(nextid==null) { nextid = id; } else { go = false; } } }); } else { $.ajax({ url: http://lagear/nextImage.php?id=+nextid, success: function(data){ $(#imagens).append(data); id = $(#imagens .show:last).attr(title); nextid = $(#imagens .id:last).attr(title); if(nextid==null) { nextid = id; } else { nextid = id; go = true; } } }); } }, 3000); });

</script> </head> <body> <h1>Tripartite Network</h1> <div id=imagens></div> </body> </html>

nextImage.php
<?php if(isset($_GET[id])) { $imgLoad = 1; // number of images you want to load $con = mysql_connect(localhost,root,root); if (!$con) die(Could not connect: .mysql_error()); if(!mysql_select_db(tripartite, $con)) echo Could not find table!; $query = SELECT * FROM messages WHERE id >= .$_GET[id]. ORDER BY id LIMIT .($imgLoad+1); if($result = mysql_query($query)) { for($i=0;$i<$imgLoad;$i++) { $row = mysql_fetch_array($result); echo <a class=.show href=/img/test/.$row[name]. title=.$row[id].><img class=show src=.$row[relative_ path].$row[name]. /></a>; } if($row = mysql_fetch_array($result)) { echo <span class=id title=.$row[id].></span>; } else { echo <span class=id title=null></span>; } } else { return Fail to select from table.; } mysql_close($con); } ?>

upload.php
<?php // start variable to count how much time the software spend $time_start = microtime(true); include(functions.php); define(MAX_FILE_NAME_LENGTH, 100); define(MAX_FILE_SIZE, 2000000);

44

45

$destDir = img/; $rootDir = /; $debugData = ; foreach($_FILES as $title=>$file) { break; } unset($file); $destDir .= $title./; $result = HandleUploadedFile($title, ./.$destDir, array(png, gif, jpg, jpeg, pdf,ps,tiff,tif, txt)); if ($result[0] == ) { echo <p><b>Error:</b> {$result[1]}</p>\n; } else { // $imgURL = http:// . $_SERVER[SERVER_NAME] . $rootDir . $destDir . $result[0] . \n; echo savePathToDatabase($result[0],$destDir); } // calculates the time spent and print $time_spent = microtime(true)-$time_start; echo round($time_spent,5). s\n; ?>

46