processing : interface

Ynk · 2009-12-09 02:03:39

bonsoir, je viens à nouveau vers vous, car j'essaie de faire une interface et je n'arrive pas à résoudre un problème d'affichage de panneaux type illustrator, photoshop,etc.

en gros je clique sur l'icône qui déploie le panneau, mais lorsque je développe plusieurs panneaux et que j'en referme un, tous les autres sont effacés et ne reste plus que les icones, qui elles restent développées...

normal me direz-vous, car j'utilise un background qui efface tous, sauf mes icônes importées. Mais si je ne met pas ce background, je ne peux plus "ranger" mes panneaux

ca ne doit pas etre tres explicite, alors voici mon code si quelqu'un veut bien me donner un coup de pouce

merci !

le problème se trouve là je pense :

if (onOff == false){
x = x-200;
//background(120);
fill(50);
noStroke();
rect(x+32,y,160,300);
rect(x+32,y,200,32);
fill(120);
rect(x,y-8,200,8);//cache
onOff = true;
}
else if (onOff == true){
background(120);
onOff = false;
background(120);
x = x+200;
}

et les fichiers du dossier data sont en pièce jointe

et le code complet :

ImageButtons serif,langue,corps,apercu,style,alternate,support,glyphe;

void setup()
{
  size(1200, 900);
  background(120);

  // Define and create image button
  PImage b0 = loadImage("interface/serif1.gif");
  PImage r0 = loadImage("interface/serif2.gif");

  PImage b1 = loadImage("interface/langue1.gif");
  PImage r1 = loadImage("interface/langue2.gif");

  PImage b2 = loadImage("interface/corps1.gif");
  PImage r2 = loadImage("interface/corps2.gif");

  PImage b3 = loadImage("interface/apercu1.gif");
  PImage r3 = loadImage("interface/apercu2.gif");

  PImage b4 = loadImage("interface/style1.gif");
  PImage r4 = loadImage("interface/style2.gif");

  PImage b5 = loadImage("interface/alternate1.gif");
  PImage r5 = loadImage("interface/alternate2.gif");

  PImage b6 = loadImage("interface/support1.gif");
  PImage r6 = loadImage("interface/support2.gif");

  PImage b7 = loadImage("interface/glyphe1.gif");
  PImage r7 = loadImage("interface/glyphe2.gif");

  serif = new ImageButtons(1168, 100, 32, 32, b0, r0);
  langue = new ImageButtons(1168, 140, 32, 32, b1, r1);
  corps = new ImageButtons(1168, 180, 32, 32, b2, r2);
  apercu = new ImageButtons(1168, 220, 32, 32, b3, r3);
  style = new ImageButtons(1168, 260, 32, 32, b4, r4);
  alternate = new ImageButtons(1168, 300, 32, 32, b5, r5);
  support = new ImageButtons(1168, 340, 32, 32, b6, r6);
  glyphe = new ImageButtons(1168, 380, 32, 32, b7, r7);

}

void draw()
{
  serif.update();
  serif.display();

  langue.update();
  langue.display();

  corps.update();
  corps.display();

  apercu.update();
  apercu.display();

  style.update();
  style.display();

  alternate.update();
  alternate.display();

  support.update();
  support.display();

  glyphe.update();
  glyphe.display();
}

////////////////////////

class Button
{
  int x, y;
  int w, h;
  color basecolor, highlightcolor;
  color currentcolor;
  boolean over = false;
  boolean pressed = false;   

  void pressed() {
    if(over && mousePressed) {
      pressed = true;
    } 
    else {
      pressed = false;
    }    
  }

  boolean overRect(int x, int y, int width, int height) {
    if (mouseX >= x && mouseX <= x+width && 
      mouseY >= y && mouseY <= y+height) {
      return true;
    } 
    else {
      return false;
    }
  }
}

////////////////////////

class ImageButtons extends Button 
{
  PImage base;
  PImage roll;
  PImage currentimage;
  boolean onOff = false;

  ImageButtons(int ix, int iy, int iw, int ih, PImage ibase, PImage iroll) 
  {
    x = ix;
    y = iy;
    w = iw;
    h = ih;
    base = ibase;
    roll = iroll;
    //down = idown;
    currentimage = base;
  }

  void update() 
  {
    over();
    pressed();
    if(pressed) {
      if (onOff == false){
        x = x-200;
        //background(120);
        fill(50);
        noStroke();
        rect(x+32,y,160,300);
        rect(x+32,y,200,32);
        fill(120);
        rect(x,y-8,200,8);//cache
        onOff = true;
      }
      else if (onOff == true){
        background(120);
        onOff = false;
        background(120);
        x = x+200;
      }

    } 
    else if (over){
      currentimage = roll;
    } 
    else {
      currentimage = base;
    }
  }

  void over() 
  {
    if( overRect(x, y, w, h) ) {
      over = true;
    } 
    else {
      over = false;
    }
  }

  void display() 
  {
    image(currentimage, x, y);
  }

}

Dernière modification par Ynk (2009-12-09 02:04:45)

emoc · 2009-12-10 09:35:32

Bonjour,

J'ai essayé différents trucs dans ton code mais sans trouver de solutions évidentes. Voila peut-être une piste mais elle implique du nouveau code : d'abord sortir les fonctions background() du display() de chaque objet pour avoir un seul rafraichissement du fond dans le draw() principal, ensuite créer une "pile" qui permette de dessiner les éléments de ton menu dans l'ordre en commençant par celui qui est le plus en dessous, ce qui permettra d'avoir une superposition correcte. En pratique, tu aurais besoin d'un tableau à définir au début (la pile) et un ArrayList contenant tous les éléments du menu. A chaque draw() parcourir la pile (qui contient l'identifiant de chaque élément), choper l'identifiant, chercher dans l'ArrayList l'élément qui a cet identifiant, l'afficher, passer au suivant.

Peut-être qu'il y a une solution plus simple, mais je ne la vois pas...

Ynk · 2009-12-10 12:51:09

bonjour emoc,

Merci une fois de plus d'avoir pris du temps pour moi
je ne suis pas contre tout refaire puisque ca ne marche pas jusqu'à maintenant
je vais essayer ta méthode, et je vous tiendrais au courant si j'arrive à quelque chose

si quelqu'un a une solution, je ne suis pas contre

merci

Annonce

#1 2009-12-09 02:03:39 interface

interface

#2 2009-12-10 09:35:32 Re : interface

Re: interface

#3 2009-12-10 12:51:09 Re : interface

Re: interface

Pied de page des forums