DEV Community: Mateusz Budnik

Input stepper

Mateusz Budnik — Sun, 28 Nov 2021 20:25:15 +0000

Hi! I recently have to implement an input stepper in some iOS app (SwiftUI) and it was not so easy as it may seem. My input stepper had to support long press gesture. I decided to create some library which makes the whole process of creating such a control trivial.

You can find the source code here:

mateusz800 / InputStepper

SwiftUI library to create fully customizable input stepper.

Some basic code:

import InputStepper

....
  // declare initial value
  @State var value: Float = 120

  var body: some View {
      HStack {
          MinusButton()
          Value()
          PlusButton()
      }
  }
}

Of course you can customize the view of each element. More on that here.

If you want you can leave in comment some screenshot 📷 of your custom input steppers.

Of course any contribution to the library is welcome.

Setting compound drawable size

Mateusz Budnik — Fri, 09 Jul 2021 19:43:30 +0000

In many cases, we need to have some image next to the text. We can do that using designer view by setting e.q. drawableLeft text field property:

But this approach is sometimes not the best. We don't have full control over the drawable position and size. Of course, there is some way of changing image size like scaling the entire view, but sometimes it may make matters even worse.

An alternative way of doing that is setting compound drawable programmatically. The code below shows how to do it.



final float density = getResource().getDisplayMetrics().density;
final Drawable drawable = getResources().getDrawable(R.drawable.some_drawable);
final int width = Math.round(12 * density);
final int height = Math.round(12 * density);
drawable.setBounds(0, 0, width, height);



view.setCompoundDrawables(drawable, null, null, null);

Replacing image in clear button

Mateusz Budnik — Tue, 06 Jul 2021 12:32:04 +0000

Default clear button

To change default clear button icon, you have to create binding to your text field and then pass the following lines of code:

if let clearButton = someTextField.value(forKeyPath: "_clearButton") as? UIButton {
            clearButton.setImage(UIImage(named:"image_name"), for: .normal)
        }

To change size of the icon you can upload to the project the image with the appropriate size.

Changed clear button

Introduction to MPI programming

Mateusz Budnik — Sun, 21 Mar 2021 21:25:51 +0000

MPI stands for Messaging Passing Interface. It is a standard that allows communication between processes. Thanks to that we can write high-performance parallel programmes.

Basic commands

To use MPI commands you have to include the library.

#include <mpi.h>

Before using MPI functions, you have to initialize it.

int main(int argc, char** argv){
  ...
  MPI_Init(&argc, &argv);
}

You have to also remember to finish MPI at the end of your programm.

MPI_Finalize();

In MPI application there are many processes. They might be grouped in a group called communicator. Each process in a group has its own identifier called a rank.

You can get a rank of the currently running process.

int currentProcessRank;
MPI_Comm_rank(MPI_COMM_WORLD, &currentProcessRank);

And also the count of processes inside the communicator.

int processCount;
MPI_Comm_size(MPI_COMM_WORLD, &processCount);

MPI_COMM_WORLD is a default communicator. It groups all the processes when the program started.

Each process makes some calculations but in the end, we almost always want to calculate the final value. We can do it by MPI_Reduce(...) function. An example of the function call is shown below.

MPI_Reduce(&process_calc_val, &final_value, 1, MPI_DOUBLE, MPI_SUM, 0, MPI_COMM_WORLD);

In that example, we sum the calculated values from each process. The result of this operation will be stored in the final_value variable.

P2P communication

MPI allows us to exchange messages between processes. P2P (Peer to Peer) communication is possible.
The command to send a message is as follows:

int MPI_Send(void *buf, int count, MPI_Datatype datatype, int dest, int tag, MPI_Comm comm)

So for example we use the code below to send some value to process with rank 1.

int some_value = 5;
MPI_Send(&some_value, 1, MPI_INT, 1, 0, MPI_COMM_WORLD);

To receive the message, below command is used.

int MPI_Recv(void *buf, int count, MPI_Datatype datatype, int source, int tag, MPI_Comm comm, MPI_Status *status);

Process 1 can receive a message from process 0.

int received_value;
MPI_Recv(&received_value, 1, MPI_INT, 0, 0, MPI_COMM_WORLD, MPI_STATUS_IGNORE);

Note that MPI_Send(...) and MPI_Recv(...) are blocking functions.

Compiling

To compile the program put the line below in the terminal.

mpicc name.c -o name

And run it by:

mpirun -np <process count> ./name

Custom Switch in Android

Mateusz Budnik — Sat, 06 Mar 2021 22:51:33 +0000

In this tutorial, I will show you how to take control of a switch and change its appearance.

We can change the track and the thumb of our switch by creating new drawable objects.

Track

Below is an example code for the track.

`switch_track.xml`

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/salmon_pink"/>
            <corners android:radius="1dp"/>
        </shape>
    </item>

    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/green"/>
            <corners android:radius="1dp"/>
        </shape>
    </item>
</selector>

We defined a selector that selects an appropriate object (one of two) depending on the switch state (android:state_checked).

Then it is needed to assign our newly created track to the switch.
We do that by putting this line of code in switch definition.

 <androidx.appcompat.widget.SwitchCompat
   ...
   app:track="@drawable/switch_track"/>

Thumb

It is very similar to changing track - creating a selector that shows the appropriate thumb depending on the switch state.

`switch_thumb.xml`

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/switch_thumb_unchecked" android:state_checked="false" />
    <item android:drawable="@drawable/switch_thumb_checked" android:state_checked="true" />
</selector>

And below is an example code for thumb in checked switch.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@color/green" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <corners android:radius="5dp"/>
            <size android:height="30dp" android:width="60dp"/>
        </shape>
    </item>
</layer-list>

Passing thumb to the switch.

 <androidx.appcompat.widget.SwitchCompat
    ...
    android:thumb="@drawable/switch_thumb" />

The result

The possibilities are endless. You can create a switch that will perfectly fit your application.