CodeDelphiDelphiFMXLearn PythonProjectsPythonPython GUI

How to Build An Image Editor Using DelphiFMX Python Package

How to Build An Image Editor Using DelphiFMX Python Package

As a developer, have you ever wanted to create an image editing tool that lets you seamlessly apply a variety of filters, adjust dimensions, and even perform advanced features like background removal? In this comprehensive tutorial, we will harness the capabilities of DelphiFMX and merge them with image management platforms to craft an image editing application that leverages the incredible potential of AI tools with an amazing GUI. So, let’s get started right away!

How to create an image editing app with DelphiFMX? 

how to create an image editing app with delphifmx 2600139

Developing an image editing application with DelphiFMX involves a series of steps. First, install Delphi Integrated Development Environment (IDE) and the Python FireMonkey GUI framework on your computer. These are essential tools for creating the image editor. Additionally, you’ll need a text editor or an IDE that supports Python, such as PyScripter, along with the Delphi4PythonExporter tool. If you don’t have these tools already, we suggest referring to the article “Setting Up a Powerful Python GUI Project” article to help you get started.

Furthermore, it’s crucial to have the requests and cloudinary Python libraries installed. You can achieve this by executing the following commands in your command prompt:

To access the source code for this tutorial, you can download it from our GitHub repository using the following link:

https://github.com/Embarcadero/PythonBlogExamples/tree/main/Image_Editor_App

What kind of forms do we need for an image editing app?

Let’s begin by launching the Delphi application and initiating a new project. Go to the File menu, select New, then choose Multi-Device Application, and finally, opt for Blank Application and click OK. In this tutorial, we’ve named our project “ImageEditor.”

If you’re not well-acquainted with the different sections of the Delphi IDE, we suggest referring to our complimentary eBook bundle. This resource comprehensively covers the Delphi Python EcoSystem and all Python GUI offerings.

1 2599690

Now, let’s provide a name for our form. Right-click on the form and select QuickEdit. Here, we’ll name our form MainForm with the caption “Image Editor.”

2 8839418

We’ll also rename the source file for our MainForm to Main.pas to simplify tracking. Next, adjust the form’s dimensions in the Object Inspector using ClientWidth and ClientHeight under the properties tab or simply using the mouse.

We can use the TTabControl component of this IDE to add two tabs to our form, one for image editing and the other for background removal. Search for the component in the Palette and drop this component onto the form.

3 1935352

Next, stretch out the component so it occupies the whole form. Here is what our form looks like:

4 3685293

Right-click on the component and click on AddTabItem to add a tab to the form. As mentioned, we will add two tabs, one for image editing and the second for background removal. Next, we’ll use QuickEdit to rename the tabs to Edit and BackgroundRemoval.

5 3879101

Now, let’s incorporate a few labels that will be required for our application. To achieve this, access the standard Palette and locate the TLabel component. Then, drag and drop this component onto the form.

6 1457652

Next, we’ll customize the text style by utilizing the TextSettings property of each label. To do this, navigate to the Object Inspector and search for the TextSettings property. Click on the ellipsis button (...) adjacent to the Font property to explore options for adjusting the label according to your preferences. In this instance, we’ve configured our font family as SemiBold Segoe UI with varying font sizes for each label. Here’s what our form looks like:

7 1769559

Now, let’s add a couple of buttons to our form. For this purpose, we’ll utilize the TButton component. We’ll include two buttons in this tab: FileButton to facilitate file selection for image editing and a TransformButton to edit and display the transformed image.

8 9889248

Next, we’ll add a TImage component to the tab where the selected and edited images will be displayed. A TComboBox will also be used for giving options of all possible image filters to the user. At the same time, a TSpinBox next to it will allow the user to input the intensity of the selected filter. We will also add a TCheckBox component that, when checked, will enable users to change the image’s dimensions by specifying the height and width. We will also add two TEdit components for the user to specify the new image dimensions.

9 1991768

To complete our form, we’ll introduce the TOpenDialog component, enabling us to open a dialog box for file selection from our system. Access the Palette, search for this component, and then drag and drop it onto our form. Here is what the tab looks like:

10 3972548

Now that our Edit tab is complete, we will head to the BackgroundRemoval tab. Here, we will add a TImage component and a TButton component. Here is what the tab looks like:

11 5586346

Finally, let’s infuse some style into our form. To achieve this, you’ll need to obtain the free eBook bundle, which includes various styles. Download the eBook and extract the FMX styles ZIP file to your preferred directory. Select the style you wish to use; in this instance, we’ll opt for GoldenGraphite.style from the bundle. You can explore more DelphiFMX styles online, such as at delphistyles.com.

Go to the Palette and add the TStyleBook component to your form.

12 5036927

Double-click on the StyleBook1 component to access the Style Designer. Now click the open button, which will prompt a dialog box to appear.

13 5316630

Navigate to the .style file within the dialog box, select the file, and then click exit

Now, select the form and access the Object Inspector. Locate the StyleBook property, choose the drop-down menu, and select StyleBook1.

14 7631909

Here’s what our form looks like:

15 9277676

Now that the form is fully configured, the last step involves adding functionality to each button within the form. To achieve this, double-click on each button. This action will generate an OnClick method for that button. This will create a procedure in the .pas file corresponding to the .fmx form, enabling you to incorporate unique functionality for each button when clicked.

16 2002912

