#3 Text Input: Building Modern GUIs using Python | Full Course | 2025

Text Input Fields in PyCharm with PI Visual: A Detailed Guide

Key Concepts:

• Text Input Fields: Customizable UI elements for user input.
• PI Visual: A visual editor for creating Python GUIs.
• Placeholders: Default text displayed in an empty input field.
• Text Type: Specifies the type of input (text, number, email, password, etc.).
• Maximum Length: Restricts the number of characters allowed in the input.
• Corner Radius: Controls the roundness of the input field's corners.
• Border: The outline surrounding the input field, with customizable thickness and color.
• Icon: A visual element displayed within the input field.
• Padding: Space between the text and the border of the input field.
• Alignment: Positioning of the text within the input field (left, center).

Project Setup and Basic Functionality

1. Creating a New Project:
   • A new directory named "text input" is created in PyCharm.
   • The absolute path of this directory is copied.
   • A new PI Visual project named "text input" is created and linked to the created directory.
   • The "Update UI" button is clicked to synchronize the PI Visual project with the Python environment.
2. Testing the Setup:
   • The Python file is run to display the PI Visual window, confirming the connection between PI Visual and PyCharm.
3. Exploring Text Input Types:
   • PI Visual offers various pre-configured text input types: Email ID, Password, Credit Card, CVC, etc.
   • These types provide built-in validation and formatting.

Customization Options

1. Dimensions:
   • Width and height can be adjusted using the PI Visual interface or by dragging and dropping.
2. Text Properties:
   • Placeholder: Sets the default text displayed when the input field is empty (e.g., "email id").
   • Actual Text: Sets a default value for the input field (e.g., "[email protected]" for an email field).
   • Text Color: Changes the color of the text.
   • Font Family: Selects the font style.
   • Font Size: Adjusts the size of the text.
   • Font Styles: Includes bold, italic, underline, and strikethrough options.
3. Background Color:
   • Modifies the background color of the input field.
   • Transparency can be adjusted.
4. Text Type (Crucial):
   • Specifies the expected input type, enabling validation and formatting.
   • Options include:
     • Text: For general text input.
     • Numbers: Restricts input to numerical values.
     • Password: Hides the input characters.
     • Credit Card: Formats the input as a credit card number.
     • Email: Validates the input as an email address.
5. Maximum Length:
   • Limits the number of characters allowed in the input field.
   • Setting it to zero removes the limit.
6. Corner Radius:
   • Controls the roundness of the input field's corners.
7. Border:
   • Adjusts the thickness and color of the input field's border.
   • Border style can be set to solid.
8. Icon:
   • Position: Places the icon on the left or right side of the input field.
   • Scale: Adjusts the size of the icon.
   • Spacing: Controls the distance between the icon and the text.
   • Selection: Allows choosing from a library of icons.
9. Padding:
   • Adds space between the text and the border.
   • Left padding shifts the text to the right.
10. Alignment:
    • Positions the text within the input field (left, center).
11. Opacity:
    • Controls the transparency of the input field.
12. Locking:
    • Prevents the input field from being moved.

Examples and Applications

1. Password Field: Setting the "Text Type" to "Password" hides the input characters.
2. Credit Card Field: Setting the "Text Type" to "Credit Card" automatically formats the input into chunks of four digits.
3. Email Field: Setting the "Text Type" to "Email" prevents the user from entering spaces and invalid characters.
4. Number Field: Setting the "Text Type" to "Numbers" restricts the input to numerical values only.
5. CVC Field: Setting the "Text Type" to "Numbers" and "Maximum Length" to 3 or 4 restricts the input to the correct number of digits.

Code Integration

• The code for the input fields is automatically generated and can be accessed in the PyCharm IDE.
• The code can be modified and customized further within the Python environment.

Synthesis/Conclusion

The video provides a comprehensive overview of text input fields in PI Visual, demonstrating their versatility and customization options. By leveraging the "Text Type" property and other settings, developers can create robust and user-friendly input fields for various applications. The combination of visual design in PI Visual and code integration in PyCharm allows for efficient GUI development in Python. The presenter emphasizes that with the knowledge of windows, buttons, and input texts, creating real-world applications is within reach, and future videos will explore such projects.