public version

# Group 13

# EC327 Final Project - Group [13] - [FilterPro]

---

## Summary

### Project type

Image Filter - Web App

### TL;DR

FilterPro is a Javascript CSS HTML web app that lets users apply common filters to images which can then be viewed and downloaded.

## Getting started

### Description

To make it easy for you to get started with GitLab, here's a list of recommended next steps.

We wanted to make a lightweight web app that lets users filter their favorite images. We wanted the it to be fast, fun, and easy to use.

Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!

FilterPro accepts images stored as text in a file where the first two lines contain image height and width,

and each row after that lists a pixel's r g b values from 0 to 100 as shown below:

## Add your files

[WIDTH] \n

[HEIGHT] \n

[PIXEL_0_0] \n

[PIXEL_0_1] \n

[PIXEL_0_2]

...

[PIXEL_0_[HEIGHT]-1] \n

[PIXEL_1_0] \n

[PIXEL_1_1] \n

[PIXEL_1_2] \n

...

[PIXEL_1_[HEIGHT]-1] \n

...

[PIXEL_[WIDTH]-1_0] \n

[PIXEL_[WIDTH]-1_1] \n

[PIXEL_[WIDTH]-1_2] \n

...

[PIXEL_[WIDTH]-1_[HEIGHT]-1] \n

- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files

- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:

After a successful upload, the image is stored in a JSON string format in the session storage of the browser.

Users are then free to blur, recolor, grayscale, and try any of the other image modifications options offered on the website.

A histogram shows the counts of the R,G and B values in the image at that point in time.

The image can be fingerprinted. (fingerprinting refers to encoding a string in RGB values, that can later be decoded).

The image after modification can be downloaded to a new text file.

## Authors

### Group members

RichardKalich rmicky@bu.edu Richard Kalich

AlexanderHack alexhack@bu.edu AlexanderHack

WenyuanLiu wenl@bu.edu WenyuanLiu

DenaldaGashi dgashi@bu.edu DenaldaGashi

ZaneElKilany zane2027@bu.edu ZaneElKilany

TymoteuszPardej tpardej@bu.edu Tymoteusz Pardej

JiahaoHe tomhe@bu.edu Jiahao He

### Roles

[The final version of the [role table](https://agile.bu.edu/fw/EC327/ProjectGroups#Roles). ]

| Name:     | Project Lead | Front End 1 | Front End 2 | Back End 1 | Back End 2 | Documenter | Tester | Total |

| --------  | ------------ | ----------  | ----------  | ---------  | ---------- | ---------- | ------ | ----- |

| Alexander |      25      |             |             |     50     |            |            |   25   |  100  |

| Zane      |      25      |      25     |             |            |     50     |            |        |  100  |

| Denalda   |      25      |      50     |             |            |            |            |   25   |  100  |

| Micky     |              |             |      50     |            |            |     50     |        |  100  |

| Tymoteusz |              |             |             |            |     50     |     25     |   25   |  100  |

| Wenyuan   |              |      50     |             |     50     |            |            |        |  100  |

| Jiahao    |              |             |      50     |            |            |     25     |   25   |  100  |

| Total     |     100      |     100     |     100     |    100     |    100     |    100     |  100   |  100  |

Tymoteusz Pardej - Worked on fingerprint adding and decoding, make blue and make green functions, download function, Project Report

Wenyuan Liu - Grey scale

Alexander Hack - File upload and storage, display, blur, recolor, event triggers, general file structure

Jiahao He - Histogram

Zane ElKilany - worked on and completed both the front end HTML & CSS and back end JavaScript for some features, and worked on the final presentation.

Richard Kalich - Created Test images, worked on presentation, Project Report, 

Denalda Gashi -  Created and worked on the Front End HTML & CSS and worked on the project presentation

---

## Accomplishments

### Minimum requirements

#### Completed

Accept an image upload stored in the above format

Display the image to the screen

Recolor the image by zero-ing out all green and blue components of pixels (resulting in a red image)

#### Partially completed

[A list of any minimum requirements not completed or only partially completed]

All minimum requirements completed.

### Possible features

#### Completed

Allow the user to recolor any one color in the image with a different one [5%]

Display a histogram of the colors present in the pixels of the image [%10]

Implement a blurring algorithm that averages each pixel's Red, Green, and Blue values with those of its immediate horizontal and vertical neighbors, in some order. [%10]

Allow the user to convert your image to Grayscale by replacing each pixel color component by the average of its Red, Green, and Blue components. For example, pixel color [100 50 3] would change to [51 51 51] [%10]

Allow the user to add a fingerprint string to the image by converting the string to binary and adding each bit, one by one, to the least significant bit of each pixel's colors. Your app should be able to decode the fingerprint as well. [%20]

#### Partially completed

[A list of possible features that were only partially completed]

---

## Execution

### Project source

All source code can be found in this repository. 

### Installation

1) In the terminal, navigate to your preferred install directory

``` 

cd existing_repo

git remote add origin https://agile.bu.edu/gitlab/ec327-public-projects/2024/group-13.git

git branch -M master

git push -uf origin master

cd <directory>/<subdirectory>

```

2) Git clone the repo there

