Reverse mode with split ranges?

[sonicviz]

Hi.
I just came across your great library, thanks!
I'm still working through the demos, and can't see if I can easily do the following use case so thought I'd ask.

Describe the solution you'd like

I'd like to replicate the circular pitch tuner shown here: https://youtu.be/q-gXAIjM4VU?t=60 (starting at 60 seconds in)
Note: This was done in C# Unity

So if the note is on pitch it shows at "0", if it's over pitch to will move to the right from 0 to 50 (the bottom or 180), and if the note is under pitch it will move to the left from 0 to -50 (max 180).
If it goes past 50 (180 degrees) we've actually switched to another note so the tuner starts with that note, so you only need to account for 0 to 50 midi cents either way.

So you'd be feeding the component the key (to be set as legend) and the number of midi cents over/under pitch to display in the appropriate direction left or right.

Can you do that with your component as is?

Describe alternatives you've considered

Looking into simple CSS vector solutions.

[setaman]

Hi,
I'm glad that you find my library interesting and feel free to ask whenever something is not clear.

The lib currently has no reverse mode, so you can't achieve the desired behavior with only one prop. But you can certainly build that with my component.

I can at least suggest you the following solution:

• Show two half circles, that overlap each other and adjust rotations with angle:

<vue-ellipse-progress class="left" :half="true" :angle="" .../>
<vue-ellipse-progress :half="true" :angle="" .../>

• Flip first circle with one line CSS:

.left {
  position: abolute; // for overlapping
  transform: scaleX(-1);
}

Now you can control the two circles separately, as you wish. The left circle will be filled reverse, the right one normal. I have not tested the solution now, but this could be a starting point.

As you can see, I can achieve reverse mode with only one line of CSS code. Maybe I should add this to the features of this library, shouldn't be too much effort. Maybe I'll do it tonight too.

Let me know if I could help you!

[sonicviz]

Hi,
Thanks for the tips.

I ended up using https://quasar.dev/vue-components/circular-progress which has a reverse mode as well, so you should probably add it anyway. Someone might find it useful. I'll keep it in mind for future projects.

Thanks!