Tools in my application?

Santy

Hello my Friends, I need in my app two tools, one for the text (type, size, color) and another one for select the color, (how the color select tool of Processing sketch ) It's posible to include in my Processing application this tools? May be there're some class designed for this. Thank you very much.

TfGuy44

There's no need for additional tools or classes.

Processing can do all the things you're describing.

Here is some sample code for you:

PFont font_arl, font_tnr;
color c;

void setup(){
  size(600,400);
  font_arl = createFont("Ariel", 32);
  font_tnr = createFont("TimesNewRoman", 12);
  c = color(random(255),random(255),random(255));
  textAlign(CENTER);
}

void draw(){
  colorMode(RGB, 255);
  background(0);

  stroke(c);
  strokeWeight(4);
  noFill();
  rect(20,20,560,360,20);

  fill(255,0,0);
  textFont(font_arl);
  textSize(32);
  text("BIG TEXT!", 300, 100);

  fill(255);
  textFont(font_tnr);
  textSize(12);
  text("small text...", 300, 300);

  noStroke();
  colorMode(HSB,10);
  for( int i = 0; i < 10; i++){
    fill(i,10,10);
    rect(300 + 30 * (i-5), 200, 20, 20, 5);
  }

}

void mousePressed(){
  c = get(mouseX, mouseY);
}

Examine this code line by line until you understand how it works. Be sure to look up anything you don't understand in the Reference:

https://processing.org/reference/

Chrisir

you miss the point

i think op wants to let the user select colors and fonts, no?

Santy

Yes Chrisir, but the code of TfGuy44 it's a starting point...

Chrisir

These are GUI stuff

Please look at g4p or controlP5 in the library section- maybe there is a color selector

Santy

Thanks Chrisir, I'll look at it.

Chrisir

color selector (not by me)

// uploaded by Jean-no
// see http : // www.openprocessing.org/visuals/?visualID=8816


float luminosite=300;
PFont maTypo;
int[] picked;
PGraphics monPicker;

boolean colorHasBeenChosen=false;

color c;

void setup() {

  size(500, 500, P2D);

  // je me mets en HSB, je décide que H va de 0 à 2xpi, que S va de 0 à 150 et B de 0 à 300.
  colorMode(HSB, TWO_PI, 150, 300);

  background(0);

  maTypo = createFont("arial", 10, false);
  textFont(maTypo);
  rectMode(CENTER);
  noFill();
  picked = new int[2];
  picked[0]=250;
  picked[1]=200;
  monPicker =   createGraphics(300, 300, P2D);
  redessinePicker();
}

void draw() {
  // Two main states: 

  if (colorHasBeenChosen) {
    // state showing the result. 
    // The 2nd state 
    background(0);
    text ("you selected\n"
      +red(c)
      +", "
      +green(c)
      +", "
      +blue(c)
      +". Press Enter to continue.", 130, 100);
    fill (c); 
    rect( 170, 170, 60, 60);
  } else 
  {
    // state where you pick a color. 
    // The 1st state
    noFill();
    background(0);
    image(monPicker, 100, 50);
    if (mousePressed  ) {
      if (mouseY>390) {
        luminosite =  constrain((mouseX-100), 0, 300);
      } else { 
        if (dist(mouseX, mouseY, 250, 200)<150) {
          picked[0]=mouseX;
          picked[1]=mouseY;
        }
      }
      redessinePicker();
    }
    for (int a=0; a<300; a++) {
      stroke(0, 0, a);
      line(a+100, 400, a+100, 440);
    }
    line(luminosite+100, 398, luminosite+100, 442);

    c=get(picked[0], picked[1]);

    fill(0, 0, 255);
    text("R: "+regledetrois(red(c), TWO_PI, 255), 400, 50);
    text("G: "+regledetrois(green(c), 150, 255), 400, 60);
    text("B: "+regledetrois(blue(c), 300, 255), 400, 70);
    text("H: "+regledetrois(hue(c), TWO_PI, 255), 400, 80);
    text("S: "+regledetrois(saturation(c), 150, 255), 400, 90);
    text("V: "+regledetrois(brightness(c), 300, 255), 400, 100);
    text("Press enter key", 20, 480);
    rect(picked[0], picked[1], 4, 4);
    fill(c);
    rect(420, 330, 40, 40);
  }//else
}//func

