mirror of
https://gitlab.fdmci.hva.nl/technische-informatica-sm3/ti-projectten/rooziinuubii79.git
synced 2025-08-03 03:45:00 +00:00
started with flask for kobuki website
This commit is contained in:
ishak jmilou.ishak
5
docs/explanation/driver.md
Normal file
5
docs/explanation/driver.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# uitleg ferry driver kobuki
|
||||
|
||||
- nacero driver
|
||||
- wsl plugin connect automatisch met wsl omgeving
|
||||
-
|
||||
5
docs/home/stappenplan.md
Normal file
5
docs/home/stappenplan.md
Normal file
@@ -0,0 +1,5 @@
|
||||
- [x] Kobuki werkt met driver.
|
||||
- [x] Ik kan de data uitlezen.
|
||||
- [ ] Data wordt correct weergegeven.
|
||||
- [ ] Ik kan de data laten zien in op de website.
|
||||
- [ ] Ik kan de kobuki besturen vanaf de website.
|
||||
@@ -1 +1,13 @@
|
||||
# Welkom
|
||||
# Welkom
|
||||
|
||||
|
||||
## benodigdheden
|
||||
|
||||
- temperatuur sensor
|
||||
- camera
|
||||
- time of flight sensor
|
||||
- infrarood camera
|
||||
|
||||
## idee
|
||||
|
||||
Terwijl de kobuki aan het rond rijden is schetst hij een kaart van de omgeving.
|
||||
10
web/app.py
Normal file
10
web/app.py
Normal file
@@ -0,0 +1,10 @@
|
||||
from flask import Flask, render_template
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
return render_template('index.html')
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True)
|
||||
BIN
web/static/images/logo_kobuki.png
Normal file
BIN
web/static/images/logo_kobuki.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
121
web/static/style.css
Normal file
121
web/static/style.css
Normal file
@@ -0,0 +1,121 @@
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
text-align: -webkit-center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* This is my code for my navbar */
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 70rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 50px;
|
||||
align-items: center;
|
||||
margin: 1.5rem auto 0 auto;
|
||||
padding: 0 30px;
|
||||
top: 0%;
|
||||
bottom: auto;
|
||||
left: 0%;
|
||||
right: 0%;
|
||||
}
|
||||
|
||||
.imgNav {
|
||||
height: 50px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.connectButton {
|
||||
border-radius: 10px;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
height: 40px;
|
||||
background-color: #b3ffb3;
|
||||
}
|
||||
|
||||
/* end navbar */
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
width: 80%;
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
|
||||
padding: 40px;
|
||||
}
|
||||
.button-section {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Middenknop */
|
||||
.btn:nth-child(1) {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-125%, -50%);
|
||||
}
|
||||
|
||||
/* Knop boven */
|
||||
.btn:nth-child(2) {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* Knop rechts */
|
||||
.btn:nth-child(3) {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Knop onder */
|
||||
.btn:nth-child(4) {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* Knop links */
|
||||
.btn:nth-child(5) {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #0056b3;
|
||||
/* transform: scale(1.1); */
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
background-color: #004494;
|
||||
}
|
||||
|
||||
15
web/templates/base.html
Normal file
15
web/templates/base.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{% include 'navbar.html' %}
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
19
web/templates/index.html
Normal file
19
web/templates/index.html
Normal file
@@ -0,0 +1,19 @@
|
||||
{%extends 'base.html'%}
|
||||
|
||||
{%block head%}
|
||||
|
||||
{%endblock%}
|
||||
|
||||
{%block content%}
|
||||
<div class="container">
|
||||
<div class="image-section">
|
||||
<img src="kobuki.jpg" alt="Kobuki Robot" id="robot-image">
|
||||
</div>
|
||||
<div class="button-section">
|
||||
<button class="btn">1</button>
|
||||
<button class="btn">2</button>
|
||||
<button class="btn">3</button>
|
||||
<button class="btn">4</button>
|
||||
</div>
|
||||
</div>
|
||||
{%endblock%}
|
||||
25
web/templates/navbar.html
Normal file
25
web/templates/navbar.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar">
|
||||
<img src="{{url_for('static', filename='images/logo_kobuki.png')}}" alt="logo" class="imgNav" />
|
||||
<h3>Kobuki</h3>
|
||||
<div class="buttonContainer">
|
||||
<a
|
||||
href="https://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/vuupoofeehoo27"
|
||||
target="_blank"
|
||||
>
|
||||
<button class="click connectButton">Placeholder</button>
|
||||
</a>
|
||||
<!-- <a href="./signup.html">sign in</a> -->
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user