feat: colour customisation for QR codes

[akhileshthite]

A colour bar or an input box appears with QR code for customisations.

Files:

Colour input: https://github.com/buidltools/dscan/blob/adaa07878bfef9216f43e0656736e4570af68593/src/js/qrcode.js#L12

HTML: For file: https://github.com/buidltools/dscan/blob/main/src/popup.html For folder: https://github.com/buidltools/dscan/blob/main/src/folderUpload.html

CSS: https://github.com/buidltools/dscan/blob/main/src/css/popup.css

JS: https://github.com/buidltools/dscan/blob/main/src/js/qrcode.js

For development setup and contribution guide, check the main README.md.

[g1mishra]

Hii @akhileshthite I would love to work on this.

Please align with me.

[akhileshthite]

Hii @akhileshthite I would love to work on this.

Please align with me.

Sure :D Go ahead.

[g1mishra]

It was done. PR was raised, please check and merge.

Thanks

[akhileshthite]

It was done. PR was raised, please check and merge.

Thanks

Just tested, It looks amazing! 🔥 Can you do same thing for white colour? There would be two bars side-by-side (white one on left and black one on right).

[g1mishra]

Okay @akhileshthite

[g1mishra]

@akhileshthite, I have added a color picker for white color but having an issue with color contrast, and the google scanner is not able to scan properly.

What's your thought on this?

[akhileshthite]

@akhileshthite, I have added a color picker for white color but having an issue with color contrast, and the google scanner is not able to scan properly.

What's your thought on this?

Okay, I think it's because of the colour combination right?

Push it on different branch let me test.

[g1mishra]

Yes @akhileshthite

Okay, I will push.

After searching on google for a few minutes, I found that the contrast should be 4:1 for the QR code.

[akhileshthite]

Yes @akhileshthite

Okay, I will push.

After searching on google for a few minutes, I found that the contrast should be 4:1 for the QR code.

Okay

[g1mishra]

@akhileshthite I was not able to create a branch in this repo. So I created it in my forked repo.

Here is the branch: https://github.com/g1mishra/dscan/tree/_feature/qr_colorpicker

[akhileshthite]

@akhileshthite, I have added a color picker for white color but having an issue with color contrast, and the google scanner is not able to scan properly.

What's your thought on this?

Just tested. It works. You mean with dark colour backgrounds your scanner is having difficulty?

If you're getting "504 Gateway Time-out" error or dealing with long loading time after scanning, then no worries. It's just the dweb.link gateway issue.

[g1mishra]

Yes @akhileshthite if you choose both colour almost similar. Scanner having difficulty.

So, should I add latest changes as well in the current PR?

[akhileshthite]

Yes @akhileshthite if you choose both colour almost similar. Scanner having difficulty.

So, should I add latest changes as well in the current PR?

Yes. Do the following changes:

• Like I've mentioned earlier, keep the white bar on left and black one on the right.

• Run prettier in the files that you've made changes, the commit message would look something like style: fix code format using prettier
• Merge that branch with your main branch, you can do this by sending a PR to your main.

[g1mishra]

@akhileshthite Done :)