Send photo From phone to PC using MQTT protocol | MIT app inventor

In this tutorial, we will send photo from phone to PC using MQTT protocol. For the android application, we will be using MIT app inventor, and I have already covered how to make MQTT app using MIT app inventor. In the PC, we will be running python script that will receive the image and save the image in the PC according to the category defined, for this I will recommend reading how to send and receive images using MQTT protocol in python.

Photo from Phone to PC

Send image from MIT app inventor app to PC

In order to send the image from MIT app inventor to PC, we will use the following methodology on MIT app inventor app.

1. Connect with MQTT broker, on screen initialization.
2. We will select the image in MIT app inventor app.
3. The image will be encoded to base64.
4. Select the category.
5. A dictionary object will be created with category and image base64 data.
6. On pressing the send button, the dictionary object will be published to the topic “Image”.

Receive image from MIT app inventor app to PC

When the image is already published, the python script will receive it as it will be subscribing to the topic “Image”. The complete methodology can be described as,

1. Connect with MQTT broker, subscribe “Image” topic.
2. On receiving message, convert the dictionary object to JSON object.
3. Parse the category and image base64 code.
4. Create a new file based on timestamp in the “category” folder.
5. decode the base64 code.
6. Save the data in the created file.

MIT app inventor | Image from phone to PC

User Interface

Creating a new app

First of all, lets build a basic user interface. We will navigate to MIT app inventor, you will have to click on create apps.

After clicking on create apps, it will ask you to login. Login using your google account and you will see the following user interface.

Click on start new project, it will ask you to give your project a name.

MIT app inventor User interface explained

Then you will see a user interface like this. On the left hand side you have the palettes for user interface, on the right hand side you will see your components in hierarchical form and on the left side of components is the properties tab, in which you can set several parameters.

Downloading and importing MQTT extension in MIT app inventor

We will need two extra extensions, that we need to import. One for MQTT protocol, which we also used in our another MQTT tutorial with MIT app inventor and one for encoding image to base64.

For MQTT we are using AI2 MQTT extension and for base64 decoding we are using KIO4_base64 extension. You can download these extensions and then import it in your app by going into the extension category in the right hand side palette tab.

It will ask you to select the aix file that you have just downloaded, import them one by one.

After importing these two extensions, you will be able to see them in the right side palette, marked in red rectangle and then you will have to drag them one by one and drop it on the screen.

Configuring MQTT extension in MIT app inventor

After dropping them on the screen, you will be able to see these extension under the mobile device and on the left hand side component tab. Then select the MQTT extension and you will have to enter the details of the MQTT broker such as broker address, clientID, port, UserName, Password.

If you are using the free hivemq public mqtt broker or mosquitto free public mqtt broker, you don’t need to add the username and password, but it is not recommended as it is not safe for personal data but for testing we can use it.

Or if you have hosted your own MQTT broker on raspberry pi , Windows or on PC, then you will need to add the IP address of your broker i.e. IP address of your device.

Building a basic user interface

Then after importing and configuring the extension, we will make a basic user interface to select image, select category and then send it. Therefore, firstly we will drag and drop the vertical arrangement from the layout tab, so all our components are in vertical arrangement. I set the width and height of the vertical layout to fill parent.

After dropping the vertical arrangement, we will add the image picker, so we can select the image from the gallery. Just drag and drop the Image picker from the right hand side palette tab. After adding that you can see all the components in the right side component window. Also, we will drag and drop the image component so we can show the image on the screen.

Then we will add a ListPicker, we need for selecting a category from the list. Add it like we have added the other components. Drag and drop and then you can rename it to category.

Then we will add a button for sending the image. After adding the button rename it to send and also i set the visibility to off, so we cannot select send unless the image is selected and in the end i added a label so we can show some logs such as image ready to send or image sent.

Now we have the minimal and basic layout for sending Image from phone to PC using MIT app inventor. The next thing is to do the backend part using the block programming.

Block Programming

In the MIT app inventor , we uses block programming for making the applications, that means it is really easy for beginners. We can access the blocks part of the app by clicking on the right hand side blocks button.

The first thing is to create variables to store the image base64 code and another variable for storing the categories. You can find these two blocks in variable, and list tabs.

After adding these two variables, we will write import the block from screen1 tab, when the screen initialize and inside that we will start a connection with MQTT broker by importing a connect block from MQTT extension and we set the clean session to false. Also, we set the elements of the category in the list picker.

