nandium / routemaker Goto Github PK

Current

Future

Migration to Vue 3 will allow us to use Vue Ionic and deliver an Android version of the application

Vue version: 3

Current behavior:
Drawing of bounding boxes on HTML canvas makes use of Vue-Konva library which converts Konva classes into Vue components.

Expected behavior:
We are shifting over to Vue3 for web-android integration. However, Vue-Konva library's support for Vue3 has a lot of problems so far. We would like to refactor the code such that Konva library will be used directly and Vue-Konva dependency removed.

Steps to reproduce:
The current Vue-Konva code can be found at user_interface/. The same code can be overwritten without Vue-Konva in a new PR.

Other information:
Email [email protected] for more info. Thank you.

Problem

So far cannot find a way to reproduce consistently

Diagram

If you upload an image, then navigate to the About page and navigate back to home, Diagram 1 will be seen.

Expected behaviour

The image should still be there after page navigations

Diagram 1

Right now, this requires two clicks, one to de-select the handhold/foothold, and another to select the foothold/handhold.

• Add refreshToken endpoint
• Add resend confirmationCode endpoint
• Add forget password flow
• Refactor database to show display names in comments and routes (Anonymous names sucks for UX)
  • Add comments endpoint need to change (Add display name before insertion)
  • Database global secondary indexing need to change (Add display name, remove routeURL)
  • Add route endpoint need to change (Add display name before insertion)
  • Get route details need to change (Stop querying Cognito for display name before returning response)
• Update swagger, postman and google docs API Documentation accordingly

Currently the numbering can be hard to read with dark backgrounds.

Potential solution

https://konvajs.org/docs/styling/Fill_Stroke_Order.html

Currently, the route photos can only be downloaded. The plan is to enable uploading of photos onto cloud and share with others.

Microservices

1. Bounding Box Prediction (Existing)
2. User Account Management
3. Route Storage and Sharing System
4. Bouldering Gym Management

Currently, the documentation can be found on /docs, but it is not nicely formatted and does not cover every single scenario for the endpoints

To fix:

• Currently, not enough visual / UX feedback to the user, might need to add more alerts and toasts (after logging in/out, after signing up, after confirmation, transition to confirmation, after deleting account)
• Handle axios errors properly according to their guide
• Find a way to tell the user that email already exists during sign up
• Find a way to redirect the user to confirmation page if they have not confirmed their email
• Add forget password?

Summary

Currently, gym selection uses google embed maps. When a user selects a gym from dropdown, the embed map displays the location.

With Mapbox Web, we can show all the gyms in the country once a country is selected. The user can then select the gym from the dropdown or the map display. We can also enhance the gym request page such that the user can also use a map search toolbar to search and select the gym on the map and the coordinates can be sent to backend instead of postal code.

Add a link below the export images so that people know where to find the application

Summary

On /gyms page and /gyms/request page. Clicking on country text should focus on the input. Works on chrome and explorer but not on firefox.

Solution that seems to work

But not sure if not using pure ionic label will break for some browsers or mobile version etc
ionic-team/ionic-framework#6306

Problem

When editing the climbing route on mobile, the navbar takes up too much space.

Solution

Hide the navbar when the user has scrolled until the button segments.
Only for this page (/home), mainly for mobile.

Diagram

Left corner of the boxes are numbers which are in front of the boxes just opacity zero. So it is not possible to click on those areas to trigger the boxes.

Fix

Place the v-rect boxes in front of the v-text numbers in BoundingBox.vue

Left corner is the number

Summary

• Home page
• Dragging up past a certain point will hide navbar and sticky the button components
• If buttons overflow, make it draggable instead of creating a new row

• Refresh access token when expired
• Add forget password feature
• Add resend verification code for email

• Add the endpoint to get routes by user which calls route DB for route details and gym DB to for gymNames then combine them together
• Add user routes with high level details to a new index
• Add countryCode to routes so that when routes are retrieved by user, gym informations can be retrieved by using it as partition key

