Skip to content

Commit

Permalink
fixed joy
Browse files Browse the repository at this point in the history
  • Loading branch information
@DominikN
DominikN committed Aug 27, 2024
1 parent 1444359 commit ee9b06a
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 81 deletions.
11 changes: 9 additions & 2 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
},
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.preferences.importModuleSpecifier": "non-relative",
"jest.autoRun": { "watch": false, "onSave": "test-file" },
// "jest.autoRun": { "watch": false, "onSave": "test-file" },
"jest.jestCommandLine": "yarn test",
"eslint.lintTask.enable": true,
"[typescriptreact]": {
Expand All @@ -37,5 +37,12 @@
},
"[ignore]": {
"editor.defaultFormatter": "foxundermoon.shell-format"
}
},
"[shellscript]": {
"editor.defaultFormatter": "foxundermoon.shell-format"
},
// Disable shell formatting for justfile
// "files.associations": {
// "justfile": "plaintext" // or another file association if there is a custom language for it
// },
}
8 changes: 8 additions & 0 deletions demo/justfile
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# rebuild: Rebuild the project
rebuild:
#!/bin/bash
docker compose up --build --force-recreate -d

demo:
#!/bin/bash
docker exec -it ros-test bash -c "source /opt/ros/humble/setup.bash && ros2 topic echo /cmd_vel geometry_msgs/msg/TwistStamped"
10 changes: 10 additions & 0 deletions packages/studio-base/src/panels/Joy/Joy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ type Config = {
topic: undefined | string;
publishRate: number;
stamped: boolean;
advanced: boolean;
xAxis: Axis;
yAxis: Axis;
};
Expand All @@ -58,6 +59,11 @@ function buildSettingsTree(config: Config, topics: readonly Topic[]): SettingsTr
input: "boolean",
value: config.stamped,
},
advanced: {
label: "Advanced view",
input: "boolean",
value: config.advanced,
},
},
children: {
xAxis: {
Expand Down Expand Up @@ -119,6 +125,7 @@ function Joy(props: JoyProps): JSX.Element {
topic,
publishRate = 5,
stamped = false,
advanced = false,
xAxis: { field: xAxisField = "linear-x", limit: xLimit = 1 } = {},
yAxis: { field: yAxisField = "angular-z", limit: yLimit = 1 } = {},
} = partialConfig;
Expand All @@ -127,6 +134,7 @@ function Joy(props: JoyProps): JSX.Element {
topic,
publishRate,
stamped,
advanced,
xAxis: { field: xAxisField, limit: xLimit },
yAxis: { field: yAxisField, limit: yLimit },
};
Expand Down Expand Up @@ -242,6 +250,7 @@ function Joy(props: JoyProps): JSX.Element {
setTwistValue(message, config.xAxis, speed.x);
setTwistValue(message, config.yAxis, speed.y);
context.publish?.(currentTopic, message);
console.log("publishing message joy:", message);
};

if (config.publishRate > 0) {
Expand Down Expand Up @@ -273,6 +282,7 @@ function Joy(props: JoyProps): JSX.Element {
{enabled && (
<JoyVisual
disabled={!enabled}
advanced={config.advanced}
onSpeedChange={(value) => {
setVelocity(value);
}}
Expand Down
13 changes: 5 additions & 8 deletions packages/studio-base/src/panels/Joy/JoyVisual.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
// License, v2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/

import { Button } from "@mui/material";
import React, { useCallback, useState, useRef } from "react";

import "./styles.css";
Expand Down Expand Up @@ -35,6 +34,7 @@ const Arrow = ({ direction, width = 20, height = 7 }: { direction: string; width
// Type for the Joystick Props
type JoyVisualProps = {
disabled?: boolean;
advanced?: boolean;
onSpeedChange?: (pos: { x: number; y: number }) => void;
xLimit?: number;
yLimit?: number;
Expand All @@ -44,13 +44,13 @@ type JoyVisualProps = {
function JoyVisual(props: JoyVisualProps): JSX.Element {
const joystickRef = useRef<SVGCircleElement>(null);
const handleRef = useRef<SVGCircleElement>(null);
const { onSpeedChange, disabled = false, xLimit, yLimit } = props;
const { onSpeedChange, disabled = false, advanced = false, xLimit, yLimit } = props;
const [speed, setSpeed] = useState<{ x: number; y: number } | undefined>();
const [startPos, setStartPos] = useState<{ x: number; y: number } | undefined>();
const [isDragging, setIsDragging] = useState(false);
const [scaleX, setScaleX] = useState(0.5);
const [scaleY, setScaleY] = useState(0.5);
const [isEditing, setIsEditing] = useState(false);
// const [isEditing, setIsEditing] = useState(false);

const handleStart = useCallback(
(event: React.MouseEvent<SVGCircleElement> | React.TouchEvent<SVGCircleElement>) => {
Expand Down Expand Up @@ -144,9 +144,6 @@ function JoyVisual(props: JoyVisualProps): JSX.Element {

return (
<div id="container">
<Button id="toggle-editing" variant="contained" color="inherit" onClick={() => { setIsEditing(!isEditing); }}>
{isEditing ? (<>Basic<br />Mode</>) : (<>Advanced<br />Mode</>)}
</Button>
<div id="joystick-container">
<svg id="joystick" viewBox="0 0 100 100" aria-label="Joystick" >
<Arrow direction="up" />
Expand All @@ -156,11 +153,11 @@ function JoyVisual(props: JoyVisualProps): JSX.Element {
<circle ref={joystickRef} cx="50" cy="50" r={joyRadius.toString()} className="joystick-background" />
<circle onMouseDown={handleStart} onTouchStart={handleStart} ref={handleRef} cx="50" cy="50" r="15" className="joystick-handle" />
</svg>
{isEditing && (<div id="joystick-position">
{advanced && (<div id="joystick-position">
<div>({speed?.x.toFixed(2) ?? "0.00"}, {speed?.y.toFixed(2) ?? "0.00"})</div>
</div>)}
</div>
{isEditing && (
{advanced && (
<div id="controls">
<div className="slider-container">
<label htmlFor="xMax">X Axis</label>
Expand Down
119 changes: 48 additions & 71 deletions packages/studio-base/src/panels/Teleop/TeleopPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,91 +232,68 @@ function TeleopPanel(props: TeleopPanelProps): JSX.Element {
};
};

function setFieldValue(message: any, field: string, value: number) {
switch (field) {
case "linear-x":
message.twist.linear.x = value;
break;
case "linear-y":
message.twist.linear.y = value;
break;
case "linear-z":
message.twist.linear.z = value;
break;
case "angular-x":
message.twist.angular.x = value;
break;
case "angular-y":
message.twist.angular.y = value;
break;
case "angular-z":
message.twist.angular.z = value;
break;
}
}

useLayoutEffect(() => {
if (currentAction == undefined || !currentTopic) {
return;
}

// const message = {
// header: {
// stamp: getRosTimestamp(),
// frame_id: "base_link",
// },
// twist: {
// linear: {
// x: 0,
// y: 0,
// z: 0,
// },
// angular: {
// x: 0,
// y: 0,
// z: 0,
// },
// }
// };

const message = createMessage();

function setFieldValue(field: string, value: number) {
switch (field) {
case "linear-x":
message.twist.linear.x = value;
break;
case "linear-y":
message.twist.linear.y = value;
break;
case "linear-z":
message.twist.linear.z = value;
const publishMessage = () => {
const message = createMessage();

switch (currentAction) {
case DirectionalPadAction.UP:
setFieldValue(message, config.upButton.field, config.upButton.value);
break;
case "angular-x":
message.twist.angular.x = value;
case DirectionalPadAction.DOWN:
setFieldValue(message, config.downButton.field, config.downButton.value);
break;
case "angular-y":
message.twist.angular.y = value;
case DirectionalPadAction.LEFT:
setFieldValue(message, config.leftButton.field, config.leftButton.value);
break;
case "angular-z":
message.twist.angular.z = value;
case DirectionalPadAction.RIGHT:
setFieldValue(message, config.rightButton.field, config.rightButton.value);
break;
default:
}
}

switch (currentAction) {
case DirectionalPadAction.UP:
setFieldValue(config.upButton.field, config.upButton.value);
break;
case DirectionalPadAction.DOWN:
setFieldValue(config.downButton.field, config.downButton.value);
break;
case DirectionalPadAction.LEFT:
setFieldValue(config.leftButton.field, config.leftButton.value);
break;
case DirectionalPadAction.RIGHT:
setFieldValue(config.rightButton.field, config.rightButton.value);
break;
default:
}
const messageToSend = config.stamped ? message : message.twist;
context.publish?.(currentTopic, messageToSend);
console.log("publishing message teleop:", messageToSend);
};

// don't publish if rate is 0 or negative - this is a config error on user's part
if (config.publishRate <= 0) {
if (config.publishRate > 0) {
const intervalMs = (1000 * 1) / config.publishRate;
publishMessage();
const intervalHandle = setInterval(publishMessage, intervalMs);
return () => {
clearInterval(intervalHandle);
};
} else {
return;
}

const intervalMs = (1000 * 1) / config.publishRate;

message.header.stamp = getRosTimestamp();
const messageToSend = config.stamped ? message : message.twist;
context.publish?.(currentTopic, messageToSend);

const intervalHandle = setInterval(() => {
message.header.stamp = getRosTimestamp();
const messageToSend = config.stamped ? message : message.twist;
context.publish?.(currentTopic, messageToSend);
}, intervalMs);

return () => {
clearInterval(intervalHandle);
};
}, [context, config, currentTopic, currentAction]);

useLayoutEffect(() => {
Expand Down

0 comments on commit ee9b06a

Please sign in to comment.