Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.python > #75536 > unrolled thread

Tkinter grid autosize help

Back to article view | Back to comp.lang.python

Contents

  Tkinter grid autosize help Nicholas Cannon <nicholascannon1@gmail.com> - 2014-08-02 07:38 -0700
    Re: Tkinter grid autosize help MRAB <python@mrabarnett.plus.com> - 2014-08-02 16:33 +0100
    Re: Tkinter grid autosize help Mark Lawrence <breamoreboy@yahoo.co.uk> - 2014-08-02 17:14 +0100
    Re: Tkinter grid autosize help Nicholas Cannon <nicholascannon1@gmail.com> - 2014-08-02 15:53 -0700
      Re: Tkinter grid autosize help Terry Reedy <tjreedy@udel.edu> - 2014-08-02 22:16 -0400
      Re: Tkinter grid autosize help Rick Johnson <rantingrickjohnson@gmail.com> - 2014-08-02 19:24 -0700
      Re: Tkinter grid autosize help Terry Reedy <tjreedy@udel.edu> - 2014-08-02 23:22 -0400
    Re: Tkinter grid autosize help Nicholas Cannon <nicholascannon1@gmail.com> - 2014-08-02 19:36 -0700

#75536 — Tkinter grid autosize help

So i have a basic calculator program and i have a label that i want to go across the top to show the numbers and stuff like on a normal calculator. The only way i can make the buttons look neat and then when i keep pressing one the label gets larger and then half the buttons move out of the screen. I cant seem to fix this i have tried columnspan, columnconfigure and heaps of other stuff and non works it always expands. is there a way i can stop the grid from expanding?

[toc] | [next] | [standalone]

#75537

On 2014-08-02 15:38, Nicholas Cannon wrote:
> So i have a basic calculator program and i have a label that i want
> to go across the top to show the numbers and stuff like on a normal
> calculator. The only way i can make the buttons look neat and then
> when i keep pressing one the label gets larger and then half the
> buttons move out of the screen. I cant seem to fix this i have tried
> columnspan, columnconfigure and heaps of other stuff and non works it
> always expands. is there a way i can stop the grid from expanding?
>
You haven't provided any code, so it's not possible to say where you're
going wrong!

[toc] | [prev] | [next] | [standalone]

#75540

On 02/08/2014 15:38, Nicholas Cannon wrote:
> So i have a basic calculator program and i have a label that i want to go across the top to show the numbers and stuff like on a normal calculator. The only way i can make the buttons look neat and then when i keep pressing one the label gets larger and then half the buttons move out of the screen. I cant seem to fix this i have tried columnspan, columnconfigure and heaps of other stuff and non works it always expands. is there a way i can stop the grid from expanding?
>

Please help us to help you by reading and actioning this 
http://sscce.org/, thanks.

p.s. being British I must point out that I is spelt I and not i :)

-- 
My fellow Pythonistas, ask not what our language can do for you, ask
what you can do for our language.

Mark Lawrence

[toc] | [prev] | [next] | [standalone]

#75558

On Saturday, August 2, 2014 10:38:28 PM UTC+8, Nicholas Cannon wrote:
> So i have a basic calculator program and i have a label that i want to go across the top to show the numbers and stuff like on a normal calculator. The only way i can make the buttons look neat and then when i keep pressing one the label gets larger and then half the buttons move out of the screen. I cant seem to fix this i have tried columnspan, columnconfigure and heaps of other stuff and non works it always expands. is there a way i can stop the grid from expanding?



ok here is the code:

#window setup
main = Tk()
main.title('Calculator')
main.geometry('300x350')
main.resizable()

app = Frame(main)
app.grid()
app.columnconfigure(0, weight=500)
app.columnconfigure(1, weight=500)


#number view label
number = ' '
numberView = Label(app, text= number)
numberView.grid(row=0, column=0, columnspan=100)

#Num Pad Buttons below
num1 = '1'
button1 = Button(app, text='1', command= lambda: add(num1), width=5)
button1.grid(row=1, column=0)

