Staff Attendance Details

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

        self.root.configure(bg="#585858")
        self.root.resizable(width=0, height=0)
        win_width = 920  # 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="Staff Attendance Details", 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")
        
        //Add details frame
        add_details_frame(self.base_frame, self.color, self.height, self.width)

        def add_details_frame(base_frame, color, height, width):
            sfw = width
            sfh = height * 0.87
            label_frame_details = LabelFrame(base_frame, text="Detail",
                                            font=("Lucida Grande", AppConstant.FONT_SIZE - 6), pady=sfw * 2 / 100,
                                            padx=sfw * 2 / 100, bg=color)
            label_frame_details.place(width=sfw, height=sfh, x=0, y=height * 0.12)

        //Staff Id Label
        label_name = Label(self.base_frame, text="Staff Id:  "+AppConstant.STAFF_ID, anchor="w",
                           font=('Calibri', AppConstant.FONT_SIZE - 6), background="#FFFFFF",
                           foreground="#000000")
        label_name.place(width=self.width * 50 / 100, height=self.height * 3 / 100,
                         x=self.width * 3 / 100, y=self.height * 22 / 100)

    

Fetch data from database and show it in table form with the use of "Treeview" of Tkinter.

        db = Util.connect_db()
        cursor = db.cursor()

        cursor.execute('SELECT present_dates, staff_name, contact_no FROM attendance WHERE staff_id = ?',
                       (AppConstant.STAFF_ID,))
        self.sql_output = cursor.fetchall()

        style = ttk.Style()
        style.layout("Custom.Treeview.Heading", [
            ("Custom.Treeheading.cell", {'sticky': 'nswe'}),
            ("Custom.Treeheading.border", {'sticky': 'nswe', 'children': [
                ("Custom.Treeheading.padding", {'sticky': 'nswe', 'children': [
                    ("Custom.Treeheading.image", {'side': 'right', 'sticky': ''}),
                    ("Custom.Treeheading.text", {'sticky': 'we'})
                ]})
            ]}),
        ])
        style.map("Custom.Treeview.Heading", relief=[('active', 'groove'), ('pressed', 'sunken')])
        style.configure("Custom.Treeview", highlightthickness=0, bd=0, font=('Calibri', 11), rowheight=30)

        self.table_heading()

        self.tree = ttk.Treeview(self.base_frame, show='tree', style="Custom.Treeview")
        self.tree.tag_configure('odd', background='#DFEBF6', foreground="#000000", )
        self.tree.tag_configure('even', background='#FFFFFF', foreground="#000000", )
        self.tree.place(width=self.width * 92 / 100, height=self.height * 60 / 100,
                        x=self.width * 3 / 100, y=self.height * 35 / 100)
        self.tree["columns"] = "1", "2", "3"
        self.tree.column("#1", width=128)
        self.tree.column("#0", width=0)

        count = 0
        for data in self.sql_output:
            if count % 2 == 0:
                self.tree.insert('', 'end', values=data, tags=('even',))
            else:
                self.tree.insert('', 'end', values=data, tags=('odd',))
            count = count + 1

        vsb = ttk.Scrollbar(self.base_frame, orient="vertical", command=self.tree.yview)
        vsb.place(x=self.width * 96 / 100, y=self.height * 35 / 100, height=self.height * 60 / 100)

        self.tree.configure(yscrollcommand=vsb.set)

        self.tree.column("#1", anchor=tk.W)
        self.tree.column("#2", anchor=tk.CENTER)
        self.tree.column("#3", anchor=tk.CENTER)
        self.tree.heading("#1", text="Staff Id", anchor=tk.CENTER)
        self.tree.heading("#2", text="Name")
        self.tree.heading("#3", text="Contact No")

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


    

We have created our own heading for table, lets configure it.

    def table_heading(self):

        heading_y = self.height * 29 / 100
        bg_color = "#FF4F00"
        text_color = "#000000"

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

        label_date = Label(self.base_frame, text="Date", anchor="center",
                           font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                           foreground=text_color)
        label_date.place(x=self.width * 8 / 100, y=heading_y, width=self.width * 13 / 100,
                         height=self.height * 5 / 100)

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

        label_status = Label(self.base_frame, text="Status", anchor="center",
                             font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                             foreground=text_color)
        label_status.place(x=self.width * 73 / 100, y=heading_y, width=120, height=self.height * 5 / 100)

    

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)