DEV Community: Sree Gayathri Sidamsetti

Screenless Display Technology

Sree Gayathri Sidamsetti — Sun, 18 Dec 2022 16:02:59 +0000

Hello 👋 and Welcome to an exciting exploration of the world of technology !! If you're someone who loves staying up-to-date on the latest technology, you will enjoy what's in store for you in this article.

I recently came across Screenless Displays and was immediately fascinated by this innovative technology. I have only seen them in movies📽 and TV shows and never thought they could exist in the real world.

I spent the next few days learning everything I could about this technology. I'm so excited to share with you what I've learned about this amazing technology and why I think this could revolutionize the way we access and use information on devices.

So grab a cup of tea (or coffee, if that's more your style 😋) and let's dive into the amazing world of screenless displays together !!

Introduction

Imagine being able to watch your favorite movies or TV shows without ever having to look at a screen again. Sounds like a dream, right? Well, with Screenless Display Technology, it's no longer just a dream - it's a reality 🤩. This amazing technology allows you to experience images and videos as if they are floating right in front of you using lasers, special lights, holography, or projection to create the illusion.

No more straining your eyes to see a tiny screen or being tied to a device. With Screenless Display, you can enjoy and access your content in a whole new way. And, because Screenless Display doesn't require a physical screen, it offers a level of privacy that was previously unimaginable. So say goodbye to your old, outdated touchscreen displays - the future is here, and it's SCREENLESS 😎.

Types of Screenless Displays

Are you ready to enter a world beyond screens? There are three main types of Screenless Displays, each with its unique features and benefits:

Visual Image Display: These displays use light to create images that appear to float in the air without needing a physical screen. Some examples include holograms (like the one we have seen in Star Wars 😊), heads-up displays used in jet fighters, virtual reality goggles, and smartphones and tablet computers with LCD panels.
Retinal Display: These displays take things a step further by projecting images directly onto the human retina 👁. This means that the image is beamed directly into your eye, bypassing the need for any intermediate objects like screens or projectors. You may have seen the potential of retinal displays in movies like Terminator. This is very useful for some seriously private computing, especially when you're working in public places. Some examples of this technology include Google Glass and Eye Tap.
Synaptic Interface Display: This is the most advanced type of Screenless Display. These systems project images directly into the human brain 🧠, bypassing the eyes entirely. This technology doesn't use light at all and has the potential to be used for a wide range of applications, from security systems to education and business. While this technology is still in its early stages, it has already had some success in sending video signals from electronic cameras into the brains of living horseshoe crabs.

Why is Screenless Display Technology Important?

Screenless Display is a revolutionary technology that offers many advantages over traditional display technologies.

One of the main advantages of Screenless Displays is their energy efficiency 🔋 because they do not require a physical screen or projector. This is particulary beneficial for devices that rely on batteries, as it can help extend the lifespan of the device.
Screenless displays also have the advantage of being much lighter and more compact compared to traditional displays. This is because they don't require a physical screen or projector, which can be quite bulky and heavy. The reduced weight and size of screenless displays make them more portable and convenient to use, as they can be easily carried around and can be used on the go.
Screenless displays, like heads-up displays (HUDs), offer improved readability in certain situations. HUDs project important information onto a transparent screen or directly onto the retina, allowing you to view the display while also maintaining focus on your surroundings. This can be especially useful for applications like navigation or aviation. For example, a HUD would allow you to view a map or other important information while driving without having to take your eyes off the road.
Some screenless displays, like retinal displays, offer a high level of privacy 🔐when computing in public places. This is because the image is directed straight onto the retina, eliminating the need for intermediate objects such as screens or projectors.
Because screenless displays don't have a physical screen, they are less prone to damage from impacts or scratches. This makes them a more reliable and long-lasting option for devices that may be subject to rough handling or harsh environments.
Imagine a group of people trying to watch a presentation on a regular screen. If they are not all standing directly in front of the screen, they may have difficulty seeing the content clearly due to the limited viewing angle of the screen. However, if the presentation were being displayed on a screenless display, such as a holographic display, the group of people would be able to view the content from a wider range of angles without any loss in image quality.
One more significant advantage of screenless displays is it allows people with visual impairments to interact with and consume information more easily. Instead of struggling to see or read a physical screen, individuals with vision loss can use screenless displays to access information in a more intuitive and accessible way as screenless displays can project images directly onto the retina 👁🗨 or even transmit them directly into the brain 🧠.
Another benefit of screenless displays is the ability to achieve extremely high resolutions. These displays use lasers to project the image, which allows them to create very small and precise pixels. This results in a clear and crisp image. Additionally, the use of lasers allows these displays to reproduce colors more accurately and achieve high levels of brightness and contrast.
Additionally, Screenless Displays also have many other benefits like being able to present 3D and far-point images , offering a more detailed and immersive experience, etc.

Challenges with Screenless Display Technology?

Screenless display technology is still in the early stages of development, and there are several challenges that need to be overcome before it becomes widely available.

The limited availability of screenless displays can be a barrier to the broader adoption and use of these types of displays. For example, suppose a user is in a location with no screenless displays available. In that case, they may be unable to access the information conveyed through these displays.
It is essential to use these displays safely and responsibly to avoid any potential negative impacts on eye health or overall well-being. Some issues to consider when using screenless displays are prolonged use of audio at high volumes 🔊 and haptic feedback at high intensities, as these factors, can potentially cause strain on the eyes or other parts of the body. To prevent overuse or strain, it is important to use screenless displays responsibly and to take breaks as needed.
Creating screenless displays can be expensive and complex due to the specialized equipment and computing power needed. For example, holographic displays involve intricate technology and often have a high price 💰 tag. Projection displays also need specialized equipment, although they are generally less costly than holographic displays. These financial and technical challenges can make it difficult for manufacturers to produce screenless displays at a reasonable cost.

Conclusion

Screenless Display Technology has the potential to change the way we interact with and consume information. With its immersive and interactive experiences, screenless displays offer a new level of engagement and can be used in a variety of applications, including gaming, entertainment, and education.

While screenless displays are still in the early stages of development, ongoing research and development efforts are focused on improving their usability and accessibility and making them more widely available. As this technology continues to evolve, it has the potential to transform the way we experience and interact with the world around us.

I'm glad you took the time to read this article on screenless displays. I hope you found it interesting and informative 💡. If you have any thoughts or comments on this topic, please feel free to leave a message below. Drop a like 👍 and be sure to share it 🔂 with your friends, if you enjoyed this article.

I am planning on covering new technology trends on this blog in the future. Don't miss out on the latest and greatest in tech. Follow my blog and stay ahead of the curve. Trust me, you'll be the one dropping knowledge bombs left and right.

See you in the next one 👀. Wherever you are in the world, I wish you all the best 👍 Cheers !!!

Sorting Algorithms Introduction

Sree Gayathri Sidamsetti — Fri, 21 Jan 2022 15:28:34 +0000

Hello Guys👋 I Hope you are doing great !! This is a short article, and in this, you will get a brief introduction to sorting algorithms.

Without Further Ado, Let's get started 👍!!

Introduction

Sorting is nothing but an arrangement of elements in an ordered sequence like highest to lowest or lowest to highest or some alphabetical order.

These are some common sorting algorithms that we will discuss in this series.

Bubble Sort
Selection Sort
Insertion Sort
Merge Sort
Counting Sort
Quick Sort

Before going into each algorithm, let's first know some factors on which sorting algorithms are classified.

Classification of Sorting Algorithms

In-place sorting: These algorithms do not require any extra space for comparison and temporary storage of a few data elements. It only needs the input space, excluding the constant space used for variables or iterators and the space used for stack in the recursive algorithms.

Examples: Bubble Sort, Selection Sort, Insertion Sort, Quicksort, etc.
Out-place sorting: These algorithms require extra space for sorting

Examples: Merge Sort, Counting Sort, etc.
Stable sorting: In these algorithms, two objects with equal keys appear in the same order before and after sorting

Examples: Bubble Sort, Insertion Sort, Merge Sort, Counting Sort, etc.
Un-stable sorting: In these algorithms, two or more objects with equal keys don't appear in the same order before and after sorting

Examples: Selection Sort, Quick Sort, etc.
Adaptive sorting: In these algorithms, the order of occurrence of elements in the input affects the time complexity of a sorting algorithm

Examples: Bubble Sort, Insertion Sort, Quick Sort, etc.
Non-adaptive sorting: In these algorithms, the order of occurrence of elements does not affect the time complexity of a sorting algorithm

Examples: Selection Sort, Merge Sort, etc.
Comparision sorting: These algorithms compare elements at each step of the algorithm to determine if one element should be to the left or right of another element.

Examples: Bubble Sort, Selection Sort, Insertion sort, Merge Sort, etc.
Integer sorting: These type of algorithms do not make comparisons. Integer sorts determine for each element x, how many elements are less than x. This type of algorithm is used to immediately place each element into the correct slot no need to rearrange lists.

Example: Counting Sort

Here is the Complexity's of Different Sorting Algorithms

🖐Conclusion

Finally, In this article, we learned about some classifications of sorting algorithms. Now we are ready for learning algorithms 👍👩🎓

What's Next?

Thank you for reading so far🙏. I hope you enjoyed following it and are ready to learn sorting algorithms.

In the coming parts, we will discuss about each Sorting Algorithm in detail !! So Stay Tuned👀👀!!!!

Do share your valuable suggestions and your honest feedback. If you have any comments, questions, or concerns, Do comment them, and I am more than happy to take them💬.

Happy Learning 😊👍!!

Searching Algorithms in Detail

Sree Gayathri Sidamsetti — Thu, 20 Jan 2022 08:36:06 +0000

Hello Guys👋 Hope you are doing great !! Welcome to the first article of the Data Structures and Algorithms series, in which we'll go over all of the major concepts so you can master DSA.

In this article, We will discuss about Searching Algorithms.

We will discuss the Main Idea, Algorithm, Implementation, Complexity Analysis, Advantages and DisAdvantages of each one. 🧠

Without Further Ado, Let's get started 👍!!

Introduction

Searching is the process of finding a specific element in a collection of elements. If the element is found in the collection, the process is considered successful, and it returns the location of that element. Otherwise, it deems the search unsuccessful.

Based on the type of search operation, searching algorithms are classified into two categories.

Sequential Search : In this type, the collection is traversed sequentially, and every element is checked. For Example, Linear Search.
Interval Search : These algorithms are used to search in sorted collections. These are much more efficient than Linear Search because they repeatedly target the center of the search structure and divide the search space in half. For Example, Binary Search.

1 Linear Search

Main Idea: Traversing the list of items from start to end and exploring all the element's properties on the way.

Example: You have to find and print indices of all the elements whose value is x in the array of size n.

for each element in the array {
    if(current element == x)
        print(index)

Complexity Analysiss

Worst-Case : This occurs when the element we are finding is present at the end of the array or not present in the given array. In this case, we have to traverse the entire array. The worst-case time complexity of the linear search is O(n).

Average Case : The average case time complexity is (n).

Best Case : This occurs when the element we are finding is at the first position of the array. The best-case time complexity of the linear search is (1).

Space Complexity : As it does not need any extra space, Space Complexity is O(1)

2 Binary Search

Main Idea: Dividing the array into two halves and throwing away one instance of it based on a particular condition. Binary Search only works on sorted collections.

Binary Search follows the divide and conquer approach in which the list is divided into two halves, and the item is compared with the middle element of the list. If the match is found, then the middle element's location is returned. Otherwise, we search into either of the halves depending upon the result produced through the match.

Algorithm

Compare x with the middle element
If middle element == x: return middle index
Else if x > middle element: x can only lie in the right half of the subarray after the middle element, so we search in the right subarray.
Else (x < middle element): x can only lie in the left half of the subarray before the middle element, so we search in the left subarray.

Implementation (PseudoCode)

Iterative

function binarySearch(arr, n, target) 
    left = 0
    right = n-1
    while(left <= right)
        mid = low + (high - low)/2
        if(target == arr[mid])
            return mid
        else if(target < arr[mid])
            high = mid - 1
        else 
            low = mid + 1
    return -1

Recursive

function binarySearch(arr, n, target, left, right) 
    if(left > right)
        return -1
    mid = low + (high - low)/2
    if(target < arr[mid])
        return binarySearch(arr, n, target, left, mid-1)
    else 
        return binarySearch(arr, n, target, mid+1, right)
return -1

Complexity Analysis

The time complexity of Binary Search can be written as:

T(n) = T(n/2) + c

The above recurrence can be solved either using the Recurrence Tree method or the Master method. It falls in case II of the Master Method, and the solution of the recurrence is Theta(Logn).

Worst-Case : This occurs when we have to keep reducing the search space till it has only one element. The worst-case time complexity of Binary search is O(logn).

Average Case : The average case time complexity is (logn).

Best Case : This occurs when the element to search is found in the first comparison, i.e., when the first, middle element itself is the element to be searched. The best-case time complexity of Binary search is (1).

Space Complexity :

Iterative Implementation - O(1)
Recursive implementation - O(logn) - recursion call stack space

Advantages

It is fast and easy to Implement
It doesn't require any extra space
This reduces the time complexity to a greater extent

Dis Advantages

It can only be applied to monotonic problems (sorted collections)
It can only be used in data structures that allow direct access to the elements (ex: We cannot use Binary Search on Linked Lists)

🖐Conclusion

Finally, In this article we learned about Linear Search and Binary Search Algorithms.

What's Next?

Thank you for reading so far🙏. I hope you enjoyed following it and got a clear idea on Linear Search and Binary Search. Now open you favourite code editor and start implementing these algorithms in the language you are comfortable with💻.

And also, practise some problems on Binary Search from here.

In the coming parts, we will discuss the Sorting Algorithms in detail !! So Stay Tuned👀👀!!!!

Do share your valuable suggestions and your honest feedback. If you have any comments, questions, or concerns, Do comment them and I am more than happy to take them💬.

Happy Learning 😊👍!!

Indexing and Slicing Numpy Arrays

Sree Gayathri Sidamsetti — Fri, 21 May 2021 15:40:22 +0000

Hello Guys👋

In the previous article, we have learned different methods of creating Numpy Arrays. In this article, we will see how to perform indexing and slicing on Numpy Arrays.

Let's get started with this article👍.

Indexing and Slicing in 1D Arrays
- Indexing
- Slicing
Indexing and Slicing in 2D Arrays
- Indexing
- Slicing
Conclusion

Indexing & Slicing in 1D Arrays

Both indexing and slicing are similar to Python Lists.

Indexing :

Zero-based Indexing - index of 1st element is 0
Supports Negative Indexing - Index of last element is -1

To get more clarity, Let's see this in an example now.

numbers_array = np.array([1, 4, 7, 0, 55, 79, 3])
first_number = numbers_array[0]
third_number = numbers_array[2]
last_number = numbers_array[-1]
third_from_last_number = numbers_array[-3]

print("Array : ", numbers_array)
print("first_number : ", first_number)
print("third_number : ", third_number )
print("last_number : ", last_number )
print("third_from_last_number : ", third_from_last_number )

By now you may have guessed what it prints👏. Let's see.

Array : [1 4 7 0 55 79 3]
first_number : 1
third_number : 7
last_number : 3
third_from_last_number : 55

Slicing :

Slice with the [start:stop] syntax outputs elements in the interval [start, stop)
Slice with the [start:stop:step] syntax outputs elements in the interval [start, stop) with a step size of step

Let's see various types of slicing

numbers_array = np.array([1, 4, 7, 0, 55, 79, 3, 45, 28])

General Method :
Using Negative indices :
Omitting Start and Stop Indices :

Modifying Slices :

In NumPy, slices can be assigned

a constant or
an array of the right shape.

For example

Assigning constant to a Slice :
- numbers_array[1:4] = 5 This changes all the values from index 1 to 3 to 5.
Assigning an array of right shape to a Slice
- numbers_array[2:6] = np.array([1, 2, 3, 4]) This replaces the slice with the new array assigned.

Important Note : In NumPy slicing returns a view of the original array, instead of creating a new array. (Assignments also return the view only)

This makes slicing numpy arrays very fast.
This also means modifying a slice, modifies the underlying array as well.

To create a new array from the given Numpy array, we have to use numbers_array.copy() method. This creates a duplicate array and the changes made to this will not modify the original array.

Indexing & Slicing in 2D Arrays

Indexing :

Again same as 1D arrays,

Zero-based Indexing - indexing starts with 0

array_2d = np.array(['a', 'b', 'c', 'd'],
                    ['e', 'f', 'g', 'h'],
                    ['i', 'j', 'k', 'l']])

Let's how we can access rows, columns, and elements.

array_2d[i] gives the i+1 th row, like array_2d[0] gives the first row.
array_2d[:,i] gives the i+1 th column, like array_2d[:, 0] gives the first column.
'array_2d[a:b]gives the element ina+1 th rowandb+1 th column`, like array_2d[0][0] gives the element in first row and first column. (1st element in 1st row)

Slicing :

`
array_2d = np.array(['a', 'b', 'c', 'd'],
['e', 'f', 'g', 'h'],
['i', 'j', 'k', 'l']])

We will see possible ways of slicing 2d arrays.

array_2d[1:3] gives the complete rows having index from 1 till 3 (excluding 3) same as in 1d arrays.
`array_2d[1:3, 2:4] gives the elements in rows having index 1 to 3 and columns having index 2 to 4.
array_2d[:, 0:4:2] gives elements in all rows, columns having indices from 0 to 4 with a step of 2.

We also can modify the elements in 2d arrays same as in 1d arrays.

🖐Conclusion

Finally, In this article we learned how to perform indexing ad slicing on Numpy Arrays (both 1D and 2D arrays)

What's Next ?

Thank you for reading so far🙏. I hope you enjoyed following it and understood how to do indexing and slicing on Numpy Arrays. I highly recommend you to try these methods.

In the next part, we will discuss the Advanced Indexing and Slicing methods of Numpy Arrays in detail and then Operations on Arrays!! So Stay Tuned👀👀!!!!

Do share your valuable suggestions and your honest feedback, also Constructive Criticism. If you have any comments, questions, or concerns, Do comment them and I am more than happy to take them💬.

Happy Learning 😊👍!!

All different ways of Creating Numpy Arrays!

Sree Gayathri Sidamsetti — Thu, 20 May 2021 12:35:57 +0000

import numpy as np

Hello Guys👋

In this article, we will see all the different ways of creating Numpy Arrays.

So, Without much ado, Let's get started with the article👍.

Numpy Arrays vs Python Lists
Creating Numpy Arrays from Lists
Creating Numpy Constant Arrays
Creating Numpy Sequence Arrays
Creating ndarrays and understanding their properties
Conclusion

Numpy Arrays vs Python Lists 🤨:

The main difference difference is the time taken by them to perform operations. To measure this, we use %timeit function. N loops indicate that the function has been called N times to compute the average time to execute the function. Best of K indicates that the %timeit has been run K times to take the best average. These constants can also be modified and given as argument to the %timeit function.

Let's use %timeit and see the difference:

vec_size = 1000
def add_python_lists():
    X = range(vec_size)
    Y = range(vec_size)
    Z = [X[i] + Y[i] for i in range(len(X))]
    return Z

%timeit add_python_lists()

The output of the above %timeit function is : 1000 loops, best of 5: 260 s per loop

vec_size = 1000
def add_numpy_arrays():
    X = np.arange(vec_size)
    Y = np.arange(vec_size)
    Z = X + Y
    return Z
%timeit add_numpy_arrays()

The output of the above %timeit function is : The slowest run took 1698.30 times longer than the fastest. This could mean that an intermediate result is being cached. 100000 loops, best of 5: 3.85 s per loop

So, we can clearly see that to add two lists of same size, Python takes 260s per loop whereas Numpy takes only 3.85s per loop🙂.

Creating Numpy Arrays from Lists🙃

Numpy arrays can be created using a list with numpy.arrayAll elements of a numpy array should be of the same type

numpy.array chooses a data type which fits all of the elements in the array
We can also specify the data type with the dtype parameter

Let's create a numpy array.

int_array = np.array([1, 5, 7, 9, -2], dtype=np.int16)
print("int_array:", int_array)

typecasted_int_array = np.array([1, 5, 7, 9, -2.54], dtype=np.int64)
print("typecasted_int_array:", typecasted_int_array)

The above code prints

int_array: [1 5 7 9 -2] 
typecasted_int_array: [1 5 7 9 -2]

Here, int_array is a numpy array of type int16. The typecasted_int_array is the numpy array of type int64. Here what we need to observe is, when we specified the dtype as int, 2.54 is typecasted as 2.

Creating Numpy Constant Arrays

np.zeros (shape, dtype=float) - Returns a new array of given shape and type, filled with zeros.

zeros_5 = np.zeros(5)  
print("zeros_5:", zeros_5)

zeros_7 = np.zeros(7, dtype=int)
print("zeros_7:", zeros_7)

zeros_2_3 = np.zeros((2,3), dtype=int)
print("zeros_2_3:", zeros_2_3)

The above code prints

zeros_5: [0. 0. 0. 0. 0.]
zeros_7: [0 0 0 0 0 0 0]
zeros_2_3: [[0 0 0]
            [0 0 0]]

np.ones (shape, dtype=float) - Returns a new array of given shape and type, filled with ones.

This functions similar to np.zeros. As the name suggests, the only difference is it returns an array filled with ones instead of zeroes.

np.full (shape, fill_value, dtype=None) - Returns a new array of given shape and type, filled with fill_value. The default data type is derived from the fill_value

fill_int_array = np.full(10, fill_value=7.5, dtype=int)
print("fill_int_array:",fill_int_array)

fill_bool_array = np.full(6, fill_value=False)
print("fill_bool_array:",fill_bool_array)

The above code prints

fill_int_array: [7 7 7 7 7 7 7 7 7 7]
fill_bool_array: [False False False False False False]

So, here fill_int_array is an array of size 10, type int and filled with 7.5. There is no need to specify the dtype as it automatically derive that from the fill_value as shown in example 2. There we haven't specified any dtype, but the type of fill_bool_array is boolean.

Creating Numpy Sequence Arrays

np.arange (start, stop, step, dtype=None) :

Equivalent to the Python built-in range, but returns an ndarray rather than a list
Values are generated within the half-open interval [start, stop)
Much more efficient than np.array(range(_))

first_10_numbers = np.arange(10)
print("first_10_numbers:",first_10_numbers)

numbers_with_step = np.arange(5, 13, 2, dtype=float)
print("numbers_with_step:",numbers_with_step)

And the above code prints

first_10_numbers: [0 1 2 3 4 5 6 7 8 9]
numbers_with_step: [5. 7. 9. 11.]

Here numbers_with_step is an array containing numbers starting from 5 till 13 (excluding) with a step of 2, and of type float. We need not specify the start, step value, by default they are 0 as shown in first_10_numbers. It is an array of consecutive numbers from 0 to 10.

np.linspace (start, stop, num, endpoint, retstep, dtype) :

Returns evenly spaced numbers, calculated over the interval [start, stop]. The number of evenly spaced numbers returned is equal to num

We Can control whether the last number stop can be included or excluded with the endpoint parameter

a = 4.0
b = 5.0
n = 6
sequential_array = np.linspace(a, b, num=n)
print("sequential_array:",sequential_array)

This code prints

sequential_array: [4. 4.2 4.4 4.6 4.8 5.]

This returns an array of 6 numbers between 4 and 5 that are evenly spaced.

🖐Some more Methods of Creating Numpy Arrays

np.empty (shape, dtype) - Creates an uninitialized empty array of the given shape. It might contain garbage values.

empty_array = np.empty(4, dtype=int)
print("empty_array:",empty_array)

The above code gives

empty_array: [4632796641680687104 4630263366890291200 4645547458125679821 4643121143826433966]

This may not give the same values always because they are garbage and will differ everytime we run.

np.random.random (shape) - Creates an array of the given shape with random values in the interval [0,1]

random_valued_array = np.random.random(4)
print("random_valued_array:",random_valued_array)

This code prints

random_valued_array: [0.71697819 0.70451885 0.18953959 0.587543]

The values are not always same as the name suggests they are randomly generated.

np.eye (num) - Returns the identity matrix of size num*num. Default data type is float.

identity_matrix = np.eye(7)
print(identity_matrix)

This prints an identity matrix of size 7*7.

[[1. 0. 0. 0. 0. 0. 0.]
 [0. 1. 0. 0. 0. 0. 0.]
 [0. 0. 1. 0. 0. 0. 0.]
 [0. 0. 0. 1. 0. 0. 0.]
 [0. 0. 0. 0. 1. 0. 0.]
 [0. 0. 0. 0. 0. 1. 0.]
 [0. 0. 0. 0. 0. 0. 1.]]

np.diag (list of elements) - Returns a diagonal matrix with the list of elements as diagonal elements. The size is automatically derived from the list.

diagonal_matrix = np.diag((1, 2, 3, 5, 8, 10))
print(diagonal_matrix)

This code prints a diagonal matrix of size 6*6 with these elements as diagonal elements.

[[1 0 0 0 0 0]
 [0 2 0 0 0 0]
 [0 0 3 0 0 0]
 [0 0 0 5 0 0]
 [0 0 0 0 8 0]
 [0 0 0 0 0 10]]

🖐Creating ndarrays & know its Properties

Lets create a 3darray and understand its properties.

array_2d = np.array([[1, -2, 0], 
                     [3, 4, 2],
                    [3, 8, 9]])
print(array_2d)

The above code prints a 3*3 matrix as below.

[[1 -2 0]
 [3 4 2]
 [3 8 9]]

Properties of ndarray 😮😮

size : Returns the total number of elements in the array
ndim : Returns the no.of dimensions of the array
shape : Returns the shape of array

Lets see an example.

array_2d = [[1 -2 0]
            [3 4 2]
            [3 8 9]]
print("size: ", array_2d.size)
print("ndim: ", array_2d.ndim)
print("shape: ", array_2d.shape)

The above code prints

size: 9
ndim: 2
shape: (3, 3)

🖐Conclusion

Finally, The methods we discussed in this article are

np.array
np.zeros, np.ones, np.full
np.arrange, np.linespace
np.empty, np.eye, np.diag
np.random.random
nd Arrays

What's Next ?

Thank you for reading so far🙏. I hope you enjoyed following it and understood different ways of creating Numpy Arrays. I highly recommend you to play around with these methods.

In the next part, we will discuss the Indexing and Slicing of Numpy Arrays in detail !! So Stay Tuned👀👀!!!!

Do share your valuable suggestions and your honest feedback, also Constructive Criticism. If you have any comments, questions, or concerns, Do comment them and I am more than happy to take them💬.

Happy Learning 😊👍!!

What is SafeArea in Flutter ?

Sree Gayathri Sidamsetti — Wed, 19 May 2021 12:32:02 +0000

Hello Guys👋

As discussed earlier, lets start knowing about widgets🔨. I have searched many resources to learn Flutter and couldn't find any that are more efficient than the Flutter Docs📑 till date (as much as I know). According to me, the documentation of flutter is very well written and whenever you have some doubt, go check it👍.

In this article, we will discuss about SafeArea. Let's get started with the article.

What is SafeArea & What is Does ?
How to Use SafeArea in our App ?
Properties of SafeArea :
Working Demo

What is SafeArea and What it Does

SafeArea is one of the important widget in Flutter. It makes the UI dynamic and adaptive to various types of devices. We can also see it like a widget which provides padding automatically 🔲 according to the pre-occupied constraints of the screen📱.

Let's understand this in more detail. Think of designing an app UI so that it fits in every type of screen design (i.e, irrespective of its camera hole, status bar, notches, navigation bar,...)🤔🤔.

We cannot Right? Here comes the role of SafeArea🖐. If our app features is overlaying any of the system features, then SafeArea would add padding around the app, as required. Basically, it uses Media Query to check the dimensions of the display screen and add the required padding if needed.

How to use SafeArea 🤔?

This is the constructor for SafeArea Widget 👇. This creates a widget that avoids operating system interfaces.

const SafeArea ({
    Key key,
    bool left: true,
    bool top: true,
    bool right: true,
    bool bottom: true,
    EdgeInsets minimum: EdgeInsets.zero,
    bool maintainBottomViewPadding: false,
    @required Widget child
})

We can change the values according to our requirements. Suppose if we want padding only on top and bottom, we can change the values of left, right to false. And if we want some minimum padding to be added on one/more sides, we can change the value of minimum to the desired padding. For Example, see the below code.

SafeArea(
    minimum: const EdgeInsets.all(12.0),
    child: Text('My first Widget'),
)

The above code will add minimum padding in all directions. If we haven't specified the minimum value, then the required padding according to the screen dimensions will be added.

Properties 🗂:

There are some properties of SafeArea which we can use accordingly.

left -> bool : by Default it is true. If it is set to false, then SafeArea will not add any padding to the left of the screen.
top -> bool : by Default it is true. If it is set to false, then SafeArea will not add any padding to the top of the screen.
right -> bool : by Default it is true. If it is set to false, then SafeArea will not add any padding to the right of the screen.
bottom -> bool : by Default it is true. If it is set to false, then SafeArea will not add any padding to the bottom of the screen.
minimum -> EdgeInsets : If we specify some value, minimum that much of padding will be added to one/more sides of the screen. It is like the minimum value it should add..
maintainBottomViewPadding -> bool : byDefault it is false. It specifies whether SafeArea should maintain the viewPadding instead of padding.

For Instance, if there is an onscreen keyboard displayed above the SafeArea, the padding can be maintained below the obstruction rather than being consumed🙂.

Working Demo 💻🤩

Now, Let's apply the theory we have learnt so far🙃.

See this Code,

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text(
          'In this Article, We learned about SafeArea, Now lets see the Demo',
          style: TextStyle(
            color: Colors.amber,
            fontSize: 20,
          ),
        ),
      ),
    );
  }
}

