Skip to content

Commit 04d4c4d

Browse files
martha-johnstonmartha-johnston
authored
[APP-9875] Add new buttons for linear movement (#432)
* add new arm widget * update arrows * address PR feedback * make SlantedArrowPad private
1 parent 855af5a commit 04d4c4d

File tree

1 file changed

+252
-0
lines changed

1 file changed

+252
-0
lines changed

‎lib/widgets/resources/arm_new.dart‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
import 'package:flutter/material.dart';
2+
3+
import '../../viam_sdk.dart';
4+
5+
final size = 300.0;
6+
7+
/// A widget to control an [Arm].
8+
class ViamArmWidgetNew extends StatelessWidget {
9+
/// The [Arm]
10+
final Arm arm;
11+
12+
const ViamArmWidgetNew({
13+
super.key,
14+
required this.arm,
15+
});
16+
17+
@override
18+
Widget build(BuildContext context) {
19+
return Column(
20+
children: [
21+
Divider(),
22+
Text(
23+
'End-effector Position',
24+
style: TextStyle(
25+
fontWeight: FontWeight.bold,
26+
),
27+
),
28+
Divider(),
29+
Stack(
30+
children: [
31+
_SlantedArrowPad(
32+
// TODO: add functions for arrow functionality
33+
onUp: () {},
34+
onDown: () {},
35+
onLeft: () {},
36+
onRight: () {},
37+
),
38+
_BuildCornerButton(
39+
alignment: Alignment.topLeft,
40+
direction: ArrowDirection.up,
41+
label: 'Z+',
42+
onPressed: () {},
43+
),
44+
_BuildCornerButton(
45+
alignment: Alignment.topRight,
46+
direction: ArrowDirection.down,
47+
label: 'Z-',
48+
onPressed: () {},
49+
),
50+
],
51+
),
52+
],
53+
);
54+
}
55+
}
56+
57+
class _BuildCornerButton extends StatelessWidget {
58+
final Alignment alignment;
59+
final ArrowDirection direction;
60+
final String label;
61+
final VoidCallback onPressed;
62+
63+
const _BuildCornerButton({
64+
required this.alignment,
65+
required this.direction,
66+
required this.label,
67+
required this.onPressed,
68+
});
69+
70+
@override
71+
Widget build(BuildContext context) {
72+
return Align(
73+
alignment: alignment,
74+
child: Padding(
75+
padding: const EdgeInsets.all(24.0),
76+
child: SizedBox(
77+
width: 100,
78+
height: 100,
79+
child: IconButton(
80+
icon: Stack(
81+
alignment: Alignment.center,
82+
children: [
83+
CustomPaint(
84+
painter: _LinearArrowPainter(direction: direction, color: Colors.black),
85+
child: const SizedBox.expand(),
86+
),
87+
Text(
88+
label,
89+
style: const TextStyle(
90+
color: Colors.white,
91+
fontWeight: FontWeight.bold,
92+
fontSize: 16,
93+
),
94+
),
95+
],
96+
),
97+
onPressed: onPressed,
98+
),
99+
),
100+
),
101+
);
102+
}
103+
}
104+
105+
enum ArrowDirection { up, down, left, right }
106+
107+
class _LinearArrowPainter extends CustomPainter {
108+
final ArrowDirection direction;
109+
final Color color;
110+
111+
_LinearArrowPainter({required this.direction, required this.color});
112+
113+
@override
114+
void paint(Canvas canvas, Size size) {
115+
final paint = Paint()
116+
..color = color
117+
..style = PaintingStyle.fill;
118+
119+
final path = Path();
120+
final w = size.width;
121+
final h = size.height;
122+
123+
switch (direction) {
124+
case ArrowDirection.up:
125+
path.moveTo(w / 2, 0);
126+
path.lineTo(w, h * 0.6);
127+
path.lineTo(w * 0.8, h * 0.6);
128+
path.lineTo(w * 0.8, h);
129+
path.lineTo(w * 0.2, h);
130+
path.lineTo(w * 0.2, h * 0.6);
131+
path.lineTo(0, h * 0.6);
132+
break;
133+
case ArrowDirection.down:
134+
path.moveTo(w / 2, h);
135+
path.lineTo(0, h * 0.4);
136+
path.lineTo(w * 0.2, h * 0.4);
137+
path.lineTo(w * 0.2, 0);
138+
path.lineTo(w * 0.8, 0);
139+
path.lineTo(w * 0.8, h * 0.4);
140+
path.lineTo(w, h * 0.4);
141+
break;
142+
case ArrowDirection.left:
143+
path.moveTo(0, h / 2);
144+
path.lineTo(w * 0.6, 0);
145+
path.lineTo(w * 0.6, h * 0.2);
146+
path.lineTo(w, h * 0.2);
147+
path.lineTo(w, h * 0.8);
148+
path.lineTo(w * 0.6, h * 0.8);
149+
path.lineTo(w * 0.6, h);
150+
break;
151+
case ArrowDirection.right:
152+
path.moveTo(w, h / 2);
153+
path.lineTo(w * 0.4, h);
154+
path.lineTo(w * 0.4, h * 0.8);
155+
path.lineTo(0, h * 0.8);
156+
path.lineTo(0, h * 0.2);
157+
path.lineTo(w * 0.4, h * 0.2);
158+
path.lineTo(w * 0.4, 0);
159+
break;
160+
}
161+
162+
path.close();
163+
canvas.drawPath(path, paint);
164+
}
165+
166+
@override
167+
bool shouldRepaint(covariant _LinearArrowPainter oldDelegate) => false;
168+
}
169+
170+
class _SlantedArrowPad extends StatelessWidget {
171+
final VoidCallback? onUp;
172+
final VoidCallback? onDown;
173+
final VoidCallback? onLeft;
174+
final VoidCallback? onRight;
175+
176+
const _SlantedArrowPad({
177+
super.key,
178+
this.onUp,
179+
this.onDown,
180+
this.onLeft,
181+
this.onRight,
182+
});
183+
184+
@override
185+
Widget build(BuildContext context) {
186+
return Center(
187+
child: Transform(
188+
transform: Matrix4.identity()
189+
..setEntry(3, 2, 0.0015)
190+
..rotateX(-0.9),
191+
alignment: FractionalOffset.center,
192+
child: SizedBox(
193+
height: size,
194+
width: size,
195+
child: Stack(
196+
children: [
197+
_BuildArrowButton(alignment: Alignment.topCenter, direction: ArrowDirection.up, onPressed: onUp, label: 'X-'),
198+
_BuildArrowButton(alignment: Alignment.bottomCenter, direction: ArrowDirection.down, onPressed: onDown, label: 'X+'),
199+
_BuildArrowButton(alignment: Alignment.centerLeft, direction: ArrowDirection.left, onPressed: onLeft, label: 'Y-'),
200+
_BuildArrowButton(alignment: Alignment.centerRight, direction: ArrowDirection.right, onPressed: onRight, label: 'Y+'),
201+
],
202+
),
203+
),
204+
),
205+
);
206+
}
207+
}
208+
209+
class _BuildArrowButton extends StatelessWidget {
210+
final Alignment alignment;
211+
final ArrowDirection direction;
212+
final String label;
213+
final VoidCallback? onPressed;
214+
215+
const _BuildArrowButton({
216+
required this.alignment,
217+
required this.direction,
218+
required this.onPressed,
219+
required this.label,
220+
});
221+
222+
@override
223+
Widget build(BuildContext context) {
224+
return Align(
225+
alignment: alignment,
226+
child: SizedBox(
227+
width: size / 2.5,
228+
height: size / 2.5,
229+
child: IconButton(
230+
icon: Stack(
231+
alignment: Alignment.center,
232+
children: [
233+
CustomPaint(
234+
painter: _LinearArrowPainter(direction: direction, color: Colors.black),
235+
child: const SizedBox.expand(),
236+
),
237+
Text(
238+
label,
239+
style: const TextStyle(
240+
color: Colors.white,
241+
fontWeight: FontWeight.bold,
242+
fontSize: 16,
243+
),
244+
),
245+
],
246+
),
247+
onPressed: onPressed,
248+
),
249+
),
250+
);
251+
}
252+
}

0 commit comments

Comments
 (0)