int regledetrois(float val, float scalo, int scald) {
  int val2 = (int)((val/scalo)*scald);
  return val2;
}

void redessinePicker() {  
  monPicker.beginDraw();
  monPicker.colorMode(HSB, TWO_PI, 150, 300); 
  for (int x=0; x<300; x++) {
    for (int y=0; y<300; y++) {
      float Saturation =dist(x, y, 150, 150);
      if (Saturation<150) {
        float Teinte = atan2(150-y, 150-x)+PI; 
        monPicker.stroke(Teinte, Saturation, luminosite);
        monPicker.point(x, y);
      }
    }
  } 
  monPicker.endDraw();
}

void keyPressed() {
  if (key == ENTER||key==RETURN) {
    colorHasBeenChosen = !colorHasBeenChosen;
  }
}

Chrisir

// Fonts:
PFont myFont, myFontSmall;

// arrays:
String[] fontListAsStrings = PFont.list();   // font list I. 
PFont[] pFontListAsFonts;   // font list II.

// its index
int selectedFontIndex = 0;
boolean fontWasSelected = false;

// the list of fonts 
TextBoxDisplayOnly tboxFonts; 

final int stateNormal=0; 
final int stateFont=1;
int state=stateNormal; 

// -------------------------------------------------------

void setup() {

  size(1200, 900);
  background(0);

  // see the available fonts 
  println(fontListAsStrings);

  myFont = createFont("FFScala", 32);
  myFontSmall = createFont("FFScala", 14);

  pFontListAsFonts = new PFont[fontListAsStrings.length];

  String result=""; 
  for (int i=0; i< fontListAsStrings.length; i++) {
    result+="No. " + i 
      + ": " + fontListAsStrings[i] + "\n";
    pFontListAsFonts[i]=createFont(fontListAsStrings[i], 14 );
  }//for
  inittboxFonts(result);
}//func

void draw () {

  background(0);

  switch (state) {

  case stateNormal:
    fill(255);
    textAlign(LEFT, TOP);
    textFont(myFontSmall);
    textSize(14); 
    text("Hit F to select font", 333, 333); 
    if (fontWasSelected) {
      textFont(myFontSmall);
      text(fontListAsStrings[selectedFontIndex], 330, 400);
    }
    break; 

  case stateFont:
    // THE LIST 
    fill(255);
    textAlign(LEFT, TOP);
    textFont(myFontSmall);
    textSize(14); 
    tboxFonts.display(); 

    // headline
    fill(255);
    textAlign(LEFT, TOP);
    textFont(myFont);
    text("Font List", 10, 10);

    // font name 
    fill(255);
    textAlign(LEFT, BASELINE);
    textFont(myFontSmall);
    text(fontListAsStrings[selectedFontIndex], 660, 100);
    fill(255, 0, 0); 
    text("Use Mousewheel over the font list to scroll. \nClick on a font to select it. \n"
      +"Click the two Arrows to scroll up and down.", 
      660, 200, 340, 676);

    //// font example
    fill(255);
    textAlign(LEFT, BASELINE);
    textFont(pFontListAsFonts[selectedFontIndex]);
    text(" This is a cool Text - !@#$%", 660, 150);
    break;
  }
}

// ----------------------------------------------------------------------

void keyPressed() {

  switch (state) {

  case stateNormal:
    if (key=='f')
      state= stateFont;
    break; 
  case stateFont:
    if (key==ENTER||key==RETURN) {
      state= stateNormal;
      fontWasSelected=true;
    }
    break;
  }
}

void mousePressed() {
  // 
  // store time since last mouse moved / pressed  
  tboxFonts.timeSinceLastMouseMoved = millis();

  tboxFonts.mousePressed1();
}