And our app looks like

In the above screenshot, The text is overlaying the status bar of the device, which we don't want to🚫. Now, lets use SafeArea to make it look good🎇.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        top: true,
        child: Scaffold(
          body: Text(
            'In this Article, We learned about SafeArea, Now lets see the Demo',
            style: TextStyle(
              color: Colors.amber,
              fontSize: 20,
            ),
          ),
        ),
      ),
    );
  }
}

And our app looks like The required padding is automatically added to the top of our app to prevent the overlaying with the system features.

And See the below code, (using minimum property) 🤟

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        minimum: EdgeInsets.all(14),
        child: Scaffold(
          body: Text(
            'In this Article, We learned about SafeArea, Now lets see the Demo',
            style: TextStyle(
              color: Colors.amber,
              fontSize: 20,
            ),
          ),
        ),
      ),
    );
  }
}

And our app looks like

We can see that some amount of padding is automatically added on all directions because we have used the minimum property here.

Not only the status bar, SafeArea will adjust our UI for notches, camera hole, notification bar... or any pre-defined feature of the system it is running 📱. Try giving different values to the properties and Have Fun seeing the result😁🥳.

What's Next ?

Thank you for reading so far🙏. I hope you enjoyed following it and got a clear idea about SafeArea. I highly recommend you to play with this widget and try to use it in your app.

