Fast forward 15+ years, and I spent some time building another native app. This time, it was a macOS time tracker. In terms of skill set, I am starting from scratch this time since I have no experience building a macOS app. But developing an app is easier with AI tools if you know what you want. I was able to vibecode a working version in two days, tailored for my needs.

In addition to normal time tracker features like the ability to start, pause, and stop the timer and set an agenda, I wanted a few other features as well:

1. A customizable reminder (nudge) to track the time during work hours. I could also customize the work hours in the app.
2. A configurable nudge interval and a snooze option.
3. A prompt at the end of the session to reflect on how well it went. I could write a short summary of the session if I need to.
4. An option to rate the session from 1 to 5.
5. Sync across my MacBook and Mac Mini since I switch between them often.

I’m sure there are apps with some or most of these features, but the prospect of building something by myself was tempting. Also, it gives me full control over the app’s features and appearance.

The time tracker UI

This was the first app I built for the Apple ecosystem. For anyone curious, the source code and the disk images are available here: time-tracker

Let’s see how we increase/decrease the brightness or contrast of an image and some other transformations. We already know that images are NumPy arrays in Python. All we need to do now is to perform matrix operations.

Let’s start by reading a greyscale image.

Image Courtesy: pexels.com

import numpy as np
import imageio
image = imageio.imread('grey_tree.jpg')

Let’s say we would like to increase the brightness of the image. To do that, add a constant value to each pixel. This is how we do that in NumPy

bright_image = image + 50
bright_image[bright_image > 255] = 255
imageio.imwrite("bright_grey_tree.jpg", bright_image.astype(np.uint8))

In the first line, I added 50 to each pixel value. When we do that, some pixels will go above the 8-bit image threshold of 255. When that happens, we set it back to 255, the highest possible value. Then I saved the matrix as an 8-bit image.

As you see in the snippet above, NumPy makes it easier to change all the pixel values without iterating over them in a loop. That is the beauty of the library.

If we save the image, we will see a brighter image like this:

You can guess what we would do to decrease the brightness now. We need to subtract a constant value from each pixel. If the number goes negative, set it to 0.

dark_image = image - 50
dark_image[dark_image < 0] = 0
imageio.imwrite("dark_grey_tree.jpg", dark_image.astype(np.uint8))

And the resulting image looks like this:

We can adjust the brightness in percentages too. Convert the percentage value to the pixel value using the formula:

pixel_value = 255 * (percentage_value / 100)

To adjust the contrast of an image, instead of adding or removing a constant, we multiple each pixel with a number:

