mirror of
https://github.com/PotentiaRobotics/robot-gui.git
synced 2025-04-09 14:20:16 -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/
|
||||
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.
|
||||
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