Due to the Delphi4PythonExporter’s lack of runtime implementation, including at least one comment (//) in each procedure to preserve its function when exporting the form is essential.

17 2578614

How can I export these forms into Python code?

Now that our form is ready, we can export the project by navigating to Tools > Export To Python > Export Current Entire Project.

18 6434660

Here, we will give the project the title Image Editor App. Next, select the directory of your choosing and click on Export:

19 1485474

Because we had one form, Delphi generated two Python files and one .pyfmx file. The ImageEditor.py file will be used to run the application, whereas the Main.py file contains the class for the MainForm. The Main.pyfmx file contains the visual information for the MainForm. Here are the contents for each file.

ImageEditor.py:

Main.py:

How can I add functionality to our image editing form?

The only thing we need to do now is start adding functionality to our forms. Start by opening up Main.py in the text editor of your choice and importing some libraries:

Next, navigate to the __init__ function. Here, we will define our effect_options in a dictionary and use it to populate our EffectComboBox. Next, we will define our Cloudinary API using our cloud credentials. Here is what our __init__ function looks like:

Next, let’s head over to the FileButtonClick function. Here, we will start by defining the title of the Dialog Box and filter the results only to show image formats:

Once the user selects the image, we open it up and extract its information, including its location and name. Here is what our FilebuttonClick function looks like:

Next, we will create a BoxChecked function to turn our Width and Height edit labels on or off. Here is what the function looks like:

Before moving forward, we will define a helper function to help us download our images from the Cloudinary cloud. Start by creating a download function inside the MainForm class. Next, we will use requests to retrieve the image using a url provided in the results parameter. The image is then saved in the path defined in the local_file_path parameter. Finally, it is then loaded onto the form using the image parameter. Here is what our final function looks like:

Now, let’s define our TransformButtonClick function. We will start by defining an empty list called transformations that will be used to pass our transformation parameters to the Cloudinary API. Next, we will check if the DimensionsCheckBox has been checked. If it has, we will add a width and height transformation to the list:

Next, we will retrieve the transformation selected in the combo box as well as its intensity from the spin box. We will then add these transformations to the list and call the uploader function to upload the image with said transformation. Next, we will download the transformed image using our download function. Here is what our complete function looks like:

Finally, we can complete our app by defining the RemoveButtonClick function. Like the TransformButtonClick function, we will make a simple API call to the Cloudinary cloud with a background_removal parameter. This parameter uses the Cloudinary AI Background Removal addon which removes the background from our image. You can learn more about this addon here. Here is what our final function looks like:

Here is what our final Main.py file looks like:

What does the final Python image editing app look like?  

Now that everything is complete, all we need to do is open up the ImageEditor.py file and run it.

20 5197204

Next, click on the File button and load up an image file. For now, we will be loading using an image of a teacher as a reference.

21 8544310

Once you’ve selected your image, you can add an effect to your image. Here, we will add a pixelate effect with an intensity of 30.

22 7816273

Finally, click the Transform button to add the effect to your image.

23 3399836

Next, let’s head over to the Background Removal tab.

24 2855568

Now click on Remove to remove the background of the subject.

25 8817564

Are you ready to create more apps with DelphiFMX?

are you ready to create more apps with delphifmx 7094947

Creating an image editing application with DelphiFMX empowers developers to leverage AI tools and elevate their image manipulation capabilities. By seamlessly integrating the Delphi IDE with the DelphiFMX Python library, you can lay the foundation for a robust image editor. Moreover, Delphi’s flexibility allows you to harness external APIs like Cloudinary for enhanced functionality, enabling features like advanced filters, dimension adjustments, and even background removal while managing to provide one of the best GUI tools.

Ready to embark on your creative journey? Dive into the world of image editing with DelphiFMX and unlock a realm of possibilities!

What are some important FAQs about creating great apps with Python and Delphi?

what are some important faqs in this domain 8085178

What are the benefits of using Delphi for image editing apps?

Delphi offers a powerful and flexible development environment for building image editing applications. It provides access to various libraries, APIs, and tools that streamline the development process and enable rich functionality.

Is DelphiFMX suitable for cross-platform development?

Yes, DelphiFMX is known for its cross-platform compatibility. You can develop apps for Windows, macOS, iOS, and Android using a single codebase, which is advantageous for reaching a wider audience.

Can I use external APIs like Cloudinary in my DelphiFMX app?

DelphiFMX allows you to integrate external APIs like Cloudinary to enhance your app’s capabilities. You can use APIs for image storage, management, and manipulation.

Can I monetize my image editing app created with DelphiFMX?

Yes, you can monetize your app through various means, such as offering it as a paid download, integrating ads, or offering in-app purchases for premium features

Related posts
CodeIDELearn PythonPythonPython GUITkinter

How To Make More Than 20 ChatGPT Prompts Work With Python GUI Builders And NumPy Library?

CodeIDEProjectsPythonWindows

Unlock the Power of Python for Deep Learning with Generative Adversarial Networks (GANs) - The Engine behind DALL-E

CodeIDELearn PythonPythonPython GUITkinter

How To Make More Than 20 ChatGPT Prompts Work With Python GUI Builders And Matplotlib Library?

CodeIDELearn PythonPythonPython GUITkinter

How To Make More Than 20 ChatGPT Prompts Work With Python GUI Builders And Pillow Library?

Leave a Reply

Your email address will not be published. Required fields are marked *