diff --git a/.gitignore b/.gitignore index b6e4761..2d1375e 100644 --- a/.gitignore +++ b/.gitignore @@ -127,3 +127,4 @@ dmypy.json # Pyre type checker .pyre/ +todo.md diff --git a/README.md b/README.md index fccadca..92297e7 100644 --- a/README.md +++ b/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 diff --git a/app.py b/app.py new file mode 100644 index 0000000..629af69 --- /dev/null +++ b/app.py @@ -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) + diff --git a/bare/Rectangle 27.png b/bare/Rectangle 27.png new file mode 100644 index 0000000..45ebafa Binary files /dev/null and b/bare/Rectangle 27.png differ diff --git a/bare/bat-img.png b/bare/bat-img.png new file mode 100644 index 0000000..869e458 Binary files /dev/null and b/bare/bat-img.png differ diff --git a/bare/drop-img.png b/bare/drop-img.png new file mode 100644 index 0000000..21f25ed Binary files /dev/null and b/bare/drop-img.png differ diff --git a/bare/img-knee.png b/bare/img-knee.png new file mode 100644 index 0000000..8c9e159 Binary files /dev/null and b/bare/img-knee.png differ diff --git a/bare/index.html b/bare/index.html new file mode 100644 index 0000000..f47fbac --- /dev/null +++ b/bare/index.html @@ -0,0 +1,133 @@ + + + + + + + + Document + + +
+
+ +
+
+
+
+ +

360

+

Deg

+ +
+
+ Position + Percent + Velocity + Force

+ Voltage +
+
+ +

360

+

Deg

+ +
+
+ Position + Percent + Velocity + Force

+ Voltage +
+
+ +

360

+

Deg

+ +
+
+ Position + Percent + Velocity + Force

+ Voltage +
+ +
+ +
+ Power + Battery +
+
+
+
+ Manual + SA + + Manual + Angle View +
+
+

Angle Rotation

+ + +
+
+

1

+
+ +

57

+
+

2

+
+ +

57

+

3

+
+ +

57

+

4

+
+ +

57

+

5

+
+ +

57

+

6

+
+ +

57

+

7

+
+ +

57

+

8

+
+ +

57

+

9

+
+ +

57

+

10

+
+ +

57

+
+ +
+
+
+ + diff --git a/bare/robot.png b/bare/robot.png new file mode 100644 index 0000000..3d9643b Binary files /dev/null and b/bare/robot.png differ diff --git a/bare/style.css b/bare/style.css new file mode 100644 index 0000000..b3872bd --- /dev/null +++ b/bare/style.css @@ -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; +} diff --git a/static/src/main.css b/static/src/main.css new file mode 100644 index 0000000..9cdb88e --- /dev/null +++ b/static/src/main.css @@ -0,0 +1,11 @@ +/* static/src/main.css */ + +@tailwind base; +@tailwind components; +@tailwind utilities; + +* { + padding: 0; + margin: 0; + background-color: #181c20; +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..6813045 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,7 @@ +module.exports = { + content: ["./templates/**/*.html"], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..f896ec0 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,19 @@ + + + + + + + + + + {% assets 'css' %} + + {% endassets %} + + Flask + htmlx + Tailwind CSS + + + {% block content %} {% endblock content %} + + diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..9be70f1 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,8 @@ + + +{% extends "base.html" %} {% block content %} +
robot
+
+
+ +{% endblock content %} diff --git a/templates/robot.png b/templates/robot.png new file mode 100644 index 0000000..faec10b Binary files /dev/null and b/templates/robot.png differ