Update
This commit is contained in:
Max
parent
2a71340193
commit
571db724a2
0
site/Dockerfile
Normal file → Executable file
0
site/Dockerfile
Normal file → Executable file
BIN
site/Layout/Site layout.sketch
Normal file → Executable file
BIN
site/Layout/Site layout.sketch
Normal file → Executable file
Binary file not shown.
0
site/package-lock.json
generated
Normal file → Executable file
0
site/package-lock.json
generated
Normal file → Executable file
0
site/package.json
Normal file → Executable file
0
site/package.json
Normal file → Executable file
0
site/server.js
Normal file → Executable file
0
site/server.js
Normal file → Executable file
0
site/views/404.ejs
Normal file → Executable file
0
site/views/404.ejs
Normal file → Executable file
77
site/views/css/style.css
Normal file → Executable file
77
site/views/css/style.css
Normal file → Executable file
@ -14,22 +14,35 @@
|
|||||||
src: url(../fonts/opsl.ttf);
|
src: url(../fonts/opsl.ttf);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@font-face{
|
||||||
|
font-family: osb;
|
||||||
|
src: url(../fonts/opsb.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: whitesmoke;
|
--background: whitesmoke;
|
||||||
|
--cell_background: transparent;
|
||||||
|
--cp_color: grey;
|
||||||
|
--title-color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
font-family: os;
|
font-family: osl;
|
||||||
/* max-width: 1200px; */
|
max-width: 1300px;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
background-color: dodgerblue;
|
background-color: var(--cell_background);
|
||||||
color: white;
|
color: var(--title-color);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
@ -45,6 +58,62 @@ body {
|
|||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-title {
|
||||||
|
font-family: osb;
|
||||||
|
font-size: 30px;
|
||||||
|
color: var(--title-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright-container {
|
||||||
|
position: absolute;
|
||||||
|
max-width: 1300px;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
display: inline-flex;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright img {
|
||||||
|
height: 30px;
|
||||||
|
padding-top: 3px;;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright-text {
|
||||||
|
font-size: 25px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: var(--cp_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: osb;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 45px;
|
||||||
|
color: var(--title-color);
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-row {
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-row {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.in-development {
|
||||||
|
height: 70px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: red;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 50px;
|
||||||
|
font-family: osb;
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 900px) {
|
@media (min-width: 900px) {
|
||||||
.containers { grid-template-columns: repeat(2, 1fr); }
|
.containers { grid-template-columns: repeat(2, 1fr); }
|
||||||
}
|
}
|
||||||
|
|||||||
0
site/views/fonts/ops.ttf
Normal file → Executable file
0
site/views/fonts/ops.ttf
Normal file → Executable file
BIN
site/views/fonts/opsb.ttf
Normal file
BIN
site/views/fonts/opsb.ttf
Normal file
Binary file not shown.
0
site/views/fonts/opsl.ttf
Normal file → Executable file
0
site/views/fonts/opsl.ttf
Normal file → Executable file
@ -1,57 +0,0 @@
|
|||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
||||||
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script>
|
|
||||||
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-analytics.js"></script>
|
|
||||||
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-firestore.js"></script>
|
|
||||||
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
|
||||||
<title>IoT plant watering project</title>
|
|
||||||
<base href="https://weather.maxhunt.design/" target="_blank">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="containers">
|
|
||||||
<div class="container">ONE</div>
|
|
||||||
<div class="container">TWO</div>
|
|
||||||
<div class="container chart_container">
|
|
||||||
<div id="temp_chart" class="chart"></div>
|
|
||||||
</div>
|
|
||||||
<div class="container chart_container">
|
|
||||||
<div id="humidity_chart" class="chart"></div>
|
|
||||||
</div>
|
|
||||||
<div class="container chart_container">
|
|
||||||
<div id="wind_chart" class="chart"></div>
|
|
||||||
</div>
|
|
||||||
<div class="container chart_container">
|
|
||||||
<div id="rain_chart" class="chart"></div>
|
|
||||||
</div>
|
|
||||||
<div class="container chart_container">
|
|
||||||
<div id="cloud_chart" class="chart"></div>
|
|
||||||
</div>
|
|
||||||
<div class="container">EIGHT</div>
|
|
||||||
<div class="container">NINE</div>
|
|
||||||
<div class="container">TEN</div>
|
|
||||||
<div class="container">ELEVEN</div>
|
|
||||||
<div class="container">TWELVE</div>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script defer src="js/main.js"></script>
|
|
||||||
<script src="js/fInit.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
183
site/views/index.html
Executable file
183
site/views/index.html
Executable file
@ -0,0 +1,183 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
__________████████_____██████
|
||||||
|
_________█░░░░░░░░██_██░░░░░░█
|
||||||
|
________█░░░░░░░░░░░█░░░░░░░░░█
|
||||||
|
_______█░░░░░░░███░░░█░░░░░░░░░█
|
||||||
|
_______█░░░░███░░░███░█░░░████░█
|
||||||
|
______█░░░██░░░░░░░░███░██░░░░██
|
||||||
|
_____█░░░░░░░░░░░░░░░░░█░░░░░░░░███
|
||||||
|
____█░░░░░░░░░░░░░██████░░░░░████░░█
|
||||||
|
____█░░░░░░░░░█████░░░████░░██░░██░░█
|
||||||
|
___██░░░░░░░███░░░░░░░░░░█░░░░░░░░███
|
||||||
|
__█░░░░░░░░░░░░░░█████████░░█████████
|
||||||
|
_█░░░░░░░░░░█████_████___████_█████___█
|
||||||
|
_█░░░░░░░░░░█______█_███__█_____███_█___█
|
||||||
|
█░░░░░░░░░░░░█___████_████____██_██████
|
||||||
|
░░░░░░░░░░░░░█████████░░░████████░░░█
|
||||||
|
░░░░░░░░░░░░░░░░█░░░░░█░░░░░░░░░░░░█
|
||||||
|
░░░░░░░░░░░░░░░░░░░░██░░░░█░░░░░░██
|
||||||
|
░░░░░░░░░░░░░░░░░░██░░░░░░░███████
|
||||||
|
░░░░░░░░░░░░░░░░██░░░░░░░░░░█░░░░░█
|
||||||
|
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░█
|
||||||
|
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░█
|
||||||
|
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░█
|
||||||
|
░░░░░░░░░░░█████████░░░░░░░░░░░░░░██
|
||||||
|
░░░░░░░░░░█▒▒▒▒▒▒▒▒███████████████▒▒█
|
||||||
|
░░░░░░░░░█▒▒███████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒█
|
||||||
|
░░░░░░░░░█▒▒▒▒▒▒▒▒▒█████████████████
|
||||||
|
░░░░░░░░░░████████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒█
|
||||||
|
░░░░░░░░░░░░░░░░░░██████████████████
|
||||||
|
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░█
|
||||||
|
██░░░░░░░░░░░░░░░░░░░░░░░░░░░██
|
||||||
|
▓██░░░░░░░░░░░░░░░░░░░░░░░░██
|
||||||
|
▓▓▓███░░░░░░░░░░░░░░░░░░░░█
|
||||||
|
▓▓▓▓▓▓███░░░░░░░░░░░░░░░██
|
||||||
|
▓▓▓▓▓▓▓▓▓███████████████▓▓█
|
||||||
|
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██
|
||||||
|
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
|
||||||
|
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█
|
||||||
|
Get out of my source code
|
||||||
|
-->
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||||
|
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script>
|
||||||
|
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-analytics.js"></script>
|
||||||
|
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-firestore.js"></script>
|
||||||
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||||
|
<title>IoT plant watering project</title>
|
||||||
|
<!-- <base href="https://weather.maxhunt.design/" target="_blank"> -->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="in-development">PREVIEW - IN DEVELOPMENT</div>
|
||||||
|
</header>
|
||||||
|
<div class="page-container">
|
||||||
|
<div class="copyright-container">
|
||||||
|
<div class="copyright">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="media/logo.png" alt="logo">
|
||||||
|
</div>
|
||||||
|
<div class="copyright-text">
|
||||||
|
© Max Hunt 2020
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
IoT Plant Watering Predictor
|
||||||
|
</div>
|
||||||
|
<div class="containers">
|
||||||
|
<div class="container first-row">
|
||||||
|
<div class="container-title">
|
||||||
|
Aims
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||||
|
magna aliqua.
|
||||||
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
<br><br>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||||
|
magna aliqua.
|
||||||
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
<br><br>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||||
|
magna aliqua.
|
||||||
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="container first-row">
|
||||||
|
<div class="container-title">
|
||||||
|
How it works
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||||
|
magna aliqua.
|
||||||
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
<br><br>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||||
|
magna aliqua.
|
||||||
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
<br><br>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||||
|
magna aliqua.
|
||||||
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="container title-row">
|
||||||
|
<div class="container-title">
|
||||||
|
Real time collected data
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container title-row"></div>
|
||||||
|
<div class="container chart_container">
|
||||||
|
<div id="temp_chart" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="container-title">
|
||||||
|
Data overview
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Some important numbers...
|
||||||
|
<br><br>
|
||||||
|
TBD
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="container chart_container">
|
||||||
|
<div id="humidity_chart" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container chart_container">
|
||||||
|
<div id="wind_chart" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container chart_container">
|
||||||
|
<div id="rain_chart" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container chart_container">
|
||||||
|
<div id="cloud_chart" class="chart"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container title-row">
|
||||||
|
<div class="container-title">
|
||||||
|
The plant watering index
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container title-row">
|
||||||
|
<div class="container-title">
|
||||||
|
Predicted watering pattern
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<p>
|
||||||
|
Info on the plant watering index...
|
||||||
|
<br><br>
|
||||||
|
TBR
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<p>
|
||||||
|
Another chart with predicted watering pattern
|
||||||
|
<br><br>
|
||||||
|
TBC
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script defer src="js/main.js"></script>
|
||||||
|
<script src="js/fInit.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
0
site/views/js/fInit.js
Normal file → Executable file
0
site/views/js/fInit.js
Normal file → Executable file
7
site/views/js/main.js
Normal file → Executable file
7
site/views/js/main.js
Normal file → Executable file
@ -35,7 +35,8 @@ function draw_graph(ySeries, names, colors, div_name) {
|
|||||||
y: ySeries.data,
|
y: ySeries.data,
|
||||||
x: formatted_datetimes,
|
x: formatted_datetimes,
|
||||||
text: names.title,
|
text: names.title,
|
||||||
marker: { color: colors.trace, line: { width: 5 } }
|
// marker: { color: colors.trace, line: { width: 3 } }
|
||||||
|
marker: { color: colors.trace, line: { color: colors.trace, width: 3 } }
|
||||||
}
|
}
|
||||||
var data = [trace]
|
var data = [trace]
|
||||||
|
|
||||||
@ -82,8 +83,8 @@ async function plot_graphs() {
|
|||||||
'rain_chart'
|
'rain_chart'
|
||||||
)
|
)
|
||||||
draw_graph(
|
draw_graph(
|
||||||
{data: clouds, type: 'line'},
|
{data: clouds, type: 'bar'},
|
||||||
{title: "Cloudiness",yaxis: "Cloud coverage in %"},
|
{title: "Cloud cover",yaxis: "Cloud coverage in %"},
|
||||||
{trace: '#FFFFFF'},
|
{trace: '#FFFFFF'},
|
||||||
'cloud_chart'
|
'cloud_chart'
|
||||||
)
|
)
|
||||||
|
|||||||
BIN
site/views/media/logo.png
Executable file
BIN
site/views/media/logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Loading…
Reference in New Issue
Block a user