deepak's IOT-001 course work. Lv 2

An interesting title

20 / 11 / 2022

An interesting title By Deepak Panwar Batch-2 IoT Level-1 Report

>>Task-1

Setting up the ESP32 and blink an LED

Aim: To configure the working of ESP32 along with the working of Arduino IDE. And finally, make the in-built LED of ESP32 blink using Arduino IDE. Esp32: It is a 32 bit microcontroller which can be programmed using Arduino IDE. Code:

The #define is used to redefine the global variable LED_BUILTIN to the pin number 19. The pin number 19 in this case is the one which controls the built-in LED of ESP32. The void setup() function’s body, i.e. the code inside the braces executes when the code gets uploaded or the board resets itself and it runs only once. Here in this body we setup LED_BUILTIN variable as OUTPUT so that we can control the values of this output. The void loop() function is the function which runs over and over again till the board shuts down. The body of this functions contains the code for blinking of built in led of ESP32. The digitalWrite function takes two parameters one is the LED_BUILTIN and the other is whether its HIGH or LOW. And then the delay functions tell the board to sleep for a given time in ms. So here we tell the board to turn on the built-in LED and then wait for 1000ms and then turn it off and then wait for a 1000ms and then turn it on. This code runs on a loop so this function is executed till the board shuts itself down.

>>Task-3

Basics of MQTT protocol Aim: Learn the basics of MQTT protocol and it working. !

Alt Text MQTT: MQTT stands for Message Queuing Telemetry Transport. MQTT protocol is a connectivity protocol used mostly for machine-to-machine communication in Internet of Things. It is extremely lightweight and uses publish/subscribe protocol. This protocol is useful for the connection with the remote location where the bandwidth is a premium. Components of MQTT: * Message * Client * Broker or Server * Topic Message: The data carried out by the protocol across the network is called message. It consists of the following parameters. 1. Payload Data 2. Quality of Service (QoS) 3. Collection of Properties 4. Topic Name Client: Clients are machines that are connected to the server or broker, i.e subscriber (information taker) and publisher (information giver). In simple terms, if a machine uses MQTT then it is a client. The clients chose specific topics to publish or subscribe to the messages. Clients perform 2 types of operations in MQTT: 1. Publish: Sending data to server or broker. 2. Subscribe: Receiving data from server or broker. Server: It acts as the mediator between publisher and subscribers or in simple terms between clients. The server accepts connection requests to the network, accepts the messages from clients (publish), processes subscribe and unsubscribe requests, forwards messages to subscribers and closes the network connection from the client. Topic: The label of the message is called topic. It is useful in differentiating the messages published by clients. Like in the given figure different publishers publish messages with different topics. And the subscribers subscribe to a specific topic so the server forwards them the message publish to that specific topic. Architecture of MQTT: Let us look at an example to understand the architecture of MQTT. Suppose a device has a temperature sensor and wants to send the information to the broker. If a device wants this information, then two things will happen. The publisher defines a topic (e.g. temperature) and publishes the message. After publishing device on the other side will subscribe to the topic (like temperature) and then receive the published message. The broker’s role is to deliver the published message to the clients that have subscribed to the message topic. MQTT message format: The MQTT uses the command and the command acknowledgment format, i.e each command has an associated acknowledgment. The connect command has connect acknowledgment, subscribe command has subscribe acknowledgment, and publish command has publish acknowledgment. The packets structure of MQTT has a fixed header of 2 bytes which is present in all MQTT packets. The second is variable header which is not always present. The third is payload which might also be not always present. Some commands do not use payload field like disconnect. Fixed Header: The fixed header contains two bytes. In which the first byte contains two fields. MQTT Control Packet Type and Flag specific to each MQTT Packet type. * MQTT Control Packet Type: It occupies 4 bits, i.e., 7 to 4-bit positions. This 4-bit is an assigned value, and each bit represents the MQTT control packet type. * Flag specific to each MQTT packet type: The remaining 4-bits represent the flag specific to each MQTT packet type. Byte 2 contains the remaining length, it is a variable-length byte integer. It contains the number of bytes remaining in a current control packet.

