3.1 Raspberry Pi’s components

Raspberry Pi has the following components-

• System on Chip(SoC) and RAM:

The most important part of the Raspberry Pi is System-on-Chip (SoC). It’s an integrated circuit that has two parts. One is the Central Processing Unit (CPU) and the other is the Graphics Processing Unit (GPU).CPU needs memory to perform its work effectively. So, Pi has Random Access Memory (RAM). It holds the contents during working on the Pi. However, when the Pi is switched off, RAM loses its contents [1].

• Ports:

The Raspberry Pi has 4 Universal Serial Bus (USB) Ports for connecting keyboard, mouse etc. It has one SD Card Slot for SD card. This SD card stores data if someone saves his work. Besides, this card must have the Raspbian operating system file. It has also an Ethernet Port that is used to connect with a network via cable connection. Besides this, there is an AV Jack that carries both audio and video signals [1]. There are CSI (Camera Serial Interface) camera port and DSI (Display Serial Interface) display port for connecting Raspberry Pi camera and touchscreen display respectively. Moreover, HDMI Port is used for connecting a monitor that acts as a display for the Pi. There is a Power Port for connecting to a power source [3].

• Radio:

Raspberry Pi has a radio that works as a WiFi radio as well as a Bluetooth radio. WiFi Radio is to establish a wireless connection between the Pi and a computer network whereas Bluetooth radio is used for transmitting and receiving data from nearby devices [1].

• GPIO (General Purpose Input/Output) Pins: Raspberry Pi has 40 GPIO pins. With these pins, Pi can communicate with other devices and electronics. Raspberry Pi can turn these pins on or off. These input pins are used to receive signals from sensors or other devices. On the other hand, the Raspberry Pi uses output pins to transmit data to other devices [1].

Fig 3.2: GPIO Pins [4].

3.2 Installation of Rasbian Software on Raspberry Pi

Raspbian is a Linux based operating system. One can follow the following procedure to install Raspbian operating system on Raspberry Pi.

• Raspbian is the Foundation’s official supported operating system. Download Raspbian Software Zip file from www.raspberrypi.org/downloads/raspbian/ [5].
• Install the Etcher software from https://etcher.io [6] for flashing the Raspbian OS image to an SD Card. This operating system (OS) file should always be in the SD card.

Fig 3.3: Etcher operations for flashing the SD card.

• After flashing the SD card, remove it from Laptop. Then insert the SD card in the SD Card Port of the Raspberry Pi.
• Connect a monitor via HDMI cable. The monitor must have a power supply.
• Connect the USB Keyboard and the USB mouse.
• The Pi should be connected to the power source via a power cable. Make sure that, after doing all these things (described above), the power cable should be connected to the Power Supply to turn the Pi on.
• Then the Raspberry Pi is booting up and the monitor shows the Raspbian booting. The SD card should not be removed from the Pi even after booting [7].
After booting, we can see the Raspberry Pi desktop on the monitor.

Fig 3.4: Raspberry Pi desktop monitor.

After that, configure the Raspberry Pi according to my preferences like hostname, password, time zone, etc. [7]

Fig 3.5: Raspberry Pi Configuration Page.

3.3 Set up a network on the Pi

Raspberry Pi 3B+ has a built in WiFi. So, to connect with a network, someone can follow the following instructions.

• Start scanning for available wireless networks by the below command.
pi@raspberrypi:~ $ sudo iwlist wlan0 scan
Now, we can see the available Wi-Fi networks which confirms that our Wi-Fi is working.
• Check the IP address of raspberry pi by the following command.
pi@raspberrypi:~ $ sudo ipconfig
• One needs the wpa-supplicant file to add the desired network.
pi@raspberrypi:~ $ sudo nano/etc/wpa_supplicant/wpa_supplicant.conf
This command will open a file in the Nano editor (shown below).

network={
ssid= “wifiName”
psk= “wifiPassword”
}

Now, use the actual network name and password and save the code.
• After that, reboot the Raspberry Pi. Command line for rebooting is given below.
pi@raspberrypi:~ $ sudo reboot
• After reboot, Log in again and now Wi-Fi is working [7].

