Slide Potentiometer #63

Spinkelben · 2021-04-19T18:40:23Z

feat: Slide potentiometer #56

Work in progress, but submitting PR early to get feedback.

feat: Slide potentiometer

Spinkelben · 2021-04-19T18:42:58Z

Graphics is modelled after this spec sheet PTA Series - Low Profile Slide Potentiometer
and the tips are of this style
https://www.aliexpress.com/i/32845972841.html

urish · 2021-04-19T19:02:34Z

Thanks! Preview link: https://deploy-preview-63--wokwi-elements.netlify.app/?path=/story/slide-potentiometer--default

urish · 2021-04-19T20:53:03Z

Great start!

Where would the 3 pins be located?

For the tip, you could use a single rect with a gradient (I think that'd also look a bit better).

Also, I think the body could use a gradient to give it more metallic look

Spinkelben · 2021-04-20T15:44:57Z

Pins: On a real slide potentiometer they are underneath. I am not sure how to deal with that. They are close to the ends, so maybe take some artistic license and add pins that stick out from the ends.

For the tip, I am not entirely sure what you mean. I was struggling a lot with the gradients. I think it is hard to make it look right.

urish · 2021-04-20T16:39:09Z

Sticking them out from the ends sounds like a good solution. How do you create the gradients?

…

On Tue, Apr 20, 2021 at 6:45 PM Søren Ranneries ***@***.***> wrote: Pins: On a real slide potentiometer they are underneath. I am not sure how to deal with that. They are close to the ends, so maybe take some artistic license and add pins that stick out from the ends. For the tip, I am not entirely sure what you mean. I was struggling a lot with the gradients. I think it is hard to make it look right. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#63 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGZ3HRVYGGBSH3IFATO47DTJWORPANCNFSM43GNNMIA> .

Spinkelben · 2021-04-20T17:28:53Z

I'm using inkscape, but I just don't think it is that easy to use. Also I am not that experienced with drawing/graphical design so I am also not sure how to apply a gradient to make it look better. Never the less I will push a new version soon.

urish · 2021-04-20T17:32:03Z

Yes, inkscape is not very straight forward when it comes to gradient editing.

What I usually do, I place the original photo behind (or on top / below) the shape, and then I tinker with the gradient until I get a look that resembles the original.

If you need, I can make a short video that shows how I do this

urish · 2021-04-23T19:54:49Z

Good to see this slowly coming to life and taking form :)

Please let me know when you feel ready for me to go over the code and share my feedback

Works as 100 % zoom, but is messed up at other scales...

urish · 2021-04-29T20:34:57Z

Note: for adding the keyboard interaction, you can probably use a <input type="range" /> and let that take care of the focus, similar to how it's done in the standard potentiometer element. This also means that the element will be accessible for screen readers.

Spinkelben · 2021-04-30T14:15:02Z

I think this is close enough to done to be reviewed.

Issues:

No highlighting on the tip, when the element is focused
Weird issue when switching from mouse to keyboard and back.

Steps to reproduce the switching issue:

Use mouse to move the slider
Use keyboard to move the slider
Use mouse to move the slider
Use keyboard to move the slide

When doing step 4, the slide jumps to the last position it had after doing step 2. It is like the input element and the SVG looses synchronization when using the keyboard.

urish · 2021-05-03T20:55:49Z

Thank you!

No highlighting on the tip, when the element is focused

Seems like it could be solved using some CSS, something like:

input:focus + 
svg #tip {
   /* some style to add when the element has focus */
}

Probably some kind of bluish outline will fit.

As far as the switching issue, I don't think it's a show stopper. Sounds like an edge case we can live with.

I'm going to try and integrate your WiP into wokwi.com to see if there are any issues I can spot.

urish · 2021-05-03T21:16:07Z

Alright, you can see it in action here:

https://wokwi.com/arduino/projects/297604176384360973

Feedback I gathered so far:

