# Searching for coding help in Processing3

**URL:** https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851
**Category:** Coding Questions
**Created:** [July 17, 2018, 12:20pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851 "2018-07-17T12:20:21Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Timo.Oth](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Timo.Oth](https://discourse.processing.org/u/Timo.Oth)
#### Post date: [July 17, 2018, 12:20pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/1 "2018-07-17T12:20:22Z")

</div>

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.

```auto
// "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.

 ![Question](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/52e5fd484358d615ed8186556d5b106cf6a1573e.png)

---

<div class="post-metadata">

### Author: ![Timo.Oth](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Timo.Oth](https://discourse.processing.org/u/Timo.Oth)
#### Post date: [July 17, 2018, 1:38pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/2 "2018-07-17T13:38:22Z")

</div>

Edit:

```auto
// "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

```auto
if (OnOffTest.myStateActive) {

```

In front of the tabbutton.

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

---

<div class="post-metadata">

### Author: ![MxFxM](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@MxFxM](https://discourse.processing.org/u/MxFxM)
#### Post date: [July 17, 2018, 2:15pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/3 "2018-07-17T14:15:17Z")

</div>

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

---

<div class="post-metadata">

### Author: ![MxFxM](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@MxFxM](https://discourse.processing.org/u/MxFxM)
#### Post date: [July 17, 2018, 2:17pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/4 "2018-07-17T14:17:13Z")

</div>

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 😉

---

<div class="post-metadata">

### Author: ![Timo.Oth](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Timo.Oth](https://discourse.processing.org/u/Timo.Oth)
#### Post date: [July 17, 2018, 2:35pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/5 "2018-07-17T14:35:51Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![Timo.Oth](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Timo.Oth](https://discourse.processing.org/u/Timo.Oth)
#### Post date: [July 17, 2018, 5:16pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/6 "2018-07-17T17:16:48Z")

</div>

Here the code without images, fonts and stuff :\>

Produktkonfigurator: (“Main”)

```auto
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:

```auto
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:

```auto
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:

```auto
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;
    }
  }
  
}

```

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [July 17, 2018, 5:24pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/7 "2018-07-17T17:24:21Z")

</div>

> [@Timo.Oth](#):
>
> Do you know how i can upload it save?

For a sketch w/ assets, like images, audios, videos, fonts, etc., you can create a repo for it at [GitHub.com](http://GitHub.com):  
[Quickstart for repositories - GitHub Docs](https://Help.GitHub.com/articles/create-a-repo/)

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

> <https://gist.github.com/kateguarente/a204a9cb106370571e30>

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/e0010c13a70a95e4f8399d8bcb90d36116b80614.gif)

---

<div class="post-metadata">

### Author: ![Timo.Oth](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Timo.Oth](https://discourse.processing.org/u/Timo.Oth)
#### Post date: [July 17, 2018, 5:40pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/8 "2018-07-17T17:40:08Z")

</div>

Hey there,  
thanks a lot 🙂  
I hope i did it right 😢

Here is the link:

[Github zip](https://github.com/TimoSchebi/Help-Coding)

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [July 17, 2018, 5:42pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/9 "2018-07-17T17:42:18Z")

</div>

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

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

> **[GoSubRoutine/PjsGameEngine](https://github.com/GoSubRoutine/PjsGameEngine)**
>
> Contribute to GoSubRoutine/PjsGameEngine development by creating an account on GitHub.

---

<div class="post-metadata">

### Author: ![Timo.Oth](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Timo.Oth](https://discourse.processing.org/u/Timo.Oth)
#### Post date: [July 17, 2018, 5:49pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/10 "2018-07-17T17:49:21Z")

</div>

Now the should be a new folder.

[Raw Data](https://github.com/TimoSchebi/Help-Coding.git)

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

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [July 17, 2018, 5:53pm UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/11 "2018-07-17T17:53:45Z")

</div>

Much better: 👍

> **[TimoSchebi/Help-Coding](https://GitHub.com/TimoSchebi/Help-Coding/tree/master/DPDMWS1718_Timo/ProduktKonfigurator)**
>
> help me :). Contribute to TimoSchebi/Help-Coding development by creating an account on GitHub.

---

<div class="post-metadata">

### Author: ![Timo.Oth](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Timo.Oth](https://discourse.processing.org/u/Timo.Oth)
#### Post date: [July 18, 2018, 6:25am UTC](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/12 "2018-07-18T06:25:52Z")

</div>

[Github Sketch Processing](https://github.com/TimoSchebi/Help-Coding/tree/master/DPDMWS1718_Timo/ProduktKonfigurator)

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”:

```auto
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;
}

```

```auto
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”

```auto
 // "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.