Searching for coding help in Processing3

Hey there,
I’m a little student from germany. I want to do a sketch in Processing for a “Configurator”.
But i struggle a lot with coding in Processing.
I posted a picture with the explanation.
If someone can help me out with the Coding it would be awesome.

All in all i have 18 pictures for all variations, but they overlap and i cant fix that.
when i decide to take other colours or attachments the “previous setting picture” should be replace with the new picture which isnt the case right now.

This is for the toggleButton.

// "OnOffTest" bestimmt ob leder/Stoff
 noStroke();
 if (OnOffTest.myStateActive) {
   image(myImage2,350, 110);
 } else {
   image(myImage1,350, 110);
 }
   


 // "tabButtonTest" bestimmt 3 farbvarianten
 if (tabButtonTest.activeTab == 0) {
   image(myImage2, 350, 110);
 } else if (tabButtonTest.activeTab == 1) {
   image(myImage4, 350, 110);
 } else if (tabButtonTest.activeTab == 2) {
     image(myImage5, 350, 110);
 }

thats the togglebutton and tabbutton. But i need to connect them somehow with each other. So if leather is set, the colour images for leather appears in the tabbutton and for fabric, the coloured fabric pics. Now it just shows the colour set for fabric and i cant switch between leather and fabric anymore. I think the colour choice just overlaps the first option and i cant fix that.

Edit:

// "OnOffTest" bestimmt ob leder/Stoff
  noStroke();
  if (OnOffTest.myStateActive) {
    image(myImage2,350, 110);
  } else {
    image(myImage1,350, 110);
  }
    


  // "tabButtonTest" bestimmt 3 farbvarianten
  if (OnOffTest.myStateActive) {
  if (tabButtonTest.activeTab == 0) {
    image(myImage2, 350, 110);
  } else if (tabButtonTest.activeTab == 1) {
    image(myImage4, 350, 110);
  } else if (tabButtonTest.activeTab == 2) {
      image(myImage5, 350, 110);
  }
  }
  
   // "tabButtonTest2" bestimmt 3 farbvarianten
  if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 0) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage5, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage7, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage6, 350, 110);
  }
  }
  }
  
  if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 1) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage4, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage9, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage8, 350, 110);
  }
  }
  }
  
    if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 2) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage2, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage11, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage10, 350, 110);
  }
  }
  }

Now the first variation for fabric works. All combinations work.
But i dont know how i write the next part so if the toggle button is on the “other side” for leather.
In the first part i wrote everytime

