-
Notifications
You must be signed in to change notification settings - Fork 52
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Robot Arm Element - Adds robot arm to storyboard. #119
base: master
Are you sure you want to change the base?
Conversation
I'm not exactly sure how to handle the frame since the robot arm has a fairly wide range of movement. Is there a way to define the "marching ants" frame independent of the robot arm frame? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Amazing!
Added some comments / questions.
Also, what is the valid range of angles for each joint? Can we clamp the input angles to make sure we never draw an invalid configuration? (We already have utils/clamp.ts with a simple clamp()
function)
Regarding the bounding box - is it currently bit enough to contain the entire valid range of movement?
src/robot-arm-element.ts
Outdated
]; | ||
|
||
render() { | ||
/* eslint-disable prettier/prettier */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When I let VS code format the SVG it becomes un-readable and I hate the warnings. But if you really want it to wrap all those lines I can remove it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, prettier SVG formatting isn't that great.
But when the choice is between not-so-pleasing but consistent SVG formatting or getting the indentation wrong by the next developer who works on this code, I prefer the former.
Also, prettier should automatically format the code whenever you commit anyway. Didn't it?
src/robot-arm-element.ts
Outdated
*/ | ||
@property() jointColor = '#111111'; | ||
|
||
readonly pinInfo: ElementPin[] = [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We also need GND/VCC pins (they are not currently used in the simulation, but we do want the schematic to look as close as possible to reality)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok, will add the two pins. I was cheating since I knew they had no function.
src/robot-arm-element.ts
Outdated
<path transform="translate(-1.27)" d="m1-36c-19.63 0-36.04 16.39-36.04 36s16.41 36 36.04 36 98.75-9 113.12-10c14.38-1 26.03-11 26.03-26s-11.65-24-26.03-26c-14.37-2-93.49-10-113.12-10z" fill="${this.armColor}" stroke="${this.jointColor}" stroke-miterlimit="10" stroke-width="2"/> | ||
|
||
<!-- Elbow --> | ||
<g transform="translate(113) rotate(${this.elbowAngle})"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
extracting the different values from this
will probably make the code a bit tidies. i.e. at the start of the function:
const {elbowAngle, wristAngle, ...} = this;
Then you can use the variables directly, without repeating this. every time
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The more I modify SVG the harder it is to update the SVG if I want to add/remove stuff from it. When it become invalid SVG it is a lot harder to update
src/robot-arm-element.stories.ts
Outdated
|
||
export default { | ||
title: 'Robot Arm', | ||
component: 'wokwi-robot-arm', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How about wokwi-robotic-arm? Not being a native English speaker, I'm not sure if there's an actual difference, so I'd love to hear the thoughts of someone whose a native English speaker.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works for me
Also:
|
I guess I accidently delete this somewhere along the way. I will add it back in:
As for yellow, I figured a big heavy dangerous piece of equipment like this robotic arm should be yellow :) Actually I just randomly picked yellow. |
"range" type seems more convenient than "number" for the angles (at least for me)
haha :) google images show that it's either metallic or black combined with either blue, yellow, light gray, or orange (or sometimes just plain black). So I guess yellow isn't a bad choice. I thought either metallic or purple could be fun (it's the dominant color in Wokwi), though I've no strong opinion here. Yellow is good too. |
I was not quite sure how to apply the clamp function since this is an output device. |
Adds robot arm