Rotate or Flip Controls?

Hey all,

I would like to be able to flip a slider control so that 0 is on the right and maximum value is on the left. I also want to create a vertical slider that increases in value as you go down. Sliders be default in the IDE go left to right and down to up. I want to reverse that. Is there a way to do this?

Yes, I can set the initial value to the maximum and handle the change in value appropriately in code. But then I have to deal with the blue “line” of the slider being shown for those controls and it’s inconsistent then with the other sliders on the page that operate in the “normal” fashion.

I wish Xojo had a way to flip or rotate controls in the IDE. Normally there’s no need to do this but this is a special case.


2 Things.

  1. In the macOS there is a rotate API for controls, I’ve never tried it myself. It may do what you want, but it may also not work in Xojo due to how they handle controls.

  2. I would suggest creating a subclass, that inverts the value on set or get.

Thanks, Sam. I figured there was an API but I’m writing XPlat so would need that for Windows and Linux too.

I have the inversion of the values fine. It’s the fact that the “inverted” controls show the blue line of the slider:


It looks goofy. I really don’t want to draw my own controls using a canvas, but sometimes that seems like what you have to do…

I see what you mean now. It can be done on the macOS, but you’re going to have to hack it for sure.

Do you need all for sliders, could this be more of a single in a grid that the user moves around?
Screen Shot 2021-11-22 at 8.45.00 AM

The controls are basically used to mimic/provide a user interface to a Joystick control mainly for controlling PTZ cameras. I envision that it’s likely that users will use the joystick as opposed to the controls on the screen. But each of those are programmed with a specific command. I was thinking of a control similar to what you show but didn’t feel like writing it. Do you have something developed?

I’d never heard the term Joystick control before, but I also don’t know what this control actually is called. Lol!

It wasn’t designed to be shared and was written using Core Graphics declares instead of native Xojo (so not x-plat, but fancy animations). It would probably be quicker for me to give you a couple of pointers instead.

  1. Use a rectangle inside the canvas that is the width - knobSize and height - knobSize, which is offset by knobSize * 0.5. This way the knob never goes out of bounds.

  2. Vertical and Horizontal values are calculated by dividing the knob center by the rect size, then used on a gradient.
    verticalValue = ( maxHeight * verticalAxis ) + ( minHeight * ( 1.0 - verticalAxis) )

  3. On mouseDown, store the offset from the pointer to the knob.

  4. On mouseDrag, apply the offset to the mouse pointer, this helps to avoid unwanted value changes, i.e. knob jumping around when clicking.

  5. Use a modifier key to lock to a certain axis, so if the user only wants to adjust horizontal values or vertical values they don’t have to maintain the unwanted axis.

  6. I made mine, so a double click resets values.

  7. The value labels are actually text fields, so if the user wants to, they can be more precise or copy the values from one document t’other.

Hope that this helps.

If there is enough demand, I can add a version to the Ohanaware App Kit, but it would take time.

Thanks. Let me take a look at that.

Joystick - looks like this:

1 Like

Here is another discussion about vertical sliders. They are easy to make using a canvas.

It’s not the vertical that’s the issue. It’s the fact that I want them to move right to left and up to down.

But I think I have the problem solved. Not sure why I didn’t think of this earlier. I already have a custom slider canvas of my own that I use elsewhere. I just need to make a few modifications and I should be good to go.

1 Like

Lol… I am familiar with a physical joystick, am a child of the 80s :wink:
I just never related or connected it to that kind of virtual UI control, that I built. In fact I never gave it a name, other than “White Balance” control.

I do that in some of my programs.

In ValueChange, do something like

MyValue = me.MaximumValue-Value

You can even create a subclass.

Yes, I know that and I did that. But if you look at my image you will see how the blue highlights of the slider indicator are showing for the controls that are “flipped.” So while mathematically and programmatically it works fine, the UI looks bad.

Hi Jon,

I fiddled with this a bit yesterday. Look at the rSlider control, a subclass of slider. I think it’s doing what you’re asking for.

Forum for Xojo Programming Language and IDE. Copyright © 2021 Xojo, Inc.