void mouseWheel(MouseEvent event) {
  tboxFonts.mouseWheelTextArea(event); // text box
}

void mouseMoved() {
  // valid in all states 
  // store time since last mouse moved
  tboxFonts.timeSinceLastMouseMoved=millis();
} //func

// ----------------------------------------------------------------------

void inittboxFonts(String textList) {
  tboxFonts = new TextBoxDisplayOnly(
    12, 80, // x, y
    500, height-190, // w, h   
    textList, 
    13, 
    true, 
    color(65), // textAreaTextColor
    color(255), // textAreaBackgroundColor
    color(0, 0, 255)); // textAreaBorderColor
}

//======================================================================================================

// only text displaying 

class TextBoxDisplayOnly {

  // this is the entire text  
  String[] editorArray = new String[2];

  // position and size 
  short x, y, 
    w, h;

  // colors 
  color textAreaTextColor, textAreaBackgroundColor, textAreaBorderColor;

  // current startline via scrolling 
  int start=0; 

  int pointsBetweenLines=13; 
  final int linesInEditor; 

  boolean hasScrollbar; 

  ArrayList<RectButton> rectButtons = new ArrayList(); 

  // for the tool tip text of the buttons  
  int timeSinceLastMouseMoved=millis(); // store time since last mouse moved / pressed

  // ------------------------------------------------------------------

  // constr 
  TextBoxDisplayOnly(int xx, int yy, 
    int ww, int hh, 
    String text_, 
    int pointsBetweenLines_, 
    boolean hasScrollbar_, 
    color textC_, color backgroundC_, color borderC_) {

    x = (short) xx;
    y = (short) yy;
    w = (short) ww;
    h = (short) hh;

    hasScrollbar=hasScrollbar_;

    textAreaTextColor = textC_;
    textAreaBackgroundColor = backgroundC_;
    textAreaBorderColor = borderC_;

    pointsBetweenLines=pointsBetweenLines_;

    linesInEditor = h / pointsBetweenLines;
    initText(text_);

    // ---
    // Init Buttons   

    // colors Buttons 
    final color col1 = #ff0000;
    final color col2 = #ffff00;

    for (int x=0; x < 2; x++) {    
      // pre-init buttons
      rectButtons.add(new RectButton(20, 20, 52, 52, col1, col2, true, "Log File", 0, "", "", null, x));
    } // for

    int i; 

    i=0;
    rectButtons.get(i).ToolTipText = "Scroll up. ";
    rectButtons.get(i).Text = str((char)0x25B2) ; //"";
    rectButtons.get(i).btnImage = null;
    rectButtons.get(i).setPosition ( x+w, y, // x, y
      16, 16); // w, h

    i=1;
    rectButtons.get(i).ToolTipText = "Scroll down. ";
    rectButtons.get(i).Text =  str((char)0x25BC); //  "";
    rectButtons.get(i).btnImage = null;
    rectButtons.get(i).setPosition (  x+w, y+h-16, // x, y
      16, 16);
    //
  } //constr 

  void initText(String textLocal) {

    // set text 

    String[] stringArray = split(textLocal, "\n");

    // reset
    editorArray =  new String[stringArray.length];

    int i=0; 
    for (String s1 : stringArray) {
      editorArray[i] = s1;
      i++;
    }
  }

  void display() {

    rectMode(CORNER);
    textAlign(LEFT, TOP);

    stroke(textAreaBorderColor); 
    strokeWeight(1); 
    fill(textAreaBackgroundColor);
    rect(x, y, w, h);
    strokeWeight(1); 

    // scrollbar 
    if (hasScrollbar) {
      fill(GRAY); 
      rect(x+w, y, 16, h);
    }

    // inner canvas of box plus text lines 
    fill(textAreaTextColor);

    float textx=x+3;   // x+3
    float texty=y+2;   // y+2 

    for (int i = start; i < min(start+linesInEditor, editorArray.length); i++) {

      textFont(myFontSmall); 

      text(editorArray[i], textx, texty); 
      float textW = textWidth(editorArray[i]) ;

      textFont(pFontListAsFonts[i]); 
      text("some cool Text", textx+textW+14, texty); 

      //next line
      texty += pointsBetweenLines;
    }//for

    showButtons() ;
  } // method

