Dashboard

Dashboard

Above UI we are going to create by Tkinter for Dashboard in our Bank 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.

    
        root = tk.Toplevel()
        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(self.root, width, height, padding, cornerradius, color, "#585858")
    bg_canvas.place(width=width, height=height, x=win_width / 2 - width / 2, y=win_height / 2 - 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)
            self.width = width
            self.height = height
            self.padding = padding
            self.cornerradius = cornerradius
            self.color = color
  
            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_label(base_frame, color, AppConstant.FONT_SIZE, height, width)

        #Add Heading
        def add_heading_label(base_frame, color, font_size, height, width):
            label_heading = Label(base_frame, text="Bank 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_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/button37.png", "Logout",font=("Lucida Grande",
                                             font_size - 6),command=lambda: logout_click(root, login_root))
            button_logout.pack(side="right", fill=None, expand=False)
          
          
        
    

So we are done with all frame and now draw Deskframe UI.

    
    # Add Deskframe UI

    add_desk_frame(base_frame, color, AppConstant.FONT_SIZE, height, width,self.total_bal, self.total_cust, self.today_credit, self.today_debit)
    
    def add_desk_frame(base_frame, color, font_size, height, width, total_bal, total_cust, today_credit, today_debit):
        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 Balance", total_bal,
                desk_font_count, "images/desk_bluesh.png", "images/total_balance.png", color).grid(row=0, column=0,
                                                                                                 padx=32)
        DeskView(frame_desk_base, desk_button_wid, desk_button_hgt, desk_font, "Total Customer", total_cust,
                desk_font_count, "images/desk_yellow.png", "images/student_desk.png", color).grid(row=0, column=1,
                                                                                              padx=32)
        DeskView(frame_desk_base, desk_button_wid, desk_button_hgt, desk_font, "Today's Credit", today_credit,
                desk_font_count, "images/desk_green.png", "images/todays_credit.png", color).grid(row=0, column=2,
                                                                                                        padx=32)
        DeskView(frame_desk_base, desk_button_wid, desk_button_hgt, desk_font, "Today's Debit", today_debit,
                desk_font_count, "images/desk_orange.png", "images/todays_debit.png", color).grid(row=0, column=3,
                                                                                                   padx=32)
        
    

Here's logic for get total balance in bank.

    
        
        self.total_bal = 0
       
        #Add Total Balance Today 
        self.get_account_table_data()

        def get_account_table_data(self):
            conn = Util.connect_db()
            cursor = conn.cursor()

            status = "Active"
            cursor.execute('SELECT account_number FROM customer where status IS ?', (status,))
            sql_output = cursor.fetchall()

       
            old_credit = 0
            for data in sql_output:
                cursor.execute('SELECT balance FROM statement where account_number IS ?', (data[0],))
                sql_outputTwo = cursor.fetchall()

                count = 0
            for amountdata in sql_outputTwo:
                if count == len(sql_outputTwo) - 1:
                    for items in amountdata:
                        old_credit = old_credit + items
                        count += 1
            self.total_bal = old_credit
    

        

Here's logic for get total number of customer in bank.

    
       
        self.total_cust = 0
       
        #Add total Customer no 
        self.get_total_customer_data()

        def get_total_customer_data(self):
            conn = Util.connect_db()
            cursor = conn.cursor()
            status = "Active"

            cursor.execute('SELECT * FROM customer where status IS ?', (status,))
            sql_output = cursor.fetchall()

            self.total_cust = len(sql_output)

      
        

Here's logic for get total today's credit in bank.

    
   
        self.today_credit = 0
    
        #Add Today Credit Balance
        self.get_today_credit_data()

        def get_today_credit_data(self):
            conn = Util.connect_db()
            cursor = conn.cursor()

            now = datetime.today().strftime('%Y-%m-%d')
            cursor.execute('SELECT credit FROM statement where credit_date IS ?', (now,))
            sql_output = cursor.fetchall()

            old_credit = 0
            for amountdata in sql_output:
                for items in amountdata:
                    old_credit = old_credit + items

            self.today_credit = old_credit

      
        

Here's logic for get total today's debit in bank.

    
   
        self.today_debit = 0
    
        #Add Today Debit Balance
        self.get_today_debit_data()

        def get_today_debit_data(self):
            conn = Util.connect_db()
            cursor = conn.cursor()

            now = datetime.today().strftime('%Y-%m-%d')
            cursor.execute('SELECT debit FROM statement where debit_date IS ?', (now,))
            sql_output = cursor.fetchall()

            old_debit = 0
            for amountdata in sql_output:
                for items in amountdata:
                    old_debit = old_debit + items

     
            self.today_debit = old_debit
        

Now create Actions UI.

    
    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 - lfw / 3, height=lfbw + lfw * 6 / 100, x=width / 5 - 20, y=height * 60 / 100)

        button_add_customer = AddActionFrame(labelframe, lfbw, lfbw, color, "Create Account",
                                            button_font, "images/add_customer.png", command=lambda: add_customer_click(root))
        button_transaction = AddActionFrame(labelframe, lfbw, lfbw, color, "Transaction",
                                            button_font, "images/transaction.png", command=lambda: transaction_click(root))
        button_search_customer = AddActionFrame(labelframe, lfbw, lfbw, color, "Search Customer",
                                             button_font, "images/search_customer.png",
                                            command=lambda: search_customer_click(root))

        button_add_customer.grid(row=0, column=1, padx=(lfbw * 30 / 100))
        button_transaction.grid(row=0, column=2, padx=(lfbw * 30 / 100))
        button_search_customer.grid(row=0, column=3, padx=(lfbw * 30 / 100))



    self.root.attributes('-alpha', 0.0)
    Util.center(self.root)
    self.root.attributes('-alpha', 1.0)
    

When Click Action UI to perform Tasks.

    
def add_customer_click(root):
    root.withdraw()
    AddCustomer(root)


def transaction_click(root):
    root.withdraw()
    Transaction(root)


def search_customer_click(root):
    root.withdraw()
    SearchCustomer(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()
    
    

At last we will manage closing of window

    
    def on_closing():
                        
        root.destroy()
        args[0].deiconify()
                       
    root.protocol("WM_DELETE_WINDOW", on_closing)
                       

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.