Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Inverse Kinematics Implementation of the Webserver #9

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Add Inverse Kinematics Implementation of the Webserver #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c8dfd36
Added inverse kinematics implementation of webserver
toshan-luktuke Feb 8, 2022
dab9d72
Revert "Added inverse kinematics implementation of webserver"
toshan-luktuke Feb 8, 2022
69afb02
Added inverse kinematics webserver
toshan-luktuke Feb 8, 2022
7e847c0
Updated readme with new path
toshan-luktuke Feb 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions firmware/6_inverse_kinematics_webserver/CMakeLists.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# The following five lines of boilerplate have to be in your project's
# CMakeLists in this exact order for cmake to work correctly

cmake_minimum_required(VERSION 3.5)

set(EXTRA_COMPONENT_DIRS ../components)
include($ENV{IDF_PATH}/tools/cmake/project.cmake)

project(servo_control)
19 changes: 19 additions & 0 deletions firmware/6_inverse_kinematics_webserver/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# Servo Webserver Inverse Kinematics

This code implements inverse kinematics functionality to the existing webserver

## Steps to Follow

- Configure the project
- `cd firmware/6_inverse_kinematics_webserver`
- `idf.py menuconfig`
- `Component config -> MARIO testing -> WiFi Config -> Set SSID -> Set Password`
- Build and Flash the Code
- `idf.py build`
- `idf.py -p PORT flash`
- Monitor Logs
- `idf.py monitor`
- Access website via the ip shown in the `sta ip` part of the terminal. Paste `sta ip` in the browser to access the website
Note:- If it shows `cmake flash error`. Run the following:
- `sudo chmod 777 port`
- `idf.py -p port flash`
175 changes: 175 additions & 0 deletions firmware/6_inverse_kinematics_webserver/frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tuning page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
outline: none;
}
button {
border: none;
background: transparent;
}
body {
width: 100%;
height: 100vh;

background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZGVmcz48cGF0dGVybiBpZD0icGF0dGVybiIgd2lkdGg9IjQ2LjE5IiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMzQuNjQxMDE2MTUxMzc3NTUsMzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgxMzUpICI+PHJlY3QgaWQ9InBhdHRlcm4tYmFja2dyb3VuZCIgd2lkdGg9IjQwMCUiIGhlaWdodD0iNDAwJSIgZmlsbD0icmdiYSgyNiwgMzIsIDQ0LDEpIj48L3JlY3Q+IDxwYXRoIGZpbGw9InJnYmEoNDUsIDU1LCA3MiwxKSIgZD0iTS0yMCAtMjAgaDIwMCB2MjAwIGgtMjAwIE0zMy43NyAyNS41TDI1Ljk4IDIxTDE4LjE5IDI1LjVMMTguMTkgMzQuNUwyNS45OCAzOUwzMy43NyAzNC41ek0xNi40NSAyNS41TDguNjYgMjFMMC44NyAyNS41TDAuODcgMzQuNUw4LjY2IDM5TDE2LjQ1IDM0LjV6TTcuNzkgMTAuNUwwIDZMLTcuNzkgMTAuNUwtNy43OSAxOS41TDAgMjRMNy43OSAxOS41ek0xNi40NSAtNC41TDguNjYgLTlMMC44NyAtNC41TDAuODcgNC41TDguNjYgOUwxNi40NSA0LjV6TTMzLjc3IC00LjVMMjUuOTggLTlMMTguMTkgLTQuNUwxOC4xOSA0LjVMMjUuOTggOUwzMy43NyA0LjV6TTQyLjQzIDEwLjVMMzQuNjQgNkwyNi44NSAxMC41TDI2Ljg1IDE5LjVMMzQuNjQgMjRMNDIuNDMgMTkuNXpNMjUuMTEgMTAuNUwxNy4zMiA2TDkuNTMgMTAuNUw5LjUzIDE5LjVMMTcuMzIgMjRMMjUuMTEgMTkuNXoiPjwvcGF0aD48cGF0aCBmaWxsPSJyZ2JhKDE5MCwgMjI3LCAyNDgsMSkiIGQ9Ik0tMjAgLTIwIGgyMDAgdjIwMCBoLTIwMCBNMjQuMjEgMjUuMjVMMTUuOTggMjAuNUw3Ljc1IDI1LjI1TDcuNzUgMzQuNzVMMTUuOTggMzkuNUwyNC4yMSAzNC43NXpNNi44OSAyNS4yNUwtMS4zNCAyMC41TC05LjU3IDI1LjI1TC05LjU3IDM0Ljc1TC0xLjM0IDM5LjVMNi44OSAzNC43NXpNLTEuNzcgMTAuMjVMLTEwIDUuNUwtMTguMjMgMTAuMjVMLTE4LjIzIDE5Ljc1TC0xMCAyNC41TC0xLjc3IDE5Ljc1ek02Ljg5IC00Ljc1TC0xLjM0IC05LjVMLTkuNTcgLTQuNzVMLTkuNTcgNC43NUwtMS4zNCA5LjVMNi44OSA0Ljc1ek0yNC4yMSAtNC43NUwxNS45OCAtOS41TDcuNzUgLTQuNzVMNy43NSA0Ljc1TDE1Ljk4IDkuNUwyNC4yMSA0Ljc1ek0zMi44NyAxMC4yNUwyNC42NCA1LjVMMTYuNDEgMTAuMjVMMTYuNDEgMTkuNzVMMjQuNjQgMjQuNUwzMi44NyAxOS43NXpNNDEuNTMgMjUuMjVMMzMuMyAyMC41TDI1LjA3IDI1LjI1TDI1LjA3IDM0Ljc1TDMzLjMgMzkuNUw0MS41MyAzNC43NXpNMTUuNTUgNDAuMjVMNy4zMiAzNS41TC0wLjkxIDQwLjI1TC0wLjkxIDQ5Ljc1TDcuMzIgNTQuNUwxNS41NSA0OS43NXpNLTEwLjQzIDI1LjI1TC0xOC42NiAyMC41TC0yNi44OSAyNS4yNUwtMjYuODkgMzQuNzVMLTE4LjY2IDM5LjVMLTEwLjQzIDM0Ljc1ek0tMTAuNDMgLTQuNzVMLTE4LjY2IC05LjVMLTI2Ljg5IC00Ljc1TC0yNi44OSA0Ljc1TC0xOC42NiA5LjVMLTEwLjQzIDQuNzV6TTE1LjU1IC0xOS43NUw3LjMyIC0yNC41TC0wLjkxIC0xOS43NUwtMC45MSAtMTAuMjVMNy4zMiAtNS41TDE1LjU1IC0xMC4yNXpNNDEuNTMgLTQuNzVMMzMuMyAtOS41TDI1LjA3IC00Ljc1TDI1LjA3IDQuNzVMMzMuMyA5LjVMNDEuNTMgNC43NXpNMzIuODcgNDAuMjVMMjQuNjQgMzUuNUwxNi40MSA0MC4yNUwxNi40MSA0OS43NUwyNC42NCA1NC41TDMyLjg3IDQ5Ljc1ek0tMS43NyA0MC4yNUwtMTAgMzUuNUwtMTguMjMgNDAuMjVMLTE4LjIzIDQ5Ljc1TC0xMCA1NC41TC0xLjc3IDQ5Ljc1ek0tMTkuMDkgMTAuMjVMLTI3LjMyIDUuNUwtMzUuNTUgMTAuMjVMLTM1LjU1IDE5Ljc1TC0yNy4zMiAyNC41TC0xOS4wOSAxOS43NXpNLTEuNzcgLTE5Ljc1TC0xMCAtMjQuNUwtMTguMjMgLTE5Ljc1TC0xOC4yMyAtMTAuMjVMLTEwIC01LjVMLTEuNzcgLTEwLjI1ek0zMi44NyAtMTkuNzVMMjQuNjQgLTI0LjVMMTYuNDEgLTE5Ljc1TDE2LjQxIC0xMC4yNUwyNC42NCAtNS41TDMyLjg3IC0xMC4yNXpNNTAuMTkgMTAuMjVMNDEuOTYgNS41TDMzLjczIDEwLjI1TDMzLjczIDE5Ljc1TDQxLjk2IDI0LjVMNTAuMTkgMTkuNzV6TTE1LjU1IDEwLjI1TDcuMzIgNS41TC0wLjkxIDEwLjI1TC0wLjkxIDE5Ljc1TDcuMzIgMjQuNUwxNS41NSAxOS43NXoiPjwvcGF0aD48L3BhdHRlcm4+ICA8L2RlZnM+IDxyZWN0IGZpbGw9InVybCgjcGF0dGVybikiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiPjwvcmVjdD48L3N2Zz4=");
display: flex;
justify-content: center;
align-items: center;
}
main {
background-color: rgba(0, 0, 0, 0.493);
/* backdrop-filter: blur(2px); */
color: white;
min-width: 35%;
padding: 2em;
height: 90vh;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;

font-weight: 100;
}
.button-group {
margin-bottom: 20px;
}
h1 {
font-weight: normal;
margin-bottom: 10px;
}
.button-group h3 {
font-weight: normal;
text-align: center;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.4rem;
/* margin-bottom: 5px; */
}
.button-group input {
background-color: transparent;
border: none;
border-bottom: 2px solid white;
color: white;
text-align: center;
font-size: 1.2rem;
padding: 5px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}

