Basic design description for the gui #90

New issue

Closed

opened 2024-05-03 13:47:30 +02:00 by PatrykHegenberg · 3 comments

PatrykHegenberg commented

2024-05-03 13:47:30 +02:00

(Migrated from github.com)

Summary
Give a basic description how the Gui should look and act.

Description
For easier implementation and consultation, the design of the GUI app should be discussed and recorded in this ticket.

Acceptance Criteria
Which criteria has to be reached to be accepted

The design has been described (text or image)
The behavior was described (text or flowchart)
All developers agree with the design
The design is considered feasible.

Tasks
Which tasks are included to add this feature

Create a basic app design
Describe the expected behavior of the GUI
Discuss the results with the other developers.

Dependencies
Which dependencies are introduced to the project

Dioxus

Estimates
4 hours

Additional Information
None

**Summary** Give a basic description how the Gui should look and act. **Description** For easier implementation and consultation, the design of the GUI app should be discussed and recorded in this ticket. **Acceptance Criteria** Which criteria has to be reached to be accepted - [ ] The design has been described (text or image) - [ ] The behavior was described (text or flowchart) - [ ] All developers agree with the design - [ ] The design is considered feasible. **Tasks** Which tasks are included to add this feature - [ ] Create a basic app design - [ ] Describe the expected behavior of the GUI - [ ] Discuss the results with the other developers. **Dependencies** Which dependencies are introduced to the project - [ ] Dioxus **Estimates** 4 hours **Additional Information** None

PatrykHegenberg commented

2024-05-07 20:13:59 +02:00

(Migrated from github.com)

![Upload_Screen1](https://github.com/PatrykHegenberg/caesar-transfer/assets/112555272/ec9cb90c-3680-45b4-bdc6-4bdaa20bf1ef)

PatrykHegenberg commented

2024-05-09 22:49:54 +02:00

(Migrated from github.com)

** GUI process: **

Start the application: The user starts the GUI.
Selection of send or receive: The user selects between send or receive.
If "Send" is selected:
- The user can select the files to be sent using drag & drop or file picker.
- The user clicks on "Send".
- The screen changes and the user sees a name for the transfer and a matching QR code.
- The transfer is carried out and a progress bar is displayed to the user.
- Once completed, the user will see that the transfer was successful.
When "Receive" is selected:
- The user has an input field for the transfer name or the option to scan a QR code.
- The user clicks on "Start transfer".
- A progress bar is displayed to the user during the transfer.
- The user is shown that the transfer was successful.

Sender GUI:

Receiver GUI:

** GUI process: ** - Start the application: The user starts the GUI. - Selection of send or receive: The user selects between send or receive. - If "Send" is selected: - The user can select the files to be sent using drag & drop or file picker. - The user clicks on "Send". - The screen changes and the user sees a name for the transfer and a matching QR code. - The transfer is carried out and a progress bar is displayed to the user. - Once completed, the user will see that the transfer was successful. - When "Receive" is selected: - The user has an input field for the transfer name or the option to scan a QR code. - The user clicks on "Start transfer". - A progress bar is displayed to the user during the transfer. - The user is shown that the transfer was successful. Sender GUI: ![image](https://github.com/PatrykHegenberg/caesar-transfer/assets/112555272/759028ff-e60b-468e-a1ae-64811cd7e3f9) Receiver GUI: ![image](https://github.com/PatrykHegenberg/caesar-transfer/assets/112555272/02630471-eb3f-4d29-afe8-65de7a7b6d40)

PatrykHegenberg commented

2024-05-28 06:56:01 +02:00

(Migrated from github.com)

Since we are short on time, I would just close this ticket and we will decide which design to use based on a simple A/B test.