In the next part, we will discuss the Expanded Widget in detail !! So Stay Tuned👀👀!!!!

Do share your valuable suggestions and your honest feedback, also Constructive Criticism. If you have any comments, questions, or concerns, Do comment them and I am more than happy to take them💬.

Imp Note* : If you are a beginner and wanted to learn flutter, you can follow this series because this is the exact path I am following and learning Flutter🙋. It helps you learn flutter more easily and don't waste your time searching for best resource (as I have already searched many and documenting my learnings🥰😊).

Happy Learning 😊👍!!

What exactly are Hot Reload and Hot Restart | Part 2

Sree Gayathri Sidamsetti — Wed, 12 May 2021 08:24:23 +0000

Hello Guys👋

I hope you find Setting Up Your Environment for Flutter Development helpful 😊. If you have followed that post till the end, you will end up having a simple counter app running in your emulator.

Let's get started with the article.

Starting Your Emulator without starting Android Studio
Hot Reload vs Hot Restart
An analogy to understand Hot Reload, Hot Restart, their difference

Firstly,

Are you using VS Code as the editor and running your apps on virtual device? Have you ever felt unproductive in the process of starting your emulator? Don't want to start Android Studio to start the emulator 😣?

Here is one pro tip for you !!! You can start your emulator without starting Android Studio. Here is how to do this 👇!!