Node.js is an open-source JavaScript run time environment [8]. Nowadays, it has become more popular in the programming world. It is free and it executes JavaScript on the server-side. Besides, Node.js can work on different platforms (Linux, Windows, etc.) [9].

4.1 Importance of Node.js

Node.js runs in a single process without generating new threads for each request [8]. It can send the task to the computer file system and at the same time, it is ready to manage the new request. When the file system has opened and read the file, the server transfers the contents to the client. Thus, it makes Node.js time efficient. Besides, Node.js uses non-blocking, asynchronous programming. Moreover, Node.js can perform various types of work. For example, it can create, open, read, write, delete and close files on the server. Furthermore, it can create dynamic page content [9].

4.2 Installation of Node.js on Raspberry Pi

For Installing the Node.js, anyone can follow the procedure described below.

I. Remove Node-Red, Node.js legacy and purge node (this may be in the system).
• pi@raspberrypi:~ $ sudo apt remove nodered
• pi@raspberrypi:~ $ sudo apt remove nodejs-legacy
• pi@raspberrypi:~ $sudo apt remove --purge node
II. Update the system package list
• pi@raspberrypi:~ $ sudo apt-get update
III. Upgrade the system’s installed package to their latest version.
• pi@raspberrypi:~ $ sudo apt-get upgrade
IV. Download the latest version of Node.js.
• pi@raspberrypi:~ $ curl –sl https://deb.nodesource.com/setup_10.x | sudo bash-
V. Install the Node.js on Raspberry Pi.
• pi@raspberrypi:~ $ sudo apt-get install nodejs
VI. Reboot the Pi.
• pi@raspberrypi:~ $ sudo reboot

Now Node.js is installed properly. [7]
To check, whether Node.js is installed properly or not -

• Write this command pi@raspberrypi:~ $ node –v to check version number of Node.js [7].

Fig 4.1: Node.js and npm version.

• Write this command • pi@raspberrypi:~ $ node> 13+7= 20 that means installation is successful [7].

Fig 4.2: Check Node.js installation.

4.3 Node.js Module

Node.js Module can be considered the same as the JavaScript library. It is a set of functions that can be included in the Node.js file. There are several built-in modules that do not require further installation. The following modules are used to control the Sense HAT display from my website [10].

• Node.js HTTP Module
• Node.js File System Module
• Node.js Path Module
• Socket.io Module

4.3.1 Node.js HTTP Module

HTTP stands for “Hyper Text Transfer Protocol’’. To add this module, we should use the require() method [11].
var http = require('http');
HTTP Requests and Responses are used to create communication between clients and servers. A client (a browser) sends an HTTP request to the web and a web server receives that request. After processing the request, the server returns an HTTP response to the web. Finally, the client receives that response. There are many types of browser requests. Among them, the most common are requests for HTML page, style sheet, JPG image, JavaScript code, and data. In return, a server provides HTML files, CSS files, JPG files, JS files and data (XML or JSON) respectively [11].

4.3.2 Node.js File System Module

The Node.js File System Module allows us to work with the file system on computer and require() method is used to include the File System Module [12].
var fs = require('fs');
The most common uses of the File System Module are read files, create files, update files and delete files [12].

4.3.3 Node.js Path Module

Node.js Path Module is a built-in module. This provides a way of working with different directories and path files. The syntax for including this module is given below [13].
var path = require('path');

4.4. Web-Socket

Web-Socket enables bidirectional communication in real-time over the web. It can be run together with an HTTP server. It creates communication between a server and a web browser [14]. For example, if we select a button of the LED matrix on the webpage and click on the ‘OK’ button, then the respective LED in the Sense HAT will be turned on.

4.4.1 Installation of socket.io

Socket.io creates a two-way channel between a server and a web browser. To install socket.io, the following procedure should be followed [14].

I. Update the system package list
• pi@raspberrypi:~ $ sudo apt-get update
II. Upgrade the system’s installed package to their latest version.
• pi@raspberrypi:~ $ sudo apt-get upgrade
III. Install the socket.io on Raspberry Pi.
• pi@raspberrypi:~ $ sudo npm install socket.io -save
IV. Reboot the Pi.
• pi@raspberrypi:~ $ sudo reboot