```

git clone https://agile.bu.edu/gitlab/ec327/projects/group13project.git

```

3) open filterpro.html in a browser of your choice.

## Integrate with your tools

- [ ] [Set up project integrations](https://agile.bu.edu/gitlab/ec327-public-projects/2024/group-13/-/settings/integrations)

### Usage

## Collaborate with your team

Upload an image by clicking the "upload image" button. Try some of our test images in the "TestImages" directory of the repo.

- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)

- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)

- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)

- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)

- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)

Upon a successful file upload, the image will be displayed on the website. The first group of buttons (blur, grayscale, make red), will apply their respective changes to the image below. Chain multiple functions together to get the effect of successive filters being applied. Click "restore" to restore the image to what you originally uploaded.

## Test and Deploy

Toggle the "display histogram" button on or off to display the histogram with the colors present in the image. It will update with each modification of the image.

Use the built-in continuous integration in GitLab.

Recolor a color in the image by entering its RGB code in the input box, choosing what you want to change it to, and hitting "recolor". This function works best on Chrome because the color select popup let's you enter R,G, and B values out of 100 which can be gotten directly from the values in the file that you uploaded. Firefox wants a hex code.

- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)

- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)

- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)

- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)

- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)

Add a fingerprint string to the image by entering it in the text box. The image will change slightly, however the change is more easily detected in the histogram.

Decode the fingerprint string by clicking decode. You can verify that this works by clearing the fingerprint input field once you add a fingerprint and then hitting "decode".

***

Click "download" to download your modified image as a text file at the end of your session.

# Editing this README

If you want to upload your own images, the maximum number of pixels allowed is roughly 82000 due to the way that the image is stored in the browser. Keep in mind that if you are converting an image in a native image format such as a png to the text format, your file will grow in size. The 82000 pixels refers to the number of pixels in the text format after conversion.

When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.

---

## Miscellaneous

## Suggestions for a good README

The uploaded image does not have to be a .txt file. You can write your image to any file extension as long as it adheres the specified format. You can create and verify that your file is correct by opening it in a text editor. Make sure that there are no newlines at the end of your document.

Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.

### Extra features

## Name

Choose a self-explaining name for your project.

Restoring the original image (A user can request that the displayed imagebe reverted back to a state before any change were done.)

## Description

Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.

Updating the preview image in real time (The website can show changes done to the image without a need to refresh the website)

## Badges

On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.

Make the image Blue (changes red and green values of all the pixels to 0)

## Visuals

Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.

Make the image Green (changes red and blue values of all the pixels to 0)

## Installation

Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.

Download the modified image (allows the user to download the image onto their computer in the format given in the project description)

## Usage

Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.

### Challenges

## Support

Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.

Coordinating and distributing work across 7 people.

## Roadmap

If you have ideas for releases in the future, it is a good idea to list them in the README.

Feature dependencies: Downstream features could not be implemented or could not be implemented properly until upstream features were put in place which hurts the group's ability to work in parallel.

## Contributing

State if you are open to contributions and what your requirements are for accepting them.

Having 7 people in the project was a challenge and a blessing, it helped spread the work around, but also was extremely complicated for distributing work

For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.

Thanksgiving break stopped our communications for a while, which slowed down the progress on the project.

You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.

Some technical challenges we faced were:

1. Getting the website to update properly after each filter was applied, without having to reload the website

2. Converting the image data into a data type that was easily managed and changed

3. getting PNGs as well as image data to be accepted as valid inputs

## Authors and acknowledgment

Show your appreciation to those who have contributed to the project.

### Supporting material

## License

For open source projects, say how it is licensed.

[Presentation](https://agile.bu.edu/gitlab/ec327/projects/group13project/-/wikis/Presentation)

## Project status

If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.

### Release

Yes. We voted on it.

### 

 No newline at end of file

3

2

86 91 12

6 21 97

13 12 77

44 53 4

84 82 98

45 37 37

 No newline at end of file