if (You know your emulator name) {

Open your terminal and run the following command

flutter emulators --launch [your_emulator_name]

You will have your emulator running by now🥳, If so, you can skip the below part and directly go to Hot Reload vs Hot Restart

} else {

Open your command prompt and enter this command. This is your Sdk location.
To get the list of emulators you have, use the following command and the list of your emulators will be displayed. Copy the name of emulator you want to run.
Run the below command replacing <your_emulator_name> with your emulator name. Your emulator will start running 🥳!! If so, you can skip the below part and directly go to Hot Reload vs Hot Restart

}

If the above method doesn't start your emulator 🙄😫, May be you have upgraded your Android Studio, try this 👇

Open your Command prompt and enter this command.

     %LOCALAPPDATA%/Android/Sdk/emulator

Run the below command replacing <your_emulator_name> with your emulator name. Your emulator will start running !!! 🥳

     emulator -avd <your_emulator_name>

By now you understood how to start your emulator without starting android studio. Now, lets see the two most important and most used features in flutter development and the difference between them.

Hot Reload vs Hot Restart (vs🔁)

Both Hot Reload and Hot Restart helps to decrease the execution time of our app once we execute it. They can only be used if wehave executed our program once.

Hot Reload is the easiest and the fastest function which helps you to apply changes, fix bugs, creating UIs, and add features. It takes approximately one second to perform its functionality. In hot reload it does not destroy the preserved state.