To include socket.io module in the server-side, we should use the following syntax [14].
var io = require('socket.io');
On the other hand, the HTML page should also use the below code to include socket.io module [14].

The Sense HAT is an add-on board for Raspberry Pi. It was made especially for the Astro PI mission- launched to the International Space Station in December 2015 [15]. Sense HAT has an 8×8 matrix that consists of a total of 64 LEDs. These RGB (Red, Green, and Blue) LEDs are programmable. This LED matrix can be controlled to produce any color. Along with this LED matrix, the Sense HAT has a five-way joystick and six onboard sensors [1].

Fig 5.1: Sense HAT.

Gyroscope sensor: This sensor is used to sense changes in angle over time by keeping track of the direction of Earth’s gravity field. This sensor senses if someone rotates the Sense HAT relative to the surface of the Earth [1].
Accelerometer: This sensor is used to measure acceleration forces in multiple directions. Thus, taking data from the gyroscope sensor and accelerometer, we can track where the Sense HAT is pointing and how it is moved [1].
Magnetometer:It can measure the strength of a magnetic field and track the movement of the Sense HAT. It can be used to detect metallic objects and the electrical field [1].
Humidity sensor: This sensor measures the relative humidity of the air [1].
Barometric pressure sensor: It measures air pressure [1].
Temperature sensor: This sensor measures the surrounding temperature. But Sense HAT does not have a separate temperature sensor. It uses temperature sensors built into the humidity and barometric pressure sensors [1].

5.1 Hardware setup of the Sense HAT on Raspberry Pi

When unpacking a Sense HAT, one can find a Sense HAT itself, four metal or plastic pillars known as spacers, eight screws and a black plastic strip. Like the GPIO pins on the Raspberry Pi, this plastic strip has some metal pins. Firstly, push this strip pin-side-up through the bottom of the Sense HAT until hearing a click. Then push the Sense HAT down onto the Raspberry Pi’s GPIO header, making sure to line it up properly with the pins underneath and to keep it as flat as possible. Finally, use eight screws and four spacers properly to protect the Sense HAT from bending and flexing [1].

Fig 5.2: Hardware setup of the Sense HAT on Raspberry Pi.

Besides, Hardware Attached on Top (HAT) modules should only ever be plugged into and removed from the GPIO header while the Raspberry Pi is switched off and disconnected from its power supply [1].

5.2 Installation of the Sense HAT Software

To install Sense HAT, we can do the following tasks.

I. Update the system package list
• pi@raspberrypi:~ $ sudo apt-get update
II. Upgrade the system’s installed package to their latest version.
• pi@raspberrypi:~ $ sudo apt-get upgrade
III. Install the Sense HAT software on Raspberry Pi.
• pi@raspberrypi:~ $ sudo apt-get install sense-hat
IV. Reboot the Pi.
• pi@raspberrypi:~ $ sudo reboot

After rebooting the Pi, The sense HAT is installed.
If the LEDs on the Sense HAT are illuminated in a rainbow pattern and then the LEDs are turned off again, this means that the Sense HAT is properly installed [1].

A web interface is a way to control any device by a website. Here, a webserver is created. And when it is running, a user can access the website using URL http://[IP of raspberry pi]:8080. For example the URL is http://10.2.106.135:8080 for the remote users. But for a local user, the URL is http://127.0.0.1:8080. In this website, there are two options. One is “Web Report” for showing my web report and the other is “Sense HAT Display Control” for controlling the Sense HAT display. In the “Sense HAT Display Control” page, color can be chosen from the color picker. Besides, we can select LEDs from the LED matrix on the webpage. There are three options.

• 1st option- it is an “OK” button. If anyone clicks this button, the respective RGB array code will be sent to the server. And after processing, the selected LEDs on the Sense HAT will be turned on. So, the selected LEDs will get the selected color from the color picker.
• 2nd option- it is a “Reset” button. After clicking this button, all LEDs on the Sense HAT will be turned off.
• 3rd option- it is a “Select All” button. After clicking this button, all LEDs on the Sense HAT will be turned on and the LEDs will get the color that is already selected from the color picker.

