Added natural sorting for images in chapter loading. Added option to invert mouse scroll. Attempted to implement dynamic loading. WebtoonReader will now load 5 images at a time. Plan in future to implement loading previous 5 images upon scrolling to the top.

Author: Aeonss

CustomScroller.py

@@ -1,7 +1,7 @@
 # Referenced from: https://stackoverflow.com/a/56046307
 
 import tkinter as tk
-import os
+import os, re
 from PIL import ImageTk, Image
 
 # Custom infinite seamless vertical image scroller using Tkinter Canvas and Scrollbar
@@ -12,18 +12,24 @@ def __init__(self, master=None, **kw):
         self.path = kw.pop('path', None)
         self.width = kw.pop('width', None)
         self.height = kw.pop('height', None)
+        self.bg = kw.pop('bg', None)
         self.scroll_speed = kw.pop('speed', None)
+        self.image_load = kw.pop('load', None)
+        self.invert = kw.pop('invert', None)
         sw = kw.pop('scrollbarwidth', 10)
         super(ImageScroller, self).__init__(master=master, **kw)
-        self.canvas = tk.Canvas(self, width=self.width, height=self.height, highlightthickness=0, **kw)
+        self.canvas = tk.Canvas(self, width=self.width, height=self.height, bg=self.bg, highlightthickness=0, **kw)
 
-        
-        # List of chapter images
+        # List of images
         self.images = []
 
+        self.scroll_flag = True
+        self.image_index = 0
+
+        
         # Fill the frame with images
         if self.path != "":
-            self.fill()
+            self.fill(self.image_index)
 
         # Create vertical scrollbar
         self.v_scroll = tk.Scrollbar(self, orient='vertical', width=sw)
@@ -61,7 +67,16 @@ def mouse_scroll(self, event):
         elif event.num == 5 or event.delta < 0:
             self.canvas.yview_scroll(self.scroll_speed, "units" )
 
-            #if self.v_scroll.get()[1] == 1.0
+        if self.v_scroll.get()[1] == 1:
+            if self.scroll_flag and self.image_index + self.image_load < len(os.listdir(self.path)):
+                self.image_index += self.image_load
+                self.fill(self.image_index)
+                self.scroll_flag = False
+        
+        if self.v_scroll.get()[1] != 0 and self.v_scroll.get()[1] != 1:
+            self.scroll_flag = True
+                
+            
 
 
     # Mouse drag handling
@@ -73,41 +88,62 @@ def start_scroll(self, event):
 
         # https://anzeljg.github.io/rin2/book2/2405/docs/tkinter/cursors.html
         self.canvas.config(cursor="hand2")
-    
+        
 
     def update_scroll(self, event):  
         deltaX = event.x - self._starting_drag_position[0]
         deltaY = event.y - self._starting_drag_position[1]
         self.canvas.xview('scroll', deltaX, 'units')
-        self.canvas.yview('scroll', deltaY, 'units')
+
+        if self.invert:
+            self.canvas.yview('scroll', -deltaY, 'units')
+        else:
+            self.canvas.yview('scroll', deltaY, 'units')
         self._starting_drag_position =  (event.x, event.y)
-           
 
+        if self.v_scroll.get()[1] == 1:
+            if self.scroll_flag and self.image_index + self.image_load < len(os.listdir(self.path)):
+                self.image_index += self.image_load
+                self.fill(self.image_index)
+                self.scroll_flag = False
+    
+    
     def stop_scroll(self, event):
         self.canvas.config(xscrollincrement=0) 
         self.canvas.config(yscrollincrement=0)
         self.canvas.config(cursor="")
 
+    # Fills the frame with images from the folder path
+    def fill(self, index):
 
+        # Free memory from previous load
+        self.canvas.delete('all')
+        self.images.clear()
 
-    # Fills the frame with images from the folder path
-    def fill(self):
-        if os.path.exists(self.path):
-            # Gets all images from directory and adds to list
-            for name in os.listdir(self.path):
-                img = Image.open(os.path.join(self.path, name))
-                
-                # Rescales all images
-                if img.width != self.width:
-                    scale = img.height / img.width
-                    img = img.resize((self.width, int(self.width * scale)), Image.Resampling.LANCZOS)
-
-                # Adds to list to prevent garbage collection
-                self.images.append(ImageTk.PhotoImage(img))
+        for i in range(self.image_load):
+            if index + i >= len(os.listdir(self.path)):
+                break
 