num2 = '2'
button1 = Button(app, text='2', command= lambda: add(num2), width=5)
button1.grid(row=1, column=1)

num3 = '3'
button1 = Button(app, text='3', command= lambda: add(num3), width=5)
button1.grid(row=1, column=2)

num4 = '4'
button1 = Button(app, text='4', command= lambda: add(num4), width=5)
button1.grid(row=2, column=0)

num5 = '5'
button1 = Button(app, text='5', command= lambda: add(num5), width=5)
button1.grid(row=2, column=1)

num6 = '6'
button1 = Button(app, text='6', command= lambda: add(num6), width=5)
button1.grid(row=2, column=2)

num7 = '7'
button1 = Button(app, text='7', command= lambda: add(num7), width=5)
button1.grid(row=3, column=0)

num8 = '8'
button1 = Button(app, text='8', command= lambda: add(num8), width=5)
button1.grid(row=3, column=1)

num9 = '9'
button1 = Button(app, text='9', command= lambda: add(num9), width=5)
button1.grid(row=3, column=2)

num0 = '0'
button1 = Button(app, text='0', command= lambda: add(num0), width=5)
button1.grid(row=4, column=1)

main.mainloop()

[toc] | [prev] | [next] | [standalone]

#75571

On 8/2/2014 6:53 PM, Nicholas Cannon wrote:
> On Saturday, August 2, 2014 10:38:28 PM UTC+8, Nicholas Cannon wrote:
>> So i have a basic calculator program and i have a label that i want to go across
 >> the top to show the numbers and stuff like on a normal calculator.

The buttons are labelled already with numbers. Whatever stuff you meant,
is not diplayed.

>> The only way i can make the buttons look neat and then when i keep
 >>  pressing one the label gets larger and then half the buttons
 >>  move out of the screen.

Since nothing gets bigger, I have no idea what you mean.

 >> I cant seem to fix this i have tried columnspan, columnconfigure
>> and heaps of other stuff and non works it always expands.
 >> is there a way i can stop the grid from expanding?

If I shrink the window horizontally, the minimun size is 3 columns.
If I shrink vertically, bottom buttons disappear.  I am not sure why.

> ok here is the code:

Only some of it.

from tkinter import *

def add(*args): print(args)

> #window setup
> main = Tk()
> main.title('Calculator')
> main.geometry('300x350')
> main.resizable()
>
> app = Frame(main)
> app.grid()
> app.columnconfigure(0, weight=500)
> app.columnconfigure(1, weight=500)

You left out column 2.

>
> #number view label
> number = ' '
> numberView = Label(app, text= number)
> numberView.grid(row=0, column=0, columnspan=100)

What you need for a changing label is

number = StringVar()
number.set('')
numberView = Label(app, textvariable=number)

but see below

> #Num Pad Buttons below
> num1 = '1'
> button1 = Button(app, text='1', command= lambda: add(num1), width=5)
> button1.grid(row=1, column=0)

You are using the braindead telephone keypad layout.
Calculators and number keypads have the more sensible layout
7 8 9
4 5 6
1 2 3
0


> num2 = '2'
> button1 = Button(app, text='2', command= lambda: add(num2), width=5)
> button1.grid(row=1, column=1)
>
> num3 = '3'
> button1 = Button(app, text='3', command= lambda: add(num3), width=5)
> button1.grid(row=1, column=2)
>
> num4 = '4'
> button1 = Button(app, text='4', command= lambda: add(num4), width=5)
> button1.grid(row=2, column=0)
>
> num5 = '5'
> button1 = Button(app, text='5', command= lambda: add(num5), width=5)
> button1.grid(row=2, column=1)
>
> num6 = '6'
> button1 = Button(app, text='6', command= lambda: add(num6), width=5)
> button1.grid(row=2, column=2)
>
> num7 = '7'
> button1 = Button(app, text='7', command= lambda: add(num7), width=5)
> button1.grid(row=3, column=0)
>
> num8 = '8'
> button1 = Button(app, text='8', command= lambda: add(num8), width=5)
> button1.grid(row=3, column=1)
>
> num9 = '9'
> button1 = Button(app, text='9', command= lambda: add(num9), width=5)
> button1.grid(row=3, column=2)
>
> num0 = '0'
> button1 = Button(app, text='0', command= lambda: add(num0), width=5)
> button1.grid(row=4, column=1)
)
>

