In a previous post I showed similar GUI using place,pack . Now will show similar sample GUI (Graphical User Interface) using Python 3 and Tkinter with Grid,row,col method

Widgets used

• Window
• Frame
• Labels
• Buttons
• Canvas
• Circle
• Frame
• Text
• ScrollBar

Design layout

Restart pressed (clears text and indicators – show that is was restarted

pressing of component,Optical and RF  test (RF test intentional fail in this simulation)

# -*- coding: utf-8 -*-
"""
Created on Sun Dec  1 16:20:52 2019

@author: aleja

helpful references
https://stackoverflow.com/questions/34276663/tkinter-gui-layout-using-frames-and-grid
https://stackoverflow.com/questions/4310489/how-do-i-remove-the-light-grey-border-around-my-canvas-widget
"""

from tkinter import *
maxLenText=0

#your custom  function(s) for when buttons pressed - run test and report
def printtext(strtext):

    if strtext=="Comp Test":
        #run Comp Test()
        TestResult="Pass"
        if TestResult.find("Fail")>=0:
            canv1.itemconfig(c1, fill='red')
        else:
           canv1.itemconfig(c1, fill='lightgreen')
    elif strtext=="Optical Test":
        #run Optical Test()
        TestResult="Pass"
        if TestResult.find("Fail")>=0:
            canv2.itemconfig(c2, fill='red')
        else:
           canv2.itemconfig(c2, fill='lightgreen')
    elif strtext=="RF Test":
        #run RF Test Test()
        TestResult="Failed- BER subTest"
        if (TestResult.find("Fail")>=0):
            canv3.itemconfig(c3, fill='red')
        else:
           canv3.itemconfig(c3, fill='lightgreen')
    elif strtext=="Restart":
        #run RF Test Test()
        TestResult="Cleared Indicator and Text"
        canv1.itemconfig(c1, fill='black')
        canv2.itemconfig(c2, fill='black')
        canv3.itemconfig(c3, fill='black')
        txt1.delete(1.0,END)
    else:
        TestResult="UNKNOWN TEST contact Engineering"

    print("button press",strtext)
    global maxLenText
    txt1.insert(INSERT,(strtext+":"+TestResult+"\n"))
    txt1.yview(END)

#GUI setup below
myWindow=Tk()
myWindow.title("myWindow")
myWindow.minsize(380,250)
maxLenText=0

# do this or frame in window will not follow window (expanding)
myWindow.grid_rowconfigure(1,weight=1)  #need on row define as 1 for expanding row wise bottomframe
myWindow.grid_columnconfigure(0,weight=1)

frame1=Frame(myWindow,width=50,height=50,bg='lightblue')
frame1.grid(row=0, column=0, sticky='NWES', padx=10, pady=10, columnspan=4)
frame1.rowconfigure(0,weight=1)
frame1.columnconfigure(3,weight=1) #the lastcol goes along with rigth side expanding

L1=Label(frame1, text="Transceiver Test")
L2=Label(frame1, text="YourCompanyName")
L1.grid(row=0, column=0, padx=0, pady=10, columnspan=3) #span 2 so it does not affect component button
L2.grid(row=0, column=3, padx=10, sticky='E') #Keep company label attached to east(right) side

b1=Button(frame1, text='Component Test', command=lambda:printtext("Comp Test"))
b2=Button(frame1, text='Optical Test', command=lambda:printtext("Optical Test"))
b3=Button(frame1, text='RF Test', command=lambda:printtext("RF Test"))
b4=Button(frame1, text='Restart', padx=3, command=lambda:printtext("Restart"))

b1.grid(row=1, column=0,padx=(10,0))
b2.grid(row=1, column=1)
b3.grid(row=1, column=2)
b4.grid(row=1, column=3,padx=10,sticky='E') #keep Reset button on Right side

canv1=Canvas(frame1,width=50, height=30, bg='lightblue', bd=0, highlightthickness=0)
canv2=Canvas(frame1,width=50, height=30, bg='lightblue', bd=0, highlightthickness=0)
canv3=Canvas(frame1,width=50, height=30, bg='lightblue', bd=0, highlightthickness=0)
canv1.grid(row=2, column=0, padx=(10,0), columnspan=1) #padding to match first button
canv2.grid(row=2, column=1, columnspan=1)
canv3.grid(row=2, column=2, columnspan=1)

#========indicator=========
LTRY=5 #light top right Y
LTRX=15 #light top right X
dia=20
c1=canv1.create_oval(LTRX,LTRY,LTRX+dia,LTRY+dia,fill='black')
c2=canv2.create_oval(LTRX,LTRY,LTRX+dia,LTRY+dia, fill='black')
c3=canv3.create_oval(LTRX,LTRY,LTRX+dia,LTRY+dia, fill='black')

#=====bottom frame now the frame will be two col width with txt and scrollbar

frame2=Frame(myWindow,width=200,height=100,bg='lightblue',padx=10,pady=10)
frame2.grid(row=1,column=0,sticky='NWES',columnspan=2)
frame2.rowconfigure(0,weight=1)
frame2.columnconfigure(0,weight=1)

txt1=Text(frame2,width=20,height=10)
txt1.grid(row=0,column=0,sticky='NWES')

#attach a Scrollbar to txt1
vscroll=Scrollbar(frame2,orient=VERTICAL,command=txt1.yview)
txt1['yscroll']=vscroll.set
vscroll.grid(row=0,column=1,sticky='NS')

myWindow.mainloop()<span id="mce_SELREST_start" style="overflow:hidden;line-height:0;">&#65279;</span>

helpful references
https://stackoverflow.com/questions/34276663/tkinter-gui-layout-using-frames-and-grid
https://stackoverflow.com/questions/4310489/how-do-i-remove-the-light-grey-border-around-my-canvas-widget

This post is not connected or endorsed by any company.
Created to spark ideas on the subject.
Use at your own risk.