Searching for coding help in Processing3

Timo.Oth · July 17, 2018, 12:20pm

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.

Timo.Oth · July 17, 2018, 1:38pm

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”

MxFxM · July 17, 2018, 2:15pm

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

MxFxM · July 17, 2018, 2:17pm

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

Timo.Oth · July 17, 2018, 2:35pm

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

Timo.Oth · July 17, 2018, 5:16pm

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

GoToLoop · July 17, 2018, 5:24pm

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

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

gist.github.com

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

repo_uploads.md

# Upload files to your repositories

You’ll soon be able to skip the command line and upload files directly to your repositories without having to leave the browser. Repository uploads will be rolling out over the next few days, so if you can’t upload yet, sit tight.

You can click the “Upload files” button in the toolbar at the top of the file tree.

![Upload files button](https://cloud.githubusercontent.com/assets/1369864/12961550/b9a688ea-d006-11e5-96d3-ac91097192a5.png)

Or, you can drag and drop files from your desktop onto the file tree.

This file has been truncated. show original

Timo.Oth · July 17, 2018, 5:40pm

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

Here is the link:

Github zip

GoToLoop · July 17, 2018, 5:42pm

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:

Timo.Oth · July 17, 2018, 5:49pm

Now the should be a new folder.

Raw Data

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

GoToLoop · July 17, 2018, 5:53pm

Much better:

Timo.Oth · July 18, 2018, 6:25am

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.

Topic		Replies	Views
P_4_3_1_02 Image Coding Questions	1	402	December 10, 2021
Help with some loops and image processing Coding Questions	2	507	January 17, 2019
Help: scenes in Processing Coding Questions	2	114	March 16, 2023
I need help with my program ( PROCESSING 3.0) Coding Questions	2	322	November 5, 2018
Interacting with images Coding Questions	2	208	December 31, 2020

Searching for coding help in Processing3

Related Topics