Can you add a pinInfo array with the location of the pins? example here, and also a nice trick how to quickly check test whether the pin positions are correct
I suggest changing minValue / maxValue to min/max, to stay consistent with the potentiometer, as well as the HTML input element.
I suggest making step configurable too for the same reason (it's not used by Wokwi though).
This one seems tough, but it seems like rotating the part makes it unusable. I saw it in this example on Wokwi. If you want to discuss it and brainstorm a solution together, I'd love to. ping me here on on discord.

matititam · 2021-05-04T12:56:10Z

Updating UX feedback

the cursor seems to fail to follow the mouse if the speed of the mouse is faster than the slide speed. Slide won't follow if the mouse pointer is outside the slider area

Spinkelben · 2021-05-04T19:40:39Z

Thanks for the feedback!

I have added a pinmap attribute now, plus some highlight when the element is focused.
I have also improved mouse handling slightly. Slide still wont follow the mouse if it leaves the element completely. I am not sure how to deal with that, is it common practice to attach listener to the window such that the element will continue to receive mouse move events after the cursor leaves the element?

For the pins, how does the signal property work? In a real slide potentiometer the top left pin and the right pin is connected to each end of the resistor. The lower left pin is connected to the gang (tip).

For handling rotation I can imagine several approaches.

Rotate coordinates back to initial position (only in code), then do calculations
Vector math. A vector representing one end of the potentiometer. The direction of the vectors is perpendicular to the direction of the slide. Use some distance from a point to the line vector math to get the position of the tip.

urish · 2021-05-04T21:03:35Z

Thanks!

For the pins, how does the signal property work? In a real slide potentiometer the top left pin and the right pin is connected to each end of the resistor. The lower left pin is connected to the gang (tip).

You can set the lower left pin (the one that is connected to the tip) to analog(0), and then one of the other pins to { type: 'power', signal: 'GND' } and the other one to { type: 'power', signal: 'VCC' }.

This is a bit arbitrary, but the simulator uses the singals property of pinInfo to give you hints where to connect the wires.

That's what I did with the standard potentiometer. Also called the pins VCC, SIG and GND:

  readonly pinInfo: ElementPin[] = [
    { name: 'GND', x: 29, y: 68.5, number: 1, signals: [{ type: 'power', signal: 'GND' }] },
    { name: 'SIG', x: 37, y: 68.5, number: 2, signals: [analog(0)] },
    { name: 'VCC', x: 44.75, y: 68.5, number: 3, signals: [{ type: 'power', signal: 'VCC' }] },
  ];

I figured out that while in the general sense GND and VCC are not the correct names (names like END1/END2 or FIXED1/FIXED2 are probably more accurate), these names will make more sense for beginners, and they are very common in tutorial (if you google for "potentiometer pinout" you'll see many images calling these pins GND/Ground and VCC/5V).

Thoughts?

I am not sure how to deal with that, is it common practice to attach listener to the window such that the element will continue to receive mouse move events after the cursor leaves the element?

It sounds like one possible solution. How about the "drag" event for the tip? Would that work?

For handling rotation I can imagine several approaches.

Perhaps you can take advantage of the SVG transform matrix to do that for you?
Here's a pointer that may help: https://stackoverflow.com/a/48346417/830623

Spinkelben · 2021-05-05T07:22:12Z

For the pin modes, I don't mind calling them vcc and ground if that is easier for beginners to comprehend. I will add that soon.

It sounds like one possible solution. How about the "drag" event for the tip? Would that work?

I tried that. Adding draggable="true" to the tip, didn't result in any drag events happening. I think it only applies to html elements. I tried wrapping the whole thing in a div and make that draggable as well. The events did trigger, but then you are moving the whole element. I couldn't figure out how to disable that and still get the events. There's a bunch of libraries for making svg elements draggable, I might take a look at them for inspiration.

Perhaps you can take advantage of the SVG transform matrix to do that for you?
I'll take a look :)

urish · 2021-05-05T21:34:53Z

For the pin modes, I don't mind calling them vcc and ground if that is easier for beginners to comprehend. I will add that soon.

Thanks!

I tried that. Adding draggable="true" to the tip, didn't result in any drag events happening. I think it only applies to html elements. I tried wrapping the whole thing in a div and make that draggable as well. The events did trigger, but then you are moving the whole element. I couldn't figure out how to disable that and still get the events. There's a bunch of libraries for making svg elements draggable, I might take a look at them for inspiration.

That makes sense. So I guess adding a global listener is that way to go.

urish · 2021-05-16T18:16:15Z

Thanks Søren!

I updated the preview on wokwi.com with the new code, and now the mouse feels much smoother. I think it's perfect!

Other than the rotation issue, is there anything else left to fix?

Also, I see the the pin positions are a bit off:

Spinkelben · 2021-05-18T06:52:26Z

The rotation issue is the last hurdle.

I don't know what happened to the pin positions, but it shouldn't be too hard to fix :)

urish · 2021-05-18T10:25:37Z

The rotation issue is the last hurdle.

Anything I can do to help with this?

I don't know what happened to the pin positions, but it shouldn't be too hard to fix :)

I added a new wokwi-show-pins utility that makes it easy to visualize the pins in your story, you can see more info in the contributing guide.

Spinkelben · 2021-05-20T16:47:56Z

The rotation issue is the last hurdle.

Anything I can do to help with this?

I was playing around with it yesterday, but hit the hurdle that getClientRect returns dimensions of bounding box. I was hoping it would give me exact coordinates of corners of the element instead.