Fig 6.1: Website for Web interface between Sense HAT and Raspberry Pi.

Moreover, there is a “Color Calibration” section. In this section, one can upload an image from the client-side and compare the color code of the uploaded image with the selected color code from the color picker.

7.1 Webpage Description

This webpage has two parts. One is HTML code and the other is JavaScript code.

7.1.1 HTML Code

This code (below) is used to create the color picker. Here, we can choose different values (ranges from 0 to 255) of red, green, and blue. As a result, we get a variety of colors depending on the quality of red, green, and blue. The resulted color will be shown in the section (id= ‘display’).

The code (below) is used to create 64 buttons (here only 8 buttons are shown) for the 8×8 LED matrix.

This section (below) is used to create buttons for the "Selected LEDs (id= “light”)", "Reset All LEDs (id=“reset” )" and "Select All LEDs (id=“allset”)" options. By clicking these buttons, button related data will be transferred to the Raspberry Pi.

By this part, we can upload image from the client-side.

By using the below code, we can create a canvas where the uploaded image can be shown.

This section (below) is used to get the website links of the Raspberry Pi and the Sense HAT tutorial.

7.1.2 JavaScript Code

Here, socket.io is a library that enables real-time, bidirectional and event-based communication between the browser and the server [14]. On the other hand, plotly.js is a high level, declarative charting library. Here, it is used to create a 3D scatter diagram [16].

Define socket.io so that it can load socket.io library and the client can connect to the host that serves the page.

This part (below) is used to get input value (string array) of the color picker and convert the string array into an RGB array.

This section (below) is used to color any button on the 8×8 LED matrix on the webpage. This means, we can select or deselect any button simply by clicking that button. And if the button is selected, it will get the color already selected from the color picker.

This part (shown below) is used to get data (RGB array data) of the selected LEDs of the LED matrix on the webpage and transfer that data to the server. By clicking this button (button name= “OK” id=“light” ), we can turn on the selected LEDs of the Sense HAT.

This code (below) deselects all LEDs of the 8×8 LED matrix and sends reset button status to the server. If someone clicks this button (button name=“Reset” id= “reset”), all LEDs in the Sense HAT will be off.

This code (below) selects all LEDs of the 8×8 LED matrix and sends a button (id= “allset”) status to the server. If someone clicks this button (button name= “Select ALL” id= “allset”), all LEDs in the Sense HAT will be illuminated.

In this bottom part, the webpage can upload an image from the client-side and get the color code of any point of that uploaded image by moving the mouse over that image on the canvas. It also shows the difference between the input color code (from the color picker) and the obtained color code of the uploaded image.

In the bottom section, the code is used to plot a 3D scatter diagram.

7.2 Server code Description

TIn this part (below) is used to create an HTTP server. We can open the webpage in a browser using http://127.0.0.1:8080 for local user and http://[IP of raspberry pi]:8080 for a remote user.

In the bottom section, the code is used to route different static files (for example image files, JavaScript files, and html files.).

This bottom section is used to set up a communication between the server and the client.

Color Calibration is a kind of comparison between an input color and a measured output color. Here, the color (from the color picker on the webpage) is taken as an input color and the color (from the uploaded image from the client-side) is taken as a measured color. I changed the color code on the webpage (as input to the Sense HAT) and I took some images of the Sense HAT display. I observed that due to the continuously blinking of the LEDs, the exact color of the LEDs could not be shown in the captured images.

Fig 8.1: Images (a and b) without a color diffuser (paper) over the Sense HAT Display.

Fig 8.2: Image with a color diffuser (paper) over the Sense HAT Display

Then I used a color diffuser over the Sense HAT display to get almost the same color as the input. It shows that if we use a good color diffuser, we will get an image like the input image. Another problem is, if the display of the Sense HAT is seen with empty eyes, we can observe, the entire LED has almost the same distribution of color. However, when we take a snapshot of the display, the image shows that the desired color becomes thicker at the edges of the LEDs, and we see almost different colors in the middle region of the LEDs. This may be due to the focus and resolution of the camera. That's why the color code changes from one point to another in that uploaded image.

Table01: Input color code (RGB values) from the webpage and measured color code (RGB values) from the uploaded image.