public version

# Group 9

# EC327 Final Project - Group 9 - Metriq Unit Conversion App

---

## Summary

METRIQ is a versatile unit conversion app designed for offline use, allowing for effortless conversions across measurements like length, mass, and energy. 

It has a sleek, simple, and intuitive interface with features like customizable themes, adjustable font size, and the ability to define unique units and conversions, all powered by native calculations for efficiency. 

### Project type

## Getting started

Unit Conversion, Web-based

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

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

### TL;DR 

## Short description

## Add your files

Building a user-friendly app for offline & online unit conversions across various measurements (length, mass, energy, etc.) with additional features such as custom unit options.

- [ ] [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:

### Longer Description

```

cd existing_repo

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

git branch -M master

git push -uf origin master

```

METRIQ is a unit conversion app designed for seamless offline use, converting measurements like length, mass, and energy.

Its user-friendly interface allows customization through themes, font size adjustments for accessibility, and support for 

custom units. Conversion histories can be exported, and all calculations are performed natively using WebAssembly for efficiency. 

Our HELP menu provides instructions for how to use all of our features.

## Integrate with your tools

## Authors

### Group members

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

Sofia Chaoui sofiach@bu.edu

Gidon Gautel gautelg@bu.edu

Phyliss Darko phylissd@bu.edu

Phillip Lim plim1@bu.edu

Ayin (annajayne) Pitman ayinp@bu.edu

## Collaborate with your team

[list of group members, one per line, with WikiName and BU email address  This should be the last item added to your file, and each group member should add their own name as a "signature".]

- [ ] [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)

### Roles

## Test and Deploy

| Name    | Project Lead | Front End | Back End | Documenter | Tester | Total |

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

| Sofia   | 50%          | 0%        | 0%       | 50%        | 0%     | 100%  |

| Gidon   | 50%          | 0%        | 5%       | 35%        | 10%    | 100%  |

| Phyliss | 0%           | 60%       | 0%       | 10%        | 30%    | 100%  |

| Ayin    | 0%           | 40%       | 35%      | 5%         | 20%    | 100%  |

| Phillip | 0%           | 0%        | 60%      | 0%         | 40%    | 100%  |

| **Total** | **100%**   | **100%**  | **100%** | **100%**   | **100%** | **100%** |

Use the built-in continuous integration in GitLab.

[Please also provide a SPECIFIC English-language description of what each group member contributed to the project. ]

- [ ] [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)

Sofia - Created Powerpoint presentation for demo, authored user-facing document, help box instructions, and demo instruction sheet. Coordinated

and scheduled meetings and phone calls, planned and assigned work based on project requirements and features, tested website on lab computers, maintained

consistent communication with professor for any questions/concerns. Conducted continuous check-ins with group to track progress on deadlines,

adjust schedules/assignments/partners/etc. based on feedback. Gathered user feedback from peers in other courses. Wrote the ReadMe.md and came up with both original and final role assignments based on feedback from group. Wrote the README.txt for Issue 2. Completed Issue 6. Was in charge of approving merge requests. Writing this final report, and javadoc documentation alongside Gidon. Also completed issue 1 & came up with app name ideas, polled the group to get "Metriq" as the winner. 

***

# Editing this README

Gidon - Made edits to final presentation slides. Created and uploaded a video as the back-up plan for demo. Created a task tracker to plan and assign work as needed, and track progress in an organized manner. Coordinated group calls and scheduled meetings. Aided Phillip in debugging WebAssembly integration and tested app on lab computers. Completed continuous check-ins with group to see where they are with deadlines, adjusted schedules/assignments/partners/etc. continuously according to feedback. Completed Issue 8. Went through the team's code and added javadoc documentation alongside Sofia. Conducted code integration and resolved merge conflicts. Implemented csv export functionality code.

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.

## Suggestions for a good README

Ayin - Created the plain project for Issue 2. Completed Issue 4 alongside Phyllis, specifically setting up the HTML layout and CSS with flex-bones, etc. Implemented GUI features such as theme/color change and font size, as well as making the logo itself change colors along with the website. Updated custom units

to allow for non-linear conversions (i.e., through a formula). Came up with test inputs for custom units (not including writing the tests themselves).

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.

Phyliss - Completed Issue 4 alongside Ayin. Worked on backend-front end interface. In charge of implementing the "help" pop-up on both 

web-pages, as well as a swap functionality. Optimized the mouse functionality to make it clear when a user clicks on a button (i.e. color/shade change when hovering).FInalized user interface designs.

## Name

Choose a self-explaining name for your project.

Phillip - Completed Issue 5 and Issue 3 individually. Integrated native conversions (WebAssembly) and debugged precision/small

number problem. Ensured that UI uses scientific notation for very big/small numbers. Completed vast majority of unit testing. 

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

---

## Accomplishments

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

1. Custom Units 

2. All Built-in Units Working 

3. Works Offline

4. Theme/ Color change customization added

5. Font Size customization added

6. Export Log conversion option added

7. Logo changes color with themes

8. Native Calculations 

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

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

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

### Minimum requirements

#### Completed

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

1. All required built-in conversions were completed.

2. Metriq has a simple-to-use GUI.

3. Metriq does not require any internet to run. 

## Roadmap

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

## Contributing

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

#### Partially completed

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.

N/A

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.

### Possible features

#### Completed

## Authors and acknowledgment

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

1. Log all conversions to an easily viewable file - COMPLETED. Assigned Credit: 10%

2. Do all calculations natively - COMPLETED. Assigned Credit: 20%

3. Allow the user to input custom units and conversion rules - COMPLETED. Assigned Credit: 20%

## License

For open source projects, say how it is licensed.

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

#### Partially completed

1. Allow the user to adapt all significant aspects of the GUI - MOSTLY COMPLETED. (i) Assigned Credit: 10 % , (ii) 90% completed, (iii) Color/Theme change works, font size change works. However, button input/result placement change was not implemented, as well as change of font itself. 

---

## Execution

### Project Source Code

## Source Code Required to Run

/metriq/css/

- style.css - our styling css code

/metriq/img/

- all images used by our webpage

/metriq/js/vendor

- conversions.wasm - conversions web assembly

- customUnitsLogic.js - javascript code for custom units functionality

- customUnitsLogic.wasm - custom conversions web assembly

- customunits.js - javascript for custom units page

- metriq.js - javascript code for metriq home page and core conversions

- conversions.js - external emscripten code used for wasm compilation

customUnits.html

index.html

- html files for the webpage

## Also Included

/metriq/C_files/

- C-code used for compilation to wasm

/metriq/tests/

- Code used for testing

### Installation

1. Navigate to the group9project repo

2. select the PROJECT-REPORT branch

3. Click the arrow next to 'Code' and download the zip file for the PROJECT-REPORT branch

4. Once downloaded, right click on the file and click 'Extract'

5. Open terminal and change directory to Downloads/group9project-PROJECT-REPORT/metriq/

6. Start a local host using the command: python3 -m http.server

7. This will generate a link. Paste it into a browser of your choice. It will look something like: 0.0.0:8000/index.html

8. If the port number is already in use, just add the port number at the end of the command e.g. python3 –m http.server 8080)