Hot Restart has a slightly different functionality as compared to a hot reload. It destroys the preserved states of our app, and the code gets fully compiled again and starts from the default state. It takes more time as compared to hot reload but takes less time than the full restart function.

A simple analogy to understand this Clearly 🤯->😊

Enough of these technical details, here is an analogy that helps us understand this difference very clearly. I have read this in some article, and hope it will be useful.

I knew how stressful you feel having to pack anew every time you wish to travel🧳 (except if you love packing like me 😁), it requires time to pack because, if you dont, you end up forgetting lots of important things, and we cant have that, right?

So, you recently decided to get a travel box and pack up some very basic things that youd need anytime you was on a trip. In this bag, you stuffed your hairbrush, toothbrush, toothpaste, some face masks, a sanitizer, towel and nightwear. Thats a lot😜. But these are basic needs, and you wouldnt wanna be uncomfortable far from home.

Now, you get a call from a friend inviting you to her wedding next week. The question is Do you need to unpack all your bags to add a dress, or do you just add a dress and a pair of heels to your bag🤔🙄? I mean, its not a tech event, but the already-packed basics are still things that you will need. So, since you still need these basic things, all you have to do is just add a dress instead of emptying the entire box, right?

Now, lets relate this story to Hot Reload and Hot Restart 🤷👉(🧳)👈🤷