-            height = 0
-            # Creates each image and updates the height to place next image
-            for i in range(len(self.images)):
-                self.canvas.create_image(0, height, anchor=tk.NW, image=self.images[i])
-                height = height + self.images[i].height()
-    
+            img = Image.open(os.path.join(self.path, self.natural_sort(os.listdir(self.path))[index + i]))
+        
+            # Rescales all images to width
+            if img.width != self.width:
+                scale = img.height / img.width
+                img = img.resize((self.width, int(self.width * scale)), Image.Resampling.LANCZOS)
+
+            # Adds to list to prevent garbage collection
+            self.images.append(ImageTk.PhotoImage(img))
+        
+        height = 0
+        for i in range(len(self.images)):
+            self.canvas.create_image(0, height, anchor=tk.NW, image=self.images[i])
+            height = height + self.images[i].height()
+        
+        self.canvas.yview_moveto(-1)
+
+
+    # Natural sort files
+    def natural_sort(self, l): 
+        convert = lambda text: int(text) if text.isdigit() else text.lower()
+        alphanum_key = lambda key: [convert(c) for c in re.split('([0-9]+)', key)]
+        return sorted(l, key=alphanum_key)

README.md

@@ -20,7 +20,7 @@
 ## 🚀   Features
 * Comfortably read locally stored manga/webtoon
 * Automatically bookmarks each manga/webtoon
-* Configure manga/webtoon width, height, and scroll speed
+* Configure manga/webtoon width, height, scroll speed, and invert mouse scroll
 * Clean and intuitive interface
 
 ## 📝   How To Use
@@ -77,6 +77,8 @@ WebtoonReader will bookmark where you left off on each Manga after each session.
 
 ## 🤖   To Do
 * Squash all the bugs!
