Dashboard

Dashboard

Above UI we are going to create by Tkinter showing dashboard of our Library management system desktop application. For that first we create a window and configure its title, size and color. Here we are creating a window at Top Level so we can add this window at the top of any other window.

    

        self.root = tk.Toplevel()
        self.root.title("Dashboard")
        self.root.configure(bg="#585858")
        self.root.resizable(width=0, height=0)
        win_width = 1280
        print(1280 * 56.25 / 100)
        win_height = int(1280 * 56.25 / 100)

        self.root.geometry(str(win_width) + "x" + str(win_height))
        Util.center(self.root)

        login_root = None

        if args.__sizeof__() > 0:
            login_root = args[0]

        # Get screen size
        screen_width = self.root.winfo_screenwidth()
        screen_height = self.root.winfo_screenheight()
        Util.set_font_size(screen_width, screen_height, win_width, win_height)

        width = win_width * 96 / 100
        height = win_height * 94 / 100
    

After creation of window, we will add a canvas background.

    
    bg_canvas = RoundBackgroundFrame(root, self.width, self.height, padding, cornerradius, self.color, "#585858") 
    bg_canvas.place(width=self.width, height=self.height, x=win_width / 2 - self.width / 2,y=win_height / 2 - self.height / 2)

    class RoundBackgroundFrame(tk.Canvas):

        def __init__(self, parent, width, height, padding, cornerradius, color, bg):
            tk.Canvas.__init__(self, parent, borderwidth=0, relief="flat", highlightthickness=0, bg=bg)

            original = Image.open("images/corner.png") 
            resized = original.resize((int(40), int(40)), Image.ANTIALIAS) 
            self.image_r_t = ImageTk.PhotoImage(resized)

            original = original.rotate(90, expand=0)
            resized = original.resize((int(40), int(40)), Image.ANTIALIAS)
            self.image_l_t = ImageTk.PhotoImage(resized)

            original = original.rotate(90, expand=0)
            resized = original.resize((int(40), int(40)), Image.ANTIALIAS)
            self.image_l_b = ImageTk.PhotoImage(resized)

            original = original.rotate(90, expand=0)
            resized = original.resize((int(40), int(40)), Image.ANTIALIAS)
            self.image_r_b = ImageTk.PhotoImage(resized)

            self.shape(width, height, padding, cornerradius, color)
            (x0, y0, x1, y1) = self.bbox("all")
            width = (x1 - x0)
            height = (y1 - y0)
            self.configure(width=width, height=height)

        def shape(self, width, height, padding, cornerradius, color):
            self.create_polygon((padding, height - cornerradius - padding, padding, cornerradius + padding,
                        padding + cornerradius, padding, width - padding - cornerradius, padding,
                        width - padding, cornerradius + padding, width - padding,
                        height - cornerradius - padding, width - padding - cornerradius, height - padding,
                        padding + cornerradius, height - padding), fill=color, outline=color)

            self.create_image(width - self.image_r_t.width(), 0, image=self.image_r_t, anchor=NW)
            self.create_image(0, 0, image=self.image_l_t, anchor=NW)
            self.create_image(0, height - self.image_l_b.width(), image=self.image_l_b, anchor=NW)
            self.create_image(width - self.image_r_b.width(), height - self.image_r_b.width(), image=self.image_r_b,anchor=NW)

    

