Extending QROptions

[nodescan-admin]

Hi,

is it possible with this Javascript implementation to extend the QROptions as can be done with the PHP version? I would like to make circular QR codes with an svg logo in the center, like these examples.

https://github.com/chillerlan/php-qrcode/blob/main/examples/svgWithLogo.php
https://github.com/chillerlan/php-qrcode/blob/main/examples/svgRoundQuietzone.php

If it is possible but requires some custom javascript, I would appreciate a brief example/starting point. If it's not possible I will look for other ways.

Thanks.

[codemasher]

Hi, yes the options class is supposed to work similar to the PHP version and can be extended (with some limitations).

js-qrcode/src/QROptions.js

Lines 359 to 388 in 2d66a57

	/**
	* because javascript is dumb, and we can't call getters and setters directly we have to this silly workaround.
	* if your inherited options class uses magic getters and setters, add the relevant property names to this array
	* and call _fromIterable() afterwards:
	*
	* constructor($options = null){
	* super();
	* this.__workaround__.push('myMagicProp');
	* this._fromIterable($options)
	* }
	*
	*
	* let o = new MyExtendedOptions({myMagicProp: 'foo', ...});
	*
	* @protected
	*/
	__workaround__ = [
	'canvasMimeType',
	'circleRadius',
	'eccLevel',
	'logoSpaceHeight',
	'logoSpaceWidth',
	'logoSpaceStartX',
	'logoSpaceStartY',
	'maskPattern',
	'quietzoneSize',
	'version',
	'versionMin',
	'versionMax',
	];

[nodescan-admin]

Thank you for your reply and changing it to a Discussion. I did wonder if that might be better. I will try.

[codemasher]

I haven't yet updated the library (it's supposed to be similar to v5 of the PHP version), so some internals might not yet work as intended - use at your own risk :)

[nodescan-admin]

Hi,

I worked on translating the (https://github.com/chillerlan/php-qrcode/blob/main/examples/svgRoundQuietzone.php] example to JavasScript. It is almost working with a few (hopefully minor) issues:

1. The circle is not completely filled in. It's a diamond shape...??

2. The QR code is not diplayed in the browser but when I copy the SVG data from the console.log output and paste it into an online SVG viewer, it displays properly (apart from issue 1).

3. 'dotColors' is logged as null even though it is the options... (Maybe related to 2 but I suspect not)

If you have time could you please take a look? (Sorry the code formatting was messed up so I attached it a text file.)

RoundQuietzoneSVGoutput.txt

If you don't have time I will keep plugging away....
Thanks

[codemasher]

Hey, it would be super helpful if you'd post a self-contained example based on the HTML ones, so that I don't have to debug to get it running at all.
However, at a first glance, the IDE reported an error in the checkIfInsideCircle() method, that might be the issue:

  if(Math.pow(($dx, 2) + Math.pow($dy, 2)) <= Math.pow($radius, 2)){
    return true;
  }  

It is supposed to be:

  if((Math.pow($dx, 2) + Math.pow($dy, 2)) <= Math.pow($radius, 2)){
    return true;
  }  

In PHP is just braced to avoid ambiguity (according to my PHPCS settings).

[nodescan-admin]

Thank you. That was it on the main issue. Very nice. I will create a self-contained example and try to add the logo in the middle too.

[codemasher]

Another thing i noticed is that the 1 module wide line is 4 modules away from the QR Code - it is supposed to be the quiet zone so that the symbol can be properly identified. Is this intentional?

[nodescan-admin]

No. I see what you mean but thats's not intentional. I was trying to replicate your original php example. Do you have any idea which block/function to look at?

[codemasher]

It depends on the quiet zone size over here:

https://github.com/chillerlan/php-qrcode/blob/900c8aea4f233cd8f3d3047de8978b987aa0a317/examples/svgRoundQuietzone.php#L86-L108

and the call is over here:

https://github.com/chillerlan/php-qrcode/blob/900c8aea4f233cd8f3d3047de8978b987aa0a317/examples/svgRoundQuietzone.php#L38-L41

I guess there may be better ways to do this, but I don't have the brain juice for it currently.