Simple UI tutorial?
Is there a tutorial for the ui, like how to create labels and how to determinate their position and so on. Found many examples and programs for the ui but I would like something very simple to start with since im very new at this.
I would like to write the code and not use the ui designer if possible
Have you looked at the ui docs in the app? The intro section has a simple tutorial and detailed explanation , which is good to understand before going any further.
There is this repo, which has several tutorials. I dont't think they are necessarily "in order",
Thx have to look at it. Is there a way to see the code for the ui creator?
Like if I create a label can I see the code for it?
Yes after creating a label there are many different attributes for it. The help menu was vital for my learning of the ui module. You can use: (labelname).text to set the text of the label and (labelname).name for the name of the label, I'm pretty sure this is read only but it's helpful with button to determine which one is being pressed. Most other helpful parameters can be set within the definition of the label. The ui editor is easier to use, and look at the built-in examples, they are helpful.
The pyui files created by the ui editor are simple .json files. You can rename the file to json, and see what is inside, or simply open(filename).read(). The json only encodes the non-default parameters, if memory serves.
You can also open Modules/Python3/site-packages/ui.py to see how these get loaded, but other than some special encoding of colors, mostly this just loads the attribs in the json for each component, then adds a subview to its parent.
Hi @Bjucha ,
I am a beginner too.
And made this small label program to
understand UI Module and Label Creation with position.
I find UI Module's learning curve steep, but UI Module is vital to use Pythonista on the iOS devices.
Hope this helps
# Learning Alignment Options In UI # Pythonista # Flex LRTBWH import ui w,h = ui.get_screen_size() h = h - 64 view = ui.View(name = 'Flex', bg_color = 'lightyellow', frame = (0,0,w,h)) #view.flex = 'WH' # label height and button width bh = bw = 80 # margin mg = 10 lb1 = ui.Label(name = 'Label1', bg_color = 'yellow', frame =(mg,mg,bw,bh)) lb1.border_color = 'black' lb1.border_width = 1 lb1.flex = 'RB' lb1.alignment=1 lb1.text = lb1.flex lb2 = ui.Label(name = 'Label2', bg_color = 'yellow', frame =(w-(bw+mg),mg, bw,bh)) lb2.border_color = 'black' lb2.border_width = 1 lb2.flex = 'LB' lb2.alignment=1 lb2.text = lb2.flex lb3 = ui.Label(name = 'Label3', bg_color = 'yellow', frame =(mg,h-(bh+mg),bw,bh)) lb3.border_color = 'black' lb3.border_width = 1 lb3.flex = 'RT' lb3.alignment=1 lb3.text = lb3.flex lb4 = ui.Label(name = 'Label4', bg_color = 'yellow', frame =(w-(bw+mg),h-(bh+mg),bw,bh)) lb4.border_color = 'black' lb4.border_width = 1 lb4.flex = 'LT' lb4.alignment=1 lb4.text = lb4.flex # center lb5 = ui.Label(name = 'Label5', bg_color = 'yellow', frame =((w-bw)*.5,(h-bh)*.5,bw,bh)) lb5.border_color = 'black' lb5.border_width = 1 lb5.flex = 'LRTB' lb5.alignment=1 lb5.text = lb5.flex view.add_subview(lb1) view.add_subview(lb2) view.add_subview(lb3) view.add_subview(lb4) view.add_subview(lb5) view.present('screen')
@ramvee This example is great!
One of the things that I found when I first started using the ui module was that when I did not use .pyui files then my code got long and repetitive. Often I want all my ui elements to share a common look and feel (bg_color, border_color, border_width, etc.) and I only need to set a few unique values like name and frame. To reduce this code bloat, I recommend creating a
make_label()function that puts all the common stuff inside and accepts as parameters from the outside the unique stuff...
# Learning Alignment Options In UI # Pythonista # Flex LRTBWH import ui def make_label(name, frame): return ui.Label( alignment=1, bg_color='yellow', border_color='black', border_width=1, frame=frame, flex=name, name=name, text=name) w, h = ui.get_screen_size() h -= 64 bh = bw = 80 # label height and button width mg = 10 # margin view = ui.View(name='Flex', bg_color='lightyellow', frame=(0, 0, w, h)) view.add_subview(make_label(name='RB', frame=(mg, mg, bw, bh))) view.add_subview(make_label(name='LB', frame=(w - (bw + mg), mg, bw, bh))) view.add_subview(make_label(name='RT', frame=(mg, h - (bh + mg), bw, bh))) view.add_subview(make_label(name='LT', frame=(w - (bw + mg), h - (bh + mg), bw, bh))) view.add_subview(make_label(name='LRTB', frame=((w - bw) * .5, (h - bh) * .5, bw, bh))) view.present()
@ccc Wow! God Bless You!
Superb And Compact As Always.
Thank you everyboy. I this is very helpful!
Hi @Bjucha try to look at the first script in this post: https://forum.omz-software.com/topic/3964/unipage-as-a-bridge-between-kivy-and-pythonista. It defines simple ways to put basic ui elements at any position on the screen programmatically.
Thx for all the info, will look at it all
Im not very good with programming but it's fun to learn and imporve my basic skills
@ramvee hello I have a question for you
This part of your code:
w,h = ui.get_screen_size() h = h - 64 view = ui.View(name = 'Flex', bg_color = 'lightyellow', frame = (0,0,w,h)) #view.flex = 'WH' # label height and button width bh = bw = 80 # margin mg = 10
Is about the size of the ui. W,h is width and height ?
But why is h = -64?
is bh and bw borderheight and borderwidth?
And finally mg what is that?
@Bjucha Sorry, you can remove that line.
i used to think that screensize measures the total screen including the title bar.
So i used to subtract 64 from height to compensate for title bar height.
bw and bh are just width and height of button, or label in this case.
mg is margin between the top, bottom and side edges from screen, from where the labels are..
You can fool around with values to see what happens. 😊
@ramvee Hello Just wanna say thanks for your template.
I have now been able to create labels and buttons thanks to you