Skip to content

Commit

Permalink
Merge pull request #45 from alberto-abarzua/fix/polish_activity
Browse files Browse the repository at this point in the history 
chore: update grammar, add label to control panel
  • Loading branch information
@alberto-abarzua
alberto-abarzua authored Nov 20, 2023
2 parents 4133c46 + 8820b4a commit bfa2aed
Show file tree
Hide file tree
Showing 8 changed files with 130 additions and 102 deletions.
49 changes: 23 additions & 26 deletions arm_docs/src/pages/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,23 @@ import ActivityBox from "@site/static/img/activity_box.png";
import Euler from "@site/static/img/euler.gif";
import Coordinates from "@site/static/img/coordinates.gif";
import ArrowDownSVG from "@site/static/img/down_arrow.svg";
import { useLocation } from "react-router-dom";

// <img
// src={GeneralGif}
// alt="General Overview"
// className="w-1/3 flex-shrink-0 overflow-hidden rounded-md object-contain"
// />
export default function Home() {
const { siteConfig } = useDocusaurusContext();
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const token = searchParams.get("access_token");
const onClickGoToActivity = () => {
const url =
"https://demo.ribot.dev/?access_token=QslklxkIoFrDMqjQPwSIaFabSlBnOUTzxRMlVgxuSUWhRijUvsNZWjDxyXwnhaFE";
// go to url in new tab
const url = `https://demo.ribot.dev/?access_token=${token}&activity=true`;
window.open(url, "_blank");
};
return (
<Layout
title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />"
>
<main className="flex flex-col justify-center p-10 ">
<main className="flex flex-col justify-center p-10 w-full lg:w-4/5 mx-auto ">
<div className="flex flex-col">
<h1 className="text-3xl font-bold mb-2">
Prueba de Usabilidad - Plataforma de Control Brazo Robótico
Expand Down Expand Up @@ -72,10 +69,10 @@ export default function Home() {
permite la precisión en tareas específicas.
</p>

<div className="flex-col lg:flex justify-center gap-x-6">
<div className="flex flex-col flex-1 items-center">
<div className="flex-col flex xl:flex-row justify-center items-start gap-x-6">
<div className="flex flex-col w-2/3 flex-1 ">
<p className="text-xl font-bold flex-1 px-2 py-3">Coordenadas</p>
<div className="flex-col lg:flex ">
<div className="flex-col flex items-center ">
<p className="text-lg flex-1 px-2 py-3">
Las coordenadas son un conjunto de valores que determinan la
posición exacta de un punto en un espacio. En robótica, se
Expand All @@ -89,11 +86,11 @@ export default function Home() {
/>
</div>
</div>
<div className="flex flex-col flex-1 items-center">
<div className="flex flex-col flex-1 w-2/3">
<p className="text-xl font-bold flex-1 px-2 py-3">
Ángulos de Aproximación
</p>
<div className="flex-col lg:flex">
<div className="flex-col flex items-center">
<p className="text-lg flex-1 px-2 py-3">
Los ángulos de aproximación, como el roll, pitch y yaw, se
refieren a las rotaciones en torno a los ejes principales del
Expand All @@ -113,29 +110,29 @@ export default function Home() {

<div className="flex flex-col mt-10">
<h3 className="text-2xl font-bold">La Actividad!</h3>
<div className="flex items-center justify-center gap-x-20 ">
<div className="flex">
<div className="flex items-start justify-start gap-x-20 ">
<div className="flex-col flex lg:flex-row">
<p className="text-lg flex-1 px-2 py-3">
Veras un recuadro como el de la imagen de la derecha. Este
recuadro te dira que hacer en cada paso. Sigue las instrucciones
y completa la actividad. Al final se abrirá un formulario para
que puedas dejar tus comentarios sobre la actividad. (Es
importante que completes el formulario para que la actividad sea
válida)
Veras un recuadro morado como el de la imagen de la derecha.
Este recuadro te dira que hacer en cada paso. Sigue las
instrucciones y completa la actividad. Al final se abrirá un
formulario para que puedas dejar tus comentarios sobre la
actividad. (Es importante que completes el formulario para que
la actividad sea válida)
</p>

<img
src={ActivityBox}
alt="Angles of Approach Explanation"
className="w-1/4 flex-shrink-0 overflow-hidden rounded-md object-contain"
className=" w-60 flex-shrink-0 rounded-md object-contain object-top mt-5"
/>
</div>
</div>
<ArrowDownSVG className="w-10 h-10 mx-auto mt-5 transform scale-50 transition-all animate-bounce" />
<div className="flex justify-center mt-5">

<div className="flex justify-center mt-16">
<button
onClick={onClickGoToActivity}
className="bg-green-600 text-white transform scale-150 px-4 py-2 rounded-md hover:bg-green-700 font-mono"
className="bg-green-600 text-white border-gray-500 shadow-gray-500 shadow-sm border transform scale-150 px-4 py-2 rounded-md hover:bg-green-700 font-mono"
>
Comenzar la Actividad
</button>
Expand Down
79 changes: 41 additions & 38 deletions frontend/src/components/controls/ControlPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,48 +67,51 @@ const ControlPanel = () => {

return (
<div className="flex h-full w-full flex-col bg-slate-50">
<div className="flex flex-row items-center rounded-lg bg-slate-200 p-4 ">
<div className="flex items-center gap-x-3 rounded-lg bg-white px-4 py-2">
<Label htmlFor="control-toggle " className="mr-4 whitespace-nowrap text-lg">
<InfoHover text="Toggle between Axis and Joint controls" />
Axis-Joint Controls
</Label>
<Switch
className="scale-125 transform"
id="control-toggle"
checked={showAxisControls}
onCheckedChange={() => setShowAxisControls(!showAxisControls)}
/>
</div>
<div className="mx-2 mt-2 flex flex-col gap-y-4 rounded-lg bg-slate-200 p-4">
<h1 className="mx-2 text-2xl font-bold">Control Panel</h1>
<div className="flex flex-row items-center ">
<div className="flex items-center gap-x-3 rounded-lg bg-white px-4 py-2">
<Label htmlFor="control-toggle " className="mr-4 whitespace-nowrap text-lg">
<InfoHover text="Toggle between controlling coordinates + raw-pitch-yaw and individual joints" />
{'X-Y-Z ⥄ Joint Controls'}
</Label>
<Switch
className="scale-125 transform"
id="control-toggle"
checked={showAxisControls}
onCheckedChange={() => setShowAxisControls(!showAxisControls)}
/>
</div>

<div className="ml-auto flex w-fit items-center gap-x-3">
<TooltipProvider>
<Tooltip delayDuration={300}>
<TooltipTrigger>
<Button onClick={call_home}>
<HomeIcon className=" text-xl" /> Home Arm
</Button>
</TooltipTrigger>
<div className="ml-auto flex w-fit items-center gap-x-3">
<TooltipProvider>
<Tooltip delayDuration={300}>
<TooltipTrigger>
<Button onClick={call_home}>
<HomeIcon className=" text-xl" /> Home Arm
</Button>
</TooltipTrigger>

<TooltipContent>
<p>Sets the default position </p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipContent>
<p>Sets the default position </p>
</TooltipContent>
</Tooltip>
</TooltipProvider>

<TooltipProvider>
<Tooltip delayDuration={300}>
<TooltipTrigger>
<Button onClick={call_stop_movement} variant="destructive">
<DangerousIcon className="text" /> Stop
</Button>
</TooltipTrigger>
<TooltipProvider>
<Tooltip delayDuration={300}>
<TooltipTrigger>
<Button onClick={call_stop_movement} variant="destructive">
<DangerousIcon className="text" /> Stop
</Button>
</TooltipTrigger>

<TooltipContent>
<p>Stop all movements</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipContent>
<p>Stop all movements</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
</div>
{controlContent}
Expand Down
18 changes: 13 additions & 5 deletions frontend/src/components/general/layout/SideNav.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,31 @@ import { useState } from 'react';

const SideNav = () => {
const [showTutorial, setShowTutorial] = useState(false);
const [wasTutorialShown, setWasTutorialShown] = useState(false);

const toggleTutorial = () => {
setShowTutorial(prev => !prev);
setWasTutorialShown(true);
};

return (
<>
<div className="fixed z-40 h-full w-16 bg-gray-100">
<div className="relative left-0 top-0 mx-auto mt-8 flex h-12 w-14 items-center justify-center rounded-full bg-slate-700">
<img src={LogoSVG} alt="logo" className="w-20"></img>
</div>
<a href="https://ribot.dev">
<div className="relative left-0 top-0 mx-auto mt-8 flex h-12 w-14 items-center justify-center rounded-full bg-slate-700">
<img src={LogoSVG} alt="logo" className="w-20"></img>
</div>
</a>

<div
onClick={toggleTutorial}
className="absolute bottom-10 flex w-full flex-col items-center space-y-10 pb-3"
className="absolute bottom-20 flex w-full scale-[2.1] transform flex-col items-center space-y-10 pb-3"
>
<InfoOutlinedIcon className="scale-[2] transform cursor-pointer text-sky-700 hover:scale-[2.1] hover:text-sky-800"></InfoOutlinedIcon>
<InfoOutlinedIcon
className={` transform cursor-pointer text-sky-700 hover:text-sky-800 ${
wasTutorialShown ? '' : 'animate-bounce'
} `}
></InfoOutlinedIcon>
</div>
</div>

Expand Down
12 changes: 11 additions & 1 deletion frontend/src/components/general/tutorial/ActivityBox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,17 @@ const ActivityBox = () => {
setIsVisible(true);
}, 4000);

return () => clearTimeout(timer);
// 30 min
const exitTimeout = 30 * 60 * 1000;

const exitTimer = setTimeout(() => {
window.close();
}, exitTimeout);

return () => {
clearTimeout(timer);
clearTimeout(exitTimer);
};
}, []);

const clearActivity = () => {
Expand Down
Loading

1 comment on commit bfa2aed

@vercel
Copy link

@vercel vercel bot commented on bfa2aed Nov 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ribot-demo – ./frontend

ribot-demo-albertos-projects-8fdd187b.vercel.app
ribot-demo.vercel.app
ribot-demo-git-main-albertos-projects-8fdd187b.vercel.app
demo.ribot.dev

Please sign in to comment.