Circular Slider in perspective

Ignition Early Access
1

Hi
Is there any plan to add circular slider in perspective component?

https://roundsliderui.com/demos.html

2

I use the gauge component and bind the value to the outer axis range 1. Get rid of the ticks and make everything you don’t need transparent.

3

Hi Thomas
but I need some kind of handle so user can drag it and change value. The gauge component doesn’t design to be slider.

4

You need to write a client script to write to ignition tag as an input component. It could be tricky!

5

I found THIS on the internet and tried to convert it to Ignition canvas.
This is what I came up with: sliderKnob_2019-06-30_1058_partial.proj (16.7 KB)
(it’s only one window which you import into your project: right click on folder ‘Main Windows’ inside Project Browser and Import… it’s made in V7.9.10)
I know it’s not what you want, but it’s a start… :wink:
Now that I understand (I think that I do) how this works, I’ll try to modify CircularGauge…

1 Like
6

This project is for which version of ignition? 8 or less?

7

it’s made in V7.9.10

8

Great Job. It’s what I search for years. Please kindly just put the code on top of your circulargauge.proj without animation effect.
It’ll be create if you add following custom parameters to template:

  • Parameters to adjust circular wide and knob size separately
  • Parameters to adjust color of knob & circular path
  • Parameters to adjust min, max and incremental step value
  • Parameters to set weather or not possible to return back to zero when pass 100%
  • Parameters to set weather or not show current setpoint value text in center of component.
  • Parameters to select font of value & unit text

Thanks again.

9

it also works in 8.0.3

11

If you resize the circle and run, it truncates the circle!

12

Here it is: sliderKnob_2019-07-01_0620_partial.proj (38.5 KB)

There are no knob size, step, font and back to zero settings because I don’t know how to implement them…:slightly_frowning_face:
I’ve search the internet but my trigonometric knowledge is not very strong.
I would be very glad if someone with more knowledge/experience in canvas jumps in to help. :pleading_face:

Edir: I uploaded wrong file… here is the right one…

1 Like
13

I will try to add them. but how can I scale it? Now when I scale canvas, the result doesn’t scale accordingly.
By the way you didn’t include the GaugeCanvasArcDonutAnimated. Did you do the modification on it?

14

I uploaded new file…

1 Like
15

How did you able to fix scaling problem of the canvas?
Could you please make modification so knob doesn’t pass from starting/ending point. I mean when knob reach 360 deg, if user move it to the right it doesn’t jump to 0 and vice versa.

16

OK, after 4 days I have enough… :disappointed_relieved:
It seems that (at least for me) this seems to be more difficult than I thought.
Making a circular slider is way more different/difficult than making a circular gauge.
I’m pretty sure that my lack of knowledge is what’s causing me problems (I also think that overall approach to this is wrong), but that’s it.
Here is what I came up with: CircularSlider_2019-07-03_0941.proj (322.7 KB)

Feel free to use, experiment with and in case someone makes it usable, please share back the file. With explanation.

1 Like