Dashboard

Dashboard

Above UI we are going to create by Tkinter showing dashboard of our Security 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 * 52 / 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_2, "#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_green.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 = Image.open("images/corner.png")
            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.

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


    # Add Heading Name
    add_heading_label(self.base_frame, color_2, AppConstant.FONT_SIZE, self.height, self.width)
    def add_heading_label(base_frame, color, font_size, height, width):
        label_heading = Label(base_frame, text="Gate Security System", anchor=CENTER, bg=color,
                              font=("Lucida Grande", font_size + 6))
        label_heading.place(width=width , height=height * 7 / 100, x=0, y=0)

        label_dashboard = Label(base_frame, text="Dashboard", anchor=CENTER, bg=color,
                                font=("Lucida Grande", font_size - 6))
        label_dashboard.place(width=width , height=height * 5 / 100, x=0, y=height * 7 / 100)



    visitor_heading = Label(self.base_frame, text="Visitor Detail", anchor=CENTER, bg=self.color,
                              font=("Lucida Grande", AppConstant.FONT_SIZE + 4))
    visitor_heading.place(width=width*10/100, height=height * 7 / 100, x=width*10/100, y=height * 28 / 100)
            
    # Add line
    add_line_border(self.base_frame, self.color, AppConstant.FONT_SIZE, self.height, self.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")


        frame_name = Frame(base_frame, bd=0, background=color)
        frame_name.place(width=width * 94 / 100, x=width * 3 / 100, y=height*15/100)
        frame_name.grid_propagate(False)

        label_name = Label(frame_name, font=("Lucida Grande", font_size - 6), text="Hi, " + AppConstant.STAFF_NAME,
                           anchor=CENTER, background=color)
        label_name.pack(side="left", fill=None, expand=False)

        btn_size=width/7
        button_logout = RoundedButton(frame_name, btn_size, btn_size / 4, color, "images/button3.png", "Logout",
                                      font=("Lucida Grande", int(font_size*85/100)),
                                      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 and logic for get data in Deskframe.

    


    self.add_desk_frame()

    def add_desk_frame(self):
        desk_button_wid = self.width * 16 / 100
        desk_button_hgt = self.width * 10 / 100
        print(str(desk_button_wid) + "x" + str(desk_button_hgt))

        frame_desk_base = Frame(self.base_frame, bg=self.color)
        frame_desk_base.place(x=self.width * 48.5 / 100, y=self.height * 30 / 100)
        desk_font = ("Lucida Grande", int(AppConstant.FONT_SIZE*75/100))
        desk_font_count = ("Lucida Grande", (AppConstant.FONT_SIZE*2))

        db = Util.connect_db()
        cursor = db.cursor()
        cursor.execute('SELECT visitor_id FROM "visitor_detail"')
        count = cursor.fetchall()
        DeskView(frame_desk_base, desk_button_wid, desk_button_hgt, desk_font, "Total Visitor", str(len(count)),
                 desk_font_count, "images/desk_light_blue.png", "images/add_student.png", self.color).grid(row=0,column=2,padx=32)

        cursor.execute('SELECT id FROM "flat_detail"')
        count = cursor.fetchall()
        DeskView(frame_desk_base, desk_button_wid, desk_button_hgt, desk_font, "Total Flat", str(len(count)),
                 desk_font_count, "images/desk_orange.png", "images/home.png", self.color).grid(row=0, column=3,
                 count_desk_base = Frame(self.base_frame, bg=self.color)
        count_desk_base.place(x=self.width * 10 / 100, y=self.height * 22 / 100)

        desk_font = ("Lucida Grande", int(AppConstant.FONT_SIZE * 75 / 100))
        desk_font_count = ("Lucida Grande", (AppConstant.FONT_SIZE * 2))
        icon_size = self.width * 13 / 100

        padY=self.height/12

        cursor.execute('SELECT * FROM "visitor_detail" WHERE status IS ?', ("IN",))
        count = cursor.fetchall()

        DeskCountView(count_desk_base, icon_size, icon_size, desk_font, "Visitors Inside", str(len(count)),
            desk_font_count, "images/count_design_voilet.png", "images/add_student.png", self.color).grid(row=0, column=0, pady=padY)

        cursor.execute('SELECT * FROM "flat_detail" WHERE flat_status IS ?', ("Vacant",))
        count = cursor.fetchall()

        DeskCountView(count_desk_base, icon_size, icon_size, desk_font, "Flats Vacant   ", str(len(count)),
                      desk_font_count, "images/count_design_maroon.png", "images/add_student.png", self.color).grid(
            row=1, column=0, pady=padY)

        today_date="%"+Util.get_date(self)+"%"
        cursor.execute("SELECT * FROM 'visitor_detail' WHERE entry_time LIKE ?", (today_date,))
        count = cursor.fetchall()

        DeskCountView(count_desk_base, icon_size, icon_size, desk_font, "Visitors Today",str(len(count)),
                      desk_font_count, "images/count_design_cream.png", "images/add_student.png", self.color).grid(
            row=0, column=1,padx=50, pady=padY)

        cursor.execute('SELECT * FROM "flat_detail" WHERE flat_status IS ?', ("Occupied",))
        count = cursor.fetchall()

        DeskCountView(count_desk_base, icon_size, icon_size, desk_font, "Flats Occupied", str(len(count)),
                      desk_font_count, "images/count_design_cyan.png", "images/add_student.png", self.color).grid(
            row=1, column=1, padx=50, pady=padY)

        visitor_heading = Label(self.base_frame, text="Visitor Detail", anchor=CENTER, bg=self.color,
                             font=("Lucida Grande", int(AppConstant.FONT_SIZE * 95 / 100)))
        visitor_heading.place(width=self.width * 15 / 100, height=self.height * 7 / 100, x=self.width * 17 / 100, y=self.height * 50 / 100)

        flat_heading = Label(self.base_frame, text="Flat Detail", anchor=CENTER, bg=self.color,
                             font=("Lucida Grande", int(AppConstant.FONT_SIZE * 95 / 100)))
        flat_heading.place(width=self.width * 15 / 100, height=self.height * 7 / 100, x=self.width * 17 / 100, y=self.height * 84 / 100)


   

        
    

Now we draw Actionframe UI.

    

    self.add_action_frame()


    def add_action_frame(self):
        lfw = self.width * 35 / 100
        lfbw = lfw * 30 / 100
        # print(str(lfbw))
        button_font = ("Lucida Grande", AppConstant.FONT_SIZE - 4)
        labelframe = LabelFrame(self.base_frame, text="Actions",
                            font=font.Font(family="Lucida Grande", size=13, weight='normal'),
                            pady=lfw * 2 / 100, padx=lfw * 2 / 100, bg=self.color)
        labelframe.place(width=lfw, height=lfbw + lfw * 11 / 100, x=self.width * 71/100 - lfw / 2, y=self.height * 60 / 100)

        button_add_book = AddActionFrame(labelframe, lfbw, lfbw, self.color, "Visitors",
                                     button_font, "images/add_student.png",
                                     command=lambda: add_visitors_click(self.root, self))
        button_add_student = AddActionFrame(labelframe, lfbw, lfbw, self.color, "Flats",
                                        button_font, "images/home.png", command=lambda: add_flats_click(self.root, self))

        button_add_book.grid(row=0, column=1, padx=lfbw * 34 / 100)
        button_add_student.grid(row=0, column=2, padx=lfbw * 23/ 100)



        
    

Here the code of Click on a action frame.

    

    def add_visitors_click(root, self):
        root.withdraw()
        AddVisitor(root, self)


    def add_flats_click(root, self):
        root.withdraw()
        AddFlat(root, self)

   
    
    

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_LOGGED_IN"
        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.