problem with space display on tkinter widgets

Question

I just learned tkinterr, I want to make widgets display using tkinter, I have a problem doing the layout, the text that I want to display instead is centered, can I get help putting text on the linked widget to the left corner and using neat spaces or tutorial recommendations for management of layouts on widgets the appearance is like this.

import time
import serial
from Tkinter import *

serial_speed = 115200
serial_port = '/dev/ttyACM0'

ser = serial.Serial(serial_port, serial_speed, timeout=1)

class Application(Frame):

    def measure(self):

         ser.write("m")
        data = ser.readline()

        # If the answer is not empty, process & display data
        if (data != ""):
            processed_data = data.split(",")

            self.tegangan_data.set("TEGANGAN: " + str(processed_data[0]))
            self.tegangan.pack()

            self.arus_data.set("    ARUS    : " + str(processed_data[1]))
            self.arus.pack()

            self.daya_data.set("   DAYA : " + str(processed_data[2]))
            self.daya.pack()

            self.torsi_data.set("   TORSI   : " + str(processed_data[3]))
            self.torsi.pack()

            self.panas_data.set("   PANAS MESIN : " + str(processed_data[4]))
            self.panas.pack()

            self.jarak_data.set("   JARAK TEMPUH    : " + str(processed_data[5]))
            self.jarak.pack()

        # Wait 1 second between each measurement
        self.after(500,self.measure)

    # Create display elements
    def createWidgets(self):

        self.tegangan = Label(self, textvariable=self.tegangan_data, font=('Verdana', 20, 'bold'))
        self.tegangan_data.set("Tegangan")
        self.tegangan.pack()


        self.arus = Label(self, textvariable=self.arus_data, font=('Verdana', 20, 'bold'))
        self.arus_data.set("Arus")
        self.arus.pack()

        self.daya = Label(self, textvariable=self.daya_data, font=('Verdana', 20, 'bold'))
        self.daya_data.set("Daya")
        self.daya.pack()

        self.torsi = Label(self, textvariable=self.torsi_data, font=('Verdana', 20, 'bold'))
        self.torsi_data.set("Torsi")
        self.torsi.pack()

        self.panas = Label(self, textvariable=self.panas_data, font=('Verdana', 20, 'bold'))
        self.panas_data.set("Panas mesin")
        self.panas.pack()

        self.jarak = Label(self, textvariable=self.jarak_data, font=('Verdana', 20, 'bold'))
        self.jarak_data.set("Daya")
        self.jarak.pack()


     def __init__(self, master=None):
        Frame.__init__(self, master)
        self.tegangan_data = StringVar()
        self.arus_data = StringVar()
        self.daya_data = StringVar()
        self.torsi_data = StringVar()
        self.panas_data = StringVar()
        self.jarak_data = StringVar()

        self.createWidgets()
        self.pack()
        self.measure()
root = Tk()
app = Application(master=root)
app.mainloop()

score 0 · Answer 1 · answered May 26 '19 at 05:49

To make the labels left-aligned in your window, you can change the code in the "measure" method to be:

            self.tegangan_data.set("TEGANGAN: " + str(processed_data[0]))
            self.tegangan.pack(anchor='w')

            self.arus_data.set("ARUS: " + str(processed_data[1]))
            self.arus.pack(anchor='w')

            self.daya_data.set("DAYA: " + str(processed_data[2]))
            self.daya.pack(anchor='w')

            self.torsi_data.set("TORSI: " + str(processed_data[3]))
            self.torsi.pack(anchor='w')

            self.panas_data.set("PANAS MESIN: " + str(processed_data[4]))
            self.panas.pack(anchor='w')

            self.jarak_data.set("JARAK TEMPUH: " + str(processed_data[5]))
            self.jarak.pack(anchor='w')

Which will result in this:

Now if you expand the window horizontally, you will see that even though the labels remain left-aligned, they do not stick to the left-side of the window but instead stay in the middle. I don't know if you want that behavior or not, but if you want to get an idea of why this happened, change the line initializing the Frame window to:

Frame.__init__(self, master, borderwidth=5, relief=RIDGE)

The labels are currently packed to the left side of the frame but the frame that contain them is not packed to the left side of the window. A frame can be packed just like other Tkinter UI widgets. Since you inherited from Frame in the Application class, you can use this after you called the Application constructor (if you want the frame and the labels to stay on left side of the window):

app.pack(anchor='w')

You can also use:

app.pack(side='left')

There is a difference in their behavior though, but I'll leave that to you to explore.

Finally, to improve the look of the application, you can configure the frame to always have some padding between it and the edges of the window. Try this:

app.config(padx=20)
app.config(pady=10)

A good source of information on using pack(): https://effbot.org/tkinterbook/pack.htm

If you want to do complicated layout in Tkinter then you should check out grid(): https://effbot.org/tkinterbook/grid.htm

Also, it's a good idea to check out documentation of the widgets you will have to work with, e.g. Frame http://effbot.org/tkinterbook/frame.htm

can I ask for help again to place an image (.jpg) at the bottom of the text? , what kind of code do I need to add? — ibnukhak, May 27 '19 at 16:56
That has already been covered here: https://stackoverflow.com/questions/10133856/how-to-add-an-image-in-tkinter. Check out the answer and code by josav09. Remember to install the PIL package for Python. — Tien Nguyen, May 29 '19 at 15:28

problem with space display on tkinter widgets

1 Answers1