This sort of repetitious code is crying for a loop. For one thing, if 
you want to change the buttons, there should only be one Button call to 
modify. Since I am still learning to write tkinter myself, I wrote the 
following, which I suspect does what you wanted and a bit more.

from tkinter import *

main = Tk()
main.title('Calculator')
main.geometry('300x350')
#main.resizable()  # does nothing

app = Frame(main)
app.grid()

total = IntVar()
total.set(0)
entry = StringVar()
entry.set('')

Label(app, text='Total').grid(row=0, column=0)
Label(app, textvariable=total).grid(row=0, column=1, columnspan=3)
Label(app, text='Entry').grid(row=1, column=0)
Label(app, textvariable=entry).grid(row=1, column=1, columnspan=3)

def append(digit):
     entry.set(entry.get() + digit)

def add():
     total.set(total.get() + int(entry.get()))
     entry.set('')
def sub():
     total.set(total.get() - int(entry.get()))
     entry.set('')

header_rows = 2
for num, r, c in (
         ('7', 0, 0), ('8', 0, 1), ('9', 0, 2),
         ('4', 1, 0), ('5', 1, 1), ('6', 1, 2),
         ('1', 2, 0), ('2', 2, 1), ('3', 2, 2),
         ('0', 3, 0), ('+', 3, 1), ('-', 3, 2),):
     cmd = {'+':add, '-':sub}.get(num, lambda num=num: append(num))
     b = Button(app, text=num, command=cmd, width=5)
     b.grid(row=header_rows+r, column=c)

main.mainloop()




-- 
Terry Jan Reedy

[toc] | [prev] | [next] | [standalone]

#75572

On Saturday, August 2, 2014 5:53:12 PM UTC-5, Nicholas Cannon wrote:
> So i have a basic calculator program and i
> have a label that i want to go across the top to show the
> numbers and stuff like on a normal calculator. The only
> way i can make the buttons look neat and then when i keep
> pressing one the label gets larger and then half the
> buttons move out of the screen. 

A Tkinter Label widget will "naturally" adjust its size to
accommodate the text it contains.

> I cant seem to fix this i have tried columnspan,
> columnconfigure and heaps of other stuff and non works it
> always expands. is there a way i can stop the grid from
> expanding?

The "grid is expanding" because the first row of the grid
(which contains a label that is being updated by user input)
is expanding, and as such, all subsequent rows will expand
to match the first row.

You should use an Entry instead of a Label because: 

  1. Entry will accommodate values that exceed their current
  size *WITHOUT* growing.
      
  2. Label widgets do not allow direct input from the user.
  Sure, in some cases you want to prevent the user from
  editing text via the keyboard but *NOT* in this case!  All
  calculator apps should allow the use a choice between
  mouse clicks or keyboard entry.
  
*HOWEVER*, if you do decide to implement the "numberView" as
an Entry widget, you will need to create a keypress filter
to prevent illegal input!
  

