113 lines
4.2 KiB
TypeScript
113 lines
4.2 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
export default function Counter() {
|
|
const [customText, setCustomText] = useState("");
|
|
const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
|
|
|
|
// Reusable helper to talk to the backend
|
|
const send = async (type: string, context: string) => {
|
|
try {
|
|
await fetch("http://localhost:8000/button_pressed", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ type, context }),
|
|
});
|
|
// Backticks restored here:
|
|
console.log(`Sent ${type}: ${context}`);
|
|
} catch (err) {
|
|
// Backticks restored here:
|
|
console.error(`Error sending ${type}:`, err);
|
|
}
|
|
};
|
|
|
|
function list_generator(header: string, items: string[]) {
|
|
return (
|
|
<div style={{ flex: 1, minWidth: '200px' }}>
|
|
<strong style={{ display: 'block', marginBottom: '10px', borderBottom: '1px solid #eee' }}>{header}</strong>
|
|
<ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
|
{items.map((item, index) => (
|
|
<li key={index} style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: '8px',
|
|
fontSize: '14px'
|
|
}}>
|
|
<span>{item}</span>
|
|
<button
|
|
onClick={() => send("override", "2")}
|
|
style={{
|
|
width: '20px',
|
|
height: '20px',
|
|
padding: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
cursor: 'pointer',
|
|
fontSize: '12px'
|
|
}}
|
|
title="Send Override 2"
|
|
>
|
|
▶
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '20px' }}>
|
|
|
|
<div style={{ display: 'flex', gap: '10px' }}>
|
|
<input
|
|
type="text"
|
|
value={customText}
|
|
onChange={(e) => setCustomText(e.target.value)}
|
|
placeholder="Type something for Pepper to say..."
|
|
style={{ padding: '8px', flex: 1 }}
|
|
/>
|
|
<button onClick={() => send("speech", customText)} style={{ padding: '8px 16px' }}>
|
|
Say Custom Text
|
|
</button>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', gap: '10px' }}>
|
|
<button onClick={() => send("speech", "Hello, I'm Pepper")}>
|
|
"Hello, I'm Pepper"
|
|
</button>
|
|
<button onClick={() => send("speech", "Could you repeat that please")}>
|
|
"Repeat please"
|
|
</button>
|
|
<button onClick={() => send("speech", "Tell me something about yourself")}>
|
|
"About yourself"
|
|
</button>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
|
|
<label htmlFor="gesture-select">Select Gesture:</label>
|
|
<select
|
|
id="gesture-select"
|
|
value={selectedGesture}
|
|
onChange={(e) => setSelectedGesture(e.target.value)}
|
|
style={{ padding: '8px', borderRadius: '4px', flex: 1 }}
|
|
>
|
|
<option value="animations/Stand/BodyTalk/Speaking/BodyTalk_1">Body Talk 1</option>
|
|
<option value="animations/Stand/Gestures/Thinking_8">Thinking "8"</option>
|
|
<option value="animations/Stand/Gestures/Thinking_1">Thinking "1"</option>
|
|
<option value="animations/Stand/Emotions/Positive/Happy_1">Happy</option>
|
|
</select>
|
|
<button onClick={() => send("gesture", selectedGesture)} style={{ padding: '8px 16px' }}>
|
|
Actuate Gesture
|
|
</button>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap' }}>
|
|
{list_generator("Goals to complete:", ["Greet user", "Introduce self", "Ask for name"])}
|
|
{list_generator("Conditional norms:", ["If {user_tired}, be less energetic", "If {play_mundo}, go where you please"])}
|
|
{list_generator("Activate triggers:", ["If {user_thirsty}, offer drink", "If {name == Karen}, be triggered"])}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |