Skip to content

Robot Arm Element - Adds robot arm to storyboard. - #119

Open
yepher wants to merge 2 commits into
wokwi:mainfrom
yepher:feature/robot_arm_element
Open

Robot Arm Element - Adds robot arm to storyboard.#119
yepher wants to merge 2 commits into
wokwi:mainfrom
yepher:feature/robot_arm_element

Conversation

@yepher

@yepher yepher commented Jan 14, 2022

Copy link
Copy Markdown
Contributor

Adds robot arm

@yepher

yepher commented Jan 14, 2022

Copy link
Copy Markdown
Contributor Author

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?

@urish urish left a comment

Copy link
Copy Markdown
Collaborator

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?

Comment thread src/robot-arm-element.ts Outdated
];

render() {
/* eslint-disable prettier/prettier */

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

why?

Copy link
Copy Markdown
Contributor Author

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.

Copy link
Copy Markdown
Collaborator

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?

Comment thread src/robot-arm-element.ts Outdated
*/
@property() jointColor = '#111111';

readonly pinInfo: ElementPin[] = [

Copy link
Copy Markdown
Collaborator

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)

Copy link
Copy Markdown
Contributor Author

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.

Comment thread 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})">

Copy link
Copy Markdown
Collaborator

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

Copy link
Copy Markdown
Contributor Author

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

Comment thread src/robot-arm-element.stories.ts Outdated

export default {
title: 'Robot Arm',
component: 'wokwi-robot-arm',

Copy link
Copy Markdown
Collaborator

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.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Works for me

@urish

urish commented Jan 14, 2022

Copy link
Copy Markdown
Collaborator

Also:

  1. Let's use a slider for the angle controls and a color picker for the colors in storybook?
    See the wokwi-rgb-led story for an example for both

  2. Is there a reason you went with yellow as the default color for the robotic arm?

@yepher

yepher commented Jan 14, 2022

Copy link
Copy Markdown
Contributor Author

I guess I accidently delete this somewhere along the way. I will add it back in:


argTypes: {
    sholderAngle: { control: { type: 'number', min: 260, max: 360, step: 1 } },
    elbowAngle: { control: { type: 'number', min: 0, max: 135, step: 1 } },
    wristAngle: { control: { type: 'number', min: 0, max: 120, step: 1 } },
    gripperAngle: { control: { type: 'number', min: 270, max: 360, step: 1 } },
    gripperColor: { control: { type: 'color' } },
    armColor: { control: { type: 'color' } },
    jointColor: { control: { type: 'color' } },
  },
  args: {
    sholderAngle: 270,
    elbowAngle: 82,
    wristAngle: 80,
    gripperAngle: 270,
  },

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.

@urish

urish commented Jan 14, 2022

Copy link
Copy Markdown
Collaborator

I guess I accidently delete this somewhere along the way. I will add it back in:

"range" type seems more convenient than "number" for the angles (at least for me)

As for yellow, I figured a big heavy dangerous piece of equipment like this robotic arm should be yellow :)

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.

@yepher

yepher commented Feb 6, 2022

Copy link
Copy Markdown
Contributor Author

I was not quite sure how to apply the clamp function since this is an output device.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants