Using Cp5, I'm attempting to create a textfield. I want the user to only be able to edit the textfield after clicking a button. The user is unable to edit the textfield if the button is not pressed.
Does Textfield have a method that can assist me with this function?
I am asking because I didn't find any documentation for the methods in the library.
setLock() should do what you want to do:
import controlP5.*;
ControlP5 cp5;
String textValue = "";
public void lock() {
cp5.get(Textfield.class, "textField").setLock(true);
}
public void unlock() {
cp5.get(Textfield.class, "textField").setLock(false);
}
void setup() {
size(700, 400);
background(0);
fill(255);
PFont font = createFont("arial", 20);
cp5 = new ControlP5(this);
cp5.addTextfield("textField")
.setPosition(60, 100)
.setSize(150, 30)
.setFont(createFont("arial", 18))
.setAutoClear(false)
.setLock(false);
;
cp5.addBang("lock")
.setPosition(240, 100)
.setSize(60, 30)
.getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
;
cp5.addBang("unlock")
.setPosition(330, 100)
.setSize(60, 30)
.getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)
;
textFont(font);
}
void draw() {
}
Related
i needed to create a gui where a toggle would be ON when we click on a specified button , the problem is i cant find the right command to do so , here is an example of how i added my toggle :
cp5.addToggle("condenseur")
.setPosition(700,585)
.setSize(70,70)
.setValue(false)
.setLabelVisible(false);
and here is the function (the button click) where i want it to return a char AND change the toggle state (makes it ON)
void marche(){
port.write('a');
i tried to use setValue() or condensateur = true but none worked
The following code uses two buttons to toggle a cp5 toggle button. Reference: https://www.kasperkamperman.com/blog/processing-code/controlp5-library-example2/
import controlP5.*;
ControlP5 cp5;
void setup() {
size(400, 300);
cp5 = new ControlP5(this);
cp5.addToggle("toggle")
.setPosition(200, 90)
.setSize(70, 70)
.setValue(false)
.setLabelVisible(false)
;
cp5.addButton("on")
.setValue(0)
.setPosition(50, 100)
.setSize(50, 19)
;
cp5.addButton("off")
.setValue(0)
.setPosition(120, 100)
.setSize(50, 19)
;
}
void draw() {
}
void controlEvent(ControlEvent theEvent) {
if (theEvent.isController()) {
print("control event from : " + theEvent.getController().getName());
println(", value : " + theEvent.getController().getValue());
if (theEvent.getController().getName()=="on") {
cp5.getController("toggle").setValue(1);
}
if (theEvent.getController().getName()=="off") {
cp5.getController("toggle").setValue(0);
}
}
}
I would like to remove some of the functionality of a Textfield.
When the enter or return keys are pressed, the field becomes empty. I would like the value entered to stay within the field.
I have tried overriding the submit method but this hasn't done the job:
widthTopField = new Textfield(controlP5, "widthField"){
# Override public Textfield submit(){
return this;
}
};
Demonstrates using .setAutoClear() to retain edit field contents after hitting return button. Field 1 is set to true and the other is set to false.
import controlP5.*;
ControlP5 cp5;
void setup() {
size(400,400);
PFont font = createFont("arial",18);
cp5 = new ControlP5(this);
cp5.addTextfield("Field 1")
.setPosition(40,50)
.setSize(200,40)
.setFont(font)
.setFocus(true)
.setColor(color(255))
.setAutoClear(true);
;
cp5.addTextfield("Field 2")
.setPosition(40,130)
.setSize(200,40)
.setFont(font)
.setAutoClear(false);
;
}
void draw() {
background(0);
}
I'm trying to make a simple program to calculate loan interest. The code I have here works but will only display the result when the 'c' key is pressed down. How can i change the logic so that once 'c' is pressed the result appears on the screen. Any help is appreciated in advanced.
import controlP5.*;
ControlP5 cp5;
Textfield loan;
Textfield interest;
Textfield months;
Button calculate;
Double loan1;
Double months1;
double interest1;
void setup(){
size(700,400);
PFont font = createFont("arial",20);
cp5 = new ControlP5(this);
loan = cp5.addTextfield("Loan Amount")
.setPosition(20,100)
.setSize(200,40)
.setFont(font)
.setFocus(true)
.setColor(color(255,0,0));
loan.setInputFilter(ControlP5.INTEGER)
;
interest = cp5.addTextfield("Interest Rate")
.setPosition(20,190)
.setSize(200,40)
.setFont(font)
.setFocus(false)
.setColor(color(255,0,0));
interest.setInputFilter(ControlP5.INTEGER)
;
months = cp5.addTextfield("Length in months")
.setPosition(450,100)
.setSize(200,40)
.setFont(font)
.setFocus(false)
.setColor(color(255,0,0));
months.setInputFilter(ControlP5.INTEGER)
;
}
void draw(){
background(120);
fill(255);
noStroke();
rect(0,0,750,70);
fill(20);
textSize(32);
text("Monthly Loan Repayment Calculator ", 70, 45);
fill(41,194,214);
ellipse(340,170,130,130);
fill(24,74,140);
ellipse(340,170,125,125);
fill(255);
textSize(18);
text("Enter 'c'",305,155);
text("to calculate", 295,175);
fill(0);
rect(0,260,700,1);
String loan2 = loan.getText();
String interest2 = interest.getText();
String months2 = months.getText();
if(keyPressed)
{
if(key=='c'||key=='C'&&!loan2.equals("")&&!interest2.equals("")&&!months2.equals ("")){
loan1 = Double.parseDouble(loan2);
interest1 = Double.parseDouble(interest2);
months1 = Double.parseDouble(months2);
interest1=interest1/100/12;
double payment = (loan1*interest1)/(1-Math.pow(interest1+1,-months1));
payment = (double)Math.round(payment*100)/100;
//println(payment);
//text(payment,20,20);
int total = (int)payment;
text(total,200,350);
}
}
}
You are currently checking within your draw() method if a key is pressed or not and only displaying the text field showing the interest computation if the key is currently pressed. This is what
if (keyPressed) {
...
is doing. A better method is to override the actual keyPressed() method (outside of draw()) and set a boolean flag once the 'c' key is pressed. So at the top of your program you'd create something like:
boolean showInterestText = false;
You'd then change your two nested if statements
if(keyPressed)
{
if(key=='c'||key=='C'&&!loan2.equals("")&&!interest2.equals("")&&!months2.equals ("")){
...
to a single if statement like
if (showInterestText) {
...
Finally, override the keyPressed() method to set showInterestText to true if the 'c' key is pressed. Something like:
void keyPressed() {
if (key == 'c' || key == 'C') {
showInterestText = true;
}
}
This way, the showInterestText boolean remains true after the key is no longer pressed.
PS. Welcome to stackoverflow, next time you post please format your code so that it is readable.
Hi if anyone could help me out i would be very grateful, i have a sketch that will enable a user to draw graffiti on a screen with a wireless spray can. At the minute, with the tuio code installed, when the user presses the mouse button, a spray sound is made.. but i am having difficulty in the sketch creating an ellipse when presses the mouse button.
This is my code;
import ddf.minim.spi.*;
import ddf.minim.signals.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.ugens.*;
import ddf.minim.effects.*;
Minim minim;
AudioPlayer player;
AudioInput input;
/*TUIO processing demo - part of the reacTIVision project
http://reactivision.sourceforge.net/
Copyright (c) 2005-2009 Martin Kaltenbrunner <mkalten#iua.upf.edu>
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You shgould have greceived a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*/
// we need to import the TUIO library
// and declare a TuioProcessing client variable
import TUIO.*;
TuioProcessing tuioClient;
import java.util.*; //ADD THIS LINE TO BE ABLE TO USE TUIOCLIENT WITH PROCESSING 2+
// these are some helper variables which are used
// to create scalable graphical feedback
float cursor_size = 15;
float object_size = 60;
float table_size = 760;
float scale_factor = 1;
PFont font;
//declare a boolean to check mouse click
boolean drag = false;
int n=0;
int size[]= {20,40};
int sizeChosen;
boolean inside = false;
PImage bg;
PImage img;
PGraphics pg;
import controlP5.*;
ControlP5 cp5;
boolean mp = true;
void setup ()
{
size(1000,1000);//size(screen.width, screen.height).
smooth();
noStroke();
fill(0);
loop();
frameRate(30);
hint(ENABLE_NATIVE_FONTS);
font = createFont("Arial",18);
scale_factor = height/table_size;
// we create an instance of the TuioProcessing client
// since we add "this" class as an argument the TuioProcessing class expects
// an implementation of the TUIO callback methods (see below)
tuioClient = new TuioProcessing(this);
ellipseMode( CENTER);
//smooth();
noCursor();
background(170);
bg = loadImage("brickwall.jpg");
background(bg);
img = loadImage("instructions.jpg");
image (img,30,40,THUMB_SIZE, THUMB_SIZE);
cp5 = new ControlP5(this);//screenshot button
cp5.addButton("Save Graffiti Artwork").setPosition(0,650).setSize(200,100);//screenshot details
minim = new Minim(this);
player = minim.loadFile("spray_close.wav");
input = minim.getLineIn();
}
void draw() {
if (mp = true);
ellipse(255,0,255,0);
background(bg);
textFont(font,18*scale_factor);
float obj_size = object_size*scale_factor;
float cur_size = cursor_size*scale_factor;
Vector tuioObjectList = tuioClient.getTuioObjects();
for (int i=0;i<tuioObjectList.size();i++) {
TuioObject tobj = (TuioObject)tuioObjectList.elementAt(i);
noStroke();
fill(0);
pushMatrix();
translate(tobj.getScreenX(width), tobj.getScreenY(height));
rotate(tobj.getAngle());
// ellipse(-obj_size/2, -obj_size/2, obj_size, obj_size);
popMatrix();
//fill(255);
text(""+tobj.getSymbolID(), tobj.getScreenX(width), tobj.getScreenY(height));
if (mousePressed) {
ellipse(255,0,255,0);
// printIn("Pink");
//mouse press 1
if (tobj.getSymbolID()==12) {
ellipse(255,0,255,0);
}
}
}
Vector tuioCursorList = tuioClient.getTuioCursors();
for (int i=0;i<tuioCursorList.size();i++) {
TuioCursor tcur = (TuioCursor)tuioCursorList.elementAt(i);
Vector pointList = tcur.getPath();
if (pointList.size()>0) {
stroke(0, 0, 255);
TuioPoint start_point = (TuioPoint)pointList.firstElement();
;
for (int j=0;j<pointList.size();j++) {
TuioPoint end_point = (TuioPoint)pointList.elementAt(j);
line(start_point.getScreenX(width), start_point.getScreenY(height), end_point.getScreenX(width), end_point.getScreenY(height));
start_point = end_point;
}
stroke(192, 192, 192);
fill(192, 192, 192);
ellipse( tcur.getScreenX(width), tcur.getScreenY(height), cur_size, cur_size);
fill(0);
text(""+tcur.getCursorID(), tcur.getScreenX(width)-5, tcur.getScreenY(height)+5);
}
}
if (drag) //if drag = true, i-e if mouse click is holding, ellipse are drawing according the mouse's position
{
fill(#FF00FF); //black color
ellipse(mouseX, mouseY, 50,50); //draw ellipse with x and y mouse's position + size 10*10
//or line strokeWeight(3);stroke(0);line(mouseX,mouseY,25,25);
}
//draw palette size
for(n=0;n<2;n++)
{
fill(0);
ellipse(360,10+n*40,20*(n+1),20*(n+1));
}
}
//size selector
void mousePressed() {
//bDrawFullSize = true;
if (inside==true){
sizeChosen=size[n];
}
player.play();
mp = true;
}
void mouseReleased() {
//bDrawFullSize = true;
drag = false;
player.close();
//since close closes the file, we need to load the sound effect again.
player = minim.loadFile("spray_close.wav");
}
//function "drag and drop"
void mouseDragged() {
drag = true;
}
// these callback methods are called whenever a TUIO event occurs
// called when an object is added to the scene
void addTuioObject(TuioObject tobj) {
println("add object "+tobj.getSymbolID()+" ("+tobj.getSessionID()+") "+tobj.getX()+" "+tobj.getY()+" "+tobj.getAngle());
}
// called when an object is removed from the scene
void removeTuioObject(TuioObject tobj) {
println("remove object "+tobj.getSymbolID()+" ("+tobj.getSessionID()+")");
}
// called when an object is moved
void updateTuioObject (TuioObject tobj) {
println("update object "+tobj.getSymbolID()+" ("+tobj.getSessionID()+") "+tobj.getX()+" "+tobj.getY()+" "+tobj.getAngle()
+" "+tobj.getMotionSpeed()+" "+tobj.getRotationSpeed()+" "+tobj.getMotionAccel()+" "+tobj.getRotationAccel());
}
// called when a cursor is added to the scene
void addTuioCursor(TuioCursor tcur) {
println("add cursor "+tcur.getCursorID()+" ("+tcur.getSessionID()+ ") " +tcur.getX()+" "+tcur.getY());
}
// called when a cursor is moved
void updateTuioCursor (TuioCursor tcur) {
println("update cursor "+tcur.getCursorID()+" ("+tcur.getSessionID()+ ") " +tcur.getX()+" "+tcur.getY()
+" "+tcur.getMotionSpeed()+" "+tcur.getMotionAccel());
}
// called when a cursor is removed from the scene
void removeTuioCursor(TuioCursor tcur) {
println("remove cursor "+tcur.getCursorID()+" ("+tcur.getSessionID()+")");
}
// called after each message bundle
// representing the end of an image frame
void refresh(TuioTime bundleTime) {
redraw();
}
void keyPressed() {
endRecord();
background(bg);
// exit();
}
public void saveScreen() {
saveFrame();
player.pause();
}
// returns true if mouse is inside this rectangle
boolean inside(int left, int top, int right, int bottom ) {
if (mouseX>left && mouseX<right && mouseY>top && mouseY<bottom ) {
return true;
}
else {
return false;
}
}
Anything under the function:
void mousePressed() {
//bDrawFullSize = true;
if (inside==true){
sizeChosen=size[n];
}
player.play();
mp = true;
}
is run every frame while mouse is pressed. So you would create an ellipse (or whatever you want) here.
You can put the ellipse generation function inside branching condition that's checking on the mouse pressed state:
if (mousePressed) {
ellipse(random(0,width),random(0,height),random(0,100),random(0,100));
}
put the condition at the end of the Draw function so that it overwrites any background element
How to create more than one window of a single sketch in Processing?
Actually I want to detect and track a particular color (through webcam) in one window and display the detected co-ordinates as a point in another window.Till now I'm able to display the points in the same window where detecting it.But I want to split it into two different windows.
You need to create a new frame and a new PApplet... here's a sample sketch:
import javax.swing.*;
SecondApplet s;
void setup() {
size(640, 480);
PFrame f = new PFrame(width, height);
frame.setTitle("first window");
f.setTitle("second window");
fill(0);
}
void draw() {
background(255);
ellipse(mouseX, mouseY, 10, 10);
s.setGhostCursor(mouseX, mouseY);
}
public class PFrame extends JFrame {
public PFrame(int width, int height) {
setBounds(100, 100, width, height);
s = new SecondApplet();
add(s);
s.init();
show();
}
}
public class SecondApplet extends PApplet {
int ghostX, ghostY;
public void setup() {
background(0);
noStroke();
}
public void draw() {
background(50);
fill(255);
ellipse(mouseX, mouseY, 10, 10);
fill(0);
ellipse(ghostX, ghostY, 10, 10);
}
public void setGhostCursor(int ghostX, int ghostY) {
this.ghostX = ghostX;
this.ghostY = ghostY;
}
}
One option might be to create a sketch twice the size of your original window and just offset the detected coordinates by half the sketch's size.
Here's a very rough code snippet (assumming blob will be a detected color blob):
int camWidth = 320;
int camHeight = 240;
Capture cam;
void setup(){
size(camWidth * 2,camHeight);
//init cam/opencv/etc.
}
void draw(){
//update cam and get data
image(cam,0,0);
//draw
rect(camWidth+blob.x,blob.y,blob.width,blob.height);
}
To be honest, it might be easier to overlay the tracked information. For example, if you're doing color tracking, just display the outlines of the bounding box of the tracked area.
If you really really want to display another window, you can use a JPanel.
Have a look at this answer for a running code example.
I would recommend using G4P, a GUI library for Processing that has some functionality built in for handling multiple windows. I have used this before with a webcam and it worked well. It comes with a GWindow object that will spawn a window easily. There is a short tutorial on the website that explains the basics.
I've included some old code that I have that will show you the basic idea. What is happening in the code is that I make two GWindows and send them each a PImage to display: one gets a webcam image and the other an effected image. The way you do this is to augment the GWinData object to also include the data you would like to pass to the windows. Instead of making one specific object for each window I just made one object with the two PImages in it. Each GWindow gets its own draw loop (at the bottom of the example) where it loads the PImage from the overridden GWinData object and displays it. In the main draw loop I read the webcam and then process it to create the two images and then store them into the GWinData object.
Hopefully that gives you enough to get started.
import guicomponents.*;
import processing.video.*;
private GWindow window;
private GWindow window2;
Capture video;
PImage sorted;
PImage imgdif; // image with pixel thresholding
MyWinData data;
void setup(){
size(640, 480,P2D); // Change size to 320 x 240 if too slow at 640 x 480
// Uses the default video input, see the reference if this causes an error
video = new Capture(this, 640, 480, 24);
numPixels = video.width * video.height;
data = new MyWinData();
window = new GWindow(this, "TEST", 0,0, 640,480, true, P2D);
window.isAlwaysOnTop();
window.addData(data);
window.addDrawHandler(this, "Window1draw");
window2 = new GWindow(this, "TEST", 640,0 , 640,480, true, P2D);
window2.isAlwaysOnTop();
window2.addData(data);
window2.addDrawHandler(this, "Window2draw");
loadColors("64rev.csv");
colorlength = mycolors.length;
distances = new float[colorlength];
noCursor();
}
void draw()
{
if (video.available())
{
background(0);
video.read();
image(video,0,0);
loadPixels();
imgdif = get(); // clones the last image drawn to the screen v1.1
sorted = get();
/// Removed a lot of code here that did the processing
// hand data to our data class to pass to other windows
data.sortedimage = sorted;
data.difimage = imgdif;
}
}
class MyWinData extends GWinData {
public PImage sortedimage;
public PImage difimage;
MyWinData(){
sortedimage = createImage(640,480,RGB);
difimage = createImage(640,480,RGB);
}
}
public void Window1draw(GWinApplet a, GWinData d){
MyWinData data = (MyWinData) d;
a.image(data.sortedimage, 0,0);
}
public void Window2draw(GWinApplet a, GWinData d){
MyWinData data = (MyWinData) d;
a.image(data.difimage,0,0);
}