added infrastructure documentation

This commit is contained in:
SebasKoedam
2024-05-29 13:04:57 +02:00
parent e4ee419e2d
commit c362a41f06
5 changed files with 142 additions and 151 deletions

View File

@@ -1,19 +1,45 @@
# Infrastructure
The infrastructure of the database is composed of the following components:
This document describes the infrastructure of the database and server components of the project.
- User
- Pepper
- Interface
- Robot
- Raspberry Pi
- Database
- MariaDB
- Server
- Apache
- phpMyAdmin
- Node.js
## Components
User interacts with Pepper through the interface. The interface sends the user input to the robot. The robot processes the input (java) and sends the output (xml) back to the interface. The interface displays the output to the user. The Raspberry Pi hosts the server and database. The database stores the data and the server hosts the website. The server runs Apache, phpMyAdmin, and Node.js. The interface makes a request to the server (HTTP GET) to retrieve the data in the database. The server processes the request (HTTP GET) and retrieves (SQL) the data from the database. The interface displays the data to the user.
The database component of the project consists of the following components:
- Node.js (Server)
- Apache2 (Web Server)
- phpMyAdmin (Database Management Tool)
- MariaDB (Database)
## Diagrams
Architecture application diagram of the project.
![Architecture application](../diagrams/assets/appDiagramV2.png)
Deyplomment application diagram of the project.
![Deyplomment application](../diagrams/assets/appDiagramV4.png)
## Database
The database component of the project is responsible for storing and managing the data used by the application. The database is implemented using MariaDB. The database is responsible for storing data such as exercises, names, descriptions, images, videos and exercise paths. The database is accessed by the server component of the project to retrieve data.
## Server
The server components of the project are responsible for handling requests from the client application and interacting with the database. The server is implemented using Node.js and is responsible for handling requests to retrieve exercises. The server is also responsible for serving the client application to the user.
The web server component of the project is implemented using Apache2 and is responsible for hosting phpMyAdmin, a database management tool used to interact with the database.
## Problems/Solutions
During the setup of the infrastructure, the following problems were encountered.
### Reverse proxy
The initial problem is that the Pi has a limeted amount of ports that can be used. This means that the server can only be accessed through port 80. This is a problem because the server is running on port 3000. To solve this problem, a reverse proxy was used to redirect traffic from port 80 to port 3000. This was done by creating a virtual host in the Apache2 configuration file that listens on port 80 and redirects traffic to port 3000.
When implementing the reverse proxy a problem was encountered where everything on port 80 was being redirected to port 3000. This was a problem because the server was also running on port 80. The initial solution was to remove the reverse proxy from sites-enabled and restart the server. However this caused the reverse proxy to stop working. Eventually it took too long to fix the problem and the reverse proxy was removed.
Running the server on port 443 was also considered as a solution. At the first sight this dind't seem possible since the access to port 443 is restricted. However, after some research it was found that it is possible to run the server on port 443 by starting the node with sudo. This was the solution that was chosen.
![Application Architecture Diagram](../diagrams/assets/appDiagram.png)

File diff suppressed because one or more lines are too long

View File

