View locations changing and adding them

resserone13

I’m using the ui module to make a button but I can seem to figure out how the coordinates work. I changed the values but usually the button doesn’t move or it moves dramatically. I’ve been re reading the docs over and over. Any other constructive criticism I welcome. I’m sure I’m not doing it exactly correct Thanks.

import ui

#Main view
add_room_view = ui.View()
add_room_view.flex = 'LRTB'
add_room_view.background_color = '#3345ff'


#Button
add_room_button = ui.Button()
add_room_button.title='SUBMIT'
add_room_button.action
add_room_button.flex = 'WHTR'
add_room_button.background_color = '#f2f2f2'
add_room_button.border_width = .5
add_room_button.border_color = 'red'
add_room_button.x = -20
add_room_button.y = -200
add_room_button.width = 100
add_room_button.height = 50
add_room_button.center = (10, 200)
#Subviews
add_room_view.add_subview(add_room_button)

#Present view
add_room_view.present('sheet', hide_title_bar=True)

Robert_Tompkins

Hey, here is how I defined my button in one of my programs.
The button placement when presented is centered near the bottom of the screen.
It looks like I set many other button attributes as well.
stormView is essentially my MainView.

Here is where I setup my view: (I loaded a pyui, but it is essentially blank anyway, I’m weird)

stormView = ui.load_view("Storm_Arcade")
stormView.background_color = 'black'
stormView.bounds = (0, 0, 350, 750)
stormView.autoresizing = "LR"

Here is the button:

stopSelectorButton = ui.Button()
stopSelectorButton.flex = "WB"
stopSelectorButton.name = "stopSelectorButton"
stopSelectorButton.action = buttonTapped
stopSelectorButton.title = "BEGIN"
stopSelectorButton.height = 100
stopSelectorButton.width = 50
stopSelectorButton.border_width = 10
stopSelectorButton.x = (stormView.center[0] - (stopSelectorButton.width * 0.5))
stopSelectorButton.y = (stormView.height - (-50 + stopSelectorButton.height))
#stopSelectorButton.center = (stormView.center[0] + (stopSelectorButton.width * 0.5), stormView.height * 0.9)
stopSelectorButton.corner_radius = (stopSelectorButton.height / 2)
#stopSelectorButton.x = (stormView.center[0])
#stopSelectorButton.y = stormView.height * 0.95
stopSelectorButton.background_color = "white"
stopSelectorButton.bg_color = "white"
stopSelectorButton.text_color = "red"
stopSelectorButton.font = ("UbuntuMono-Bold", 15)
stopSelectorButton.alignment = 1
stopSelectorButton.enabled = True
<bunch of unrelated code>
stormView.add_subview(stopSelectorButton)

Robert_Tompkins

As far as I know, the ‘.center’ parameter defines the center x and center y coordinates of the object.
If you define the center (like you are) then this will override your earlier code where you define the location of the button via .x and .y parameters. So be sure to remove/comment out one or the other.

Robert_Tompkins

You can toss this in to print your screen size for reference:

viewWidthHeight = ui.get_screen_size()
print(f'Your screen size: \nWidth: {viewWidthHeight[0]}\nHeight: {viewWidthHeight[1]}')

mikael

@resserone13, can you describe where you want the button to be on the screen? The code is a bit confusing.

Good thing to note is that the main view, before present, is sized at 100 x 100. With present, it ”explodes” to screen size. Any subviews with flex attributes set will move and resize with the main view.

So if you want the button to be 20 points from the bottom of the main view, 40 points high and 20 points margin to the sides of the main view:

button.frame = (20, 40, 60, 40)
button.flex = 'TW'

I.e. first placed right in the 100x100 view, top and width can change, height not mentioned so will stay fixed at 40 points.

Robert_Tompkins

Last but not least, here is code that will center your button regardless of button size.

import ui

#Main view
add_room_view = ui.View()
viewWidthHeight = ui.get_screen_size()
print(f'Your screen size: \nWidth: {viewWidthHeight[0]}\nHeight: {viewWidthHeight[1]}')
viewWidth = viewWidthHeight[0]
viewHeight = viewWidthHeight[1]
add_room_view.width = viewWidth
add_room_view.height = viewHeight
add_room_view.background_color = '#3345ff'

#Button
add_room_button = ui.Button()
add_room_button.title='SUBMIT'
add_room_button.action
add_room_button.flex = ''
add_room_button.background_color = '#f2f2f2'
add_room_button.border_width = .5
add_room_button.border_color = 'red'
add_room_button.width = 333
add_room_button.height = 111
add_room_button.center = ( (add_room_view.width / 2), (add_room_view.height / 2) )

#Subviews
add_room_view.add_subview(add_room_button)

#Present view
add_room_view.present('sheet', hide_title_bar=True)

I doubt you want your button centered, but this gives you a starting point haha. Good luck!

mikael

@Robert_Tompkins, note that the main value of the flex attribute is that it will ”keep flexing”, i.e. things are where you want even if you rotate the screen, whereas with your code not. The ”standard” way of putting something to the center of the parent view, and keeping it there, is:

button.center = parent_view.bounds.center()
button.flex = 'TRBL'

Robert_Tompkins

Of course it’s that easy -.-
You should make a list of “standard” ways of doing things haha.
That would save me and I’m sure many others hours of time!
Thanks again.

mikael

@Robert_Tompkins, if you need or prefer to place views with precise calculations, you can do so, but your parent view should then be inherited for ui.View, and the placement code inside its layout method, which gets called any time the view’s bounds change, e.g. on rotation.

resserone13

@Robert_Tompkins can you explain to me what’s going on here. I figure you account for something by subtracting and multiplying. Also what is the center[0] doing?