The function of hot reload is quite similar to just adding the dress. Hot reload implements the change in your UI in a couple of seconds, without reloading the whole app or messing with inputs and variables.

If you don't want to carry extra luggage in your bag, then you remove the unwanted things and add the needed things. This is similar to the functionality of Hot Restart 🔁. Hot restart, on the other hand, saves time by just implementing the functionality based on the closest build class in less than 10secs without restarting the whole app. Restarting the whole app wouldve done the same thing, but it wouldve done it in 40 seconds.

In the above case, removing all the things from the bag and start adding only the things you need is similar to what Full Restart does. It compiles everything from first and launches the application🌕.

Finally,

(Fastest 🏃💨💨) Hot reload loads code changes into the VM and re-builds the widget tree, preserving the app state; it doesnt rerun main() or initState().
(Slower then hot reload and Faster than full restart 🏃💨) Hot restart loads code changes into the VM, and restarts the Flutter app, losing the app state.
(Slowest 🏃) Full restart restarts the iOS, Android, or web app. This takes longer because it also recompiles the Java / Kotlin / ObjC / Swift code.

What's Next?

Thank you for reading so far🙏. I hope you enjoyed following it and cleared all the confusions in your mind 😖🧹😊 related to Hot Reload and Hot Restart and also got the trick to start your emulator without starting Android Studio.