Then, we imported another function block from the image picker tab, (after picking) This function will be executed when the image has been selected and as soon as image is selected, we will show the image on the screen and then using the base64 extension function image to base64, we converted our image to base64.

The next function is the part of base64 extension, (AfterImageBase64) it will be executed when image has been converted to base64 and then we will save that data in our variable and then set the text of label to image ready to sent and in the end, make the visibility of button to true.

Now you will be able to use send button, and when you will press it, it will check if the name variable contains data, if it does not contain any data nothing will happen. Otherwise, it will create a dictionary of two keys category and image, and will have the value of category and image base64 code. Then the data will be published to the MQTT broker.

Python code | Photo from phone to PC

I have explained how to use MQTT protocol in python and how to receive and send images using MQTT protocol in python but in this part I will explain the code briefly. If you need more description of the code, refer to the above mentioned blogs.

we imported 4 libraries, paho-mqtt for MQTT protocol, base64 for decoding base64 code to image, json for parsing the dict message, and datetime so we can use the time to save files. (mmddYY-HH:MM:SS.jpg)

from paho.mqtt import client as mqtt_client
import base64
import json
from datetime import datetime

After that, we need to enter the MQTT credentials.

broker = 'mqtt broker address'
port = port number
topic_sub = "image"
client_id = 'clientID'

Then the connect function is responsible for connecting us to the MQTT broker. You need to give username and password if your broker is protected.

def connect_mqtt():
    def on_connect(client, userdata, flags, rc):
        if rc == 0:
            print("Successfully connected to MQTT broker")
        else:
            print("Failed to connect, return code %d", rc)

    client = mqtt_client.Client(client_id)
    client.on_connect = on_connect
    client.username_pw_set("username","password")
    client.connect(broker, port)
    return client

Then in the subscribe function, we have another function on Message which will be executed when message is received. We convert the message to JSON object and then parse the category and image bas64 code and then we read the date time and creates a file (mmddYY-HH:MM:SS.jpg) in the category folder, and then decodes the image from base64 code and write it to the file.

 def subscribe(client: mqtt_client):
    def on_message(client, userdata, msg):

        y = json.loads(msg.payload.decode())

        print(msg.payload.decode())
        category = y["category"]
        image_data = y["image"]

        msg = str(image_data)
        img = msg.encode('ascii')
        now = datetime.now()  # current date and time
        filename = now.strftime("%m%d%Y-%H:%M:%S.jpg")
        f = open("./"+category+"/"+filename, 'wb')
        final_img = base64.b64decode(img)

        print(final_img)

        f.write(final_img)
        f.close()
    client.subscribe(topic_sub)
    client.on_message = on_message

The final code which is just the collection of all the above snippets is as follows.

from paho.mqtt import client as mqtt_client
import base64
import json
from datetime import datetime



broker = 'mqtt broker address'
port = port number
topic_sub = "image"
client_id = 'clientID'


def connect_mqtt():
    def on_connect(client, userdata, flags, rc):
        if rc == 0:
            print("Successfully connected to MQTT broker")
        else:
            print("Failed to connect, return code %d", rc)

    client = mqtt_client.Client(client_id)
    client.on_connect = on_connect
    client.username_pw_set("username","password")
    client.connect(broker, port)
    return client


def subscribe(client: mqtt_client):
    def on_message(client, userdata, msg):

        y = json.loads(msg.payload.decode())

        print(msg.payload.decode())
        category = y["category"]
        image_data = y["image"]

        msg = str(image_data)
        img = msg.encode('ascii')
        now = datetime.now()  # current date and time
        filename = now.strftime("%m%d%Y-%H:%M:%S.jpg")
        f = open("./"+category+"/"+filename, 'wb')
        final_img = base64.b64decode(img)

        print(final_img)

        f.write(final_img)
        f.close()
    client.subscribe(topic_sub)
    client.on_message = on_message


def main():
    client = connect_mqtt()
    subscribe(client)
    client.loop_forever()


if __name__ == '__main__':
    main()

After running that code in python, you will be able to receive and store images in the respective category folders using MQTT protocol. If you get any error like directory does not exist, you can create a folder manually or if you have another questions, you can write it in comments.

Final Results

Main Screen	Select image	Image ready to sent	select category	Last image sent

Whats next ?

This project can be improved in various ways, I have given all the basics, now it’s up to you to add more features. I can suggest some such as, capture image and then send it, add more data in dictionary such as filename, sub categories, add tags, etc.