View locations changing and adding them

resserone13

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