python - How do I add label widget over my canvas in tkinter?

Question

So I have this code which extracts new values from the database and keeps on updating on the application. The problem with it is that I need to display these values in some attractive way for which I need canvas and I'm unable to do so. Canvas isn't working. It is not making any shapes on application. I'm sure I've made a mistake but I don't know what. Help me thanks.

Code:

import Tkinter as tk
import sqlite3
import string
import time
import sys
from constants import DELAY,DB_PATH

def update_data_for_cod_bod():

    conn = sqlite3.connect('ubiqx_db.db')
    c = conn.cursor()
    execute_query = c.execute('''select cod,bod,tss from front_end_data 
    where slave_id=1''')
    result_set = c.fetchall()
    data_for_cod = 0
    data_for_bod = 0
    data_for_tss = 0
    for row in result_set:
        data_for_cod = row[0]
        data_for_bod = row[1]
        data_for_tss = row[2]

    lbl_cod_data["text"] = "COD             "+str(data_for_cod)
    lbl_bod_data["text"] = "BOD             " + str(data_for_bod)
    lbl_tss_data["text"] = "TSS             " + str(data_for_tss)
    root.after(DELAY, update_data_for_cod_bod)  # Call this function again 
    after DELAY ms.

def exit(event):
    root.quit()

root = tk.Tk()
w, h = root.winfo_screenwidth(), root.winfo_screenheight()
root.overrideredirect(1)
root.geometry("%dx%d+0+0" % (h, w))

root.title("COD_BOD")
root.configure(background='black')
root.bind("<Escape>", exit)

canvas = tk.Canvas(root, width=h, height=w, highlightthickness=0)
canvas.grid(row=0,column=0)
blackline = canvas.create_line(100, 100, 800, 100, fill="yellow")


lbl_cod_data = tk.Label(canvas, text="", font=("Times New Roman", 50, 
"bold"), bg="black", fg="white")
lbl_cod_data.grid(row=0,column=0)
lbl_bod_data = tk.Label(canvas, text="", font=("Times New Roman", 50, 
"bold"), bg="black", fg="white")
lbl_bod_data.grid(row=1,column=0)
lbl_tss_data = tk.Label(canvas, text="", font=("Times New Roman", 50, 
"bold"), bg="black", fg="white")
lbl_tss_data.grid(row=2,column=0)

update_data_for_cod_bod()  # Starts periodic calling of itself.
root.mainloop()

Answer 1

Actually your code is working but the canvas is covered on top by the lbl_cod_data and so you cannot see it. Try changing all .grid(...) to .place(...) like below:

canvas.place(x=0, y=0)
lbl_cod_data.place(x=50, y=100)
lbl_bod_data.place(x=50, y=200)
lbl_tss_data.place(x=50, y=300)

Then you can see the labels and the canvas together.

However, using label widgets over canvas is not a good design (for example the label widgets cannot have transparent background).

Suggest to use canvas text instead. Below is a modified code based on yours as an example:

import Tkinter as tk
import sqlite3
from constants import DELAY,DB_PATH

def update_data_for_cod_bod():
    conn = sqlite3.connect('ubiqx_db.db')
    c = conn.cursor()
    execute_query = c.execute('''select cod,bod,tss from front_end_data where slave_id=1''')
    result_set = c.fetchall()

    data_for_cod = 0
    data_for_bod = 0
    data_for_tss = 0
    for row in result_set:
        data_for_cod = row[0] # do you actually want += instead?
        data_for_bod = row[1]
        data_for_tss = row[2]
    # use itemconfig() to modify the labels text
    canvas.itemconfig(lbl_cod_data, text="COD             "+str(data_for_cod))
    canvas.itemconfig(lbl_bod_data, text="BOD             "+str(data_for_bod))
    canvas.itemconfig(lbl_tss_data, text="TSS             "+str(data_for_tss))
    root.after(DELAY, update_data_for_cod_bod)  # Call this function again after DELAY ms.

root = tk.Tk()
w, h = root.winfo_screenwidth(), root.winfo_screenheight()
root.overrideredirect(1)
root.geometry("%dx%d+0+0" % (w, h)) # (h, w) in your original code
root.title("COD_BOD")
root.configure(background='black')
root.bind("<Escape>", lambda e: root.quit())

# width=h and height=w in your original code
canvas = tk.Canvas(root, width=w, height=h, highlightthickness=0, bg="dark blue")
canvas.pack()

blackline = canvas.create_line(100, 100, 800, 100, fill="yellow")

lbl_font = ("Times New Roman", 50, "bold")
lbl_cod_data = canvas.create_text(100, 100, text="COD", font=lbl_font, anchor='nw', fill="white")
lbl_bod_data = canvas.create_text(100, 180, text="BOD", font=lbl_font, anchor='nw', fill="green")
lbl_tss_data = canvas.create_text(100, 260, text="TSS", font=lbl_font, anchor='nw', fill="yellow")

update_data_for_cod_bod()  # Starts periodic calling of itself.
root.mainloop()