@@ -1,99 +1,105 @@
<mxfile host="Electron" modified="2024-05-17T10:24:38.560Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.1.2 Chrome/114.0.5735.289 Electron/25.9.4 Safari/537.36" etag="vTrgfPgpC1M9saCyJqTJ" version="22.1.2" type="device">
<mxfile host="Electron" modified="2024-05-29T11:03:46.287Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.1.2 Chrome/114.0.5735.289 Electron/25.9.4 Safari/537.36" etag="Sie7uAwi7Ncv96kRBi84" version="22.1.2" type="device">
<diagram name="Page-1" id="jecpyCyVafvbFtGhV645">
<mxGraphModel dx="1941" dy="638" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<mxGraphModel dx="2069" dy="713" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="JqL7afyQoL-OOYxCKZbi-2" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-2" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="-390" y="240" width="430" height="430" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-34" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-34" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="-360" y="420" width="161.25" height="230" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-1" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-1" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="-690" y="240" width="220" height="160" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-10" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-10" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="-640" y="300" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-3" value="Server Node (Raspberry Pi)" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=16;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-3" value="Server Node (Raspberry Pi)" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=16;" parent="1" vertex="1">
<mxGeometry x="-277.5" y="250" width="205" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-4" value="Client Node" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=16;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-4" value="Client Node (Pepper)" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=16;" parent="1" vertex="1">
<mxGeometry x="-660" y="250" width="160" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-9" value="&lt;b style=&quot;font-size: 14px;&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;Android App&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-9" value="&lt;b style=&quot;font-size: 14px;&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;Android App&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" parent="1" vertex="1">
<mxGeometry x="-626.87" y="325" width="93.75" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-11" value="&amp;lt;&amp;lt;client&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-11" value="&amp;lt;&amp;lt;client&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="-610" y="300" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-14" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-14" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="-339.37" y="490" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-15" value="&lt;b style=&quot;font-size: 14px;&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;Apache2&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-15" value="&lt;b style=&quot;font-size: 14px;&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;Apache2&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" parent="1" vertex="1">
<mxGeometry x="-319.05" y="515" width="76.87" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-16" value="&amp;lt;&amp;lt;web server&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-16" value="&amp;lt;&amp;lt;web server&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="-330.62" y="490" width="102.5" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-20" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-20" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="-132.5" y="300" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-21" value="&lt;b style=&quot;font-size: 14px;&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;MariaDB&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-21" value="&lt;b style=&quot;font-size: 14px;&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;MariaDB&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" parent="1" vertex="1">
<mxGeometry x="-107.5" y="325" width="70" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-22" value="&amp;lt;&amp;lt;database&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-22" value="&amp;lt;&amp;lt;database&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="-102.5" y="300" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-38" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="JqL7afyQoL-OOYxCKZbi-23" target="JqL7afyQoL-OOYxCKZbi-14">
<mxCell id="JqL7afyQoL-OOYxCKZbi-38" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" parent="1" source="JqL7afyQoL-OOYxCKZbi-23" target="JqL7afyQoL-OOYxCKZbi-14" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-23" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxCell id="S5-NwbH-4CbKXiQop9ow-1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="JqL7afyQoL-OOYxCKZbi-34" target="JqL7afyQoL-OOYxCKZbi-20">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-23" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="-340" y="570" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-24" value="&lt;b style=&quot;font-size: 14px;&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;phpMyAdmin&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-24" value="&lt;b style=&quot;font-size: 14px;&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;phpMyAdmin&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" parent="1" vertex="1">
<mxGeometry x="-330.62" y="600" width="97.5" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-25" value="&amp;lt;&amp;lt;DBMS&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-25" value="&amp;lt;&amp;lt;DBMS&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="-310" y="570" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-26" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-26" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="-340" y="300" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-27" value="&lt;b style=&quot;font-size: 14px;&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;NodeJs&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-27" value="&lt;b style=&quot;font-size: 14px;&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;NodeJs&lt;/font&gt;&lt;/b&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=14;" parent="1" vertex="1">
<mxGeometry x="-307.5" y="325" width="57.5" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-28" value="&amp;lt;&amp;lt;server&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-28" value="&amp;lt;&amp;lt;server&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="-310" y="300" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-32" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1" source="JqL7afyQoL-OOYxCKZbi-9" target="JqL7afyQoL-OOYxCKZbi-27">
<mxCell id="JqL7afyQoL-OOYxCKZbi-32" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;" parent="1" source="JqL7afyQoL-OOYxCKZbi-9" target="JqL7afyQoL-OOYxCKZbi-27" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="-450" y="370" as="sourcePoint" />
<mxPoint x="-400" y="320" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-33" value="HTTP&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="-470" y="315" width="70" height="30" as="geometry" />
<mxCell id="JqL7afyQoL-OOYxCKZbi-33" value="HTTP POST&lt;br&gt;&lt;br&gt;JSON" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="-466" y="325" width="76" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-35" value="Database Management" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontStyle=1" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-35" value="Database Management" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontStyle=1" parent="1" vertex="1">
<mxGeometry x="-330.62" y="450" width="100" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-36" value="&amp;lt;&amp;lt;server&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-36" value="&amp;lt;&amp;lt;server&amp;gt;&amp;gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="-310.62" y="420" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-39" value="Uses" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxCell id="JqL7afyQoL-OOYxCKZbi-39" value="Uses" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="-288.12" y="545" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-40" value="Js/SQL" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="-205" y="316" width="60" height="30" as="geometry" />
<mxCell id="JqL7afyQoL-OOYxCKZbi-40" value="Js/SQL&lt;br&gt;&lt;br&gt;JSON" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="-205" y="325" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="JqL7afyQoL-OOYxCKZbi-41" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="JqL7afyQoL-OOYxCKZbi-27" target="JqL7afyQoL-OOYxCKZbi-21">
<mxCell id="JqL7afyQoL-OOYxCKZbi-41" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" parent="1" source="JqL7afyQoL-OOYxCKZbi-27" target="JqL7afyQoL-OOYxCKZbi-21" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="-200" y="410" as="sourcePoint" />
<mxPoint x="-150" y="360" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="S5-NwbH-4CbKXiQop9ow-4" value="Maneges" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="-167.5" y="505" width="60" height="30" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB