Forum Archive

Hi there,

I just picked up pythonista today and after installing pipista and stash, I setup pyOSC to try some Open Sound Control messaging, which works really well. I would really like to try tying a number of those UI controls already in pythonista to this OSC implementation, so that it resembles the likes of apps Lemur and TouchOSC. My first question surrounding that is, is there an easy way to modify the UI controls so that they appear vertically? I.e, there is a horizontal slider already in the UI components, and I would like to copy it and modify it so I have a vertical slider as well. If anyone has suggestions on how I might go about doing that, I would appreciate it greatly.

Cheers

So I looked into it more and the easiest way I can figure this out at the moment is to use a line like:

import ui, math

v = ui.load_view('blahblah')

v['sliderName'].transform = ui.Transform.rotation(math.radians(90))

However, it will naturally need to be more complex than that, due to the rotational center of the transformation, and it lacks the ability to be able to visually lay out the widget. So to adjust my question, is there a way to alter the rotation of widgets/create custom widgets so that I can see it, with the rotation already applied in the UI editor?

Thanks

https://github.com/jsbain/uicomponents/blob/master/VerticalSlider.py

Basically, place the rotated component inside another view. Although frame is a bit funky after rotation, x,y,width,height behave the way you might expect for layout... Just set x and y to 0 after rotation, and then you can use the containing view for higher level layout.

The above solution uses a custom layout method, since flex doesn't seem to behave properly for rotated views. So, after instantiation, you can just operate on the VerticalSlider like it is a normal View in terms of layout. Also, I telegraph various Slider attributes, so that when you interact with VerticalSlider, you don't need to know that it contains a rotated Slider, but can get the value, etc directly from VerticalSlider.

When using the ui editor, you can insert a Custom View, and set the Custom View Class attribute to VerticalSlider ... Just make sure you import VerticalSlider as VerticalSlider before calling load_view. The ui editor shows it as a plain rectangle, but it works fine when you run it.

Thank you very much for the super helpful reply and code, I really appreciate it! The other ui components you've written look equally as useful too.