mirror of
https://github.com/PotentiaRobotics/robot-gui.git
synced 2025-04-20 11:00:15 -04:00
Woohoo! Manual control page is done!
This commit is contained in:
FluffyCube9343
parent
eeede7bc66
commit
af3a8cfa56
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -127,3 +127,4 @@ dmypy.json
|
||||||
|
|
||||||
# Pyre type checker
|
# Pyre type checker
|
||||||
.pyre/
|
.pyre/
|
||||||
|
todo.md
|
||||||
|
|
|
||||||
35
README.md
35
README.md
|
|
@ -1,2 +1,35 @@
|
||||||
# robot-gui
|
# Robot GUI
|
||||||
|
|
||||||
A web server GUI hosted by flask which can be used to control the robot in manual, semi-automatic, and automatic modes.
|
A web server GUI hosted by flask which can be used to control the robot in manual, semi-automatic, and automatic modes.
|
||||||
|
The web server is meant to run on a flask backend, but we currently just run it on vanilla HTML and CSS with no backend; we plan on integrating it with flask in the very near future.
|
||||||
|
|
||||||
|
### Code Description
|
||||||
|
|
||||||
|
`bare/` Files containing the actual vanilla server, with vanilla HTML and CSS code.
|
||||||
|
|
||||||
|
- `bare/index.html` is the main HTML file of the server.
|
||||||
|
- `bare/style.css` is the main CSS file of the server. Currently is just vanilla without tailwind framework.
|
||||||
|
- All other files are images used in the server.
|
||||||
|
|
||||||
|
All of our other files are related to the flask backend, but do not contain any meaningful server code:
|
||||||
|
|
||||||
|
- `static/` contains placeholder CSS files to be integrated into the flask application.
|
||||||
|
- `templates/` contains placeholder HTML filess to be integrated into the flask application.
|
||||||
|
- `app.py` is the flask application to be run. If backend were integrated the command to initiate the server is `python app.py`.
|
||||||
|
- `tailwind.config.js` configures tailwind.
|
||||||
|
|
||||||
|
### Setup and Run.
|
||||||
|
|
||||||
|
1. Clone this repo
|
||||||
|
|
||||||
|
```
|
||||||
|
git clone https://github.com/PotentiaRobotics/robot-gui.git
|
||||||
|
```
|
||||||
|
|
||||||
|
2. `cd` to `bare/` directory
|
||||||
|
|
||||||
|
```
|
||||||
|
cd bare/
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Run live server on `index.html` or open `index.html` with web browser
|
||||||
|
|
|
||||||
22
app.py
Normal file
22
app.py
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
# app.py
|
||||||
|
|
||||||
|
from flask import Flask, render_template
|
||||||
|
from flask_assets import Bundle, Environment
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
assets = Environment(app)
|
||||||
|
css = Bundle("src/main.css", output="dist/main.css")
|
||||||
|
|
||||||
|
assets.register("css", css)
|
||||||
|
css.build()
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/")
|
||||||
|
def homepage():
|
||||||
|
return render_template("index.html")
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
app.run(debug=True)
|
||||||
|
|
||||||
BIN
bare/Rectangle 27.png
Normal file
BIN
bare/Rectangle 27.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 B |
BIN
bare/bat-img.png
Normal file
BIN
bare/bat-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
bare/drop-img.png
Normal file
BIN
bare/drop-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
bare/img-knee.png
Normal file
BIN
bare/img-knee.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
133
bare/index.html
Normal file
133
bare/index.html
Normal file
|
|
@ -0,0 +1,133 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main-container">
|
||||||
|
<div class="main-element e1">
|
||||||
|
<img src="robot.png" class="robotimg" />
|
||||||
|
</div>
|
||||||
|
<div class="main-element e2">
|
||||||
|
<div class="dropdowns">
|
||||||
|
<div class="dropdown d1">
|
||||||
|
<img src="img-knee.png" class="img-part" />
|
||||||
|
<p class="measure">360</p>
|
||||||
|
<p class="units">Deg</p>
|
||||||
|
<img src="drop-img.png" class="img-part img-dd" />
|
||||||
|
</div>
|
||||||
|
<div class="dddown1">
|
||||||
|
<a class="delement" href="#">Position</>
|
||||||
|
<a class="delement" href="#">Percent</a>
|
||||||
|
<a class="delement" href="#">Velocity</a>
|
||||||
|
<a class="delement" href="#">Force</p>
|
||||||
|
<a class="delement" href="#">Voltage</a>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown d2">
|
||||||
|
<img src="img-knee.png" class="img-part" />
|
||||||
|
<p class="measure">360</p>
|
||||||
|
<p class="units">Deg</p>
|
||||||
|
<img src="drop-img.png" class="img-part img-dd" />
|
||||||
|
</div>
|
||||||
|
<div class="dddown2">
|
||||||
|
<a class="delement" href="#">Position</>
|
||||||
|
<a class="delement" href="#">Percent</a>
|
||||||
|
<a class="delement" href="#">Velocity</a>
|
||||||
|
<a class="delement" href="#">Force</p>
|
||||||
|
<a class="delement" href="#">Voltage</a>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown d3">
|
||||||
|
<img src="img-knee.png" class="img-part" />
|
||||||
|
<p class="measure">360</p>
|
||||||
|
<p class="units">Deg</p>
|
||||||
|
<img src="drop-img.png" class="img-part img-dd" />
|
||||||
|
</div>
|
||||||
|
<div class="dddown3">
|
||||||
|
<a class="delement" href="#">Position</>
|
||||||
|
<a class="delement" href="#">Percent</a>
|
||||||
|
<a class="delement" href="#">Velocity</a>
|
||||||
|
<a class="delement" href="#">Force</p>
|
||||||
|
<a class="delement" href="#">Voltage</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel2-btns">
|
||||||
|
<a class="btn-2 power" href="https://google.com">Power</a>
|
||||||
|
<a class="btn-2 battery" href="https://google.com"
|
||||||
|
>Battery</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-element e3">
|
||||||
|
<div class="panel3-btns">
|
||||||
|
<a class="btn-3 manual" href="https://google.com">Manual</a>
|
||||||
|
<a class="btn-3 semi-automatic" href="https://google.com"
|
||||||
|
>SA</a
|
||||||
|
>
|
||||||
|
|
||||||
|
<a class="btn-3 automatic" href="https://google.com"
|
||||||
|
>Manual</a
|
||||||
|
>
|
||||||
|
<a class="btn-3 angle-view" href="https://google.com"
|
||||||
|
>Angle View</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="angle-rot-header">
|
||||||
|
<p class="angle-rot">Angle Rotation</p>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="position-grid">
|
||||||
|
<div class="pos-num"><p class="pos-angle-num">1</p></div>
|
||||||
|
<div class="pos-angle">
|
||||||
|
<img src="img-knee.png" class="pos-img" />
|
||||||
|
<p class="pos-angle-num">57</p>
|
||||||
|
</div>
|
||||||
|
<div class="pos-num"><p class="pos-angle-num">2</p></div>
|
||||||
|
<div class="pos-angle">
|
||||||
|
<img src="img-knee.png" class="pos-img"/>
|
||||||
|
<p class="pos-angle-num">57</p>
|
||||||
|
</div><div class="pos-num"><p class="pos-angle-num">3</p></div>
|
||||||
|
<div class="pos-angle">
|
||||||
|
<img src="img-knee.png" class="pos-img"/>
|
||||||
|
<p class="pos-angle-num">57</p>
|
||||||
|
</div><div class="pos-num"><p class="pos-angle-num">4</p></div>
|
||||||
|
<div class="pos-angle">
|
||||||
|
<img src="img-knee.png" class="pos-img"/>
|
||||||
|
<p class="pos-angle-num">57</p>
|
||||||
|
</div><div class="pos-num"><p class="pos-angle-num">5</p></div>
|
||||||
|
<div class="pos-angle">
|
||||||
|
<img src="img-knee.png" class="pos-img"/>
|
||||||
|
<p class="pos-angle-num">57</p>
|
||||||
|
</div><div class="pos-num"><p class="pos-angle-num">6</p></div>
|
||||||
|
<div class="pos-angle">
|
||||||
|
<img src="img-knee.png" class="pos-img"/>
|
||||||
|
<p class="pos-angle-num">57</p>
|
||||||
|
</div><div class="pos-num"><p class="pos-angle-num">7</p></div>
|
||||||
|
<div class="pos-angle">
|
||||||
|
<img src="img-knee.png" class="pos-img"/>
|
||||||
|
<p class="pos-angle-num">57</p>
|
||||||
|
</div><div class="pos-num"><p class="pos-angle-num">8</p></div>
|
||||||
|
<div class="pos-angle">
|
||||||
|
<img src="img-knee.png" class="pos-img"/>
|
||||||
|
<p class="pos-angle-num">57</p>
|
||||||
|
</div><div class="pos-num"><p class="pos-angle-num">9</p></div>
|
||||||
|
<div class="pos-angle">
|
||||||
|
<img src="img-knee.png" class="pos-img"/>
|
||||||
|
<p class="pos-angle-num">57</p>
|
||||||
|
</div><div class="pos-num"><p class="pos-angle-num">10</p></div>
|
||||||
|
<div class="pos-angle">
|
||||||
|
<img src="img-knee.png" class="pos-img"/>
|
||||||
|
<p class="pos-angle-num">57</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
bare/robot.png
Normal file
BIN
bare/robot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
201
bare/style.css
Normal file
201
bare/style.css
Normal file
|
|
@ -0,0 +1,201 @@
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #181c20;
|
||||||
|
color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: stretch;
|
||||||
|
background-color: black;
|
||||||
|
gap: 0.33333333vw;
|
||||||
|
height: 99.5vh;
|
||||||
|
}
|
||||||
|
.main-element {
|
||||||
|
display: inline-block;
|
||||||
|
height: 99.5vh;
|
||||||
|
width: 32vw;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #181c20;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.robotimg {
|
||||||
|
height: 99.5vh;
|
||||||
|
width: 32vw;
|
||||||
|
}
|
||||||
|
.btn-2 {
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #223344;
|
||||||
|
padding-top: 1vw;
|
||||||
|
padding-bottom: 1vw;
|
||||||
|
padding-left: 2.2vw;
|
||||||
|
padding-right: 2.2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel2-btns {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1vw;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 2vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.dropdowns {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
height: 99.5vh;
|
||||||
|
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 22vh;
|
||||||
|
}
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
background-color: #223344;
|
||||||
|
width: 70%;
|
||||||
|
text-align: center;
|
||||||
|
height: 7vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.d1 {
|
||||||
|
justify-self: flex-start;
|
||||||
|
margin-top: 2.5vh;
|
||||||
|
}
|
||||||
|
.dddown1 {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
right: 4.8vw;
|
||||||
|
top: 9.65vh;
|
||||||
|
|
||||||
|
background-color: #223344;
|
||||||
|
}
|
||||||
|
.dddown2 {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
right: 4.8vw;
|
||||||
|
top: 38.6vh;
|
||||||
|
|
||||||
|
background-color: #223344;
|
||||||
|
}
|
||||||
|
.dddown3 {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
right: 4.8vw;
|
||||||
|
top: 67.55vh;
|
||||||
|
|
||||||
|
background-color: #223344;
|
||||||
|
}
|
||||||
|
.delement {
|
||||||
|
background-color: #223344;
|
||||||
|
padding: 0.4vw 1vw;
|
||||||
|
}
|
||||||
|
.img-part {
|
||||||
|
background-color: #223344;
|
||||||
|
height: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.measure {
|
||||||
|
background-color: #fceaea;
|
||||||
|
color: black;
|
||||||
|
padding-left: 1vh;
|
||||||
|
padding-right: 1vh;
|
||||||
|
padding-top: 0.5vh;
|
||||||
|
padding-bottom: 3.5vh;
|
||||||
|
height: 3vh;
|
||||||
|
}
|
||||||
|
.units {
|
||||||
|
background-color: #fceaea;
|
||||||
|
color: black;
|
||||||
|
padding-left: 1vh;
|
||||||
|
padding-right: 1vh;
|
||||||
|
padding-top: 0.5vh;
|
||||||
|
padding-bottom: 3.5vh;
|
||||||
|
height: 3vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel3-btns {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1vw;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 1.6vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.btn-3 {
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #223344;
|
||||||
|
padding-top: 1vw;
|
||||||
|
padding-bottom: 1vw;
|
||||||
|
padding-left: 1vw;
|
||||||
|
padding-right: 1vw;
|
||||||
|
}
|
||||||
|
.angle-view {
|
||||||
|
width: 8vw;
|
||||||
|
background-color: #778899;
|
||||||
|
}
|
||||||
|
|
||||||
|
.angle-rot-header {
|
||||||
|
margin-top: 10%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 24vw;
|
||||||
|
padding: 3vh 0;
|
||||||
|
margin-left: 4vw;
|
||||||
|
background-color: #223344;
|
||||||
|
}
|
||||||
|
.angle-rot {
|
||||||
|
background-color: #223344;
|
||||||
|
}
|
||||||
|
|
||||||
|
.position-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 2.5fr;
|
||||||
|
row-gap: 0.5vw;
|
||||||
|
column-gap: 1vw;
|
||||||
|
width: 12vw;
|
||||||
|
background-color: black;
|
||||||
|
padding: 0.3vw 5px;
|
||||||
|
font-size: 36px;
|
||||||
|
margin-left: 10vw;
|
||||||
|
margin-top: 2vw;
|
||||||
|
}
|
||||||
|
.pos-num {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #223344;
|
||||||
|
}
|
||||||
|
.pos-angle-num,
|
||||||
|
.pos-img {
|
||||||
|
background-color: #223344;
|
||||||
|
}
|
||||||
|
.pos-angle {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #223344;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .img-dd:hover {
|
||||||
|
} */
|
||||||
|
|
||||||
|
a:link,
|
||||||
|
a:visited {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
11
static/src/main.css
Normal file
11
static/src/main.css
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* static/src/main.css */
|
||||||
|
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background-color: #181c20;
|
||||||
|
}
|
||||||
7
tailwind.config.js
Normal file
7
tailwind.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
module.exports = {
|
||||||
|
content: ["./templates/**/*.html"],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
19
templates/base.html
Normal file
19
templates/base.html
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!-- templates/base.html -->
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
|
{% assets 'css' %}
|
||||||
|
<link rel="stylesheet" href="{{ ASSET_URL }}" />
|
||||||
|
{% endassets %}
|
||||||
|
|
||||||
|
<title>Flask + htmlx + Tailwind CSS</title>
|
||||||
|
</head>
|
||||||
|
<body class="bg-blue-100">
|
||||||
|
{% block content %} {% endblock content %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
templates/index.html
Normal file
8
templates/index.html
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<!-- templates/index.html -->
|
||||||
|
|
||||||
|
{% extends "base.html" %} {% block content %}
|
||||||
|
<div class="col-1"><img src="robot.png" alt="robot" /></div>
|
||||||
|
<div class="col-2"></div>
|
||||||
|
<div class="col-3"></div>
|
||||||
|
|
||||||
|
{% endblock content %}
|
||||||
BIN
templates/robot.png
Normal file
BIN
templates/robot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Loading…
Reference in New Issue
Block a user