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);
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: osb;
|
||||
src: url(../fonts/opsb.ttf);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: whitesmoke;
|
||||
--cell_background: transparent;
|
||||
--cp_color: grey;
|
||||
--title-color: #333333;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-family: os;
|
||||
/* max-width: 1200px; */
|
||||
font-family: osl;
|
||||
max-width: 1300px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: dodgerblue;
|
||||
color: white;
|
||||
background-color: var(--cell_background);
|
||||
color: var(--title-color);
|
||||
padding: 1rem;
|
||||
height: 400px;
|
||||
}
|
||||
@ -45,6 +58,62 @@ body {
|
||||
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) {
|
||||
.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,
|
||||
x: formatted_datetimes,
|
||||
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]
|
||||
|
||||
@ -82,8 +83,8 @@ async function plot_graphs() {
|
||||
'rain_chart'
|
||||
)
|
||||
draw_graph(
|
||||
{data: clouds, type: 'line'},
|
||||
{title: "Cloudiness",yaxis: "Cloud coverage in %"},
|
||||
{data: clouds, type: 'bar'},
|
||||
{title: "Cloud cover",yaxis: "Cloud coverage in %"},
|
||||
{trace: '#FFFFFF'},
|
||||
'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