if (OnOffTest.myStateActive) {

In front of the tabbutton.

Whats the opposite for that? so its only for the “leather side”

Hi,
can you please upload pictures or change your code somehow so we can try to run it?

Ok so here’s my first thought: You don’t draw a background() so all picktures overlap. However I can’t tell because you only posted a part of your code :wink:

Hey,
sorry im not really into forum stuff, so sorry for that.
Ill send the complete folder.

Cant attach it :frowning:
Do you know how i can upload it save? Because i dont want you to get sth like a virus

Here the code without images, fonts and stuff :>

Produktkonfigurator: (“Main”)

toggleButton OnOffTest;
tabButton tabButtonTest;
tabButton2 tabButtonTest2;
PFont myFontUI;
PFont myFont;
PFont myFont1;
PFont myFont2;
PFont myFont3;
PFont myFont4;
PImage myImage1;
PImage myImage2;
PImage myImage3;
PImage myImage4;
PImage myImage5;
PImage myImage6;
PImage myImage7;
PImage myImage8;
PImage myImage9;
PImage myImage10;
PImage myImage11;
PImage myImage12;






void setup() {
  size(1024, 768);
  OnOffTest = new toggleButton(170, 130);
  tabButtonTest = new tabButton(100, 300, 4);
  tabButtonTest2 = new tabButton2(100, 400, 4);
  myFontUI = createFont("lmmono10-regular.otf", 32);
  myFont = createFont("Montserrat-Regular.ttf", 25);
  myFont1 = createFont("Blacksword.otf", 25);
  myFont2 = createFont("Raleway-ExtraLight.ttf", 25);
  myFont3 = createFont("riesling.ttf", 40);
  myFont4 = createFont("Montserrat-Bold.ttf", 40);
  myImage1 = loadImage("Lederweiß.png");
  myImage2 = loadImage("Stoffweiß.png");
  myImage3 = loadImage("verlauf-bg.png");
  myImage4 = loadImage("Stoffgrün.png");
  myImage5 = loadImage("Stoffblau.png");
  myImage6 = loadImage("Stoffblauohne.png");
  myImage7 = loadImage("Stoffblauholz.png");
  myImage8 = loadImage("Stoffgrünohne.png");
  myImage9 = loadImage("Stoffgrünholz.png");
  myImage10 = loadImage("Stoffweißohne.png");
  myImage11 = loadImage("Stoffweißholz.png");
  textFont(myFontUI);
}

void draw() {
  colorMode(RGB, 255, 255, 255);
  background(255);  
  noTint();
  colorMode(HSB, 360, 100, 100);
  textFont(myFontUI);
  text("Stoff", 90, 135);
  text("Leder", 240, 135);
  text("Farbe", 200, 280);
  textFont(myFont4);
  text("Couch", 500, 30);
 

  colorMode(RGB, 255, 255, 255);
  fill(150);
 
  
  
  
  
  //zeichen der Interfaceelemente
  OnOffTest.draw();
  tabButtonTest.draw();
  tabButtonTest2.draw();
  
  // "OnOffTest" bestimmt ob leder/Stoff
  noStroke();
  if (OnOffTest.myStateActive) {
    image(myImage2,350, 110);
  } else {
    image(myImage1,350, 110);
  }
    


  // "tabButtonTest" bestimmt 3 farbvarianten
  if (OnOffTest.myStateActive) {
  if (tabButtonTest.activeTab == 0) {
    image(myImage2, 350, 110);
  } else if (tabButtonTest.activeTab == 1) {
    image(myImage4, 350, 110);
  } else if (tabButtonTest.activeTab == 2) {
      image(myImage5, 350, 110);
  }
  }
  
   // "tabButtonTest2" bestimmt 3 farbvarianten
  if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 0) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage5, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage7, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage6, 350, 110);
  }
  }
  }
  
  if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 1) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage4, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage9, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage8, 350, 110);
  }
  }
  }
  
    if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 2) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage2, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage11, 350, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage10, 350, 110);
  }
  }
  }
  
 
  
  //der in "textFieldTest" geschriebene Text wird abgebildet
  
}

void mousePressed() {
  OnOffTest.mousePressed();
  tabButtonTest.mousePressed();
  tabButtonTest2.mousePressed();
}

void mouseDragged() {
}

void mouseReleased() {
}

void keyPressed() {
}



boolean insideRect(int xPos, int yPos, int targetXPos, int targetYPos, int targetWidth, int targetHeight) {
  if (xPos > targetXPos && xPos < targetXPos + targetWidth && yPos > targetYPos && yPos < targetYPos + targetHeight) {
    return true;
  }
  return false;
}

TabButton:

class tabButton {
  int myXPos = 0;
  int myYPos = 0;
  int myWidth = 202;
  int myHeight = 30;
  int numOfTabs;
  color backgroundColor = color(30, 30, 30);
  color inactiveColor = color(150, 150, 150);
  color forgroundColor = color(200, 200, 200);
  int activeTab = 0;

  tabButton(int xPos, int yPos, int nTabs) {
    myXPos = xPos;
    myYPos = yPos;
    numOfTabs = 3;
  }

  void draw() {
    pushMatrix();
    translate(myXPos, myYPos);
    noStroke();
    fill(backgroundColor);
    rect(0, 0, myWidth, myHeight, 8);
    fill(forgroundColor);
    for (int i = 0; i < numOfTabs; i++) {
      if (i == activeTab) {
        fill(forgroundColor);
      } else {
        fill(inactiveColor);
      }
      if (i == 0) {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4, 5, 0, 0, 5);
      } else if (i == numOfTabs-1) {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4, 0, 5, 5, 0);
      } else {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4);
      }
    }
    popMatrix();
    
  }


  void mousePressed() {
    for (int i = 0; i < numOfTabs; i++) {
      if (insideRect(mouseX, mouseY, myXPos+2 + i * (myWidth-2)/numOfTabs, myYPos+2, (myWidth-4)/numOfTabs-2, myHeight-4)) {
        activeTab = i;
      }
    }
  }
}

TabButton2:

class tabButton2 {
  int myXPos = 0;
  int myYPos = 0;
  int myWidth = 202;
  int myHeight = 30;
  int numOfTabs;
  color backgroundColor = color(30, 30, 30);
  color inactiveColor = color(150, 150, 150);
  color forgroundColor = color(200, 200, 200);
  int activeTab = 0;

  tabButton2(int xPos, int yPos, int nTabs) {
    myXPos = xPos;
    myYPos = yPos;
    numOfTabs = 3;
  }