In the next part, we will discuss Widgets (Basics of Flutter) in detail !! So Stay Tuned👀👀!!!!

Do share your valuable suggestions and your honest feedback, also Constructive Criticism. If you have any comments, questions, or concerns, Do comment them, I am more than happy to take them💬.

Happy Learning 😊👍!!

Jumpstart Your Flutter Journey: A Guide to Set Up Your Development Environment

Sree Gayathri Sidamsetti — Mon, 25 Jan 2021 04:31:11 +0000

Hello Guys👋.

I was thinking of writing technical articles for many months and am stuck on where to start and what to write in my first article🤔. Recently, I started learning Flutter and thought that documenting my learnings would be helpful. So finally, my first technical article is here📝😀.

Setting up your Flutter Environment

The process of setting up the flutter environment depends on the Operating System you use.

Windows
macOs
Linux
Chrome OS

I am showing the set up on Windows in this one. For the remaining platforms you can find the detailed instructions on Flutter official Documentation Install on macOS/Linux/Chrome OS

1. Get the Flutter SDK

To Install Flutter on Windows, First download the Flutter SDK from here

To download the latest stable release of the Flutter SDK, click on that blue button. A zip folder with the name similar to_flutter_windows_a.b.c-stable.zip_ will be downloaded. Extract this zip folder into a location in your PC where you want to store the flutter files.

