Welcome!
This is the community forum for my apps Pythonista and Editorial.
For individual support questions, you can also send an email. If you have a very short question or just want to say hello — I'm @olemoritz on Twitter.
Simple UI tutorial?
-
Hi
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",
https://github.com/humberry/ui-tutorial -
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 -
-
I would like to print to a view rather than the console so that I can control fonts size, etc. Could someone give me a snippet of code does this? I just want a full screen view that displays the text and a way to close the view.
-
-
@ihf, I wrote the below in a few mins (I am still a novice). My point is sometimes its worth doing yourself. Even if you have to ask some questions along the way. Of course its good for learning, and because you write yourself its a lot easier for you to get your exact solution. I still copy code though, but I often have a go at it myself also.
Anyway, from what you describe, I think the below does what you want or at least is a good starting point.
import ui class MyConsole(ui.View): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.tv = None self.make_view() def make_view(self): tv = ui.TextView(frame=self.bounds, flex='wh', font=('Arial Rounded MT Bold', 24), editable=False, ) self.tv = tv self.add_subview(self.tv) def write_line(self, txt): self.tv.text += "{}\n".format(txt) if __name__ == '__main__': f = (0, 0, ui.get_screen_size()[0], ui.get_screen_size()[1]) v = MyConsole(frame=f, name='My Full Sceen Console') v.present(style='', animated=False) for i in range(100): v.write_line('line-{}'.format(i))
-
@ccc very nice example.
What and why flex=name ? Can't find the meaning of it -
@Phuket2 First of all, thank you very much for writing this script...I think it is precisely what I need. My only problem is I am using PrettyTable which is apparently formatting for a fixed width font so I need to play with the ui view options to get things to line up. Second, while I agree completely that doing this myself is the best way to learn python I am struck by the fact that it will take me awhile to even understand your code much less write it from scratch on my own. So, thanks again for giving me working code and something to study.