feat: gesturepage with gesture button
ref: N25B-345
This commit is contained in:
@@ -7,6 +7,7 @@ import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
|
|||||||
import VisProg from "./pages/VisProgPage/VisProg.tsx";
|
import VisProg from "./pages/VisProgPage/VisProg.tsx";
|
||||||
import {useState} from "react";
|
import {useState} from "react";
|
||||||
import Logging from "./components/Logging/Logging.tsx";
|
import Logging from "./components/Logging/Logging.tsx";
|
||||||
|
import GesturePage from './pages/GesturePage/GesturePage.tsx';
|
||||||
|
|
||||||
function App(){
|
function App(){
|
||||||
const [showLogs, setShowLogs] = useState(false);
|
const [showLogs, setShowLogs] = useState(false);
|
||||||
@@ -25,6 +26,7 @@ function App(){
|
|||||||
<Route path="/editor" element={<VisProg />} />
|
<Route path="/editor" element={<VisProg />} />
|
||||||
<Route path="/robot" element={<Robot />} />
|
<Route path="/robot" element={<Robot />} />
|
||||||
<Route path="/ConnectedRobots" element={<ConnectedRobots />} />
|
<Route path="/ConnectedRobots" element={<ConnectedRobots />} />
|
||||||
|
<Route path="/GesturePage" element={<GesturePage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</main>
|
</main>
|
||||||
{showLogs && <Logging />}
|
{showLogs && <Logging />}
|
||||||
|
|||||||
51
src/pages/GesturePage/GesturePage.tsx
Normal file
51
src/pages/GesturePage/GesturePage.tsx
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns A JSX element representing the app’s gesture page.
|
||||||
|
*/
|
||||||
|
export default function GesturePage() {
|
||||||
|
|
||||||
|
const [tags, setTags] = useState([])
|
||||||
|
function getTags(){
|
||||||
|
fetch(
|
||||||
|
"http://localhost:8000/robot/get_available_gesture_tags",
|
||||||
|
{
|
||||||
|
method: "GET"
|
||||||
|
}
|
||||||
|
).then((res) => {
|
||||||
|
if (!res.ok) throw new Error("Failed communicating with the backend.")
|
||||||
|
res.json().then((jsonRes) => setTags(jsonRes["tags"]))
|
||||||
|
|
||||||
|
}).catch(() => console.log("Failed to send program to the backend."));
|
||||||
|
}
|
||||||
|
|
||||||
|
const gesture = {endpoint: "actuate/gesture/tag", data: "happy"}
|
||||||
|
function doGesture(){
|
||||||
|
fetch(
|
||||||
|
"http://localhost:8000/robot/command",
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
headers: {"Content-Type": "application/json"},
|
||||||
|
body: JSON.stringify(gesture),
|
||||||
|
}
|
||||||
|
).then((res) => {
|
||||||
|
if (!res.ok) throw new Error("Failed communicating with the backend.")
|
||||||
|
console.log("Successfully sent the gesture command to the backend.");
|
||||||
|
}).catch(() => console.log("Failed to send gesture command to the backend."));
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card">
|
||||||
|
<button onClick={getTags}>
|
||||||
|
Get Tags
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button onClick={doGesture}>
|
||||||
|
Do Gesture
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -23,6 +23,7 @@ function Home() {
|
|||||||
<Link to={"/editor"}>Editor →</Link>
|
<Link to={"/editor"}>Editor →</Link>
|
||||||
<Link to={"/template"}>Template →</Link>
|
<Link to={"/template"}>Template →</Link>
|
||||||
<Link to={"/ConnectedRobots"}>Connected Robots →</Link>
|
<Link to={"/ConnectedRobots"}>Connected Robots →</Link>
|
||||||
|
<Link to={"/GesturePage"}>Gesture Robot →</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user