Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

[FEATURE] QR Code as Mobile Wallpaper #9115

Closed
SaraJaoude opened this issue Sep 20, 2023 · 16 comments · Fixed by #10115 · May be fixed by #9535
Closed

[FEATURE] QR Code as Mobile Wallpaper #9115

SaraJaoude opened this issue Sep 20, 2023 · 16 comments · Fixed by #10115 · May be fixed by #9535
Assignees
Labels
⭐ goal: addition undefined 🔢 points: 8 undefined 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned)

Comments

@SaraJaoude
Copy link
Member

SaraJaoude commented Sep 20, 2023

Description

The ability to export the QR code as wallpaper for your mobile so that this is easier to share when your mobile screen is locked and particularly if you do not have internet (similar to a digital business card).

Rather than just have the QR code, it would be good if this could include the BioDrop logo below it.

Screenshots

No response

Do you want to work on this issue?

No

Additional information

Please share your thoughts on how to implement this.

@SaraJaoude SaraJaoude added ⭐ goal: addition undefined 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet) labels Sep 20, 2023
@github-actions
Copy link
Contributor

To reduce notifications, issues are locked until they are 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned) and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

@github-actions github-actions bot locked and limited conversation to collaborators Sep 20, 2023
@SaraJaoude SaraJaoude added 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned) 🔢 points: 8 undefined and removed 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet) labels Sep 20, 2023
@github-actions
Copy link
Contributor

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

@github-actions github-actions bot unlocked this conversation Sep 20, 2023
@Vijaykv5
Copy link
Member

Hey @SaraJaoude I would like to work on this issue. May you can add some more details and a screenshot also would help

@SaraJaoude
Copy link
Member Author

Hey @SaraJaoude I would like to work on this issue. May you can add some more details and a screenshot also would help

@Vijaykv5 this is an idea which has been given 8 points as we do not have a clear way on how to do this. I cannot add a screenshot because it does not yet exist. Please see what I have added to the Additional Information section of the issue and let us know your thoughts on implementation. We will take a look at this before we assign it to anyone.

@dev-shetty
Copy link
Contributor

The ability to export the QR code as wallpaper for your mobile so that this is easier to share, particularly if you do not have internet.

Do you mean downloading the QR code as a PNG file?

Rather than just have the QR code, it would be good if this could include the BioDrop logo below it.

We can have the BioDrop logo in the middle of the QR code, I found one API that does it (I am not sure whether it is paid or free), there may be alternatives as well.

Also, I generated a few for example from the same API website

QR Code Example 1 QR Code Example 1
QR Code Example 2 QR Code Example 2

@bikrantjajware
Copy link
Contributor

This can be linked to the other issue[8640] for styled QR code. Downloading QR is already an available feature, so with 8640 fixed we can easily export a styled QR code

@SaraJaoude
Copy link
Member Author

@deveesh-shetty thank you for your comments:

For this issue we want to make it convenient for people to add it to the wallpaper on their mobile when their screen is locked.

@akash19coder
Copy link
Contributor

akash19coder commented Oct 1, 2023

For this issue we want to make it convenient for people to add it to the wallpaper on their mobile when their screen is locked.

Are we talking about implementing in-app feature that will allow users to directly set their Biodrop QR code as a lock screen wallpaper on their smartphone?

Also I would like to work on implementing this feature😀. Could you please assign it to me.

@eddiejaoude
Copy link
Member

@akash19coder this feature has a lot of unknowns (8 points), please can you explain how you would approach it and your solution?

@akash19coder
Copy link
Contributor

Are we talking about implementing in-app feature that will allow users to directly set their Biodrop QR code as a lock screen wallpaper on their smartphone?

I think I misunderstood the issue. It's not about an in-app feature to directly set QR code as screen lock wallpaper as it is a system-level operation which would be challenging to perform with an web app. It's about providing a button may be export as wallpaper which on-click would download a beautiful QR code image which can be set as lock screen wallpaper,

Currently setting downloaded QR code looks like the following:

@eddiejaoude
Copy link
Member

Yes we need to have a QR code that fits on the screen correctly and with other more useful information.

My question still remains about how you plan to achieve this issue...

@akash19coder this feature has a lot of unknowns (8 points), please can you explain how you would approach it and your solution?

@akash19coder
Copy link
Contributor

akash19coder commented Oct 4, 2023

@akash19coder this feature has a lot of unknowns (8 points), please can you explain how you would approach it and your solution?

I am thinking about designing a wallpaper by adding the QR code and BioDrop logo using html and tailwind. When the user clicks on the button Export as Wallpaper we would convert HTML into an image(JPEG,PNG) using a library and then download it. I have found multiple libraries that converts HTML into image. Some of them are:
1.html2canvas
2.Puppeteer
3.dom-to-image:
4.Puppeteer
5.PhantomJS
6. html-to-image

@akash19coder
Copy link
Contributor

akash19coder commented Oct 8, 2023

My question still remains about how you plan to achieve this issue...

I have used the following library(may be we can use it if it meets all the requirements) just to demonstrate as of how I am planning to implement it
Library Link

Here is how I have implemented it

Screen.Recording.-.Oct.8.2023.mp4

@akash19coder
Copy link
Contributor

The image on the lock screen appear the following:

@eddiejaoude
Copy link
Member

Thank you, it looks good 👍 , I would be interested to see the code - we are approaching the file limit for Vercel, so not sure how big the library is, we can take a closer look when the PR is created. I will assign the issue to you

@eddiejaoude
Copy link
Member

eddiejaoude commented Jun 8, 2024

Pull Request merged

ℹ️ eddiejaoude has some opened assigned issues: 🔧View assigned issues

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
⭐ goal: addition undefined 🔢 points: 8 undefined 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned)
Projects
None yet
6 participants