rushilwiz/robot-gui
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/robot-gui.git synced 2025-04-03 20:00:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Flask integrated lets go!

Browse Source
This commit is contained in:
FluffyCube9343 2022-10-15 14:47:18 -04:00
parent 3ac3dee53b
commit d037b15cf0
13 changed files with 363 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -127,4 +127,4 @@ dmypy.json
# Pyre type checker
.pyre/
todo.md
todo.md

24
bare/common.css
View File

@ -1,24 +0,0 @@
* {
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;
}

175
bare/index.html
View File

@ -1,175 +0,0 @@
<!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="common.css" />
<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>
<label for="fname">Input</label>
<input class="inputbox" type="text" id="fname" name="fname">
<button class="button">Enter</button>
<p class="units">Deg</p>
<select name="input" id="unit">
<option value="Position">Position</option>
<option value="Percent">Percent</option>
<option value="Velocity">Velocity</option>
<option value="Voltage">Voltage</option>
<option value="Force">Force</option>
</select>
</div>
<div class="dropdown d2">
<img src="img-knee.png" class="img-part" />
<p class="measure">360</p>
<label for="fname">Input</label>
<input class="inputbox" type="text" id="fname" name="fname">
<button class="button">Enter</button>
<p class="units">Deg</p>
<select name="input" id="unit">
<option value="Position">Position</option>
<option value="Percent">Percent</option>
<option value="Velocity">Velocity</option>
<option value="Voltage">Voltage</option>
<option value="Force">Force</option>
</select>
</div>
<div class="dropdown d3">
<img src="img-knee.png" class="img-part" />
<p class="measure">360</p>
<label for="fname">Input</label>
<input class="inputbox" type="text" id="fname" name="fname">
<button class="button">Enter</button>
<p class="units">Deg</p>
<select name="input" id="unit">
<option value="Position">Position</option>
<option value="Percent">Percent</option>
<option value="Velocity">Velocity</option>
<option value="Voltage">Voltage</option>
<option value="Force">Force</option>
</select>
</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&nbsp;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>

183
bare/style.css
View File

@ -1,183 +0,0 @@
.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;
}
.button {
background-color: #223344;
border-color: #223344;
}
.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;
}
.inputbox {
width: 80px;
}
.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;
}

0
bare/Rectangle 27.png → images/Rectangle 27.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 297 B

After

Width:  |  Height:  |  Size: 297 B

0
bare/bat-img.png → images/bat-img.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

0
bare/drop-img.png → images/drop-img.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

0
bare/img-knee.png → images/img-knee.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

0
bare/robot.png → images/robot.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 124 KiB

210
static/src/main.css
View File

@ -8,4 +8,214 @@
padding: 0;
margin: 0;
background-color: #181c20;
color: white;
box-sizing: border-box;
}
.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;
}
.button {
background-color: #223344;
border-color: #223344;
}
.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;
}
.inputbox {
width: 80px;
}
.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;
}
* {
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;
}

156
templates/base.html
View File

@ -1,5 +1,3 @@
<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
@ -11,9 +9,157 @@
<link rel="stylesheet" href="{{ ASSET_URL }}" />
{% endassets %}
<title>Flask + htmlx + Tailwind CSS</title>
<title>Potentia Robotics GUI</title>
</head>
<body class="bg-blue-100">
{% block content %} {% endblock content %}
<body>
<div class="main-container ifsmall">
<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&nbsp;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>

7
templates/index.html
View File

@ -1,8 +1,3 @@
<!-- 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 %}
{% extends "base.html" %} {% block content %} {% endblock content %}

BIN
templates/robot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 171 KiB