Hardware components | ||||||
 |
| × | 1 | |||
 |
| × | 1 | |||
 |
| × | 1 | |||
Software apps and online services | ||||||
| ||||||
See the video above!
Park It Here is a concept for big shopping centers where we have a parking system. This is a prototype of a parking control system which itself manages the parking traffic in shopping center. In this, when a car reaches the start point, a screen is placed. On this screen, all the parking spaces will be shown with their status of whether they are available, occupied or going to be occupied, and where to find them.
Step 1: Components Used- Bolt IoT
- Breadboard
- Connecting Wires
- Infrared Sensors
- WiFi Router
- Connect Bolt's SD Card to PC. In the bs.txt file, change its SSID and password to be the same as the SSID and password of the WiFi hotspot.
- Insert SD Card in Bolt IoT unit.
- Wait for a few seconds, the blinking blue LED will become constant; it is connected to your WiFi hotspot.
We used HTML for designing the webpage which is attached.
We have used the Fing application here.
- Download app Fing in your mobile.
- Connect your mobile to the WiFi hotspot on which your Bolt IoT unit is connected.
- Open the Fing app; the app will find the IP Address of Bolt IoT unit.
- Open Browser and type Bolt_IP_Address/upload.
- Then upload the HTML page by clicking on bolt.
- Now the page will appear with the message "File Uploaded Successfully".
Connect the Infrared to Bolt IoT unit on GPIO pins 1, 2, 3, and 4 via breadboard as shown in figure.
Step 7: Run Project- Open browser and type Bolt_IP_Address
- The web page will load the project will run as shown in video.
This project was made by Vishwa Anuj Shivaratri, Na.
<!DOCTYPE html>
<html>
<head>
<title>Park It Here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/serveFile?filename=bolt.js">setDebug(true); </script>
<style>
body{
overflow: none;
font-family: sans-serif;
background: #f5f5f5;
}
html,body{
margin:0px;
padding:0px;
}
section.screen{
width: 100vw;
margin: 0px;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #f7f7f7;
align-items: center;
}
.header{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 65vh;
background: #212121;
}
.header h1{
color: #fff;
}
.parking{
display: flex;
flex-direction: row;
padding: 0px 100px;
margin-top: -50px;
}
.space{
height: 200px;
border: 2px solid rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 150px;
border-radius: 5px;
margin: 0px 10px;
cursor: pointer;
position: relative;
transition: all 0.25s;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.space span{
text-decoration: none;
}
.space span.parkit-message{
display: none;
padding: 10px 30px;
border-radius: 20px;
position: absolute;
bottom: 0px;
border:2px solid #08e8ab;
transition: all 0.25s;
}
.space.in-route span.parkit-message{
display: block;
transform: translateY(60px);
background: #f6d465;
border: 2px solid #f6d465;
color: rgba(0,0,0,0.6)
}
.space.occupied span.parkit-message{
display: block;
transform: translateY(60px);
background: #c6584b;
border: 2px solid #c6584b;
color: #fff;
}
.space:hover span.parkit-message{
display: block;
transform: translateY(60px);
}
.space svg{
opacity: 0.3;
}
.space.occupied{
background: #c6584b;
border: 2px solid #c6584b;
}
.space.available{
background: #08e8ab;
border: 2px solid #08e8ab;
}
.space.in-route{
background: #f6d465;
border-color: transparent;
}
.space:hover{
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
transform: translateY(-60px);
}
.space span.space-id{
position: absolute;
bottom: 20px;
color: rgba(0,0,0,0.6);
font-size: 18px;
}
span.message{
display: flex;
color: #fff;
align-items: center;
margin-top: 0px;
background: rgba(255,255,255,0.2);
padding: 5px 20px;
border-radius: 35px;
}
@media only screen and (max-width: 500px) {
.header{
height:450px
}
.parking{
flex-direction: column;
margin-top: -100px;
}
.parking .space{
margin: 30px 0px;
}
.space:hover{
transform: translateY(-30px);
}
}
</style>
</head>
<body>
<section class="screen">
<div class="header">
<svg style="height:70px;padding-top:60px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 375.38 375.38" style="enable-background:new 0 0 375.38 375.38;" xml:space="preserve" width="512px" height="512px">
<path d="M123.074,213.369V74.554c0-4.971,4.029-9,9-9h72.838c30.544,0,55.394,24.849,55.394,55.392s-24.85,55.392-55.394,55.392 h-31.343c-4.971,0-9-4.029-9-9s4.029-9,9-9h31.343c20.619,0,37.394-16.774,37.394-37.392s-16.775-37.392-37.394-37.392h-63.838 v129.815c0,4.971-4.029,9-9,9S123.074,218.339,123.074,213.369z M337.553,44.846v197.956c0,31.04-3.731,66.022-48.296,88.413 l-53.403,29c-0.149,0.081-0.3,0.158-0.454,0.23c-21.095,9.957-34.319,14.935-47.583,14.935c-13.26,0-26.56-4.974-47.813-14.923 c-0.163-0.076-0.322-0.157-0.479-0.242l-53.399-29c-44.566-22.39-48.298-57.373-48.298-88.413V44.846 C37.827,20.118,61.161,0,89.842,0h195.695C314.219,0,337.553,20.118,337.553,44.846z M319.553,44.846 c0-14.552-15.577-26.846-34.015-26.846H89.842c-18.438,0-34.015,12.294-34.015,26.846v197.956c0,33.633,6.299,56.259,38.494,72.387 c0.089,0.044,0.177,0.09,0.264,0.138l53.293,28.942c37.293,17.446,42.643,17.443,79.61,0.006l53.308-28.948 c0.087-0.047,0.175-0.093,0.264-0.138c32.194-16.128,38.493-38.755,38.493-72.387V44.846z M254.709,254.649l-39.127,23.194 c-26.4,13.593-29.162,13.594-55.799-0.007l-39.115-23.187c-4.276-2.534-9.796-1.124-12.332,3.153 c-2.534,4.276-1.123,9.797,3.153,12.332l39.358,23.331c0.162,0.096,0.327,0.187,0.494,0.272c16.029,8.19,26.25,12.285,36.443,12.285 c10.196,0,20.364-4.1,36.278-12.298c0.159-0.082,0.314-0.167,0.468-0.258l39.358-23.331c4.276-2.535,5.688-8.056,3.153-12.332 C264.505,253.527,258.984,252.116,254.709,254.649z" fill="#08e8ab"/>
<g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>></g><g></g>
</svg>
<h1 style="font-weight:100;font-size:40px;text-align:center;margin-bottom:10px">Park It Here</h1>
<p style="color:rgba(255,255,255,0.4);margin:0">Select a place to park</p>
<div class="info" style="margin-top:20px;display:flex;flex-direction:row">
<span class="message">
<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' style="padding-right:10px;"><circle cx='15' cy='15' r='10' fill='#08e8ab'/></svg>
Available
</span>
</div>
</div>
<div class="parking">
<a id="1" class="space available" onclick="reserve(this.id)">
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="48" viewBox="0 0 24 24" width="48">
<path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<span id="output-1" style="display:none;position:absolute;bottom:-30px">Pin Val=0</span>
<span id="parkit-message-1" class="parkit-message">Park It Here</span>
<span class="space-id">Space A</span>
</a>
<a id="2" class="space available" onclick="reserve(this.id)">
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="48" viewBox="0 0 24 24" width="48">
<path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<span id="output-2" style="display:none;position:absolute;bottom:-30px">Pin Val=0</span>
<span id="parkit-message-2" class="parkit-message">Park It Here</span>
<span class="space-id">Space B</span>
</a>
<a id="3" class="space available" onclick="reserve(this.id)">
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="48" viewBox="0 0 24 24" width="48">
<path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<span id="output-3" style="display:none;position:absolute;bottom:-30px">Pin Val=0</span>
<span id="parkit-message-3" class="parkit-message">Park It Here</span>
<span class="space-id">Space C</span>
</a>
<a id="4" class="space available" onclick="reserve(this.id)">
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="48" viewBox="0 0 24 24" width="48">
<path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<span id="output-4" style="display:none;position:absolute;bottom:-30px">Pin Val=0</span>
<span id="parkit-message-4" class="parkit-message">Park It Here</span>
<span class="space-id">Space D</span>
</a>
</div>
</section>
<script>
var on = "Pin Val=1";
var off = "Pin Val=0";
function park(id,index){
var plot = document.getElementById(index).classList;
if(!(plot.contains("in-route")))
{
digitalRead(id,'output-'+index);
}
var x = document.getElementById('output-'+index).innerHTML;
if(x==on)
{
var space = document.getElementById(index).classList;
space.remove("available");
space.add("occupied");
document.getElementById('parkit-message-'+index).innerHTML = "Occupied";
}
else if(x==off)
{
var space = document.getElementById(index).classList;
space.remove("occupied");
document.getElementById('parkit-message-'+index).innerHTML = "Park It Here";
if(!space.contains("in-route")){
space.add("available");
}
}
}
(function(){
var index = 1,id = 1;
park(id,index);
setTimeout(arguments.callee, 3000);
})();
(function(){
var index = 2,id = 2;
park(id,index);
setTimeout(arguments.callee, 3000);
})();
(function(){
var index = 3,id = 3;
park(id,index);
setTimeout(arguments.callee, 3000);
})();
(function(){
var index = 4,id = 4;
park(id,index);
setTimeout(arguments.callee, 3000);
})();
function setIntervalX(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function () {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
}
}, delay);
}
function reserve(clicked_id){
var space = document.getElementById(clicked_id).classList;
if(space.contains("occupied")||space.contains("in-route")){
alert("Already Occupied");
}
else{
document.getElementById('parkit-message-'+clicked_id).innerHTML = "Waiting";
space.remove("available");
space.add("in-route");
}
var i=1,flag=0;
setIntervalX(function () {
digitalRead(clicked_id,'output-'+clicked_id);
var status = document.getElementById('output-'+clicked_id).innerHTML;
var space = document.getElementById(clicked_id).classList;
if(space.contains("in-route")){
if(status==on)
{
space.add("occupied");
space.remove("in-route");
flag=1;
}
}
}, 3000, 5);
setTimeout(function reset(){
if(flag==0){
console.log("Test");
space.remove("in-route");
space.add("available");
document.getElementById('parkit-message-'+clicked_id).innerHTML = "Park It Here";
}
},15000);
}
</script>
</body>
</html>
namanryan
Posted by 
Ryan D'Costa
Ryan D'Costa
Comments
Please log in or sign up to comment.