Sguigee

A GUI library for Python

Based on TKInter

Split into two levels

• Advanced
• Easy

We're doing the easy version

So why not just use TKInter?

• Confusing

• Long

• Not very Pythonic

Code first

ask questions later

A Simple 'Hello World' Example

import tkinter as tk

t = tk.Tk()
t.title('Hello World')
x = tk.Label(t, 
  text='Hello World')
x.pack(fill='x', expand=True, 
  side='left')
t.mainloop()
from sguigee import window, label

with window(title='Hello World'):
  label('Hello World')
  

So how do we use it?

• The Grid!

An example

Example: Calculator

from gui import window, row, button, textbox
import operator as op

def make_button(text):
  @button(text)
  def _button():
    output.set(output.get() + text)
  return _button
  
def make_operator(t, op):
  @button(t, expand=False, use_monospace_font=True)
  def _button():
    stack.append(float(output.get()))
    output.set('')
    stack.append(op)
    
stack = []
with window(title="Calculator", set_minimum_size=True, can_resize=False):
  with row():
    output = textbox()
    
  with row():
    make_button('1')
    make_button('2')
    make_button('3')
    make_operator('+', op.add)
    
  with row():
    make_button('4')
    make_button('5')
    make_button('6')
    make_operator('-', op.sub)
    
  with row():
    make_button('7')
    make_button('8')
    make_button('9')
    make_operator('*', op.mul)
    
  with row():
    make_button('0')
    make_button('.')
    make_operator('/', op.truediv)
    
  with row():
    @button('Clear')
    def clear():
      output.set('')
      
    @button('Clear All')
    def clear_all():
      stack = []
      output.set('')
      
    @button('=')
    def compute():
      while len(stack) >= 2:
        op, lhs = stack.pop(), stack.pop()
        output.set(op(lhs, float(output.get())))
        

The 'With' Statement

• A way of seperating code blocks.
• Used in Sguigee for containers.
• Looks like this:

  with something(options):
    something else
    

Windows

• Use the 'with' statement.
• Have several options (can_resize etc.)

• with window(title='Title'):
    pass
    

Rows

• Also use the 'with' statement.
• Simple, no options

• with row():
    pass
    

Let's combine the two!

with window(title="Title"):
  with row():
    pass
  with row():
    pass
    

Labels

• Like text boxes on word.
• Allow you to put some text in a row.
• Simple:

  label("Label Text")
  

Lets put this all together!

• with window(title="Test"):
    with row():
      label("Hello World")

• 

Textboxes

• Slightly more complicated!
• Why?
• Textboxes have text which changes!
• So how do we use them?

• t = textbox()

• How do we get the users input?

• t.get()
  

Lets try this!

• with window(title='Textbox'):
    with row():
      t = textbox()
      
  print(t.get())

• But Nothing happens!?
• This is because the program stops before print(t.get())

• Why?!

So... How do we do anything?

• Well, the problem before was that there was nothing for the user to do.
• Just a textbox for them to fill in.
• We need something they can click...

Buttons!

• Slightly different to normal.
• Why?
• Because they execute some code when clicked.

• @button("Button Text")
  def on_button_click():
    print("Hello!")
    

What's with the '@' thingy?

• Called a decorator.
• Don't worry about it.
• There just the way to do buttons (at this level...)

Now can we put it all together?

• with window(title='Textbox'):
    with row():
      t = textbox()
      
      @button("Go")
      def go_click():
        print(t.get())

• 

Did it work?

• 

• Yes!

Another thing about text boxes

• You can also set the text inside them.

• t.set('Textbox content.')
  

Canvas

• Draw things on the screen.

• c = canvas()

• Simple to use:

• c.create_rectangle((10, 10, 10, 10))

• Note the double brackets for rectangles...
• Other primitives are available.
• E.g) Arcs, Lines, Ovals, Images, Text.
• Check here for details.

Some more things: Message boxes

• Used to show, information, errors etc.
• Just like print...

• show_message('Hello', name)

• Can also customize the title, message type etc.

• show_message('Aah!', title='Error', type='error')
  

Dialog Boxes

• Like message boxes but for input instead of output.
• Just like input...

• name = ask_message('Enter your name:')
  number = int(ask_message('Enter a number:'))
  

Timers

• Make things happen after a time delay.
• Works like buttons:

• @after(10)
  def on_timeout():
    print("HEY!")

• Except instead of executing when clicked,
• they execute when the timer runs out.

How do we design a program that uses Sguigee?

Simple steps to follow:

• DRAW YOUR GUI OUT ON PAPER
• PLEASE, PLEASE, PLEASE DO THAT!
• Then, divide it up into rows.
• Translate that into code.

Now go code!

Challenge 1

Write a program to add two numbers.

The program should:

• Have two textboxes, one for each number.
• It should have a button that says 'add'.
• The button should be on a seperate row below the textboxes.
• When you click the button, the program should display a message box showing the sum of the numbers.