### Usage

How to Use Metriq:

Convert Your Values Using Built-in Conversions: To start, select your unit category, input a value, choose the units, and click “Calculate” to view the results of your conversion. 

Area

Angles

Data Transfer Rate

Digital Storage

Duration

Energy

Force

Length

Mass

Power

Pressure

Speed

Temperature

Volume

Add Your Custom Units: If you want to convert units that are not in our list of built-in conversions, don’t worry! Click on “Custom Units”, enter your units and conversion factor, save them for later use, and voila! You can convert from apples to oranges, bitcoin to USD, and so much more!

Flip Units: Use the flip button (two arrows) to switch between units quickly. 

Export Conversion History: If you’d like a log of your conversion history during your session, click the “Export Conversion Log” button to save your conversions to a CSV file for future reference. 

Switch Themes: Not a fan of blue? Click the “Switch Theme” button to customize our website colors to your liking. 

Font Size: You can adjust font size to your preference by clicking on the “Font Size” button. It will automatically cycle through a few different options, and you can pick your favorite!

FAQs:

Can I use Metriq offline?

Yes, Metriq is available for use offline so that you can reliably make your conversions even if you are 30,000 feet in the air!

---

## Miscellaneous

### Extra features

The webpage has a help pop-up that provides user instructions. It also lets users swap units for ease of use. 

### Challenges

1. We encountered a merge conflict right before our presentation and had to scramble to get this fixed. Generally this project was a great lesson in navigating git in a group environment!

### Supporting material

Metriq_Demo_Presentation_Slides.pptx: Slides presented during demonstration

Demo-v2-vid: Backup demonstration video for the presentation, not used during presentation

### Release

Yes, we agree to release.

###

 No newline at end of file