  void draw() {
    pushMatrix();
    translate(myXPos, myYPos);
    noStroke();
    fill(backgroundColor);
    rect(0, 0, myWidth, myHeight, 8);
    fill(forgroundColor);
    for (int i = 0; i < numOfTabs; i++) {
      if (i == activeTab) {
        fill(forgroundColor);
      } else {
        fill(inactiveColor);
      }
      if (i == 0) {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4, 5, 0, 0, 5);
      } else if (i == numOfTabs-1) {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4, 0, 5, 5, 0);
      } else {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4);
      }
    }
    popMatrix();
    
  }


  void mousePressed() {
    for (int i = 0; i < numOfTabs; i++) {
      if (insideRect(mouseX, mouseY, myXPos+2 + i * (myWidth-2)/numOfTabs, myYPos+2, (myWidth-4)/numOfTabs-2, myHeight-4)) {
        activeTab = i;
      }
    }
  }
}

toggleButton:

class toggleButton {
  int myXPos = 0;
  int myYPos = 0;
  int myWidth = 60;
  int myHeight = 20;
  color backgroundColor = color(30, 30, 30);
  color forgroundColor = color(200, 200, 200);
  boolean myStateActive = false;

  toggleButton(int xPos, int yPos) {
    myXPos = xPos;
    myYPos = yPos;
  }

  void draw() {
    pushMatrix();
    translate(myXPos, myYPos);
    noStroke();
    fill(backgroundColor);
    rect(0, 0, myWidth, myHeight, 8);
    fill(forgroundColor);
    if (myStateActive) {
      rect(0+2, 0+2, myWidth*0.6-4, myHeight-4, 5);
    }  else {
      rect(0+myWidth-myWidth*0.6+2, 0+2, myWidth*0.6-4, myHeight-4, 5);
    }
    popMatrix();
  }

  void mousePressed() {
    if (insideRect(mouseX, mouseY, myXPos, myYPos, myWidth, myHeight)) {
      myStateActive = !myStateActive;
    }
  }
  
}

For a sketch w/ assets, like images, audios, videos, fonts, etc., you can create a repo for it at GitHub.com:
Create a repo - GitHub Docs

And then drag & drop your whole sketch folder into it:

Hey there,
thanks a lot :slightly_smiling_face:
I hope i did it right :cry:

Here is the link:

Github zip

You should drag & drop your raw sketch folder into your repo, not some packaged/compressed file of it! :face_with_monocle:

An example of a sketch folder w/ assets uploaded to a repo: :innocent:

Now the should be a new folder.

Raw Data

Dont worry about formatting or sth like that.
I just need the code to work ^^

Much better: :+1:

Github Sketch Processing

Slightly better Version. Only Problem now is, i have no clue how to declare the other side of my toggle button.
If someone doesnt want to open the link here is " main " and “togglebutton”:

toggleButton OnOffTest;
tabButton tabButtonTest;
tabButton2 tabButtonTest2;
PFont myFontUI;
PFont myFont;
PFont myFont1;
PFont myFont2;
PFont myFont3;
PFont myFont4;
PImage myImage1;
PImage myImage2;
PImage myImage3;
PImage myImage4;
PImage myImage5;
PImage myImage6;
PImage myImage7;
PImage myImage8;
PImage myImage9;
PImage myImage10;
PImage myImage11;
PImage myImage12;






void setup() {
  size(1024, 768);
  OnOffTest = new toggleButton(100, 130);
  tabButtonTest = new tabButton(30, 250, 4);
  tabButtonTest2 = new tabButton2(30, 350, 4);
  myFontUI = createFont("lmmono10-regular.otf", 32);
  myFont = createFont("Montserrat-Regular.ttf", 25);
  myFont1 = createFont("Blacksword.otf", 25);
  myFont2 = createFont("Raleway-ExtraLight.ttf", 25);
  myFont3 = createFont("riesling.ttf", 40);
  myFont4 = createFont("Montserrat-Bold.ttf", 40);
  myImage1 = loadImage("Lederweiß.png");
  myImage2 = loadImage("Stoffweiß.png");
  myImage3 = loadImage("verlauf-bg.png");
  myImage4 = loadImage("Stoffgrün.png");
  myImage5 = loadImage("Stoffblau.png");
  myImage6 = loadImage("Stoffblauohne.png");
  myImage7 = loadImage("Stoffblauholz.png");
  myImage8 = loadImage("Stoffgrünohne.png");
  myImage9 = loadImage("Stoffgrünholz.png");
  myImage10 = loadImage("Stoffweißohne.png");
  myImage11 = loadImage("Stoffweißholz.png");
  textFont(myFontUI);
}

