Skip to content

Updated UI to look more modern #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
97saundersj wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Updated UI to look more modern #2

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7cb7585
Updated UI to look more modern
97saundersj Oct 24, 2020
0f01ce9
Added name to the site information, added mock stats table
97saundersj Oct 24, 2020
ba8cdda
Moved cards around, fixed resizing issue
97saundersj Oct 24, 2020
6618431
Gave the gecko icon a default size, reimplimenting temperature and hu…
97saundersj Oct 24, 2020
86be03f
Added javascript for making toggling led status, adding in controls t…
97saundersj Oct 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
300 changes: 284 additions & 16 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,291 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Get jquery files from google -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Got idea and code from https://stackoverflow.com/questions/21566649/flask-button-run-python-without-refreshing-page-->
<!-- JS script to turn on red LED-->
<script type=text/javascript>
$(function() {
$('a#toggle-red-led').bind('click', function() {
console.log("test")
return false;
});
});
</script>

<!-- JS script to turn on green LED-->
<script type=text/javascript>
function toggleRedLED() {
console.log("toggling Red LED")

var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", "http://81.105.156.15:6969/toggle_red_led", false );
xmlHttp.send( null );
}

function toggleGreenLED() {
console.log("toggling Red LED")

var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", "http://81.105.156.15:6969/toggle_green_led", false );
xmlHttp.send( null );
}
</script>

<!-- JS script to turn off red LED-->
<script type=text/javascript>
$(function() {
$('a#red-led-off').bind('click', function() {
$.getJSON('http://81.105.156.15:6969/turn_off_red_led',
function(data) {
//do nothing
});
return false;
});
});
</script>

<!-- JS script to turn off green LED-->
<script type=text/javascript>
$(function() {
$('a#green-led-off').bind('click', function() {
$.getJSON('http://81.105.156.15:6969/turn_off_green_led',
function(data) {
//do nothing
});
return false;
});
});
</script>

<html>
<head>
<title>GUI Cam V2</title>
</head>

<head>
<title>GUI Cam V2</title>
</head>
<body class="page-background">
<div class="card-header text-white">

<body style="background-color:#474747;">
<h1>GUI Cam V2</h1>
<h2>Say hi to everybody's favourite crested gecko!</h2>
<div>Temperature = {{ temperature }}°C </div>
<div>Humidity = {{ humidity }}% </div>
<button class="btn btn-secondary btn-nav-gecko" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img width="40" height="40" class="gecko-icon" src="https://www.flaticon.com/svg/static/icons/svg/47/47371.svg"></img>

<img src="{{ url_for('video_feed') }}">
</body>
<div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item text-white" href="{{ url_for('old') }}">Legacy website</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled text-muted">A Flask website by David and Jacques Saunders</a>
</div>
</button>

<div style="position: absolute; bottom: 5px;">
<hr>
A Flask website by David Saunders
<hr>
<a href="{{ url_for('old') }}">Legacy website</a>
</div>
<h1 class="page-title" >GUI Cam V2</h1>
</div>

<div class="d-flex flex-row">
<div class="card text-white bg-dark gui-cam-card">
<div class="card-header">
<img width="20" height="20" class="header-icon" src="https://www.flaticon.com/svg/static/icons/svg/1160/1160041.svg"></img>
<b>Live stream</b>
</div>
<div class="card-body">
<p class="card-text">Say hi to everybody's favourite crested gecko!</p>
<img class="gui-cam-stream" src="http://81.105.156.15:6969/video_feed"></img>
</div>
</div>

<div class="card text-white bg-dark stats-card">
<div class="card-header">
<img width="25" height="25" class="header-icon" src="https://www.flaticon.com/svg/static/icons/svg/992/992668.svg"></img>
<b>Controls</b>
</div>
<div class="card-body">
<table class="table table-dark stats-table">
<tbody>
<tr>
<td>Red LED</td>
<td>
<label class="switch">
<input type="checkbox" onclick="toggleRedLED()">
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td>Green LED</td>
<td>
<label class="switch">
<input type="checkbox" onclick="toggleGreenLED()">
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td>Heat Lamp</td>
<td>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="card text-white bg-dark stats-card">
<div class="card-header">
<img width="25" height="25" class="header-icon" src="https://www.flaticon.com/svg/static/icons/svg/808/808602.svg"></img>
<b>Stats</b>
</div>
<div class="card-body">
<table class="table table-dark stats-table">
<tbody>
<tr>
<td>Temperature</td>
<td>20.4°C</td>
</tr>
<tr>
<td>Humidity</td>
<td>47%</td>
</tr>
<tr>
<td>CPU Temperature</td>
<td>60°C</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>

</html>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

.btn-nav-gecko {
margin-top: 3px;
height:45px;
width:50px;
padding-top: 2px;
padding-left: 5px;
position: absolute;
left: 20px;
}

.gecko-icon {
left:0%;
}

.header-icon {
filter: invert(100%);
}

.page-title {
margin-left: 70px;
height: 40px;
}

.page-background {
background-color:#222;
}

.card-header {
background-color:rgba(0,0,0,.2);
}

.gui-cam-card {
width:70%;
max-height: 50%;
margin: 10px;
text-align: center;
}

.gui-cam-stream {
margin:auto;
display:block;
height:inherit;
max-width: 95%;
}

.stats-card {
margin: 10px;
height: fit-content;
min-width: fit-content;
}

.stats-table {
text-align: center;
margin: auto;
margin-top: 10px;
width: 50%;
}

/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

</style>