Академический Документы
Профессиональный Документы
Культура Документы
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.
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.
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
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-
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
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.
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.
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.
Resistncia 1k Tampa + Im
O im deve ser fixado na tampa da caneta e dever ser capaz de ativar o reed swtich.
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.
+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.
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
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
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
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); });
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