.button-group button {
color: white;
cursor: pointer;
font-size: 2rem;
}
</style>
</head>
<body>
<main>
<h1>MARIO SERVO TESTING</h1>
<div class="button-group">
<h3>X</h3>
<button>&lt;</button>
<input type="text" value="0.000" id="servo_a" />
<button>&gt;</button>
</div>
<div class="button-group">
<h3>Y</h3>
<button>&lt;</button>
<input type="text" value="0.000" id="servo_b" />
<button>&gt;</button>
</div>
<div class="button-group">
<h3>Z</h3>
<button>&lt;</button>
<input type="text" value="0.000" id="servo_c" />
<button>&gt;</button>
</div>
</main>
<script src="inverse-kinematics.js">
// let inpArray = document.querySelectorAll("input[type='text']");
// function submitVals() {
// const data = {};
// data["servo_a"] = parseFloat(document.getElementById("servo_a").value);
// data["servo_b"] = parseFloat(document.getElementById("servo_b").value);
// data["servo_c"] = parseFloat(document.getElementById("servo_c").value);
// let finaldata = JSON.stringify(data);
// // console.log(finaldata);

// let xhr = new XMLHttpRequest();

// // Vedant!
// let url = "/api/v1/servo";

// // open a connection
// xhr.open("POST", url, true);