urish · 2021-05-20T16:59:31Z

I was playing around with it yesterday, but hit the hurdle that getClientRect returns dimensions of bounding box. I was hoping it would give me exact coordinates of corners of the element instead.

I see you are using getBoundingClientRect() for the left / width of #sliderCase. You can probably obtain those by querying the element directly. For SVG elements, getting the width is a bit more complex: element.width.baseVal.value.

A different approach would be to use the width value you already have in your code (width="45"), and just move it into a JavaScript constant that you can then use in both places.

Or maybe I'm just speaking nonsense?

I found the right API for the job. I use a transformation matrix to convert a point in page space to a point in the #caseRect space. Simple to implement and should handle all kinds of transformations you could think of applying, except for the zoom.

Spinkelben · 2021-05-23T14:38:49Z

I fixed the rotation issue. Thank you for the suggestion of using the SVGElement class. There I found the method getScreenCTM. It does the opposite of what I needed: returns a transformation matrix that converts coordinates from the element coordinate space to screen coordinate space. I needed it to do the "opposite", fortunately by inverting the matrix the result is a matrix that does the reverse operation. From there it was simple enough. So thanks for the tip :)

urish

Thanks! I just tried the latest version on Wokwi, with 42° rotation, and it works like a charm! Well done!

https://wokwi.com/arduino/projects/299391106457534985

Left some comments, and we also need to fix pinInfo (should be quite easy now - basically, wrap the slide potentiometer with a <wokwi-show-pins> in one of the stories, and it should do the trick).

Also, can you please rebase on top of master to fix the merge conflicts in index.ts / react-types.ts?

src/slide-potentiometer-element.ts

src/slide-potentiometer-element.stories.ts

src/slide-potentiometer-element.ts

… spinkelben/slide-potentiometer

src/slide-potentiometer-element.stories.ts

src/slide-potentiometer-element.ts

Spinkelben · 2021-05-23T16:33:57Z

I have address all your comments. Feel free to re-open if you think I didn't resolve it completely.

Also, can you please rebase on top of master to fix the merge conflicts in index.ts / react-types.ts?

I just merged the changes from master into the branch. Do you want be to do a rebase instead? I am not sure how PRs are completed with GitHub. If I were in control I would do a squash merge. That's what I am used to from Azure DevOps, but I don't know if GitHub has a similar feature.

urish · 2021-05-23T17:28:59Z

I have address all your comments. Feel free to re-open if you think I didn't resolve it completely.

Thank you! I'm at a friend's wedding, but will have a look when I get home.

Also, can you please rebase on top of master to fix the merge conflicts in index.ts / react-types.ts?

I just merged the changes from master into the branch. Do you want be to do a rebase instead? I am not sure how PRs are completed with GitHub. If I were in control I would do a squash merge. That's what I am used to from Azure DevOps, but I don't know if GitHub has a similar feature.

That's okay, I'm going to squash merge

Spinkelben · 2021-05-23T20:33:24Z

Thank you! I'm at a friend's wedding, but will have a look when I get home.

No rush, it took a month to get this far, a few more days doesn't make a huge difference 😉. Enjoy the wedding! 🎉

urish · 2021-05-23T21:02:40Z

True, I'm just excited about it ;-)

…

On Sun, May 23, 2021, 11:33 PM Søren Ranneries ***@***.***> wrote: Thank you! I'm at a friend's wedding, but will have a look when I get home. No rush, it took a month to get this far, a few more days doesn't make a huge difference 😉 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#63 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGZ3HW2BLECJ3LFPU5ULJLTPFRCDANCNFSM43GNNMIA> .

urish

Final round of changes :-)

urish · 2021-05-23T22:31:17Z

src/slide-potentiometer-element.stories.ts

@@ -0,0 +1,20 @@
+import { html } from 'lit-html';
+import { action } from '@storybook/addon-actions';


unused import? or did you want to attach an action to the potentiometer input event?

I never became good friends with storybook, what would be the advantage of adding the action on input event? :)

It means that when you move the potentiometer, you'll see the events firing in the "Actions" tab:

pot-actions.mp4

I see. Still not 100 % what you get from that, but it is quick to wire up, so I have done it.

Thank you!

It's just a quick way to test that the component emits the events correctly. There's an issue where it doesn't show the detail value of the events, otherwise this would also show users the information contained in events.

src/slide-potentiometer-element.ts

urish · 2021-05-24T11:22:11Z

Alright, I released this as wokwi-element 0.37.0, and it's now also available on Wokwi:

https://wokwi.com/arduino/projects/297604176384360973

and docs: https://docs.wokwi.com/parts/wokwi-slide-potentiometer