high_contrast_image = image * 1.5
high_contrast_image[high_contrast_image > 255] = 255
imageio.imwrite("high_contrast_grey_tree.jpg", high_contrast_image.astype(np.uint8))
low_contrast_image = image * 0.5
low_contrast_image[low_contrast_image > 255] = 255
imageio.imwrite("high_contrast_grey_tree.jpg", low_contrast_image.astype(np.uint8)

Here are the corresponding versions of the image.

As you can see, multiplying by a number greater than 1 increases the contrast, while multiplying by a number less than 1 decreases the contrast.

What if you want to flip the image? All you need to do is to reverse the rows in the matrix:

flipped_image = image[::-1, :]
imageio.imwrite("flipped_image.jpg", flipped_image.astype(np.uint8)

image[::-1, :] reverses the rows in the image (::-1) and keeps the columns intact (:). You can get the mirror image by doing the same for columns instead of rows.

I recommend going through the NumPy docs to learn more about how these operators work. Read an image, and play around with it. Search about various matrix operations, read how you can do that with NumPy, and try them on your image. See how the image transforms when you do that.

In future posts, I will explain how we can do color image manipulation. For now, please share your feedback and thoughts about these posts.

I’ve also published the article on Medium: Image Manipulation in Python.

A typical color image consists of three color channels: red, green and blue. Each color channel has 8 bits and can represent 256 distinct values. Using a combination of all three channels, we can create 256 x 256 x 256 colors, which is around 16-million colors. You might have heard this term before. Now you know where that came from.

In this post, we will learn more about the different components of an image. Let us try everything in a python console, which can be started by running the following command in a terminal. If you haven’t installed Python yet, please follow the instructions from my previous post.

python3

You can download and use the sample image given below. It has different colors, and that’s what we need.

Image Courtesy: Max Pixel

Import the library and load the image:

import imageio
image = imageio.imread('colors.jpg')

Now we have the image as a NumPy array in our console. If you want to see the dimensions of the image, run:

image.shape

You will get something like (426, 640, 3). This means the image has a height of 426 pixels, a width of 640 pixels, and three color channels. We are interested in the color channels for now. Let us write the individual channels to separate image files:

imageio.imwrite('red.jpg', image[:, :, 0])
imageio.imwrite('green.jpg', image[:, :, 1])
imageio.imwrite('blue.jpg', image[:, :, 2])

The : is used to get all values. For example, image[:, :, 0] means get all rows, all columns, and the first (at index 0) color channel, which is the red channel. I’ll talk more about Indexing and Slicing in the next post. If you are curious, you can learn more about here: Indexing and Slicing (or here).

If you open the files you just created, you would see something like this.

The red, blue and green components

Why do they all look grey?

That is because they are single-channel images now. They will be saved as greyscale images. If you see the shape of the green component using the command:

image[:, :, 1].shape

You will see (426, 460). The color channel part is missing. Each pixel will have a single 8-bit value (unlike in RGB, which has three 8-bit values for R, G and B).

But if observe carefully, you will see that the grey value in the red-channel image corresponds to the amount of red in the color image.

The distribution of red color. On the extreme left, the value of red would be 0 and on the extreme right, it would be 255. As we move from left to write, the value gradually increases.

For example, see a red straw in the color image. A red pixel would be [255, 0, 0], which is on the right side of the color distribution image shown above. The green and blue components will be zero.

In red.jpg image, the color of the same straw is white, which is 255. And the same straw appears black (0) in both green and blue component images because a red pixel doesn’t have blue or green components.

Color distribution for greyscale, red, green and blue channels. In all cases, the left side is 0 and the right side is 255. If you want to see the actual colors instead of just grey images, you need to retain all three channels and set the values on the other channels to zero. For example, to get the red component, set the green and blue channel values to 0, as shown below:

red_image = image.copy()
red_image[:, :, 1] = 0
red_image[:, :, 2] = 0
imageio.imwrite('red_image.jpg', red_image)

Here, I made a copy of the image and set all the blue and green channel values to zero. This is another handy usage of : to set the same value to multiple pixels in a NumPy array.

Similarly, you can create the green and blue images. They will now look like this:

The colorful red, green and blue components

Notice that for yellow straws, both red and green components are active, but the blue component is missing (black in color). The pixel values would be closer to [255, 255, 0].

White color in RGB image would be represented as [255, 255, 255]. Grey pixels in the RGB image will have the same value for all components. When we take the average of all three values, we get the same number. For example, a grey value [57, 57, 57] in RGB will have value 57 in a greyscale image. We discussed about converting an RGB image to greyscale in the first post.

Now you know how RGB images are made; by using a combination of values on R, G, and B color channels. The same technique is used in all modern color displays, including mobile and TV screens. Here is a cool video by The Slow Mo Guys explaining how that works on TVs.

In the coming posts, I’ll explain about processing a digital image using Python. For now, please share your feedback and suggestions.

Originally published on Medium: The R, G, and B in an Image.

In this second part, let’s write some actual code. We will be writing all our code in Python.

Python makes processing and manipulating images very easy. NumPy and SciPy packages available for Python help us to perform scientific computing, mainly operations on matrices, which is of interest to us. We already saw images are just matrices in computers.

The easiest way to install SciPy and NumPy in a Linux machine is using Python package manager pip.

sudo apt-get install python3-pip
sudo pip3 install numpy scipy

Let’s install two more packages which are necessary to load and display an image in Python.

sudo pip3 install imageio matplotlib

Now, to load and display an image, all you need is a few lines of code. Make sure you have an image file in the same directory where your code is residing.

import imageio
import matplotlib.pyplot as plt

# Load the image
image = imageio.imread('color_flower.jpg')

# Display the image
plt.imshow(image)
plt.show()

That’s all. The code is self-explanatory. I have added necessary comments to help you understand.

We have a color image. How do we create a greyscale image from it?

We already know a color image has three values in each pixel positions for representing red, green and blue intensity values. In a greyscale image, there is only one value. All we need to do is to convert these three values into a single value. How do we do that?

Just take the average of all the three values!

grey pixel value = (red + green + blue) / 3

Let us implement this in Python. We use a NumPy array to store the image in Python. NumPy provides a convenient function to take the average or mean on any axis. In the case of an RGB image, axis = 0 is row-wise, axis = 1 is column-wise and axis = 2 is channel-wise. We need a channel-wise sum.

gray_image = image.mean(axis = 2)

This one line of code converts the color image to a grayscale image. It does the same thing as the following lines of code:

(row, col, _) = image.shape

# Define an empty array for grey image
grey_image = np.zeros((row, col))

for i in range(row):
    for j in range(col):
        # Store the average of R, G, B values
        grey_image[i, j] = image[i, j].mean()

plt.imshow(grey_image, cmap='gray'); plt.show()

The above code is much slower than the previous version. However, understanding this is important if you are new to this.

We just created the grey version of the image. Now, we can convert this into a binary image. A grey image pixel values range from 0 to 255. In binary, it can take only two values. In some representations, we use 0 and 1. Here, we’ll use 0 (for black) and 255 (for white).

How do we convert a grey image into a binary image? The usual method is to set a threshold value T. If the pixel value is above the threshold, we’ll set it to 255. If it is below, we’ll set it to 0. Here, we can take the threshold as the median grey value, which is 128.

Here is the extended version of the code.

binary_image = np.zeros((row, col))

for i in range(row):
    for j in range(col):
        if grey_image[i, j] <= 128:
            pixel = 0
        else:
            pixel = 255

        binary_image[i, j] = pixel

plt.imshow(binary_image, cmap='gray'); plt.show()

And the short version is just two lines:

binary_image = grey_image.copy()
binary_image[binary_image <= 128] = 0
binary_image[binary_image > 128]  = 255

That is it! NumPy takes care of updating all the pixel values to 0 or 255 depending on whether they are above or below the threshold.

Now we know about color, greyscale and binary images, and we know how to convert a color image to grey and then to binary. We will see more image processing techniques and python code in the upcoming posts.

For now, please share your feedback and opinion about these posts.

Originally published on Medium: Introduction to Digital Image Processing in Python.

Everyone has secrets. And everyone has the right to keep them. Even if they’re dead.

Keigo Higashino never fails to amuse me with perfect crimes and gripping mystery behind it. As usual, by the end of first chapter, the murder was committed, the how part was almost clear and we had a prime suspect. The rest of the story is a quest to find the motive behind the murder. Just when I thought it was over, the book had over 40% remaining and it was full of twists and turns.

Kunihiko Hidaka, a famous Japanese author, is found murdered in his house days before he was supposed to move to Canada. The body was discovered by his wife and his best friend. While investigating, Detective Kyoichiro Kaga comes across information that questions the authenticity of the author and the relationship with his friend.

The story resembles Devotion of Suspect X in many ways. There are old colleagues who know each other well. The conversation between them leads to a turning point in the investigation. But while trying to uncover the plot, the detective has to dig up far more than the suspect’s past known to him.

Unlike other stories, Malice is written from the point of view of the detective and the victim’s friend. This helps in setting the plot at the beginning. It also helped to break some conventional assumptions I had about the story.

Apparently, it won’t do just to tell the reader what a particular character is like. The author needs to show their habits or their words and let the reader form an image on their own.

I place Malice at the third position of my list of favourite Higashino novels. It comes after Devotion of Suspect X and Salvation of a Saint, pushing Journey Under the Midnight Sun and Midsummer’s Equation one step backward. But I recommend this to anyone who loves crime thrillers.

Originally published on my blog: Malice

Step-by-step, year-by-year, the world is improving. Not on every single measure every single year, but as a rule. Though the world faces huge challenges, we have made tremendous progress. This is the fact-based worldview.

Factfulness is one book I would recommend to anyone who wants to have a clear perspective about the world based on facts. It was written by Hans Rosling; a medical doctor, professor of international health and a public educator. I recently found this TED video; and interesting one which will help you know him better: The best stats you’ve ever seen. The book is a compilation of his years of research and experience, and is co-written by his son Ola Rosling and daughter-in-law Anna Rosling. I heard about it first when Bill Gates mentioned this book in his blog. He explains how it helped him not to talk about ‘developed’ and ‘developing’ countries.

We live with misconceptions about the current state of the world. We hear the bad side of everything everyday and we think the world is slowly deteriorating. This over-dramatic view is what Hans Rosling demystifies in Factfulness. He presents why and how we are wrong through a simple quiz and explanations. It doesn’t end there. He further dives into what causes these distorted views, how to look out for the warning signs, and how to avoid them.

He describes ten instincts, in ten chapters, which are responsible for this. Although these one line explanations is nothing compared to the chapters in the book, if you do not like spoilers, you can skip this part.

• The gap instinct: the natural tendency to divide everything incorrectly into two groups
• The negativity instinct: which always makes us see the negative face than the positive one
• The straight line instinct: the assumption that a straight line will always continue like the same in the future when we look at graphs
• The fear instinct: frightening things that get in our way and blocks rational thinking
• The size instinct: when lonely numbers are presented to us, we wrongly assume the severity of the issue
• The generalisation instinct: which makes us think something that works for someone, works for others too
• The destiny instinct: when people think something will never change because they don’t observe gradual progress
• The single perspective instinct: the problem of a single perspective limiting our imagination
• The blame instinct: when we find comfort in pointing fingers rather than finding the root cause
• The urgency instinct: which makes us act fast without thinking, by creating a sense of unnecessary urgency

He presents every one of these with case studies and beautiful bubble charts. All the facts are backed by data, which are compiled and verified by international organisations. Also, the author is not afraid to admit how he had these instincts in the past, some of which are quintessential and resulted in terrifying repercussions.

The chapters are clear, concise and well structured with explanations and data. There was never a dull moment reading this book, and I enjoyed it all of it! I can count the non-fictions I loved from cover to cover on the fingers (The last one was Delivering Happiness, by late Tony Hsieh, founder of Zappos)

“The world cannot be understood without numbers. But the world cannot be understood with numbers alone.” – Hans Rosling

This book was an eye-opener for me. Also, this is not about optimism. The author himself says he is not an optimist, but a ‘possibiist’; someone who neither hopes without reason, nor fears without reason, someone who constantly resists the overdramatic worldview. It doesn’t say the world is good. It says the world is both good and bad; they coexist together. The learnings from the book can be applied in about everything in our daily life.

Originally published on my blog: Factfulness

You know how the sun rises and sets at a certain time each day? In the same way, all of our lives have a day and night. But it’s not set like it is with the sun. Some people walk forever in the sunlight, and some people have to walk through the darkest night their whole lives. When people talk about being afraid, what they’re afraid of is that their sun will set. That the light they love will fade.

Keigo Higashino is an acclaimed mystery novelist from Japan, and one of my favourite authors. He started writing novels in the 80’s and was popular in Japan for quite some time. But the world came to know about him when his crime thriller, Yōgisha X no Kenshin, was translated to English as Devotion of Suspect X. He writes perfect crimes which are, indeed, page-turners.

Journey Under the Midnight Sun takes us through a time span of two decades. A murder is committed, and the specifics of it remains unresolved. Time goes by, life of everyone associated changes, but the tenacity of Sagasaki, the investigation officer, doesn’t. He pays attention to the ramifications of the murder all these years, and continues his search for answers even after his retirement, which leads to interesting discovery about the past.

The intricate structure of the plot is purely mesmerising and shows the sheer brilliance of the storyteller. You come across these unanticipated subplots, with new characters and events, that just pops up and connect with the main storyline afterward. The ending of the book is kind of abrupt, but gives a logical closure to the crusade.

“When you wander in the dark too long, you start to see things that aren’t really there.” — Keigo Higashino

If you haven’t read any books by Keigo Higashino, I would recommend reading Devotion of Suspect X first. I had trouble remembering all these Japanese character names. But that one didn’t have many characters and it helped me to focus on the story instead of going back and forth to see who is who. This wouldn’t be a problem if you have read Japanese novels before.

Originally published on my blog: Journey Under the Midnight Sun

And that’s what separates the pros from the hobbyists, the ability to create when you don’t feel like creating. The ability to “master their disinclination”

Zen Pencils always lift my spirits. They are good for a quick shot of inspiration. The latest book is no different. Like Zen Pencils: Cartoon Quotes from Inspirational Folks and Dream the Impossible Dream, Creative Struggle is yet another collection of inspirational comics, most of which are available to read for free in zenpencils.com. I love to keep hardcopy versions because they are worth it, and are good for gifting.

Gavin Aung Than gives colours to these magnificent and inspirational quotes by famous personalities and transform them into stories. He illustrates the struggles they went through, how they conquered the fears and created their best pieces of work. He also gives a glimpse of the unexplored sides of these famous personalities we know.

Originally published on my blog: Zen Pencils — Creative Struggle: Illustrated Advice from Masters of Creativity

There is always room for improving these posts. I would like to read your comments and feedback about the series.

Digital Image

Let’s start with the basic concept of image processing. A digital image can be represented as a matrix, a rectangular array of integers called pixels. Each pixel represents a small color box.

Consider a small matrix of size 2 x 2, where each is represented with an 8-bit integer. So, the values can range from 0 to 255 (²⁰ to ²⁸-1). Consider a simple example given below.

255  0
0    255

The image represented by the above matrix looks like this.

The 2x2 image

Here, the value 255 represents a white color, while 0 represents a black. This is a bilevel or binary image. Each of the values in the matrix is a pixel, the smallest units of an image. In some cases, the binary images are represented with a single bit. In some cases, 0 represents black and 1 represents white, or vice versa.

This is just an enlarged representation of 4 pixels in an image. In a real case, the pixels are tiny, and you can represent complex figures with larger matrices. In fact, if the number of pixels per inch increases, the quality of the image increases. The same concept is used in mobile phone and computer displays.

A 853x1280 binary image of a flower (courtesy: pixabay.com)

As you might be already thinking, binary images do not represent actual images we see. In reality, there should be more colors than just black and white. How do we represent that?

We already mentioned that the pixel values are 8 bits. They can take any value between 0 and 255. As the value increases from 0 to 255, the color changes from black to grey to white. In total, there are 256 shades of grey! Such an image is called a grayscale image.

The same flower image in greyscale, where each pixel value ranges from 0 to 255 (courtesy: pixabay.com)

But where are the colors? We stumble upon color images more often than grey images. That is where the color theory comes into the picture. We know the white light can be formed from three primary colors: red, green and blue. These three primary colors can be mixed in different ratios to get different colors.

The same technique is used in digital images. So far, we have seen pixels with just one value. In a color image, each pixel takes three values, one for red, green and blue. All these values range from 0 to 255. This gives us a total of 255 * 255 * 255 possible combinations of colors, which is also known as 16 million colors. Imagine a color image as three greyscale matrices stacked together, where the matrices represent these three color channels.

Much better! Here, each pixel is a combination of three values, representing R, G and B (courtesy: pixabay.com)

The color model described here is known as an RGB model. There are other models as well. But for now, let us stick with this one. In the upcoming posts, I will explore more topics in digital image processing. I will also include simple algorithms implementations in Python.

For now, please share your feedback and opinion. I would definitely improve based on that.

I’ve also published the article on Medium: Lessons on Digital Image Processing (#1).

Some people stand by you in your darkest hour, while others walk away; only a select few march towards you and become even closer friends.

Sometimes, reading is as good as experiencing. We immerse ourself in the world created by the author and refuse to let go of it. Clifton Chronicles is one that would remain with me for quite some time. The series is even worth reading a second time.

Only Time Will Tell was there in my to-read list for the past one and half years. But I started reading it only last week, and it didn’t take me a week to finish it!

This is my first proper Jeffrey Archer book. I’ve read one of his short stories some time ago, which was just okay. But the first book in the Clifton Chronicles was entirely different. A few chapters into this book, I realised why the series is called the most ambitious work of the author in four decades. The connection of the story to the pre world war era and other historical events during that time shows the effort and dedication the author has put in to create such a beautiful story. .

The style of storytelling is also worth mentioning. The story cycles between main characters; telling the story from a first person view and then from a third person view. You might read the same incident twice; different side of it through different perspectives. The author himself told in an interview that he could have written this in only a third person perspective. He considered the former as a challenge. I would say that he was successful in implementing it.

Only Time Will Tell, tells the story of Harry Clifton, who lives in Bristol with his Mom. The story starts around the time when he was five years old, although there are flashbacks of the incidents before that. I want to tell more about the story, but I can’t do it without spoiling it in a great deal.

So, here comes the spoilers.

I loved the characters, especially Maisie Clifton, Captain Jack Tarrant (Old Jack) and Emma Barrington; they proves how passionate and true a love can be as a mom, mentor and lover respectively. I loved Harry and Emma as a couple. I just hope they are not siblings.

There are many beautiful moments in the story. Here are a few of my favourites. The first one is where young Harry goes to buy a gift. Towards the end, we all know Old Jack paid 10 shillings for the watch that costs 16 shillings, and told Mr. Deakins to mention the price as 6 shillings to Harry. But when Harry tells him that he is buying the watch for his Mom, Mr. Deakins says he can have it for 5 shillings. That is simply heart-touching.

And, how can I miss Harry and Emma quoting Romeo and Juliet before parting for the night?

‘Good night, good night, parting is such sweet sorrow,’ she whispered.

‘That I shall say good night till it be morrow,’ Harry replied.

They are amazing together, and I wish I could see them playing Romeo and Juliet on stage.

Originally published on my blog: Only Time Will Tell