[FEATURE] QR Code as Mobile Wallpaper

[SaraJaoude]

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.

[github-actions[bot]]

To reduce notifications, issues are locked until they are https://github.com/EddieHubCommunity/BioDrop/labels/%F0%9F%8F%81%20status%3A%20ready%20for%20dev and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[github-actions[bot]]

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

[Vijaykv5]

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

[SaraJaoude]

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]

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 2

[bikrantjajware]

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]

@Deveesh-Shetty thank you for your comments:

• Downloading QR code as a PNG file already exists as @bikrantjajware mentioned
• BioDrop logo - this is a separate issue #8640 (these are both independent issues)
• We would rather use a library for this and not a third party API - this can be discussed in #8640

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]

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]

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

[akash19coder]

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]

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]

@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]

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

https://github.com/EddieHubCommunity/BioDrop/assets/72060440/620b5c59-f81f-4493-8187-9f19de2066b2

[akash19coder]

The image on the lock screen appear the following:

[eddiejaoude]

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