Smikkelbakje/J1B1-CMB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated layout to have 2 element next to eachother

Browse Source
This commit is contained in:
sam
2023-10-18 15:41:34 +02:00
parent d33bbb0fae
commit 678644bf13
5 changed files with 72 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/Screenshot 2023-10-17 153000.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

3
docs/webserial.md
View File

@@ -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.
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
View File

@@ -1,4 +1,6 @@
* {
font-family: 'Open Sans', sans-serif;
}
body {
display: flex;
flex-direction: column;
@@ -12,6 +14,11 @@ html {
div {
color: white;
}
.block{
display: block;
}
.menubalk a {
float: left;
color: #f2f2f2;
@@ -36,3 +43,29 @@ div {
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
View 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&amp;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>

25
web/weer.html
View File

@@ -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>