How to add a textbox in my UI?

beginners
#1

Hello, everyone, I am a beginner in this field. I want to create a textbox in my UI, and I can input strings. Once I have input, it could send the contents to the inner functions. And which function should I call to create this textbox? Thank you much.

#2

hello,
the easiest is probably to use a gui addon. ofxGui comes with oF and works with ofParameters.
ofxImGui, ofxDatGui are quite popular as well.

Here is an ofxGui example

#pragma once

#include "ofMain.h"
#include "ofxGui.h"

class ofApp : public ofBaseApp{

    public:
        void setup();
        void draw();
        void onTextChange(std::string & text);

    
    ofxPanel _gui;
    ofParameterGroup _parameters;
    ofParameter<std::string> _textParameter;
    ofEventListener _textParameterListener;
};

#include "ofApp.h"

void ofApp::setup(){
//    _textParameterListener = _textParameter.newListener([this](std::string &v) { ofLogNotice() << "text changed " << v; });
    _textParameter.addListener(this, &ofApp::onTextChange);
    _parameters.setName("params");
    _parameters.add(_textParameter.set("text", "default"));
    _gui.setup(_parameters);
}

void ofApp::draw(){
    _gui.draw();
}

void ofApp::onTextChange(std::string &text){
    ofLogNotice() << "text changed " << text;
}

hope that helps
thomas

#3

Thank you, Thomas, it does work. And also I find a function named “addTextInput()” in “ofxUICanvas.h”, it also satisfies my demand. Thank you.

#4

good to know.
ofxUI has not been updated since a few years. It probably wont compile with the current version of oF. i recommend using ofxGui, ofxImGui or ofxDatGui.

#5

Hi, I’m new I can’t get this to run, it throwing errors at me left and right on running the ofxPanel_gui in the ofApp.h portion so cannot even get to the ofApp.cpp yet.

#6

you need to add ofxGui as an addon on project generator. that should do it

1 Like
#7

To the code above how would you add multiple text boxes?

#8

Just add more instances of

#pragma once

#include "ofMain.h"
#include "ofxGui.h"

class ofApp : public ofBaseApp{

    public:
        void setup();
        void draw();
        void onTextChange(std::string & text);

    
    ofxPanel _gui;
    ofParameter<std::string> _textParameter1;
    ofParameter<std::string> _textParameter2;
    ofParameter<std::string> _textParameter3;
    ofParameter<std::string> _textParameter4;

};

#include "ofApp.h"

void ofApp::setup(){
//    _textParameterListener = _textParameter.newListener([this](std::string &v) { ofLogNotice() << "text changed " << v; });
    _gui.setup();
    _parameters.add(_textParameter1.set("text 4", "default"));
    _parameters.add(_textParameter2.set("text 4", "default"));
    _parameters.add(_textParameter3.set("text 4", "default"));
    _parameters.add(_textParameter4.set("text 4", "default"));

    _textParameter1.addListener(this, &ofApp::onTextChange);
    _textParameter2.addListener(this, &ofApp::onTextChange);
    _textParameter3.addListener(this, &ofApp::onTextChange);
    _textParameter4.addListener(this, &ofApp::onTextChange);
// you can make a different callback function for each parameter if you need to get notified that it changed.


}

void ofApp::draw(){
    _gui.draw();
}

void ofApp::onTextChange(std::string &text){
    ofLogNotice() << "text changed " << text;
}
1 Like
#9

I’m just having trouble figuring out how to pull out the text from each one. It sends it to the same function if I have two or more how do you take the text out and into the program. Or in other words how do I save the text of the text box to a string if it is going to the same function?

#10

the ofParameter<std::string> stores the string.
so if you want to access to what is in the text box at any given moment you can do

_textParameter1.get()

which returns the string it holds.

The call back function is just to tell you that it has changed.

1 Like