// // Set the request header i.e. which type of content you are sending
// xhr.setRequestHeader("Content-Type", "application/json");
// // Create a state change callback
// xhr.onreadystatechange = function () {
// if (xhr.readyState === 4) {
// if (xhr.status == 400) {
// console.log("Success!");
// } else {
// console.log(xhr.status);
// }
// // Print received data from server
// }
// };

// // Sending data with the request
// xhr.send(finaldata);
// }
// for (let i = 0; i < inpArray.length; i++) {
// inpArray[i].addEventListener("change", submitVals);
// }

// let decrementButtons = document.querySelectorAll(
// ".button-group button:first-of-type"
// );
// let incrementButtons = document.querySelectorAll(
// ".button-group button:last-of-type"
// );
// function decrementVal(e) {
// let test = e.target.parentNode.children[2].value;
// if (!isNaN(Number(test))) {
// e.target.parentNode.children[2].value = String(
// (Number(test) - 0.01).toFixed(3)
// );
// submitVals();
// } else {
// e.target.parentNode.children[2].value = "0.000";
// }
// }
// function incrementVal(e) {
// let test = e.target.parentNode.children[2].value;
// if (!isNaN(Number(test))) {
// e.target.parentNode.children[2].value = String(
// (Number(test) + 0.01).toFixed(3)
// );
// submitVals();
// } else {
// e.target.parentNode.children[2].value = "0.000";
// }
// }
// for (button of decrementButtons) {
// button.addEventListener("click", decrementVal);
// }
// for (button of incrementButtons) {
// button.addEventListener("click", incrementVal);
// }
</script>
</body>
</html>
Loading