Flag bits: Control Packet types: Remaining length = length of variable header + length of payload Variable Header: This field is between the fixed header and the payload. The content of the variable header depends upon the packet type. The variable header contains the packet identifier field, which is common in several packet types. The variable header component of many MQTT control packet types includes 2-byte integer, i.e., the packet identifier field. The given list below contains the packet identifier field: * PUBLISH * PUBACK * PUBREC * PUBREL * PUBCOMP * SUBSCRIBE * SUBACK * UNSUBSCRIBE * UNSUBACK Payload:

In the ICMP message format, the last MQTT control packet is the payload. This field contains the data which is to be sent. For example, in the case of the CONNECT packet, the payload is a client ID, the username and password, and the PUBLISH packet, the payload is just an application message.

>>Task-4

Basics of creating a website

Aim: Learning how to create a website both frontend and backend. Creating a webpage with a button that when pressed toggles the color of the webpage. Files: * app.js: File containing the backend part of the webpage being hosted. Nodejs and expressjs are used for coding the backend. * index.html: Html file containing the frontend part of the webpage. It contains the code for changing the background of the webpage. * package.json: this JSON file contains the information about all the packages installed in our project. It is used in creating package-lock.json * package-lock.json: This JSON file contains the original package tree ,i.e. the information about the versions of the packages in the projects before they were updated or removed. It also locks the dependency version. * Node_modules: This folder contains all the packages downloaded for this project. Code Overview: The code is divided into two parts the code for server which is written in app.js file and the code for the frontend HTML file which is written in index.html. The app.js initializes a server on a given port and sends index.html file to anyone who visits the site hosted by server. Server Code: * Importing modules: Express and path modules are exported into variables called express and path respectively. * Initializing express application: We initialize a variable called app for the express application which will provide us with many functionality for our server. * Creating a route: app.get takes two parameters. The first is a string, which is used for creating a route for this get method and the second is a function or a callback. The callback has two parameters which are req(request) and res(response). We send the file as the response object by using res.sendFile function. This sendFile function takes one parameter which is the path or location of the file. Since our file is in the same location as our app.js, we use the __dirname variable to get the location of our current working directory and concatenate it with index.html using path.join function. Now that we have the location of the file we then close the body of the function. * Listening to a port: Now we finally tell our express application to listen to a given port by using app.listen function. This function takes two parameters one is the int or the port number. Other is the callback which is executed once the server starts running in the given port. Here we enter the port as 5000. And tell the code to print “Running on port 5000”, if this part of code get executed without errors. * URL of the site: Since we are hosting our application locally the first part of URL is “localhost” followed by a colon and then port number. Therefore, the address is “localhost:5000”. The route created by us on the code has a path of “/”, therefore in order to acess this just append the route name to the end of the site URL. Therefore to get index.html we type “localhost:5000/” or just “localhost:5000” since browsers automatically adds a / in the end of URL. HTML Code: * Document Format: Here the first line specifies the document type which is html followed by the language which is English. Then comes head tag which has meta tags and a title tag. Inside title tag we write the title of the page which is document in our case. Then we close the head tag and start with our body tag. * Body tag: Inside body tag we creating a heading of first order and put Hello World inside that heading. This is followed by a button with a text called Change color. This button when pressed executed a function called changeCol() written in our script tag. Then we close the body tag. * Script tag: Inside script tag we define the changeCol function. This function takes no parameter and returns no value. Inside this function we initialize 4 numbers. Three of them are integers and one being a float. The three integers will represent the values of red, blue and green and the float will represent the alpha value. Here math.random function gives a random number from 0(inclusive) to 1(exclusive). We then multiply this function by 256 to get maximum value less than 256, since 255 is the limit in each color option. Then we use math.floor to tell the number to transform itself into an integer which is closest and smaller than the given number. We don’t use math.floor function with a variable neither do we multiply it with a constant, since alpha value ranges from 0 to 1. Then we print all these variables onto the console. We then use the document object to get the background color property of the body tag, i.e. document.body.style.backgroundColor. We then set it to a rgba value and enter variables r, g, b and a in the fields. This then changes the document background color to a random color every time you press the button.