In this recipe we will learn how to create a text box that responds to the user's keystrokes. It will be active when pressed over by the mouse and inactive when the mouse is released outside the box.
Grab the following files from the recipe Creating an interactive object that responds to the mouse and add them to your project:
InteractiveObject.h
InteractiveObject.cpp
Create and add the following files to your project:
InteractiveTextBox.h
InteractiveTextBox.cpp
We will create an InteractiveTextBox
class that inherits from InteractiveObject
and adds text functionality.
InteractiveTextBox.h
and add the #pragma once
macro and include the necessary files.#pragma once #include "InteractiveObject.h" #include "cinder/Text.h" #include "cinder/gl/Texture.h" #include "cinder/app/KeyEvent.h" #include "cinder/app/AppBasic.h"
InteractiveTextBox
class, making it a subclass of InteractiveObject
with the following members and methods:class InteractiveTextBox: public InteractiveObject{ public: InteractiveTextBox( const ci::Rectf& rect ); virtual void draw(); virtual void pressed(); virtual void releasedOutside(); void keyDown( ci::app::KeyEvent& event ); protected: ci::TextBox mTextBox; std::string mText; bool mActive; bool mFirstText; };
InteractiveTextBox.cpp
and include the InteractiveTextBox.h
file and add the following using
statements:#include "InteractiveTextBox.h" using namespace std; using namespace ci; using namespace ci::app;
ci::TextBox
.InteractiveTextBox::InteractiveTextBox( const Rectf& rect ): InteractiveObject( rect ) { mActive = false; mText = "Write some text"; mTextBox.setText( mText ); mTextBox.setFont( Font( "Arial", 24 ) ); mTextBox.setPremultiplied( true ); mTextBox.setSize( Vec2i( rect.getWidth(), rect.getHeight() ) ); mTextBox.setBackgroundColor( Color::white() ); mTextBox.setColor( Color::black() ); mFirstText = true; }
InteractiveTextBox::draw
method we will set the background color of mTextBox
depending if it is active or not. We will also render mTextBox
into ci::gl::Texture
and draw it.void InteractiveTextBox::draw(){ if( mActive ){ mTextBox.setBackgroundColor( Color( 0.7f, 0.7f, 1.0f ) ); } else { mTextBox.setBackgroundColor( Color::white() ); } gl::color( Color::white() ); gl::Texture texture = mTextBox.render(); gl::draw( texture, rect ); }
pressed
and releasedOutside
to define the value of mActive
.void InteractiveTextBox::pressed(){ mActive = true; } void InteractiveTextBox::releasedOutside(){ mActive = false; }
keyPressed
method.If mActive
is false this method will simply return. Otherwise, we will remove the last letter of mText
if the key released was the Backspace key, or, add the corresponding letter if any other key was pressed.
void InteractiveTextBox::keyDown( KeyEvent& event ){ if( mActive == false ) return; if( mFirstText ){ mText = ""; mFirstText = false;
} if( event.getCode() == KeyEvent::KEY_BACKSPACE ){ if( mText.size() > 0 ){ mText = mText.substr( 0, mText.size()-1 ); } } else { const char character = event.getChar(); mText += string( &character, 1 ); } mTextBox.setText( mText ); }
using
statements:#include "InteractiveTextBox.h" using namespace ci; using namespace ci::app; using namespace std;
shared_ptr<InteractiveTextBox> mTextBox;
mTextBox
in the setup
method:Rectf rect( 100.0f, 100.0f, 300.0f, 200.0f ); mTextBox = shared_ptr<InteractiveTextBox>( new InteractiveTextBox( rect ) );
draw
method we will clear the background with black, enable AlphaBlending
, and draw our mTextBox
:gl::enableAlphaBlending(); gl::clear( Color( 0, 0, 0 ) ); mTextBox->draw();
void mouseDown( MouseEvent event ); void mouseUp( MouseEvent event ); void mouseDrag( MouseEvent event ); void mouseMove( MouseEvent event );
mTextBox
:void MyApp::mouseDown( MouseEvent event ){ mTextBox->mouseDown( event ); } void MyApp::mouseUp( MouseEvent event ){ mTextBox->mouseUp( event ); } void MyApp::mouseDrag( MouseEvent event ){ mTextBox->mouseDrag( event ); } void MyApp::mouseMove( MouseEvent event ){ mTextBox->mouseMove( event ); }
void keyDown( KeyEvent event );
keyUp
method of mTextBox
.void InteractiveObjectApp::keyDown( KeyEvent event ){ mTextBox->keyDown( event ); }
3.137.212.212