void draw() {
  colorMode(RGB, 255, 255, 255);
  background(myImage3);  
  noTint();
  colorMode(HSB, 0, 0, 0);
  fill(0,0,0);
  textFont(myFontUI);
  text("Stoff", 15, 150);
  text("Leder", 165, 150);
  text("Farbvariation", 20, 230);
  text("Ausstattung", 35, 330);
  textFont(myFont4);
  text("Couchkonfigurator", 270, 40);
  
 

  colorMode(RGB, 0, 0, 0);
  fill(0);
 
  
  
  
  
  //zeichen der Interfaceelemente
  OnOffTest.draw();
  tabButtonTest.draw();
  tabButtonTest2.draw();
  
  // "OnOffTest" bestimmt ob leder/Stoff
  noStroke();
  if (OnOffTest.myStateActive) {
    image(myImage2,280, 110);
  } else {
    image(myImage1,280, 110);
  }
    


  // "tabButtonTest" bestimmt 3 farbvarianten
  if (OnOffTest.myStateActive) {
  if (tabButtonTest.activeTab == 0) {
    image(myImage2, 280, 110);
  } else if (tabButtonTest.activeTab == 1) {
    image(myImage4, 280, 110);
  } else if (tabButtonTest.activeTab == 2) {
      image(myImage5, 280, 110);
  }
  }
  
   // "tabButtonTest2" bestimmt 3 farbvarianten
  if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 0) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage5, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage7, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage6, 280, 110);
  }
  }
  }
  
  if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 1) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage4, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage9, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage8, 280, 110);
  }
  }
  }
  
    if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 2) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage2, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage11, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage10, 280, 110);
  }
  }
  }
  
 
  
  //der in "textFieldTest" geschriebene Text wird abgebildet
  
}

void mousePressed() {
  OnOffTest.mousePressed();
  tabButtonTest.mousePressed();
  tabButtonTest2.mousePressed();
}

void mouseDragged() {
}

void mouseReleased() {
}

void keyPressed() {
}



boolean insideRect(int xPos, int yPos, int targetXPos, int targetYPos, int targetWidth, int targetHeight) {
  if (xPos > targetXPos && xPos < targetXPos + targetWidth && yPos > targetYPos && yPos < targetYPos + targetHeight) {
    return true;
  }
  return false;
}
class tabButton2 {
  int myXPos = 0;
  int myYPos = 0;
  int myWidth = 202;
  int myHeight = 30;
  int numOfTabs;
  color backgroundColor = color(30, 30, 30);
  color inactiveColor = color(150, 150, 150);
  color forgroundColor = color(200, 200, 200);
  int activeTab = 0;

  tabButton2(int xPos, int yPos, int nTabs) {
    myXPos = xPos;
    myYPos = yPos;
    numOfTabs = 3;
  }

  void draw() {
    pushMatrix();
    translate(myXPos, myYPos);
    noStroke();
    fill(backgroundColor);
    rect(0, 0, myWidth, myHeight, 8);
    fill(forgroundColor);
    for (int i = 0; i < numOfTabs; i++) {
      if (i == activeTab) {
        fill(forgroundColor);
      } else {
        fill(inactiveColor);
      }
      if (i == 0) {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4, 5, 0, 0, 5);
      } else if (i == numOfTabs-1) {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4, 0, 5, 5, 0);
      } else {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4);
      }
    }
    popMatrix();
    
  }


  void mousePressed() {
    for (int i = 0; i < numOfTabs; i++) {
      if (insideRect(mouseX, mouseY, myXPos+2 + i * (myWidth-2)/numOfTabs, myYPos+2, (myWidth-4)/numOfTabs-2, myHeight-4)) {
        activeTab = i;
      }
    }
  }
}

Have really not to much knowledge about this if else thing.
To get one side going of the button i wrote:
if (OnOffTest.myStateActive) {
Whats the opposite. In the first section i get the other side running, with the “2 side options”

 // "OnOffTest" bestimmt ob leder/Stoff
  noStroke();
  if (OnOffTest.myStateActive) {
    image(myImage2,280, 110);
  } else {
    image(myImage1,280, 110);
  }

That are the two sides, Leather and fabric. Fabric side works fine but i dont know how to declare the togglebutton.
-If the toggle Button is on the “Leather” side, only get the option for the leather pics and fabric hides.