> ok here is the code:
> #window setup
> main = Tk()
> main.title('Calculator')
> main.geometry('300x350')
> main.resizable()
> app = Frame(main)
> app.grid()
> app.columnconfigure(0, weight=500)
> app.columnconfigure(1, weight=500)
> #number view label
> number = ' '
> numberView = Label(app, text= number)
> numberView.grid(row=0, column=0, columnspan=100)
> #Num Pad Buttons below
> num1 = '1'
> button1 = Button(app, text='1', command= lambda: add(num1), width=5)
> button1.grid(row=1, column=0)
> num2 = '2'
> button1 = Button(app, text='2', command= lambda: add(num2), width=5)
> button1.grid(row=1, column=1)
> num3 = '3'
> button1 = Button(app, text='3', command= lambda: add(num3), width=5)
> button1.grid(row=1, column=2)
> num4 = '4'
> button1 = Button(app, text='4', command= lambda: add(num4), width=5)
> button1.grid(row=2, column=0)
> num5 = '5'
> button1 = Button(app, text='5', command= lambda: add(num5), width=5)
> button1.grid(row=2, column=1)
> num6 = '6'
> button1 = Button(app, text='6', command= lambda: add(num6), width=5)
> button1.grid(row=2, column=2)
> num7 = '7'
> button1 = Button(app, text='7', command= lambda: add(num7), width=5)
> button1.grid(row=3, column=0)
> num8 = '8'
> button1 = Button(app, text='8', command= lambda: add(num8), width=5)
> button1.grid(row=3, column=1)
> num9 = '9'
> button1 = Button(app, text='9', command= lambda: add(num9), width=5)
> button1.grid(row=3, column=2)
> num0 = '0'
> button1 = Button(app, text='0', command= lambda: add(num0), width=5)
> button1.grid(row=4, column=1)
> main.mainloop()


A few points about your code:

  1. "add" is a horrendous name for a function that updates
  the numerical display, ESPECIALLY in an application that
  is used to add, subtract, blah-blah-blah!
  
  2. You should use a loop to layout the "grid of buttons",
  which could be accomplished in just a mere couple lines of
  code.
  
  3. Declaring the value of the lambda arguments seems
  superfluous to me.
  
Finally, there is always more to an interface than we
initially imagine. For instance, the width of the
"numberView" should fill the containing window to allow the
user "view flexibility", however, if the entry is allowed to
be dynamic and the "number grid" is not dynamic, then the
application is not going to feel very professional. Of
course, at this time, just getting something working is most
important. We can jazz it up later :)

Here is a slightly modified version of your code that may
help you get going in the correct direction. Note, i am
*NOT* going to write this code for you, i will offer *slight*
suggestions and comments where i believe improvements could
be made, but you are required to do the heavy lifting.

############################################################
# START CODE
############################################################
import Tkinter as tk 
from Tkconstants import E, W, END

def update_entry(arg):
    oldValue = entry.get()
    entry.delete(0, END)
    entry.insert(0, oldValue + arg)

def onKeyPress_entry(event):
    key = event.keysym.lower()
    print 'The user pressed {0}'.format(key)
    #
    # The following conditional showcases how to prevent
    # illegal input but utilizing a return value of "break"
    if key == 'w':
        print 'The char "w" is not allowed!'
        return "break"

app = tk.Tk()
app.title('Calculator')
app.geometry('300x350')

entry = tk.Entry(app)
entry.grid(row=0, column=0, sticky=E+W, columnspan=3)
entry.bind("<KeyPress>", onKeyPress_entry)

if True:
    # OPTION_1: Create buttons with repetitive code:
    w = tk.Button(app, text='1', command=lambda: update_entry('1'), width=5)
    w.grid(row=1, column=0)
    w = tk.Button(app, text='2', command=lambda: update_entry('2'), width=5)
    w.grid(row=1, column=1)
    w = tk.Button(app, text='3', command=lambda: update_entry('3'), width=5)
    w.grid(row=1, column=2)
    w = tk.Button(app, text='4', command=lambda: update_entry('4'), width=5)
    w.grid(row=2, column=0)
    w = tk.Button(app, text='5', command=lambda: update_entry('5'), width=5)
    w.grid(row=2, column=1)
    w = tk.Button(app, text='6', command=lambda: update_entry('6'), width=5)
    w.grid(row=2, column=2)
    w = tk.Button(app, text='7', command=lambda: update_entry('7'), width=5)
    w.grid(row=3, column=0)
    w = tk.Button(app, text='8', command=lambda: update_entry('8'), width=5)
    w.grid(row=3, column=1)
    w = tk.Button(app, text='9', command=lambda: update_entry('9'), width=5)
    w.grid(row=3, column=2)