Once your window is created with custom background, we will create a frame with some reduced dimensions.

    
        width = width * 98 / 100
        height = height * 96 / 100
        base_frame = Frame(self.root, width=width, height=height, bg=color)
        bg_canvas.create_window(width / 100, height * 2 / 100, anchor=NW, window=base_frame)


    # Add Heading Name
    add_heading_label(base_frame, color, AppConstant.FONT_SIZE, height, width)

    def add_heading_label(base_frame, color, font_size, height, width):
        label_heading = Label(base_frame, text="Library Management System", anchor=CENTER, bg=color,
                          font=("Lucida Grande", font_size + 6))
        label_heading.place(width=width * 90 / 100, height=height * 7 / 100, x=width * 5 / 100, y=height * 0.5 / 100)
        label_dashboard = Label(base_frame, text="Dashboard", anchor=CENTER, bg=color,
                            font=("Lucida Grande", font_size - 6))
        label_dashboard.place(width=width * 90 / 100, height=height * 4 / 100, x=width * 5 / 100, y=height * 8 / 100)

    # Add line
    add_line_border(base_frame, color, AppConstant.FONT_SIZE, height, width, self.root, login_root)

    def add_line_border(base_frame, color, font_size, height, width, root, login_root):
    
        line_canvas = Canvas(base_frame, bg=color, borderwidth=0, relief="flat", highlightthickness=0)
        line_canvas.place(width=width - 4, height=5, x=2, y=height * 13 / 100)
        line_canvas.create_line(0, 0, width, 0, fill="#787878")
        line_canvas2 = Canvas(base_frame, bg=color, borderwidth=0, relief="flat", highlightthickness=0)
        line_canvas2.place(width=width - 4, height=5, x=2, y=height * 20 / 100)
        line_canvas2.create_line(0, 0, width, 0, fill="#787878")
        frame_name = Frame(base_frame, bg=color)
        frame_name.place(width=width * 94 / 100, x=width * 3 / 100, y=height * 14.3 / 100)
        frame_name.grid_propagate(False)
        label_name = Label(frame_name, font=("Lucida Grande", font_size - 6), text="Hi, " + AppConstant.STAFF_NAME,
                       anchor=CENTER,
                       bg=color)
        label_name.pack(side="left", fill=None, expand=False)
    
        button_logout = RoundedButton(frame_name, 130, 130 / 4.2, color, "images/button3.png", "Logout",
                                  font=("Lucida Grande", font_size - 6),
                                  command= lambda :logout_click(root, login_root))
        button_logout.pack(side="right", fill=None, expand=False)

    add_desk_frame(base_frame, color, AppConstant.FONT_SIZE, height, width)

    def add_desk_frame(base_frame, color, font_size, height, width):
    
        db = Util.connect_db()
        cursor = db.cursor()

        cursor.execute("SELECT COUNT(*) FROM BOOK")
        rows = cursor.fetchone()
        book_count = rows[0]

        cursor.execute("SELECT COUNT(*) FROM STUDENT")
        rows = cursor.fetchone()
        student_count = rows[0]

        current_date = datetime.today().strftime('%Y-%m-%d')
        cursor.execute("SELECT COUNT(*) FROM readers WHERE assign_datetime = ?",(current_date,))
        rows = cursor.fetchone()
        issued_book_count = rows[0]

        cursor.execute("SELECT COUNT(*) FROM readers WHERE return_datetime = ?",(current_date,))
        rows = cursor.fetchone()
        returned_book_count = rows[0]

        desk_button_wid = width * 20 / 100
        desk_button_hgt = width * 10 / 100

        #  print(str(desk_button_wid) + "x" + str(desk_button_hgt))

        frame_desk_base = Frame(base_frame, bg=color)
        frame_desk_base.place(x=width / 2 - desk_button_wid * 2 - 128, y=height * 23 / 100)
        desk_font = ("Lucida Grande", font_size - 4)
        desk_font_count = ("Lucida Grande", font_size + 3)
   
        DeskView(frame_desk_base, desk_button_wid, desk_button_hgt, desk_font, "Total Books", book_count,
             desk_font_count, "images/desk_blue.png", "images/desk_books.png", color).grid(row=0, column=0, padx=32)
    
        DeskView(frame_desk_base, desk_button_wid, desk_button_hgt, desk_font, "Total Students", student_count,
             desk_font_count, "images/desk_green.png", "images/desk_students.png", color).grid(row=0, column=1,
                                                                                               padx=32)
        DeskView(frame_desk_base, desk_button_wid, desk_button_hgt, desk_font, "Total Issued Today", issued_book_count,
             desk_font_count, "images/desk_light_blue.png", "images/desk_issued.png", color).grid(row=0, column=2,
                                                                                                  padx=32)
   
        DeskView(frame_desk_base, desk_button_wid, desk_button_hgt, desk_font, "Total Return Today", returned_book_count,
             desk_font_count, "images/desk_orange.png", "images/desk_return.png", color).grid(row=0, column=3,
                                                                                              padx=32)

    add_action_frame(base_frame, color, AppConstant.FONT_SIZE, height, width, self.root)

    def add_action_frame(base_frame, color, font_size, height, width, root):
        lfw = width * 94 / 100
        lfbw = lfw * 13 / 100
       
        button_font = ("Lucida Grande", font_size - 6)
        labelframe = LabelFrame(base_frame, text="Actions",
                            font=font.Font(family="Lucida Grande", size=13, weight='normal'),
                            pady=lfw * 2 / 100, padx=lfw * 2 / 100, bg=color)
        labelframe.place(width=lfw, height=lfbw + lfw * 6 / 100, x=width * 3 / 100, y=height * 45 / 100)
        button_add_book = AddActionFrame(labelframe, lfbw, lfbw, color, "Add Book",
                                     button_font, "images/add_book.png", command=lambda: add_book_click(root))
        button_add_student = AddActionFrame(labelframe, lfbw, lfbw, color, "Add Student",
                                        button_font, "images/add_student.png", command=lambda: add_student_click(root))
        button_issue_book = AddActionFrame(labelframe, lfbw, lfbw, color, "Issue Book",
                                       button_font, "images/issue_book.png", command=lambda: issue_book_click(root))
        button_return_book = AddActionFrame(labelframe, lfbw, lfbw, color, "Return Book",
                                        button_font, "images/return_book.png", command=lambda: return_book_click(root))
        button_search_book = AddActionFrame(labelframe, lfbw, lfbw, color, "Search Book",
                                        button_font, "images/search_book.png", command=lambda: search_book_click(root))
        button_search_student = AddActionFrame(labelframe, lfbw, lfbw, color, "Search Student",
                                           button_font, "images/search_student.png",
                                           command=lambda: search_student_click(root))
        button_add_book.grid(row=0, column=1, padx=lfbw * 11 / 100)
        button_add_student.grid(row=0, column=2, padx=lfbw * 11 / 100)
        button_issue_book.grid(row=0, column=3, padx=lfbw * 11 / 100)
        button_return_book.grid(row=0, column=4, padx=lfbw * 11 / 100)
        button_search_book.grid(row=0, column=5, padx=lfbw * 11 / 100)
        button_search_student.grid(row=0, column=6, padx=lfbw * 11 / 100)

        
    

Here the code of Click on a action frame.

    

def add_book_click(root):
    root.withdraw()
    AddBook(root)


def add_student_click(root):
    root.withdraw()
    AddStudent(root)


def search_book_click(root):
    root.withdraw()
    SearchBook(root)


def search_student_click(root):
    root.withdraw()
    SearchStudent(root)


def issue_book_click(root):
    root.withdraw()
    Reader(root)


def return_book_click(root):
    root.withdraw()
    ReturnBook(root)

    
    

Here the code of Click on a "LOGOUT" Button.

    

def logout_click(root,login_root):
    db = Util.connect_db()
    cursor = db.cursor()
    key_is_logined = "IS_LOGINED"
    cursor.execute("UPDATE system_setting SET value = ? WHERE key = ?",
                   (False, key_is_logined,))
    db.commit()
    root.destroy()
    Util.center(login_root)
    login_root.deiconify()
    
    

Programmer Mirta is for learning and training. Projects might be simple to improve learning. Projects are constantly reviewed to avoid errors, but we cannot assure full correctness of all content. While using Programmer Mitra, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 2021 by Programmer Mitra. All Rights Reserved.