Dashboard

Dashboard

Above UI we are going to create by Tkinter for showing dashboard in our Attendance 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.args = args
        self.root = tk.Toplevel()
        self.root.title("Attendance Staff")

        self.root.configure(bg="#585858")
        self.root.resizable(width=0, height=0)
        win_width = 1280
        
        win_height = int(1280 * 56.25 / 100)
        self.root.geometry(str(win_width) + "x" + str(win_height))
        Util.center(self.root)

        # 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)

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

    

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


        bg_canvas = RoundBackgroundFrame(self.root, self.width, self.height, padding, corner_radius, 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)
    

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

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

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

        def add_heading_label(base_frame, color, font_size, height, width):
            label_heading = Label(base_frame, text="Attendance", 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)

        # Add line border
        add_line_border(self.base_frame, self.color, self.height, self.width)
        
        def add_line_border(base_frame, color, height, width):
            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 * 10 / 100)
            line_canvas.create_line(0, 0, width, 0, fill="#787878")
        
        # All Other labels
        add_search_frame(self.base_frame, button_font, self.color, self.height, self.width, date)

        def add_search_frame(base_frame, button_font, color, height, width, date):
            sfw = width * 1.0
            sfh = height * 0.87
            label_frame_search = LabelFrame(base_frame, text="Attendance", font=button_font, pady=sfw * 2 / 100,
                                            padx=sfw * 2 / 100, bg=color)
            label_frame_search.place(width=sfw, height=sfh, x=0, y=height * 0.12)

            label_date = Label(base_frame, text="Date:- " + str(date), anchor=E, bg=color,
                               font=("Lucida Grande", AppConstant.FONT_SIZE - 4))
            label_date.place(width=width * 90 / 100, height=height * 7 / 100, x=width * 5 / 100, y=height * 18 / 100)

            label_all_staff = Label(base_frame, text="All Staff", anchor=W, bg=color,
                                    font=("Lucida Grande", AppConstant.FONT_SIZE + 2))
            label_all_staff.place(width=width * 45 / 100, height=height * 7 / 100, x=width * 4 / 100, y=height * 18 / 100)
    

Here we create our table.

    
    self.staff_table_heading(self.base_frame)

    self.img_checked = ImageTk.PhotoImage(
        Image.open(os.path.join(get_assets_directory(), "checked.png")), master=self)
    self.img_unchecked = ImageTk.PhotoImage(
        Image.open(os.path.join(get_assets_directory(), "unchecked.png")), master=self)

    self.tree = ttk.Treeview(
        self.base_frame, columns=(1, 2, 3, 4), selectmode="extended", show='tree')
    self.tree.place(
        width=self.width * 94 / 100, height=self.height * 50 / 100,
        x=self.width * 3 / 100, y=self.height * 30 / 100)

    style = ttk.Style(self.tree)
    style.configure('TreeView', rowheight=self.height * 5 / 100)
    self.tree.tag_configure("checked", image=self.img_checked)
    self.tree.tag_configure("unchecked", image=self.img_unchecked)

    self.tree.heading('#0', text="")
    self.tree.heading('#1', text="Staff id.")
    self.tree.heading('#2', text="Name")
    self.tree.heading('#3', text="Mobile No.")
    self.tree.heading('#4', text="email id")

    self.tree.column('#0', width=int(self.width * 10 / 100), anchor=tk.CENTER)
    self.tree.bind("<>", self.get_row)
    self.tree.bind("< Button 1>", self.toggle_check)

    

Here we create our table heading.

    
    def staff_table_heading(self, base_frame):
        heading_y = self.height * 25 / 100
        bg_color = "#FF4F00"
        text_color = "#000000"

        canvas = Canvas(base_frame, width=self.width * 94 / 100 - 2, height=self.height * 6 / 100)
        canvas.create_rectangle(0, 0, self.width * 94 / 100, self.height * 7 / 100, fill=bg_color)
        canvas.place(height=self.height * 6 / 100,
                     x=self.width * 3 / 100 - 1, y=heading_y - 5)

        label_sno = ttk.Label(base_frame, text="Present/Absent", anchor="center",
                              font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'),
                              background=bg_color, foreground=text_color)
        label_sno.place(width=self.width * 10 / 100, height=self.height * 5 / 100,
                        x=self.width * 3 / 100 + 5, y=heading_y)

        label_id = ttk.Label(base_frame, text="Staff id", anchor="center",
                             font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                             foreground=text_color)
        label_id.place(width=self.width * 10 / 100, height=self.height * 5 / 100,
                       x=self.width * 15 / 100, y=heading_y)

        label_name = ttk.Label(base_frame, text="Staff Name", anchor="center",
                               font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                               foreground=text_color)
        label_name.place(width=self.width * 10 / 100, height=self.height * 5 / 100,
                         x=self.width * 35 / 100, y=heading_y)

        label_contact = ttk.Label(base_frame, text="Contact No.", anchor="center",
                                  font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                                  foreground=text_color)
        label_contact.place(width=self.width * 10 / 100, height=self.height * 5 / 100,
                            x=self.width * 57 / 100, y=heading_y)

        label_email = ttk.Label(base_frame, text="Email Id", anchor="center",
                                font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                                foreground=text_color)
        label_email.place(width=self.width * 10 / 100, height=self.height * 5 / 100,
                          x=self.width * 77 / 100, y=heading_y)

     

