Ryan D'Costa
Published

Park It Here

Parking control system which manages the parking traffic in a shopping center. The availability of parking spaces will be shown onscreen.

IntermediateFull instructions provided2 hours936
Park It Here

Things used in this project

Hardware components

MyOctopus I2C TMP007 breakout module Infrared Sensor
MyOctopus I2C TMP007 breakout module Infrared Sensor
×1
Jumper wires (generic)
Jumper wires (generic)
×1
Breadboard (generic)
Breadboard (generic)
×1

Software apps and online services

Bolt

Story

Read more

Code

FBE5BK1IUIYTBWZ.txt

HTML
<!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>

Credits

namanryan

Posted by Ryan D'Costa

Comments