Initial commit and art

ea1b98a

feat: Slide potentiometer

Spinkelben added 4 commits April 20, 2021 19:35

Improved visual design. Cleaned up svg

d9d7217

Add pins to svg

163d187

Add some interaction

ae294b9

Move tip based on value property

71792bc

WIP on moving tip with mouse

8337474

Works as 100 % zoom, but is messed up at other scales...

urish linked an issue Apr 27, 2021 that may be closed by this pull request

Add a Slide Potentiometer #56

Closed

Implement touch and keyboard actions

5d55f55

Spinkelben added 3 commits May 4, 2021 20:06

Add pins and highlight

8757130

Improved mouse handling

2953368

Fix pin numbers

1a109d7

Spinkelben added 2 commits May 16, 2021 12:28

Add mouse handling outside element

7a52041

Change pin names

e501d39

Spinkelben added 2 commits May 16, 2021 12:37

Remove commented out code

e97d70f

Remove events with no purpose

6c32435

urish added the enhancement New feature or request label May 23, 2021

urish requested changes May 23, 2021

View reviewed changes

src/slide-potentiometer-element.ts Outdated Show resolved Hide resolved

src/slide-potentiometer-element.stories.ts Outdated Show resolved Hide resolved

src/slide-potentiometer-element.ts Outdated Show resolved Hide resolved

Merge branch 'master' of https://github.com/wokwi/wokwi-elements into…

a612951

… spinkelben/slide-potentiometer

urish mentioned this pull request May 23, 2021

wokwi-potentiometer usability issues when rotated #70

Closed

Spinkelben added 2 commits May 23, 2021 17:03

Fix pin coordinates

727da9d

PR Comments: Remove extra properties, add portrait story

4a1ce69

urish reviewed May 23, 2021

View reviewed changes

src/slide-potentiometer-element.stories.ts Outdated Show resolved Hide resolved

urish reviewed May 23, 2021

View reviewed changes

src/slide-potentiometer-element.ts Outdated Show resolved Hide resolved

Spinkelben added 3 commits May 23, 2021 17:50

Attempt at story where you can change the minValue and maxValue

37e730a

Make the rotation rotated story configurable

4646419

Changed range and step

8e026c2

urish requested changes May 23, 2021

View reviewed changes

Spinkelben added 3 commits May 24, 2021 09:56

Clamp function, PR comments

0079a50

Use clamp module in potentiometer element

526d323

Hookup the input events in the actions tab

d97990b

urish merged commit 83ed853 into wokwi:master May 24, 2021

		@@ -0,0 +1,20 @@
		import { html } from 'lit-html';
		import { action } from '@storybook/addon-actions';

Slide Potentiometer #63

Slide Potentiometer #63

Uh oh!

Conversation

Spinkelben commented Apr 19, 2021

Uh oh!

Spinkelben commented Apr 19, 2021

Uh oh!

urish commented Apr 19, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

urish commented Apr 19, 2021

Uh oh!

Spinkelben commented Apr 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

urish commented Apr 20, 2021 via email

Uh oh!

Spinkelben commented Apr 20, 2021

Uh oh!

urish commented Apr 20, 2021

Uh oh!

urish commented Apr 23, 2021

Uh oh!

urish commented Apr 29, 2021

Uh oh!

Spinkelben commented Apr 30, 2021

Uh oh!

urish commented May 3, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

urish commented May 3, 2021

Uh oh!

matititam commented May 4, 2021

Uh oh!

Spinkelben commented May 4, 2021

Uh oh!

urish commented May 4, 2021

Uh oh!

Spinkelben commented May 5, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

urish commented May 5, 2021

Uh oh!

urish commented May 16, 2021

Uh oh!

Spinkelben commented May 18, 2021

Uh oh!

urish commented May 18, 2021

Uh oh!

Spinkelben commented May 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

urish commented May 20, 2021

Uh oh!

Spinkelben commented May 23, 2021

Uh oh!

urish left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Spinkelben commented May 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

urish commented May 23, 2021

Uh oh!

Spinkelben commented May 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

urish commented May 23, 2021 via email

Uh oh!

urish left a comment

Choose a reason for hiding this comment

Uh oh!

urish May 23, 2021

urish commented Apr 19, 2021 •

edited

Loading

Spinkelben commented Apr 20, 2021 •

edited

Loading

urish commented May 3, 2021 •

edited

Loading

Spinkelben commented May 5, 2021 •

edited

Loading

Spinkelben commented May 20, 2021 •

edited

Loading

urish left a comment •

edited

Loading

Spinkelben commented May 23, 2021 •

edited

Loading

Spinkelben commented May 23, 2021 •

edited

Loading