Arrastar e largar ficheiros e pastas “para dentro” do sketch em tempo real

Um dos requisitos muito procurados sempre durante o ano é a personalização em tempo real dos skeches. Uma biblioteca que permite fazer isto é a Drop: http://transfluxus.github.io/drop/

Com esta biblioteca, podemos arrastar um ficheiro (p. ex. uma imagem) ou uma pasta inteira para carregar os respetivos ficheiros (por ordem, ou seletivamente—basta personalizar o algoritmo) “para dentro” do nosso sketch de processing em tempo real.

Vi isto a primeira vez em uso pelo Filipe, numa aplicação que usamos na Academia de Verão que fizemos na UA. Funciona surpreendentemente bem. E, usada corretamente, permite fazer a personalização das “skins” das nossas aplicações. Isto é, carregar settings (valores pré-configurados de variáveis, p. ex.) a partir de um ficheiro .txt (com o loadStrings() associado). Ou, como sugeri a um dos grupos este ano, carregar uma skin para a aplicação. Como se se tratasse de temas visuais.

Fica aqui um exemplo rápido comentado. Para este exemplo, parti do princípio que na pasta “data” existe um conjunto de pastas “set_1”, “set_2”, … sempre com a mesma estrutura interna de pastas/ficheiros de “/img/cat.png” e “img/dog.png”, etc… e “snd/cat.wav”, “snd/dog.wav”, etc.

Basta arrastar qualquer pasta “set_x” para cima do sketch de Processing que ele carrega em tempo real e modifica todos os assets: imagens, fontes, textos, vídeos, sons, textos, etc…

//PAmado, 2020-05-18: A partir do exemplo DropFilesAndFolders e DropBasics fornecido na biblioteca

// Importar biblioteca (usar o Sketch > Import Library > Add Library… primeiro
import drop.*;

// declarar objeto "drag&drop"
SDrop drop;

// variável para armazenar o valor da root folder do nosso tema
String folderString = "";

// a estrutura das pastas é sempre idêntica > os ficheiros têm o mesmo nome (como uma skin normal)
// set_1/
//       img/
//          cat.png
//          chicken.png
//          dog.png
//       snd/
//          cat.wav
//          chicken.wav
//          dog.wav
// set_2/
//       img/
//          cat.png
//          chicken.png
//          dog.png
//       snd/
//          cat.wav
//          chicken.wav
//          dog.wav

// imagens para personalizar
PImage one, two, three;

void setup() {
  size(1200, 400);
  drop = new SDrop(this);   // inicializar biblioteca

  if (folderString != "") {    // podemos passar um parâmetro inicial, ou não, para ter valores default
    loadFolder(folderString);
  }
}

void draw() {
  background(120);

  fill(255);

  text("listing files from: "+folderString, 10, 40);

  // caso já tenha sido carregada uma pasta no programa, fazer load das imagens personalizadas
  if (folderString != "") {
    image(one, 10, 80);
    image(two, 250, 80);
    image(three, 400, 80);
  }
}


// função de carregamento das imagens "custom"

void loadFolder(String fs) {
  // loading activity : images from the drop folder

  one = loadImage(fs+"/img/cat.png");        // atenção à estrutura interna /nomes dos ficheiros na pasta: devem ser sempre iguais
  println("loaded one: "+fs+"/img/cat.png");

  two = loadImage(fs+"/img/chicken.png");
  println("loaded two: "+fs+"/img/chicken.png");

  three = loadImage(fs+"/img/dog.png");
  println("loaded three: "+fs+"/img/dog.png");
}

// evento chamado pela biblioteca quando se "larga" um objeto (ficheiro ou pasta) no sketch
void dropEvent(DropEvent theDropEvent) {
  
  if (theDropEvent.file().isDirectory()) {     // verifica se o "drop" corresponde a uma pasta
    folderString = theDropEvent.toString();    // lê o caminho da pasta e carrega o string
    println("folder: "+folderString);

    loadFolder(folderString);                  // chama a função para carregar imagens
  }

}