Skip to content

Using Image Effects Filters in your C++Builder for iOS apps

In this video I show you how to work with Image Effect Filters in your iOS apps using C++Builder XE5. The FM Application Platform provides more than 50 image effects and filter effects classes for you to use in your apps. The image effects use the Pixel Shader language and the GPU to work with bitmap images while offloading the CPU. I created a FM Mobile application for C++Builder using the Blank Form mobile project template.

I added a TTToolBar component aligned to the top of the client area.  On the toolbar I place TLabel (for the app title) and TSpeedButton (to load a jpeg image) components. I place a TTrackBar component just under the TToolBar by setting its Align property to alTop.  The TrackBar is used to set the amount (a percentage) of filter effect to apply to the image. In a TLayout, aligned to the client area, I place two TImage components (aligned left and right inside the TLayout).

On the FormCreate event handler, I instantiate a TFilterSepia class instance. For the Speed Button’s OnClick event handler I set the width of the two images to half of the Layout’s client area, load an image into TImage1, set the Sepia Filter Effect’s Input property to Image1’s bitmap, set the filter effect’s Amount property to the current value of the TrackBar (currently 0 to start) and I set Image2’s bitmap property to the Output of the Sepia Filter Effect. When the Track Bar is changed (OnChange event handler), I set the filter’s amount property (value from 0 to 100 percent) to the current TrackBar value and reset Image2’s bitmap to the filter’s output. Finally, I compile and run the C++Builder application on my iPhone 4S.

Here is the Form class declaration in the main unit’s header file:

    #ifndef MainUnitH
    #define MainUnitH
    //---------------------------------------------------------------------------
    #include <System.Classes.hpp>
    #include <FMX.Controls.hpp>
    #include <FMX.Forms.hpp>
    #include <FMX.StdCtrls.hpp>
    #include <FMX.Types.hpp>
    #include <FMX.Objects.hpp>
    #include <FMX.Filter.Effects.hpp>
    #include <FMX.Layouts.hpp>
    //---------------------------------------------------------------------------
    class TForm1 : public TForm
    {
    __published:	// IDE-managed Components
    	TToolBar *ToolBar1;
    	TLabel *Label1;
    	TTrackBar *TrackBar1;
    	TImage *Image1;
    	TImage *Image2;
    	TSpeedButton *SpeedButton1;
    	TLayout *Layout1;
    	void __fastcall SpeedButton1Click(TObject *Sender);
    	void __fastcall FormCreate(TObject *Sender);
    	void __fastcall TrackBar1Change(TObject *Sender);
    private:	// User declarations
    public:		// User declarations
        TFilterSepia * MySepiaFilter;
    	__fastcall TForm1(TComponent* Owner);
    };
    //---------------------------------------------------------------------------
    extern PACKAGE TForm1 *Form1;
    //---------------------------------------------------------------------------
    #endif

Here is the app’s form in the IDE designer:

Here is the C++ code for the event handlers:

    void __fastcall TForm1::SpeedButton1Click(TObject *Sender)
    {
    	Image1->Width = Layout1->Width / 2;
    	Image2->Width = Image1->Width;
    	Image1->Bitmap->LoadFromFile(
    	  System::Ioutils::TPath::GetDocumentsPath()
    	  + "/davidi_tiedye.jpg");
    	MySepiaFilter->Input = Image1->Bitmap;
    	MySepiaFilter->Amount = TrackBar1->Value / 100;
    	Image2->Bitmap = MySepiaFilter->Output;
    }
    //---------------------------------------------------------------------------
    
    void __fastcall TForm1::FormCreate(TObject *Sender)
    {
    	MySepiaFilter = new TFilterSepia(this);
    }
    //---------------------------------------------------------------------------
    
    void __fastcall TForm1::TrackBar1Change(TObject *Sender)
    {
    	MySepiaFilter->Amount = TrackBar1->Value / 100;
    	Image2->Bitmap = MySepiaFilter->Output;
    }

Here is what the C++ for iOS app looks like with the TrackBar at approximately 50%:

For additional information about C++Builder for iOS go to the product information page - http://www.embarcadero.com/products/cbuilder/ios-development

Special Offer: Get a free C++Builder iOS upgrade when you buy qualifying C++Builder XE5 or RAD Studio XE5 tools

C++Builder for iOS is coming soon (expected December 2013). Very soon, you will be able to create iOS apps with C++Builder! Get started with the latest version of C++Builder or RAD Studio today to benefit from the fastest, visual, multi-device app development solution for Windows and OS X, and be one of the first to deliver C++Builder apps on iOS.

Watch the C++Builder for iOS Preview at http://www.youtube.com/watch?v=EwHJbB0Zi0g

Buy one of these qualifying tools now and get the C++Builder iOS upgrade FREE as soon as it is available:

  • C++Builder XE5 – Enterprise, Ultimate or Architect editions only
  • RAD Studio XE5 – all editions

This offer is not available for C++Builder Professional edition or Starter edition.

How to get it: Purchase one of the qualifying products, new user or upgrade. When C++Builder iOS support is released, you will gain access to iOS features in a free downloadable upgrade to your XE5 product.
Exceptions: Does not apply to C++Builder Professional or Starter edition.

Availability: Buy now. The iOS upgrade will be available to all C++Builder XE5 Ent/Ult/Arch registered users and all RAD Studio XE5 users. This offer can be combined with the "Upgrade from any earlier version", "Bonus Pack" and "Step Up to Ultimate" offers.

Post a Comment

Your email is never published nor shared. Required fields are marked *

Bad Behavior has blocked 4 access attempts in the last 7 days.

Close