• Censor bad words in comments and route titles (https://www.npmjs.com/package/bad-words)
• Reported route details (ID, number of reports) to be pushed to telegram channel
• Report user endpoint for reporting users with reason inputs from frontend (Options for users to choose)
• Add local aws function not exposed to the internet for enabling privileged users
• Allow deletion of routes and comments for privileged users
• Allow banning of users for privileged users
• Limit one comment per user for each post

Problem

Model not working well for spray wall

Possible issue

Only have 100 images for training, improvements can be done

Problem

When downloading a route image, the resolution is much less than the original.

Possible solution

Konva.pixelRatio = 1 was done previously to improve canvas interactions. This may reduce the pixel ratio when exporting to download.

Possible fix

https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html

stage.toDataURL({  
   pixelRatio: 2  // or other value you need
})

Users need to fill in a gym request form where admins will vet before adding to database.

A form for users to fill in if their climbing gym is not in the database

Tends to happen when images have very high resolutions. Need investigation to reproduce consistently.

Currently, the user can pinch zoom the picture to any degree. We want to restrict it such that the picture cannot be zoomed out from the original size.

Expected behavior

• Tapping in drawing mode does not create new boxes unless the boxes are of minimal dimension (1px by 1px?)

Page to view and filter routes by the gym.
Maybe default can be sort by timestamp, upvotes so that spammy entries will be below

Idea

Filter ideas

Problem

On mobile, after uploading the photo and scrolling down, user may find difficulty scrolling back up. This is due to the fact that the HTML canvas containing the uploaded photo responds to the finger scrolling up by shifting the image within the frame.
(Shifting the image within the frame is an intended feature)

Possible solution

Modify the canvas listener so that when the user drags up the canvas, the screen gets scrolled up instead (When image can no longer be shifted up due to boundary constraints)

Only needs to modify tap listener, not click listener.

Possibly modify this function (Single finger canvas listener)?
https://github.com/yarkhinephyo/yolo_bouldering/blob/182ee8aeb930589526e89da24cdd2323ece6878b/ionic_user_interface/src/components/wall-image-viewer/stageListeners.ts#L125

Possible challenge

It is difficult to test on mobile browser. What I did was, I hosted on another github repo for myself to test. I think you can skip step 2, 3 if you host on like Netlify.

1. Add the endpoints in ionic_user_interface/.env.development.local into ionic_user_interface/.env.production.local
2. Add a new env variable called VUE_APP_PRODUCTION_ROUTE=/{repo_name}
3. Replace {repo_name} with your repo name
4. npm run build
5. Deploy the build directory

Don't have to follow this. If you have a better way to test for mobile browser, it will be good.

Summary

Watermark of exported photos are not clearly visible

Expected

A way to make it more visible. White borders around the words?

Photo

Allow reasonable characters for comments.
Considering English and emojis.

https://github.com/yarkhinephyo/yolo_bouldering/blob/182ee8aeb930589526e89da24cdd2323ece6878b/lambda_backend/route_microservice/src/common/schema.ts#L127

Common functions in lambda_backend/route_microservice/src

Problem

For prediction model for bounding box, the deployed model gives slightly worse results than the running locally. Note the boxes near the person's leg.

Running locally

Results from dev endpoint

Possible issue

Browser compression to reduce image size for uploading plays a part
https://github.com/yarkhinephyo/yolo_bouldering/blob/c2c6949d1781a412434ba231af63bd34e78580b9/ionic_user_interface/src/composables/usePhotoGallery.ts#L42

However, even after removing that portion, the result is still slightly different

Currently, the use case is such that users inform developers of the gyms and developers add manually into Gym Database. But we would like to allow users to add any gym in the frontend which will filter for climbing gym locations.

Currently, the canvas is fixed size with relative to the screen. To be exact the width is 9/10 of the device width and the height is the same as rescaled image.

A toggle to full screen mode for canvas will be convenient especially for mobile users.

What it should look like