  void showButtons() { 
    // show buttons for state edit   

    textFont(myFontSmall); 

    for (RectButton btn : rectButtons) {
      btn.update();
      btn.display();
    }
    // buttons 
    for (RectButton btn : rectButtons) {
      btn.toolTip(timeSinceLastMouseMoved);
    }
  } // func 

  boolean mousePressed1() {

    // check 2 scroll buttons  
    for (int i=0; i<2; i++) {
      if (rectButtons.get(i).over()) {
        doCommandMouse(rectButtons.get(i).cmdID); // very important function 
        return false;
      } // if
    } // for

    // we want to receive the line in the list 

    boolean   mouseOver =  mouseX>x && mouseY>y && 
      mouseX<x+w && mouseY<=y+h;

    if (!mouseOver)
      return false; 

    float textx=x+3; // x+3
    float texty=y+2; // y+2 

    // loop over all lines
    for (int i = start; i < min(start+linesInEditor, editorArray.length); i++) {

      if (mouseX>textx && mouseY>texty && 
        mouseX<textx+w && mouseY<=texty+13) {
        // success 
        selectedFontIndex = i;        
        return true; // success
      }//if 
      //next line
      texty+=13;
    }//for
    //
    return false; // fail 
    //
  } // method

  void doCommandMouse(int commandNumber) {

    switch (commandNumber) {
      // scrolling -----------------------------------------------------
    case 0:
      // scrolling 
      start--;
      if (start<0)
        start=0;
      break;

    case 1:
      // scrolling 
      start++;
      if (start > editorArray.length-linesInEditor)
        start=editorArray.length-linesInEditor;
      break;
    }
  }

  void mouseWheelTextArea(MouseEvent event) {

    // scrolling up and down the text 

    boolean mouseIsOnBox = 
      mouseX>x && mouseY>y &&
      mouseX<x+w && mouseY<y+h;

    if (!mouseIsOnBox) 
      return; 

    float e = event.getCount();

    if (e<=-1)
      start--;
    else if (e>=1)
      start++;

    // checks 
    if (start<0) 
      start=0;

    if (start+linesInEditor > editorArray.length) { 
      start = editorArray.length-linesInEditor;
      if (start<0) 
        start=0;
    }// if
  }//func 
  //
}//class

// ============================================================================


// class RectButton and Button  
// (two classes)

class RectButton extends Button {

  // for debugging and making new buttons set to true; 
  // standard is false 
  final boolean showButtonsForDebugging = false;  

  // constr 
  public RectButton (
    int ix, int iy, 
    int isizeX, int isizeY, 
    color icolor, 
    color ihighlight, 
    boolean iExist, 
    String iTag, 
    int iTag2, 
    String iText, 
    String iToolTipText, 
    PImage iBtnImage, 
    int cmdIDTemp) {

    x = ix;
    y = iy;
    sizeX = isizeX;
    sizeY = isizeY;    
    basecolor = icolor;
    highlightcolor = ihighlight;
    currentcolor = basecolor;
    Exists = iExist;

    Tag = iTag; 
    Tag2 = iTag2;

    Text = iText;
    ToolTipText=iToolTipText;

    btnImage=iBtnImage;

    cmdID=cmdIDTemp;
  }

  boolean over() {
    if ( overRect(x, y, sizeX, sizeY) ) {
      over = true;
      return true;
    } else {
      over = false;
      return false;
    }
  }