stopSelectorButton.x = (stormView.center[0] - (stopSelectorButton.width * 0.5))

And here.
add_room_button.center = ( (add_room_view.width / 2), (add_room_view.height / 2) )

resserone13

@Robert_Tompkins said:

You can toss this in to print your screen size for reference:
viewWidthHeight = ui.get_screen_size()
print(f'Your screen size: \nWidth: {viewWidthHeight[0]}\nHeight: {viewWidthHeight[1]}') 

This is nice! Thanks. Would this be used to check the screen size for every person who downloaded the app?That way the app knows what size type of screen they are working with.

resserone13

I messed with a few things after a few drinks and it was these that needed a fine tuning.

add_room_button.x = 20
add_room_button.y = 10
add_room_button.width = 75
add_room_button.height = 1

Has the Button nice and centered towards the bottom.

INSTEAD OF.....

add_room_button.x = -20
add_room_button.y = -200
add_room_button.width = 100
add_room_button.height = 50

I have been messing around with the x and Y more than the width and height

Should have mentioned before I’m using an iPhone 11 and making an app for the iPhone

import ui

#Main view
add_room_view = ui.View()
add_room_view.flex = 'LRTB'
add_room_view.background_color = '#3345ff'

#Button
add_room_button = ui.Button()
add_room_button.title='SUBMIT'
#add_room_button.action
add_room_button.flex = 'WHTR'
add_room_button.background_color = '#f2f2f2'
add_room_button.border_width = .5
add_room_button.border_color = 'red'
add_room_button.x = 20
add_room_button.y = 10

add_room_button.width = 75
add_room_button.height = 1

#Subviews
add_room_view.add_subview(add_room_button)

#Present view
add_room_view.present('sheet', hide_title_bar=True)

resserone13

Thank you for all the responses. I’m still reviewing all the code to learn more. I am brand new at this and still just going off of YouTube and the documentation. I have no previous experience with coding.

Robert_Tompkins

Ahh, sorry for making you wait so long! Totally been ignoring my notifications lately. Let me go back and see if I can answer your questions!

Robert_Tompkins

@resserone13 said:

@Robert_Tompkins can you explain to me what’s going on here. I figure you account for something by subtracting and multiplying. Also what is the center[0] doing?

stopSelectorButton.x = (stormView.center[0] - (stopSelectorButton.width * 0.5))

And here.
add_room_button.center = ( (add_room_view.width / 2), (add_room_view.height / 2) )

Alright, so first things first..
stopSelectorButton is essentially an object that will be placed on screen.
We need to describe what it looks like, and where it will be.

The size consists of a width and a height (in pixels?)
So size can be defined as ( (object.width = 100), (object.height = 50) )

To answer your questions:
stopSelectorButton.x = (stormView.center[0] - (stopSelectorButton.width * 0.5))
Here we are defining where to place the LEFT side of the button.

The StormView.center parameter contains an x and a y coordinate describing where it’s center point is located.
Printing it produces something like this: (100.00, 200.00).
This is a list of 2 items:
’index 0’ or ‘[0]’ contains 100.00 This is the x coordinate of its center
‘Index 1’ or ‘[1]’ contains 200.00 This is the y coordinate of its center

So by saying: stormView.center[0], we are specifying The value of its x coordinate center point, 100.00
If we place the button’s left side at: stormView.center[0]
Our button would start at the center of stormView, but would extend 100 pixels to the right since the button is 100 pixels wide.

To make up for this, I took half of the button’s width: stopSelectorButton.width * 0.5
And subtracted that from the center of the view’s x coordinate to shift it left by half of its width.

The easier way is the second one you pointed out.
By placing the button using its center coordinate, we could place it in the center of the view like this:

add_room_button.center = ( (add_room_view.width / 2), (add_room_view.height / 2) )
or
add_room_button.center = ( (add_room_view.center[0]), (add_room_view.center[1]) )
or
add_room_button.center = add_room_view.center

Since our button’s center parameter must be a set of 2 values: x and y coordinates any should do the trick.

Long story short, I am accounting for the width and height of the button, which is only necessary if you are placing it using its x and y corner coordinates (top left).
Because the button will extend Right past the x coordinate by its width, and Down past its y coordinate by its height.

Robert_Tompkins

Oh and also, define your width and height parameters BEFORE you define its location.
This way it can take the width and height into consideration when calculating where the center should be.

resserone13

@Robert_Tompkins Thanks again for the response and explaining everything. I see how you’re using Half of the width to offset the center. And how you’re using the width and height divided in half as the x and Y coordinates. I like how you knew the center was actually a tuple and you used the index to point to the actual value at that index. Thanks for the help

Robert_Tompkins

Exactly, they are tuples.
Most of my learning comes from

Print(f’Some identifier name: {variableImCuriousAbout}’)

That and adding a break point in areas just to browse local variables and their contents/types. Same with globals, but either way. Printing and just being curious helps a ton.

I’m not great with SW, definitely more knowledgeable in the EE/circuit analysis region, but I am learning just like you. @mikael has been a great help so far and so has @JonB so keep an eye out for their posts!

mikael

@resserone13, @Robert_Tompkins, hope you have noticed that when you have selected any relevant code, on the ”second page” of the little pop-up menu there is the Help option which will take you directly to relevant help.

For example, if you highlight center, one of the top hits is ui.View.center, which gives you this:

View.center
The center of the view’s frame as a 2-tuple (x, y).

Overall the Pythonista in-app help is a great resource.

Robert_Tompkins

-.-
Now I feel pretty dumb haha. I did not expect the ‘help’ to be that useful, so never selected it.
That will help out a ton! Thanks for mentioning that @mikael