+* Automatically load next chapter (if possible) after finishing a chapter
+* Add feature to dynamically load previous pages of a chapter
 
 ## 📘   License
 WebtoonReader is released under the [MIT license](https://github.com/Aeonss/WebtoonReader/blob/master/LICENSE.md).

WebtoonReader.py

@@ -16,15 +16,13 @@
 
 SETTINGS_FILE = os.path.join(Path.home(), "webtoonreader_settings.json")
 
-# To do
-# Add bookmarks of where you left off on a manga
 
 class WebtoonReader:
     def __init__(self):
         # Create settings file in the home directory if it does not exist
         if not os.path.isfile(SETTINGS_FILE):
             with open(SETTINGS_FILE, "a") as f:
-                json.dump({"library" : os.getcwd(), "width" : 720, "height" : 800, "scroll_speed" : 3, "recent_chapter" : "", "recent_chapter_index" : ""}, f)
+                json.dump({"library" : os.getcwd(), "width" : 720, "height" : 800, "scroll_speed" : 3, "recent_chapter" : "", "recent_chapter_index" : "", "load" : 5, "invert_scroll" : False}, f)
                 f.close()
 
 
@@ -35,6 +33,8 @@ def __init__(self):
         self.width = get_json('width')
         self.height = get_json('height')
         self.scroll_speed = get_json('scroll_speed')
+        self.load = get_json('load')
+        self.invert_scroll = get_json('invert_scroll')
 
 
         # Center Window
@@ -44,7 +44,14 @@ def __init__(self):
 
         # ImageScroller
         chapter_path = get_json('recent_chapter')
-        self.frame = ImageScroller(self.window, path=chapter_path, scrollbarwidth=15, width=self.width, height=self.height, speed=self.scroll_speed)
+        self.frame = ImageScroller(self.window, 
+                            path=chapter_path, 
+                            scrollbarwidth=15, 
+                            width=self.width, 
+                            height=self.height, 
+                            speed=self.scroll_speed, 
+                            load=self.load, 
+                            invert=self.invert_scroll)
         self.frame.pack()
         manga = os.path.basename(os.path.dirname(chapter_path))
         self.window.title("[WebtoonReader] - " + manga + ": " + os.path.basename(chapter_path))
@@ -115,7 +122,14 @@ def create_chapter(self, path):
 
         # Updates the image scroller
         self.frame.destroy()
-        self.frame = ImageScroller(self.window, path=chapter_path, scrollbarwidth=15, width=self.width, height=self.height, speed=self.scroll_speed)
+        self.frame = ImageScroller(self.window, 
+                            path=chapter_path, 
+                            scrollbarwidth=15, 
+                            width=self.width, 
+                            height=self.height, 
+                            speed=self.scroll_speed, 
+                            load=self.load, 
+                            invert=self.invert_scroll)
         self.frame.pack()
 
         # Updates settings json
@@ -145,7 +159,14 @@ def next_chapter(self):
 
         # Updates the image scroller
         self.frame.destroy()
-        self.frame = ImageScroller(self.window, path=chapter_path, scrollbarwidth=15, width=self.width, height=self.height, speed=self.scroll_speed)
+        self.frame = ImageScroller(self.window, 
+                            path=chapter_path, 
+                            scrollbarwidth=15, 
+                            width=self.width, 
+                            height=self.height, 
+                            speed=self.scroll_speed, 
+                            load=self.load, 
+                            invert=self.invert_scroll)
         self.frame.pack()
 
         # Updates the settings json
@@ -175,7 +196,14 @@ def prev_chapter(self):
 
         # Updates the image scroller
         self.frame.destroy()
-        self.frame = ImageScroller(self.window, path=chapter_path, scrollbarwidth=15, width=self.width, height=self.height, speed=self.scroll_speed)
+        self.frame = ImageScroller(self.window, 
+                                   path=chapter_path, 
+                                   scrollbarwidth=15, 
+                                   width=self.width, 
+                                   height=self.height, 
+                                   speed=self.scroll_speed, 
+                                   load=self.load, 
+                                   invert=self.invert_scroll)
         self.frame.pack()
 
         # Updates the settings json
@@ -220,24 +248,59 @@ def set_settings(self):
         self.scroll_speed_slider.set(self.scroll_speed)
         self.scroll_speed_slider.pack(pady=10)
         self.scroll_speed_slider.bind("<ButtonRelease-1>", self.update_speed)
+        
+        invert_label = tk.Label(settings, text="Invert Scroll").pack(pady=10)
+        self.invert_checkbox = tk.IntVar()
+        self.checkbutton = tk.Checkbutton(settings, variable=self.invert_checkbox)
+        if self.invert_scroll:
+            self.checkbutton.select()
+        else:
+            self.checkbutton.deselect()
+        self.checkbutton.pack(pady=10)
+        self.checkbutton.bind("<ButtonRelease-1>", self.update_invert)
 
         settings.mainloop()
 
     # Updates width in settings json
     def update_width(self, e):
         self.width = self.width_slider.get()
         update_json('width', self.width_slider.get())
+        self.restart_canvas()
 
     # Updates height in settings json
     def update_height(self, e):
         self.height = self.height_slider.get()
-        update_json('height', self.height_slider.get())
+        update_json('height', self.height_slider.get())  
+        self.restart_canvas()
 
     # Updates scroll speed in settings json
     def update_speed(self, e):
         self.scroll_speed = self.scroll_speed_slider.get()
         update_json('scroll_speed', self.scroll_speed_slider.get())
+        self.restart_canvas()
 
+    def update_invert(self, e):
+        if self.invert_checkbox.get() == 0:
+            update_json('invert_scroll', True)
+            self.invert_scroll = True
+        else:
+            update_json('invert_scroll', False)
+            self.invert_scroll = False
+        self.restart_canvas()
+    
+    
+    def restart_canvas(self):
+        chapter_path = get_json('recent_chapter')
+        self.frame.destroy()
+        self.frame = ImageScroller(self.window, 
+                                   path=chapter_path, 
+                                   scrollbarwidth=15, 
+                                   width=self.width, 
+                                   height=self.height, 
+                                   speed=self.scroll_speed, 
+                                   load=self.load, 
+                                   invert=self.invert_scroll)
+        self.frame.pack()
 
 # Update the json value if key exists, otherwise adds to json
 def update_json(key, value):
@@ -260,7 +323,14 @@ def get_json(key):
             json_file.close()
             return value
     json_file.close()
-    return None
+    
+    # Recreate the settings file if its broken
+    if os.path.isfile(SETTINGS_FILE):
+        os.remove(SETTINGS_FILE)
+        with open(SETTINGS_FILE, "a") as f:
+            json.dump({"library" : os.getcwd(), "width" : 720, "height" : 800, "scroll_speed" : 3, "recent_chapter" : "", "recent_chapter_index" : "", "load" : 5, "invert_scroll" : False}, f)
+            f.close()
+    return get_json(key)
 
 
 # Returns a natural sorted list of absolute paths directories
@@ -269,12 +339,12 @@ def abslistdir(path):
     for root, dirs, files in os.walk(path):
         for dir in dirs:
             list.append(os.path.join(root, dir).replace("\\", "/"))
-    list.sort(key=natural_sort_key)
+    list.sort(key=natural_sort)
     return list
 
 
 # Natural sort a list
-def natural_sort_key(list):
+def natural_sort(list):
     return [int(text) if text.isdigit() else text.lower()
         for text in re.split(re.compile('([0-9]+)'), list)]