Note: Donot place the flutter folder in a directory like *C:\Program Files* , because this requires extra privilages.

2. Updating the Path

If you want to run flutter from anywhere in your PC (like windows console, terminals in editors,...), you have to update your PATH environment variable. You can do that by following below steps :

In the File Explorer, got into the flutter folder (the one you placed in the before step) and you will see a folder named bin , go into bin and click on the search bar to select the path and copy it

In the start search bar, type 'env' and then select the Edit the system environment variables.
Under the user variables , select Path , click on new , and paste the path of the bin folder.
Click ok, ok, ok (in all the windows we opened for updating path)

To check if you have done the above step right, Go to your windows console and type flutter and the output should look look this.

3. Android setup

To create Flutter apps for iOS or Android you need to setup emulators which we can use to run our apps and see the changes easily. You can set up the emulators by following this Android setup.

4. Setting up an Editor

You can use any editors to develop flutter apps. Most recommended editors are Android Studio, IntelliJ, VS Code, Emacs. In this, I will show how to set up VS Code for flutter development. However for other editors, there are detailed instructions given in the flutter documentation which you can follow editor setup.

Steps to set up Visual Studio Code:

Download the latest version of Visual Studio Code from here.
Start VS Code, and go to View -> Command Palette.
Type Install and then select Extensions: Install Extensions , an extensions tab will open on the left side.
In the search bar of extensions, type flutter and select Flutter and click Install.

This will also install the Dart Plugin, but if you want to be sure, you can install Dart Plugin by following the same steps as above (type dart in the search bar and select Dart ).

Note: VS Code needs Reloading whenever the plugins are downloaded.

5. Check the status of your Setup:

As of now, you have downloaded and installed Flutter SDK, Set up an emulator and also set up your editor. You can check whether you have installed all these correctly or not. To check the status of you Setup :

Make Sure you start your emulator before checking the status of your Installation.

Method 1 : Through Command Palette

In VS Code, go to View -> Command Palette.
Type doctor , and select Flutter: Run Flutter Doctor.
You will see the output similar to the one below (in OUTPUT Pane)

Method 2 : Through Terminal in VS Code

In VS Code, go to Terminal -> New Terminal.
run this command

flutter doctor

You will see the output similar to the one below

6. Create and Run your first Flutter App

a. Create the Flutter App:

You can create Flutter App through Command Palette in VS Code.

In VS Code, go to View -> Command Palette.
Type flutter and select Flutter: New Application Project , and then enter the name of the project and press Enter.
Now, select a folder in which you want to create your project, and wait for some time untill the project files are created.

b. Run the App:

Locate the blue bar at the bottom of the window.
You will either see No Device or Name of the emulator at the right side of the blue bar.
If you can see your emulator, click on emulator.
If you see No Device , Then click on no device, and you will see a prompt where you can select your emulator.
Next, go to Run -> Start Debugging or press F5.
Wait for the emulator to launch and the progress will be printed in Debug Console view.
Let the app build and you can see the app on your emulator.

The Default App is very simple. When we run it, The terminal look like this.

The App on the emulator looks similar to this one.

The app contains

A header portion also known as App Bar with text "Flutter Demo Home Page".
There are two text parts in the center of the screen
A + button at the bottom right.

What this simple app does is it counts the number of times we clicked the + button.

And yeah, you have successfully created and ran your first Flutter App👏🥳.

That's all for this article. I hope this helped you in setting up your Flutter environment. Stay tuned for the next one.

If you have any comments, questions, or concerns? I am more than happy to take them💬.

Happy Learning 👍!!!