bitjson / qr-code Goto Github PK

View Code? Open in Web Editor NEW

1.2K 9.0 58.0 296 KB

A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element.

Home Page: https://qr.bitjson.com/

License: MIT License

TypeScript 56.57% CSS 0.70% HTML 42.24% JavaScript 0.50%

bch bitcoin bitcoin-cash cryptocurrency ethereum qr-code qr-code-component qr-code-generator qr-generator web-component

qr-code's Introduction

`<qr-code>`

A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element. It's just a single, self-contained Web Component.

bitjson-qr-code-demo.mp4

Announcement post – usage guidance and background information
Interactive demo – try the above demo in your browser

Usage

Import <qr-code> using your build system or framework (e.g. npm install @bitjson/qr-code), or use the standalone script in your HTML <head> element:

<script src="https://unpkg.com/@bitjson/[email protected]/dist/qr-code.js"></script>

Then use the component anywhere in your HTML <body> element:

<qr-code contents="https://bitjson.com"></qr-code>

Full Example

Here's an example in pure HTML using most features:

<qr-code
  id="qr1"
  contents="https://bitjson.com/"
  module-color="#1c7d43"
  position-ring-color="#13532d"
  position-center-color="#70c559"
  mask-x-to-y-ratio="1.2"
  style="
    width: 200px;
    height: 200px;
    margin: 2em auto;
    background-color: #fff;
  "
>
  <img src="assets/1.2-x-to-y-ratio-icon.svg" slot="icon" />
</qr-code>

<script>
  document.getElementById('qr1').addEventListener('codeRendered', () => {
    document.getElementById('qr1').animateQRCode('MaterializeIn');
  });
</script>

Animations

Animate in, animate on user interactions like URL hits or detected payments, and/or animate out when the QR code interaction is complete.

Several preset animations are available, simply run them with the element's animateQRCode method:

document.getElementById('qr1').animateQRCode('RadialRipple');

Available built-in presets:

FadeInTopDown
FadeInCenterOut
MaterializeIn
RadialRipple
RadialRippleIn

You can also design your own custom animations! Just pass a function to the qr-code's animateQRCode method, e.g.:

document
  .getElementById('qr1')
  .animateQRCode((targets, _x, _y, _count, entity) => ({
    targets,
    from: entity === 'module' ? Math.random() * 200 : 200,
    duration: 500,
    easing: 'cubic-bezier(.5,0,1,1)',
    web: { opacity: [1, 0], scale: [1, 1.1, 0.5] },
  }));

The built-in presets use this API internally, so review those for guidance and inspiration. Pull request for new presets are welcome!

Animation Previewer

The animation previewer makes fine-tuning animations much easier: try it by cloning this repo and running the live-reloading package script:

git clone https://github.com/bitjson/qr-code.git
cd qr-code
npm ci
npm start

Then work on your animation in src/index.html using the animation previewer (at the bottom right of the window) to test the last-run animation at various speeds, scrub through it manually, or play it in reverse.

Production build

Disable the just-animate player in src/components/qr-code/qr-code.tsx, then build:

npm run build

You can test the built component by pointing the script in index.html to dist/qr-code.js and opening the page via the local filesystem.

qr-code's People

Contributors

Stargazers

Watchers

Forkers

suryatmodulus rogueyoshi irifly christroutner alejandrosuarez jimtendo nanderoo jamesjreynolds tlourenzo cloudnepal ssahgal timelery damien-jang johnathanwhite gorilik324 alial-timimi pageboy-za x5tr ssemiya goofwear networksystemone shaban00 fortihub ericaimhigh1 0xgoerlimainnet kenvindev johnjx wundero valtu4a mm86133 sarnzzle mkfinterests nagarajan ranbeioc fujohnwang tauheedkhan gchacko zhangyuhan2016 michaelycy mz0in rifatdover davgit axemafr itwebmaster hiddenvs thebrandonlucas erhyfspubf dedicatedcloud devdevdany lazoras dimitrk monirsaikat kaziashiqur minibu2020 webstudy323-fork mauriciogior buzz-dee kurdin

qr-code's Issues

Problem via `NPM install ` setup

installing this package using npm install @bitjson/qr-code and importing this way don't worked:

<script src="/node_modules/@bitjson/qr-code/dist/qr-code.js"></script>
<script src="/node_modules/@bitjson/qr-code/dist/qr-code/qr-code.orxjfzvr.js" type="module" crossorigin="true" data-resources-url="/node_modules/@bitjson/qr-code/dist/qr-code/" data-namespace="qr-code"></script>

Or even importing this way:

<script src="/node_modules/@bitjson/qr-code/dist/qr-code.js"></script>

I personally don't want to use CDN because I want to load the script from local storage.