else:
    # OPTION_2: Create Buttons by off-loading the work onto Python.
    number = 1
    for r in range(1, 4):
        for c in range(3):
            print r, c, number
            # Can you figure out what to do here?
            number += 1

w = tk.Button(app, text='0', command=lambda: update_entry('0'), width=5)
w.grid(row=4, column=1)

if __name__ == '__main__':
    app.mainloop() 
############################################################
# END CODE
############################################################

[toc] | [prev] | [next] | [standalone]

#75576

On 8/2/2014 10:16 PM, Terry Reedy wrote:
> On 8/2/2014 6:53 PM, Nicholas Cannon wrote:

>> The only way i can make the buttons look neat and then when i keep
>>  pressing one the label gets larger and then half the buttons
>>  move out of the screen

With my code below, I tried entering a 20 digit number and the button 
boxes separate horizontally. This is not exactly what you describe, but 
it does mess up the initially neat display.

>> is there a way i can stop the grid from expanding?

One thing I might do, besides using an entry box, it to grid the buttons 
in a separate frame. I wrote the code below, with the header_rows 
variable, with that in mind.

> This sort of repetitious code is crying for a loop. For one thing, if
> you want to change the buttons, there should only be one Button call to
> modify. Since I am still learning to write tkinter myself, I wrote the
> following, which I suspect does what you wanted and a bit more.
>
> from tkinter import *
>
> main = Tk()
> main.title('Calculator')
> main.geometry('300x350')
> #main.resizable()  # does nothing
>
> app = Frame(main)
> app.grid()
>
> total = IntVar()
> total.set(0)
> entry = StringVar()
> entry.set('')
>
> Label(app, text='Total').grid(row=0, column=0)
> Label(app, textvariable=total).grid(row=0, column=1, columnspan=3)
> Label(app, text='Entry').grid(row=1, column=0)
> Label(app, textvariable=entry).grid(row=1, column=1, columnspan=3)
>
> def append(digit):
>      entry.set(entry.get() + digit)
>
> def add():
>      total.set(total.get() + int(entry.get()))
>      entry.set('')
> def sub():
>      total.set(total.get() - int(entry.get()))
>      entry.set('')
>
> header_rows = 2
> for num, r, c in (
>          ('7', 0, 0), ('8', 0, 1), ('9', 0, 2),
>          ('4', 1, 0), ('5', 1, 1), ('6', 1, 2),
>          ('1', 2, 0), ('2', 2, 1), ('3', 2, 2),
>          ('0', 3, 0), ('+', 3, 1), ('-', 3, 2),):
>      cmd = {'+':add, '-':sub}.get(num, lambda num=num: append(num))
>      b = Button(app, text=num, command=cmd, width=5)
>      b.grid(row=header_rows+r, column=c)
>
> main.mainloop()

With regard to your next message: If you do not understand the function 
definitions above, including the lambda expression, and the loop, you 
should definitely look more at the tutorial.

-- 
Terry Jan Reedy

[toc] | [prev] | [next] | [standalone]

#75573

On Saturday, August 2, 2014 10:38:28 PM UTC+8, Nicholas Cannon wrote:
> So i have a basic calculator program and i have a label that i want to go across the top to show the numbers and stuff like on a normal calculator. The only way i can make the buttons look neat and then when i keep pressing one the label gets larger and then half the buttons move out of the screen. I cant seem to fix this i have tried columnspan, columnconfigure and heaps of other stuff and non works it always expands. is there a way i can stop the grid from expanding?

Ok so I have just started out Tkinter and I feel I should study more of it because some of the code given is quite intimidating to me right now. Also I have only been coding python for 3 months right now. I think I need to learn how to write python better haha. I appreciate the help guys.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.python

csiph-web