No Fluff Guide to Python - P10 - Project1 - Text Truncate Mobile App

 

Throughout our Python learning journey, we've delved into the intricacies of loops, explored the versatility of lists, unpacked the structure of tuples, unraveled the depths of dictionaries, and navigated the intricacies of functions. Now, it's time to embark on an exciting adventure where we'll put all these concepts to the test by tackling a real-life challenge. We'll dive into a practical scenario that showcases the power of Python and demonstrates how these fundamental building blocks come together to solve complex problems. Get ready to witness the magic of Python as we transform abstract concepts into tangible solutions.

Challenge - Project 01:

In the realm of modern app design, the text truncate feature has emerged as a ubiquitous technique to optimize the user experience across devices with varying screen sizes. This clever approach dynamically adjusts the length of text displayed on the screen, ensuring that essential information is conveyed concisely and legibly, regardless of the device being used.

You can see similar output in apps like Gmail, WhatsApp etc. The text is shown with a "..." at the end, and this is done dynamically.

When viewing an app on a smaller screen, such as a smartphone, the text truncate feature comes into play. It intelligently trims the text to fit the available space, adding an ellipsis (...) to indicate that additional content is available. This prevents the text from overflowing the screen and becoming unreadable, ensuring a seamless and frustration-free user experience.

Conversely, on larger screens, such as those found on laptops or tablets, the text truncate feature gracefully expands the text to fill the available space. This allows users to view the complete message without the need for scrolling or additional clicks. The dynamic nature of text truncation ensures that the same content is presented optimally on devices of all sizes, enhancing accessibility and user satisfaction.

OK! let's begin.

So, here's our reference model.

Lets create a dictionary of all mobile phones and screen size:

iphones = {
    "iPhone 12 Pro Max": {
        "width": 1284,
        "height": 2778
    },
    "iPhone 12 Pro": {
        "width": 1170,
        "height": 2532
    },
    "iPhone 12": {
        "width": 828,
        "height": 1792
    },
    "iPhone 12 mini": {
        "width": 750,
        "height": 1542
    },
    "iPhone 11 Pro Max": {
        "width": 1242,
        "height": 2688
    },
    "iPhone 11 Pro": {
        "width": 1125,
        "height": 2436
    },
    "iPhone 11": {
        "width": 828,
        "height": 1792
    },
    "iPhone SE": {
        "width": 750,
        "height": 1334
    }
};

If I simply want to sort these in ascending order of their width:

phones = sorted(iphones, key=lambda x: iphones[x]["width"])


print(phones)

Output:

['iPhone 12 mini', 'iPhone SE', 'iPhone 12', 'iPhone 11', 'iPhone 11 Pro', 'iPhone 12 Pro', 'iPhone 11 Pro Max', 'iPhone 12 Pro Max']



So far so good! Here's our long message that we want to print on the screen:

“Don't let the expectations and opinions of other people affect your decisions. It's your life, not theirs. Do what matters most to you; do what makes you feel alive and happy. Don't let the expectations and ideas of others limit who you are. If you let others tell you who you are, you are living their reality — not yours. There is more to life than pleasing people. There is much more to life than following others' prescribed path. There is so much more to life than what you experience right now. You need to decide who you are for yourself. Become a whole being. Adventure.”

If you are viewing this on iPhone 12 Mini, the number of characters that can fit into 1080 pixels depends on the font and font size used. For example, a 30-point Arial font can fit about 3 characters per inch. We will use this as standard.

Width of a single character in pixels: using a 30-point Arial font, the width of a single character would be:
width = 30 points / 3 characters per inch

width = 10 pixels

Once we know the width of a single character, we can calculate the number of characters that can fit into 1080 pixels by dividing 1080 by the width of a single character.

width of a single character is 10 pixels, the number of characters that can fit into 1080 pixels would be:
num_characters = 1080 pixels / 10 pixels per character

num_characters = 108 characters


Therefore, approximately 108 characters can fit into 1080 pixels using a 30-point Arial font.


This calculation will be different for individual phone model. We need to ask the user to enter the phone model:

# Print the list of available iPhone models.
print("Available iPhone models:")
for model in iphones:
    print(f" - {model}")


# Get the user input for the iPhone model.
iphone_model = input("Enter the iPhone model number: ")


# Check if the user input is valid.
if iphone_model not in iphones:
    print("Invalid iPhone model.")
    exit()


# Print the selected iPhone model.
print(f"You selected: {iphone_model}")

Output:

Available iPhone models:
- iPhone 12 Pro Max
- iPhone 12 Pro
- iPhone 12
- iPhone 12 mini
- iPhone 11 Pro Max
- iPhone 11 Pro
- iPhone 11
- iPhone SE

Enter the iPhone model number:
iPhone 12

You selected: iPhone 12


Okay! So, we have the phone model, and using this we can retrieve the width from the dictionary. Once we have the width, we can calculate the number of characters to show as output.

Here we go:

We create a function "extract_characters". The function takes in a string S and another string i, uses the i to match it inside the dictionary we create at the beginning "iphones", and if it gets a match, it picks up the value of the "width" key and uses that value to calculate the number of characters to extract "charsToExtract", and then extracts those characters from string S and print them:

def extract_characters(S, i):


    # Check if the iPhone model is in the dictionary.
    if i not in iphones:
        print("Invalid iPhone model.")
        return


    # Get the width of the iPhone model.
    width = iphones[i]["width"]
    charsToExtract = round(width / 10)


    # Extract the characters from the input string.      
    # substract 20 for margin on each side. - 40
    extracted_characters = S[:charsToExtract-40]  + "..."


    # Print the extracted characters.
    print(extracted_characters)

We store the long text in a variable "message", and then we call the function we created by passing the message variable and the iphone_model variable entered by user:

message = "Don't let the expectations and opinions of other people affect your decisions. It's your life, not theirs. Do what matters most to you; do what makes you feel alive and happy. Don't let the expectations and ideas of others limit who you are. If you let others tell you who you are, you are living their reality — not yours. There is more to life than pleasing people. There is much more to life than following others' prescribed path. There is so much more to life than what you experience right now. You need to decide who you are for yourself. Become a whole being. Adventure."


# Call the function to extract the characters.
extract_characters(message, iphone_model)

Here's the output:
You selected: iPhone 12 mini
Don't let the expectations and opin...

Here's when we run it for a larger screen:
You selected: iPhone 12 Pro Max
Don't let the expectations and opinions of other people affect your decisions. It's your...

Cool Right!

There are endless tweaking you can do with this. Here are some ideas:

• Add more devices, for example: apple watch

 

• The margin "40" can also be variable based on screen size
• and so on..
  

Until Next Time..