Here we retrieve the data from database.


        db = Util.connect_db()
        cursor = db.cursor()
        cursor.execute('SELECT * FROM staff_data')
        self.sql_output = cursor.fetchall()
        self.update_table(self.sql_output, date)

        def update_table(self, rows, date):
            self.tree.delete(*self.tree.get_children())
            for i in rows:
                if i[6] == "present" and i[7] == date:
                    self.tree.insert("", "end", value=i, tags="checked")
                elif i[6] == "absent":
                    self.tree.insert("", "end", value=i, tags="unchecked")
                else:
                    self.tree.insert("", "end", value=i, tags="unchecked")
                    
        def toggle_check(self, event):
            rowid = self.tree.identify_row(event.y)
            tag = self.tree.item(rowid, "tags")[0]
            tags = list(self.tree.item(rowid, "tags"))
            tags.remove(tag)
            self.tree.item(rowid, tag=tags)

            if tag == "checked":
                AppConstant.IS_PRESENT = "absent"
                self.tree.item(rowid, tag="unchecked")
            else:
                AppConstant.IS_PRESENT = "present"
                self.tree.item(rowid, tag="checked")

        def get_row(self, event):
            item = self.tree.item(self.tree.focus())

            today = datetime.datetime.today()
            date = today.strftime("%d-%m-%y")

            db = Util.connect_db()
            cursor = db.cursor()
            cursor.execute("UPDATE staff_data SET is_present = ?, present_date = ?  WHERE staff_id = ?",
                           (AppConstant.IS_PRESENT, date, item['values'][0],))

            cursor.execute('SELECT * FROM attendance WHERE present_dates = ? AND staff_id =?', (date, item['values'][0],))
            self.sql_output = cursor.fetchall()

            if len(self.sql_output) == 0:
                cursor.execute(
                    'INSERT INTO attendance(staff_id, staff_name, contact_no, present_dates) VALUES(?,?,?,?)',
                    (item['values'][0], item['values'][1], "Present", date,))

            else:
                cursor.execute("DELETE FROM attendance WHERE staff_id = ? AND present_dates = ?",
                               (item['values'][0], date,))

            db.commit()
    

Here we create buttons and perform its click.


    def show_staff_button(self):
        btn_manage = RoundedButton(self.base_frame, 250, 130 / 2.8, self.color, "images/button3.png",
                                    "Manage Staff",
                                    font=("Lucida Grande", AppConstant.FONT_SIZE - 2),
                                    command=lambda: navigate_to_staff_management(self.root))
        btn_manage.place(x=50, y=self.height * 85 / 100)

        btn_attend = RoundedButton(self.base_frame, 250, 130 / 2.8, self.color, "images/button3.png",
                                   "Show Attendance",
                                   font=("Lucida Grande", AppConstant.FONT_SIZE - 2),
                                   command=lambda: navigate_to_show_attendance(self.root))
        btn_attend.place(x=self.width / 2 - 125, y=self.height * 85 / 100)

        btn_submit = RoundedButton(self.base_frame, 250, 130 / 2.8, self.color, "images/button3.png",
                                   "Submit",
                                    font=("Lucida Grande", AppConstant.FONT_SIZE - 2),
                                    command=lambda: self.navigate_to_login(self.root))
        btn_submit.place(x=self.width - 300, y=self.height * 85 / 100)


    def navigate_to_login(self, root):
        AttendanceDashboard.destroy(root)
        self.args[0].deiconify()

    def navigate_to_show_attendance(root):
        ShowAttendance(root)

    def navigate_to_staff_management(root):
        ManageStaff(root)


At last we will manage closing of window


        def on_closing():
            self.root.destroy()
            args[0].deiconify()

        self.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.