updated layout to have 2 element next to eachother
This commit is contained in:
sam
BIN
docs/Screenshot 2023-10-17 153000.png
Normal file
BIN
docs/Screenshot 2023-10-17 153000.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -4,4 +4,5 @@
|
|||||||
Webserial is best lastig om zonder voorkennis van javascript te implementeren, omdat je streamreaders moet gebruiken en andere dingen. 90% van de online tutorials verwachten dat je al javascript ervaring hebt.
|
Webserial is best lastig om zonder voorkennis van javascript te implementeren, omdat je streamreaders moet gebruiken en andere dingen. 90% van de online tutorials verwachten dat je al javascript ervaring hebt.
|
||||||
|
|
||||||
|
|
||||||
ik heb problemen met het uitlezen van de binnenkomende data. Het is me gelukt om de data te splitsen door de binnenkomende data te splitten met ```readibleoutput.split(',')```, maar die data komt niet goed binnen omdat de reader te snel leest en de data opsplits. ik heb geprobeerd om alles in een geheel binnen te krijgen doormiddel van ```setTimeout()```, maar dat werkte niet. uiteindelijk werkte de manier van bas zijn online les
|
ik heb problemen met het uitlezen van de binnenkomende data. Het is me gelukt om de data te splitsen door de binnenkomende data te splitten met ```readibleoutput.split(',')```, maar die data komt niet goed binnen omdat de reader te snel leest en de data opsplits. ik heb geprobeerd om alles in een geheel binnen te krijgen doormiddel van ```setTimeout()```, maar dat werkte niet. uiteindelijk werkte de manier van bas zijn online les
|
||||||
|
|
||||||
|
|||||||
35
web/css.css
35
web/css.css
@@ -1,4 +1,6 @@
|
|||||||
|
* {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -12,6 +14,11 @@ html {
|
|||||||
div {
|
div {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.block{
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
.menubalk a {
|
.menubalk a {
|
||||||
float: left;
|
float: left;
|
||||||
color: #f2f2f2;
|
color: #f2f2f2;
|
||||||
@@ -36,3 +43,29 @@ div {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.waardes {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.map{
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textleft{
|
||||||
|
float: left;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 50%;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
float: left;
|
||||||
|
height: auto;
|
||||||
|
width: 40vw;
|
||||||
|
border-radius: 3vh;
|
||||||
|
margin-left: 2vw;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
36
web/index.html
Normal file
36
web/index.html
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap">
|
||||||
|
<link rel="icon" type="image/png" href="icon.png">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="css.css">
|
||||||
|
<title>Weerstation</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="menubalk">
|
||||||
|
<a class="active" href="index.html">Home</a>
|
||||||
|
<a href="statestiek.html">Station statestieken</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="block">
|
||||||
|
<div>
|
||||||
|
<h1>Dit is een weerstation.</h1>
|
||||||
|
</div>
|
||||||
|
<div class="textleft">
|
||||||
|
<p>Deze website weergeeft statestieke informatie van een weerstation die we voor het eerste blok hebben gebouwd.
|
||||||
|
We hadden 10 weken voor dit project om een weerstation te bouwen en die te programeren. Later moesten we het weerstation kopellen aan de HBO-ICT API en onze zelfgebouwde website die de binnenkomende data moet interpreteren en weergeven doormiddel van grafieken.</p>
|
||||||
|
<p>Op de volgende pagina kan je je ESP32 kopellen en de data bekijken.</p>
|
||||||
|
</div>
|
||||||
|
<div class="image">
|
||||||
|
<img src="http://hva-onto.nl/api/ti/map" class="image"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<link rel="icon" type="image/png" href="icon.png">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="css.css">
|
|
||||||
<title>Weerstation</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<div class="menubalk">
|
|
||||||
<a class="active" href="index.html">Home</a>
|
|
||||||
<a href="statestiek.html">Station statestieken</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div>
|
|
||||||
<h1>Dit is een weerstation website.</h1>
|
|
||||||
<p>Deze website weergeeft statestieke informatie van een weerstation</p>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user