  void display() {
    if (Exists) {

      showButtonForDebugging(); 

      if (btnImage!=null) {
        // Image 
        image(btnImage, x, y);

        if (showButtonsForDebugging) {
          // rect 
          stroke (255); 
          strokeWeight(1); 
          //fill(currentcolor, 30);
          noFill(); 
          rect(x, y, btnImage.width, btnImage.height);
        }
      } //   if (btnImage!=null) 
      else  if (Text != "") {

        // this is not in use (buttons don't have text)

        // rect 
        stroke (ButtonStrokeColor); 
        strokeWeight(0); 
        fill(currentcolor, 30);
        rect(x, y, sizeX, sizeY);        

        //text
        fill(0, 102, 153);
        textAlign(CENTER);
        textSize(16) ;
        text(Text, (x + (sizeX / 2.0)), (y + (sizeY / 2.0))+5);
        textAlign(LEFT);
      } // if (Text != "")
    } // if exists
  } // method display

  void showButtonForDebugging() {

    if (showButtonsForDebugging) {
      // rect 
      stroke (ButtonStrokeColor); 
      strokeWeight(0); 
      fill(currentcolor, 30);
      rect(x, y, sizeX, sizeY);        

      //text
      fill(0, 102, 153);
      textAlign(CENTER);
      textSize(16) ;
      text(Text, (x + (sizeX / 2.0)), (y + (sizeY / 2.0))+5);
      textAlign(LEFT);
    }
  }

  void setPosition ( int ix, int iy, 
    int isizeX, int isizeY) {
    // 
    x = ix;
    y = iy;
    sizeX = isizeX;
    sizeY = isizeY;
  } 
  //
} // class

// =========================================================================

class Button {

  int x, y;

  int sizeX;
  int sizeY;

  color basecolor, highlightcolor;
  color currentcolor;
  boolean over = false;
  boolean pressed = false;  
  boolean Exists = false;

  String Text = "";
  String ToolTipText = ""; 

  String Tag = "";
  int Tag2 = 0;

  int TagMark = 0; 
  color ButtonStrokeColor = color (255, 255, 255);

  PImage btnImage = new PImage(); 

  int cmdID; 

  boolean locked;

  void update() {
    if (over()) {
      // Mouse over 
      currentcolor = highlightcolor;
    } else {
      // not Mouse over 
      currentcolor = basecolor;
    }
  } // update 

  void toolTip(int timeSinceLastMouseMoved) {
    if (over()) {
      if (!ToolTipText.equals("")) {
        if (millis() - timeSinceLastMouseMoved > 800) {

          fill (242, 245, 75); //  (242, 245, 75); yellow
          noStroke();
          textSize (12);
          float tw = textWidth(ToolTipText)+8;
          float xLeft = x-(tw/2); 
          float xRight = x-(tw/2) + tw; 
          float xLeftText = x; 
          if (xRight>=width) { 
            xLeft= width-tw-2;
            xLeftText= xLeft + tw/2;
          } 
          if (xLeft< 2) { 
            xLeft=2;
            xLeftText= 2 + tw / 2;
          }
          rect (xLeft, y+sizeY+2, tw, 20);
          textAlign(CENTER);
          fill(0);
          text(ToolTipText, xLeftText, y+16+sizeY);
          textAlign(LEFT);
          textSize(16);
        } //  if
      } // if
    } // if
  } // func 

  boolean pressed() {
    if ( over()) {
      locked = true;
      return true;
    } else {
      locked = false;
      return false;
    }
  }  // pressed; 

  boolean over() {
    return true;
  } // over 

  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;
    }
  } // overRect
  //
} // class
//

Chrisir

this is a font type selector

again, you don't need to understand it fully, just use it

credits to gotoloop

Santy

wow! thank you very much Chrisir and now I need work with this codes, to see how to I can adapt it to my app..

a hug for you.

Chrisir

new version of font selector above.

The list shows now in every line a font example (little slower at startup)

Santy

thanks, where is it?

Chrisir

I just replaced the old version

Santy

Jajaja, Sorry

Chrisir

;-)

Chrisir

Please still look at the mentioned libraries

Santy

I don't see the difference, the last one need more time to start but show the same!!!