Browse Source

Adding template and styles for main page

pull/1/head
Ravi Shah 5 years ago
parent
commit
5905554196
  1. 22
      garage_door_script.py
  2. 53
      static/styles.css
  3. 16
      templates/index.html

22
garage_door_script.py

@ -23,27 +23,7 @@ correct_login = 0
# Route for the main page
@app.route('/')
def index():
logged_in = request.cookies.get('logged_in')
if logged_in == "yes":
GPIO.setup(PIN_TRIG, GPIO.OUT) #Setup the gpio trigger pin as input
GPIO.setup(PIN_ECHO, GPIO.IN) #Setup the gpio echo pin as output
time.sleep(2) #Wait for 2 seconds for sensor to settle
GPIO.output(PIN_TRIG, GPIO.LOW) #Set trigger to low
GPIO.output(PIN_TRIG, GPIO.HIGH) #Set trigger to high
time.sleep(0.00001) #Wait for 0.1 milliseconds before setting to low again
GPIO.output(PIN_TRIG, GPIO.LOW) #Set trigger to low again
while GPIO.input(PIN_ECHO)==0:
pulse_start_time = time.time() #Set the start time of when the waves are emitted by the sensor
while GPIO.input(PIN_ECHO)==1:
pulse_end_time = time.time() #Record the time the waves traveled back to the sensor
pulse_duration = pulse_end_time - pulse_start_time #Calculate how long it took for the round trip of the waves
distance = round(pulse_duration * 17150, 2) #Convert the time it took to centimeters and round to 2 decimals
if distance >= 80: #Check if the distance is less than 80cm (This will depend on the garage)
return 'The garage is closed.'
else:
return 'The garage is open.'
else:
return redirect(url_for('login'))
return render_template('index.html')
# Route for the login page
@app.route('/login', methods=['GET', 'POST'])

53
static/styles.css

@ -0,0 +1,53 @@
* {box-sizing: border-box;}
body {
margin: 0;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.text {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}

16
templates/index.html

@ -0,0 +1,16 @@
<html>
<head>
<title>Pi Garage Door Opener</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="static/styles.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="header">
<a href="#" class="text">Pi Garage Door Opener</a>
<div class="header-right">
<a class="active" href="/logout">Logout</a>
</div>
</div>
</body>
</html>
Loading…
Cancel
Save