Refactor code

Author: ggeerraarrdd

.gitignore

@@ -1,15 +1,3 @@
-####################################################
-# My adds
-
-# macOS
-.DS_Store
-
-# Flask
-flask_session/
-/*_session/
-
-####################################################
-
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]
@@ -69,7 +57,7 @@ cover/
 
 # Django stuff:
 *.log
-local_settings.py
+# local_settings.py
 db.sqlite3
 db.sqlite3-journal
 
@@ -170,3 +158,15 @@ cython_debug/
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
+
+####################################################
+# My adds
+
+# macOS
+.DS_Store
+
+# Flask
+flask_session/
+/*_session/
+
+####################################################

README.md

@@ -4,12 +4,18 @@ Assemble screenshots of web projects for your portfolio
 
 ## Description
 
-Once a web project is done, it's time to document your hard work and show it off. _Portfoliofy!_ makes that process easier by doing all the screenshots for you and assembling them together into portfolio-ready files.
+Once a web project is done, it's time to document your hard work and show it off. _Portfoliofy_ makes that process easier by doing all the screenshots for you and assembling them together into portfolio-ready files.
 
-As of v1.0.0, two files are generated:
+As of v2.0.0, the following files can be generated:
 
-* A desktop browser screenshot (2048x1152)
-* A collage of screenshots for various devices: desktop (1920x1080), laptop (1280x720), tablet (600x800), mobile (230x490).
+* `SCREENSHOTS`
+  * Four image files of screenshots taken in different viewports (desktop - 2160x1360, laptop - 1440x900, tablet - 768x1024, smartphone - 230x490).
+* `MAIN`
+  * An image file of those screenshots overlaid on top schematic diagrams and then collaged together. (See below for an example ouput.)
+* `BROWSER`
+  * A image file of the desktop screenshot overlaid on top of a schematic diagram. (Scroll to the bottom for an example ouput.)
+
+More coming soon!
 
 ![Portfoliofy](/images/portfoliofy1.png)
 
@@ -23,9 +29,10 @@ ALL CONTENTS IN THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY.
 
 ### Dependencies
 
+* CairoSVG==2.7.1
 * Pillow==10.1.0
 * Requests==2.31.0
-* selenium==4.15.0
+* selenium==4.15.2
 
 ### Usage
 
@@ -35,15 +42,36 @@ Clone it!
 git clone https://github.com/ggeerraarrdd/portfoliofy.git
 ```
 
-Go into the project directory and run the command:
+Open `local_settings.py` and change the value of `url` to the one you want to portfoliofy.
+
+Then run the following command:
 
 ```bash
 python portfoliofy.py
 ```
 
-Enter a valid and accessible URL as requested.
+The output files are stored in a subdirectory of the `output` directory.
+
+## Parameters
+
+You can also change the following parameter in `local_settings.py`.
+
+| Parameter         | Type   | Default value | Value range  | Description |
+| ----------------- | ------ | ------------- | ------------ | ----------- |
+| wait              | int    | 2             | 0-60         | Time in seconds to allow URL to load before taking screenshot. |
 
-The output files are stored in a directory inside the `output` directory.
+The `MAIN` and `BROWSER` output files are generated by default but you can stop this default behavior by changing the value of `request` to `False`. You can also customize the output files.
+
+| Parameter         | Type   | Default value | Value range  | Description |
+| ----------------- | ------ | ------------- | ------------ | ----------- |
+| request           | bool   | True          | True, False  | If TRUE, requested output is processed. |
+| format            | string | png           | png          | Format of the final output. |
+| doc_pad_h         | int    | 300           | 0 - 1000     | Left and right padding in pixels of final output. |
+| doc_pad_v         | int    | 200           | 0 - 1000     | Top and bottom padding in pixels of final output. |
+| doc_fill_color    | string | #FFFFFF       | ''           | Background color of final output in 6-digit hex. |
+| base_stroke_color | string | #23445D       | ''           | Stroke color of diagram in 6-digit hex. |
+| base_fill_color   | string | #BAC8D3       | ''           | Fill color of diagram in 6-digit hex. |
+| screenshots       | bool   | True          | True, False  | If TRUE, all screenshots are saved. |
 
 ## Author(s)
 
@@ -57,20 +85,7 @@ The output files are stored in a directory inside the `output` directory.
 
 ### Initial Release
 
-The [initial realease](https://github.com/ggeerraarrdd/portfoliofy/releases/tag/v1.0.0) of _Portfoliofy!_ was submitted as the final project for [CS50P: Introduction to Programming with Python](https://cs50.harvard.edu/python/2022/) (HarvardX, 2023).
-
-[Project brief](https://cs50.harvard.edu/python/2022/project/) as of November 2023:
-
-_The design and implementation of your project is entirely up to you, albeit subject to these requirements:_
-
-* _Your project must be implemented in Python._
-* _Your project must have a main function and three or more additional functions. At least three of those additional functions must be accompanied by tests that can be executed with pytest._
-* _Your main function must be in a file called project.py, which should be in the “root” (i.e., top-level folder) of your project._
-* _Your 3 required custom functions other than main must also be in project.py and defined at the same indentation level as main (i.e., not nested under any classes or functions)._
-* _Your test functions must be in a file called test_project.py, which should also be in the “root” of your project. Be sure they have the same name as your custom functions, prepended with test (test_custom_function, for example, where custom_function is a function you’ve implemented in project.py)._
-* _You are welcome to implement additional classes and functions as you see fit beyond the minimum requirement._
-* _Implementing your project should entail more time and effort than is required by each of the course’s problem sets._
-* _Any pip-installable libraries that your project requires must be listed, one per line, in a file called requirements.txt in the root of your project._
+The [initial realease](https://github.com/ggeerraarrdd/portfoliofy/releases/tag/v1.0.0) of _Portfoliofy_ was submitted as the final project for [CS50P: Introduction to Programming with Python](https://cs50.harvard.edu/python/2022/) (HarvardX, 2023). Read the [project brief](https://cs50.harvard.edu/python/2022/project/) as of November 2023.
 
 ### Future Work
 

helpers.py

@@ -0,0 +1,100 @@
+import os
+from selenium import webdriver
+from PIL import Image
+from time import sleep
+import requests
+from selenium.webdriver.chrome.options import Options
+
+
+def get_screenshot(remote_url, wait, directory_path, input):
+
+    # Set options
+    options = Options()
+    options.add_argument(f"--window-size={input['width_large']},{input['height_large']}")
+    options.add_argument(f"--no-sandbox")
+    options.add_argument(f"--headless")
+
+    # Open Chrome webdriver
+    driver = webdriver.Chrome(options=options)
+    
+    # Take screenshot
+    driver.get(remote_url)
+    sleep(wait)
+    driver.save_screenshot(f"{directory_path}/{input['filename_large']}")
+
+    # Take screenshot
+    driver.close()
+
+    return f"{input['filename_large']} screenshot saved"
+
+
+def get_screenshot_resized(directory_main, directory_screenshots, filename_input, filename_output, new_width, height_crop):
+
+    # Open the PNG image
+    image = Image.open(f"{directory_screenshots}/{filename_input}")
+
+    # Determine aspect ratio
+    # TODO Make this as an argument
+    aspect_ratio = image.height / image.width 
+
+    # Set new height
+    new_height = int(new_width * aspect_ratio)
+
+    # Resize the image
+    resized_image = image.resize((new_width, new_height))
+
+    # Crop image
+    width, height = resized_image.size
+    cropped_image = resized_image.crop((0, 0, width, abs(height - (height - height_crop))))
+
+    # Save the cropped image
+    cropped_image.save(f"{directory_main}/{filename_output}")
+
+    return f"{filename_output} screenshots saved"
+
+
+def get_screenshot_resized_overlaid(base, overlay, lat, lng, directory_path, new_file_name):
+
+    # Open the base image
+    base_image = Image.open(base)
+
+    # Open the overlay image
+    overlay_image = Image.open(overlay)
+
+    # Set coordinates of top-left corner
+    box = (lat, lng)
+
+    # Paste overlay image on top of base image
+    base_image.paste(overlay_image, box)
+
+    # Save image
+    base_image.save(f"{directory_path}/{new_file_name}")
+
+    return f"{directory_path}/{new_file_name}"
+
+
+def get_output_padded(directory, filename_input, filename_output, right, left, top, bottom, color):
+
+    image = Image.open(f"{directory}/{filename_input}") 
+    
+    width, height = image.size 
+    
+    new_width = width + right + left 
+    new_height = height + top + bottom 
+    
+    result = Image.new(image.mode, (new_width, new_height), color) 
+    
+    result.paste(image, (left, top)) 
+    
+    result.save(f"{directory}/{filename_output}") 
+
+    return 1
+
+
+def cleanup(directory_path, file):
+    try:
+        os.remove(f"{directory_path}/{file}")
+        return f"{file} has been deleted"
+    except FileNotFoundError:
+        return f"{file} not in directory"
+    

local_settings.py

@@ -0,0 +1,85 @@
+user_input = {
+    "url": "https://www.nps.gov/",
+    "wait": 2,
+    "output_main": {
+        "request": True,
+        "format": "png",
+        "doc_pad_h": 300,
+        "doc_pad_v": 200,
+        "doc_fill_color": "#FFFFFF",
+        "base_stroke_color": "#23445D",
+        "base_fill_color": "#BAC8D3",
+        "screenshots": True,
+    },
+    "output_browser": {
+        "request": True,
+        "format": "png",
+        "doc_pad_h": 300,
+        "doc_pad_v": 200,
+        "doc_fill_color": "#FFFFFF",
+        "base_stroke_color": "#23445D",
+        "base_fill_color": "#BAC8D3",
+        "screenshots": True,
+    },
+}
+
+
+# ################################################## #
+#
+# DO NOT EDIT below this comment.
+#
+# ################################################## #
+system_input = {
+    "desktop": {
+        "filename_large": "screenshot_desktop_large.png",
+        "width_large": 2160,
+        "height_large": 1360,
+        "filename_medium": "screenshot_desktop_medium.png",
+        "width_medium": 2048,
+        "height_medium": None,
+        "medium_height_crop": 1152,
+        "filename_small": "screenshot_desktop_small.png",
+        "width_small": 1920,
+        "height_small": None,
+        "small_height_crop": 1080,
+    },
+    "laptop": {
+        "filename_large": "screenshot_laptop_large.png",
+        "width_large": 1440,
+        "height_large": 900,
+        "filename_medium": "screenshot_laptop_medium.png",
+        "width_medium": None,
+        "height_medium": None,
+        "medium_height_crop": None,
+        "filename_small": "screenshot_laptop_small.png",
+        "width_small": 1280,
+        "height_small": None,
+        "small_height_crop": 720,
+    },
+    "tablet": {
+        "filename_large": "screenshot_tablet_large.png",
+        "width_large": 768,
+        "height_large": 1024,
+        "filename_medium": "screenshot_tablet_medium.png",
+        "width_medium": None,
+        "height_medium": None,
+        "medium_height_crop": None,
+        "filename_small": "screenshot_tablet_small.png",
+        "width_small": 600,
+        "height_small": None,
+        "small_height_crop": 800,
+    },
+    "smartphone": {
+        "filename_large": "screenshot_smartphone_large.png",
+        "width_large": 430,
+        "height_large": 932,
+        "filename_medium": "screenshot_smartphone_medium.png",
+        "width_medium": None,
+        "height_medium": None,
+        "medium_height_crop": None,
+        "filename_small": "screenshot_smartphone_small.png",
+        "width_small": 230,
+        "height_small": None,
+        "small_height_crop": 490,
+    },
+}