How can i use my vector graphics as a GUI elements in Processing?!

Draghkon

Hello, sorry for my English) i'm a newby in Processing, i'm trying to make an application with some user friendly interface, so i made a design in Adobe illustrator, but i have no idea how to use it in processing.

I mean - is there any possibilities to import my vector graphics (and customise a ControlP5 library with it, for example).. or i have to create all of the elements by using formulas and coordinates in Processing, any way?

sojamo

yes you can customize or extend controllers, what type of controller are you looking for? a button, slider, knob, etc? You can import vector graphics with processing, see the loadShape example.

Draghkon

Thanks! I'm looking for all the types of controllers you listed, and probably such as scrolling bars and cursor icons. I've tried this example from your link and it works)

now i need to understand how i can replace the ControlP5 library shapes on my .svg shapes. And then make it all work)

Draghkon

I've tried to modify the ControlP5Button example, but in .setImages is only accepted to use a png or jpg images, not a vector svg.. So i don't have any idea how to put my vector svg inside of this library.

However, there also a problem with using an image of round button: it is still work as a square one. So you can click in the empty corner, and it will press the button.

PhiLho

Draw your shapes in PGraphics off-line images, then you can use them in ControlP5.

sojamo

rendering shapes into an PGraphics/PImage element is one option. Another option would be to create a custom controller that extends a default controller, I have included an example for a Button below that renders an svg element and uses a circular intersection. Customizing Controllers based on your needs is possible but not trivial and you need to familiarize yourself with the source code of the library.

import controlP5.*;
// this example used processing 2.0 and controlP5 2.0.4
ControlP5 cp5;

void setup() {
  size(400, 400);
  cp5 = new ControlP5(this);
  // create a new custom Button that excepts a shape
  MyButton b = new MyButton(cp5, "test", loadShape("bot.svg") );
  // set some parameters for our custom Button
  b.setSize(50, 50).setPosition(100, 200);
}

void draw() {
  background(128);
}


// create a custom Button and inherit all properties and behavior 
// from it's super class

class MyButton extends Button {

  MyButton(ControlP5 c, String theName, final PShape s ) {
    super(c, theName);
    // ControllerViews are used to render a controller, since we
    // need a custom view to render the svg shape we need to override
    // the existing view with setView(ControllerView)
    setView(new ControllerView() {

      public void display(PApplet p, Object o) {
        if (isInside) {
          // if the mouse is detected inside our intersection area,
          // rotate the shape by 90 degrees.
          p.translate(getWidth()/2, getHeight()/2);
          p.rotate(HALF_PI);
          p.translate(-getWidth()/2, -getHeight()/2);
        }
        p.shape(s, 0,0, getWidth(), getHeight());
      }
    }
    );
  }

  // override the inside( ) function which by default evaluates 
  // intersections against rectangular areas. Here though we need
  // a circular area which we implement with dist() below.
  public boolean inside() {
    float x = _myParent.getAbsolutePosition( ).x + position.x + getWidth()/2;
    float y = _myParent.getAbsolutePosition( ).y + position.y + getHeight()/2;
    return dist(x, y, mouseX, mouseY)<getWidth()/2;
  }
}