I have the feeling that the package installed during npm install is not updated. Please help me on this.

Vaadin integration

Hi,
I am unable to integrate the component into Vaadin.
Perhaps because of the way the /dist/qr-code.js tries to load the other scripts.

Is it not possible to get a single file to load? It would simplify the integration a lot.
Thank you.

Glitchy QR Rendering when animation ends

Screen.Recording.2024-03-05.at.10.12.44.AM.mov

We ran into this issue and I noticed you can even see it on the demo site. It's not super rare to see the behavior in the video above where the animation performs nicely but then suddenly gets all messed up a moment after the animation ends. It seems to be most common with RadialRippleIn from what I can tell. The simpler animations can experience it too but it's rarer and much more subtle when it happens.

This is in Chrome.

unsafe-eval issue

Hi I'm facing an unsafe-eval issue from my project's CSP rules when installing via npm.

Is there any advice on how to get around this?

Suggestion: QR Code Changes at Designated Interval

Hi,
Is it possible to add a feature that changes the QR Code at designated intervals?

How to export/save result?

Sorry maybe I am missing something but there is no documentation on any method to get the result to save to storage, like Canvas/SVG/PNG. Is this supported?

Can't use with CDN 1.0.2

Reproducing:

I just tried to put:
<script src="https://unpkg.com/@bitjson/[email protected]/dist/qr-code.js"></script>
on my HTML code.

Then I open my browser to my local Apache WEB server at the address https://127.0.0.1 and I ask for my HTML page to load, then in the javascript console I get the following message:

Loading the module at “https://127.0.0.1/js/qr-code/qr-code.orxjfzvr.js” was blocked due to a prohibited MIME type (“text/html”).

Analysis

The script tries to load the following resource (HTTP GET):
https://127.0.0.1/js/qr-code/qr-code.orxjfzvr.js

It's not normal for it to load a local resource

When we look in
https://unpkg.com/@bitjson/[email protected]/dist/qr-code.js

We can see:

d.src=n+"qr-code.orxjfzvr.js" d.setAttribute("type","module")

and:
n=n||a.resourcesUrl,d=(p=t.querySelectorAll("script")).length-1;

and after this:

n=n||a.resourcesUrl,d=(p=t.querySelectorAll("script")).length-1;
...
p=m.getAttribute("data-resources-url"),
!n&&p&&(n=p),
!n&&m.src&&(n=(p=m.src.split("/").slice(0,-1)).join("/")+(p.length?"/":"")+"qr-code/")

n is initialized to a.resourcesUrl if it exists.
If n is not set, it tries to find a data-resources-url attribute on scripts.
If n is still undefined, it takes the path of the current script and adds /qr-code/

Why is data-resources-url poorly defined?

Workaround fix

To do this, I downloaded all the resources requested by the minify script at the following address:
https://unpkg.com/browse/@bitjson/[email protected]/dist/qr-code/

then I placed them in the path indicated in the javascript console (in my case https://127.0.0.1/js/qr-code/)

It was my first bug contribution, please tell me in case I do something wrong

Programmatic rendering

I'm using React and the library doesn't seem to recognize elements generated on the fly. Is there a programmatic way to generate a QR code?

Some necessary Types are missing from QrCodeAttributes

When using the qr-code element with Typescript in React, I'm getting the error Property 'children' does not exist on type 'QrCodeAttributes'.ts(2322). The child is the img element I've put as an icon.

I also get this error for 'style' and 'className', at least one of which is needed to style it!

If I manually add these properties to the QrCodeAttributes Interface in the Node Modules, it builds without problem, but this only works for development. I've currently just ignored the TS errors to get it to build.

Allow to change "roundness" of QR code parts individually

Hi, first of great work, I looked through the source code and I think this project is really nicely done!

I was wondering if you might be open to extend the functionality of this package a bit to allow additional configurations. For I already have done the changes locally, just wondering if you are interested in such a thing.

My proposal looks like this:

<qr-code
  contents="bitcoincash:?r=https://bitjson.com/example-url"
  module-color="#1c7d43"
  position-ring-color="#13532d"
  position-center-color="#70C559"
  module-roundness="1"
  position-ring-roundness="1"
  position-center-roundness="1"
>
  <img src="assets/bch.svg" slot="icon" />
</qr-code>

All roundness settings set to 0.5:

All roundness settings set to 0:

I would also want to expose the errorCorrectionLevel and typeNumber. My last proposal is that maybe squares is not the best naming anymore with those changes and maybe it should be called raw?

Let me know if you have any interest in those changes then I will create a PR!

Low animation performance

With sample content as otpauth://totp/Example:[email protected]?secret=JBSWY3DPEHPK3PXP&issuer=Example
animation produces no more than 3 fps.
It is beautiful, but slowness ruins advantages.