QrCode eye rounded not working

[shoaib039]

I try a lot to make QrCode eye in rounded but i failed, if any help from anyone my big problem will be solved. Its very urgent for me to do this task.

Here i found code, but its doing only circle inner Eye. I try very hard but i failed 😞😞😞😞

Please guide me, I want Rounded Corner Like this, Any Help Very much appreciated. Thank You

[codemasher]

Hi, you may want to check out this example: #150 (comment)

[shoaib039]

Thank you for your reply, I try your mentioned code but i am getting Exception error.

I test This Both
https://gist.github.com/codemasher/bca41e32def36509ef1cf8d2056e51ba
https://github.com/chillerlan/php-qrcode/blob/0cac0fa73889e3450dafbed964ae8e3cab42d124/examples/svgWithLogo.php

[codemasher]

Both of the examples should work perfectly fine if you're using the dev-main branch. Without knowing anything about your code or setup it's hard to remote-diagnose. The error says that the given class is not valid, which should not happen if you ran the unmodified examples you linked. If nothing helps, try cloning the library, run composer install in the library root and try running the examples.

[shoaib039]

yes i used library with Laravel, Normally working. Just Your given Code not working wit Laravel.

Here i use Core PHP and i able to generate with your given code, but with error. Here is heart in QrCode i dont want heart in code. I try but i unable to fix that.

Actually I want to generate QRCode Same Like This.

[shoaib039]

Just Inner And Outer Eye of QrCode Rounded and Nothing else. Please help me its nothing for you, You can do it easily :)

[codemasher]

yes i used library with Laravel, Normally working. Just Your given Code not working wit Laravel.

Many people use this library with Laravel and i haven't heard yet that it isn't working. Still, i don't see any of your code and what you're trying to do and how. I cannot help you this way.

[shoaib039]

<?php
/**
 * @created      05.03.2022
 * @author       smiley <smiley@chillerlan.net>
 * @copyright    2022 smiley
 * @license      MIT
 *
 * @noinspection PhpComposerExtensionStubsInspection
 */
namespace chillerlan\QRCode;
use chillerlan\QRCode\{QRCode, QRCodeException, QROptions};
use chillerlan\QRCode\Common\EccLevel;
use chillerlan\QRCode\Data\QRMatrix;
use chillerlan\QRCode\Output\{QROutputInterface, QRMarkupSVG};

/*
 * Class definition
 */

/**
 * Create SVG QR Codes with embedded logos (that are also SVG)
 */
class QRSvgWithLogoAndCustomShapes extends QRMarkupSVG{

	/**
	 * @inheritDoc
	 */
	protected function paths():string{
		// make sure connect paths is enabled
		$this->options->connectPaths = true;
		// empty the default value to remove the fill* attributes from the <path> elements
		$this->options->markupDark   = '';
		$this->options->markupLight  = '';

		$size = (int)ceil($this->moduleCount * $this->options->svgLogoScale);

		// we're calling QRMatrix::setLogoSpace() manually, so QROptions::$addLogoSpace has no effect here
		$this->matrix->setLogoSpace($size, $size);

		// generate the path element(s) - in this case it's just one element as we've "disabled" several options
		$svg = parent::paths();
		// now we're lazy modifying the generated path to add the custom shapes for the finder patterns
		$svg = str_replace('"/>', $this->getFinderPatterns().'"/>', $svg);
		// and add the custom logo
		$svg .= $this->getLogo();

		return $svg;
	}

	/**
	 * returns a path segment for a single module
	 *
	 * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
	 */
	protected function module(int $x, int $y, int $M_TYPE):string{

		if(
			!$this->matrix->check($x, $y)
			// we're skipping the finder patterns here
			|| $this->matrix->checkType($x, $y, QRMatrix::M_FINDER)
			|| $this->matrix->checkType($x, $y, QRMatrix::M_FINDER_DOT)
		){
			return '';
		}

		// return a heart shape (or any custom shape for that matter)
		return sprintf('M%1$s %2$s m0.5,0.96 l-0.412,-0.412 a0.3 0.3 0 0 1 0.412,-0.435 a0.3 0.3 0 0 1 0.412,0.435Z', $x, $y);
	}

	/**
	 * returns a custom path for the 3 finder patterns
	 */
	protected function getFinderPatterns():string{

		$qz  = $this->options->addQuietzone ? $this->options->quietzoneSize : 0;
		// the positions for the finder patterns (top left corner)
		// $this->moduleCount includes 2* the quiet zone size already so we need to take this into account
		$pos = [
			[0 + $qz, 0 + $qz],
			[0 + $qz, $this->moduleCount - $qz - 7],
			[$this->moduleCount - $qz - 7, 0 + $qz],
		];

		// the custom path for one finder pattern - the first move (M) is parametrized, the rest are relative coordinates
		$path   = 'M%1$s,%2$s m2,0 h3 q2,0 2,2 v3 q0,2 -2,2 h-3 q-2,0 -2,-2 v-3 q0,-2 2,-2z m0,1 q-1,0 -1,1 v3 q0,1 1,1 h3 q1,0 1,-1 v-3 q0,-1 -1,-1z m0,2.5 a1.5,1.5 0 1 0 3,0 a1.5,1.5 0 1 0 -3,0Z';
		$finder = [];

		foreach($pos as $coord){
			[$ix, $iy] = $coord;
			$finder[]  = sprintf($path, $ix, $iy);
		}

		return implode(' ', $finder);
	}

	/**
	 * returns a <g> element that contains the SVG logo and positions it properly within the QR Code
	 *
	 * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
	 * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
	 */
	protected function getLogo():string{
		// @todo: customize the <g> element to your liking (css class, style...)
		return sprintf(
			'%5$s<g transform="translate(%1$s %1$s) scale(%2$s)" class="%3$s">%5$s	%4$s%5$s</g>',
			($this->moduleCount - ($this->moduleCount * $this->options->svgLogoScale)) / 2,
			$this->options->svgLogoScale,
			$this->options->svgLogoCssClass,
			file_get_contents($this->options->svgLogo),
			$this->options->eol
		);
	}

}


/**
 * augment the QROptions class
 */
class RoundedCornerSVGQRCodeOutput extends QROptions{
	// path to svg logo
	protected string $svgLogo;
	// logo scale in % of QR Code size, clamped to 10%-30%
	protected float $svgLogoScale = 0.20;
	// css class for the logo (defined in $svgDefs)
	protected string $svgLogoCssClass = '';

	// check logo
	protected function set_svgLogo(string $svgLogo):void{

		if(!file_exists($svgLogo) || !is_readable($svgLogo)){
			throw new QRCodeException('invalid svg logo');
		}

		// @todo: validate svg

		$this->svgLogo = $svgLogo;
	}

	// clamp logo scale
	protected function set_svgLogoScale(float $svgLogoScale):void{
		$this->svgLogoScale = max(0.05, min(0.3, $svgLogoScale));
	}

}

[shoaib039]

This is My Code Its in Vendor. My Project Code root Dir is metalicshop.
-> metalicshop\vendor\chillerlan\php-qrcode\src

[shoaib039]

<?php

namespace App\Http\Controllers\admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Route;



use chillerlan\QRCode\{QRCode, QROptions};
use chillerlan\QRCode\Output\{QROutputInterface, QRMarkupSVG};
use chillerlan\QRCode\Common\EccLevel;
use chillerlan\QRCode\RoundedCornerSVGQRCodeOutput;

class Test extends Controller
{
	
	
	/*
	* Test Action
	*/
	public function Testcallback(Request $req)
	{
		$action = $req->action;
		
		if($action == 'img'){
			return $this->imgTest();
		}
		
	}
	
	public function imgTest()
	{
		$url = 'https://github.com/chillerlan/php-qrcode/issues/127';

		$options = new RoundedCornerSVGQRCodeOutput([
			// SVG logo options (see extended class below)
			'svgLogo'             => public_path('assets/temp/twitter.svg'), // logo from: https://github.com/simple-icons/simple-icons
			'svgLogoScale'        => 0.25,
			'svgLogoCssClass'     => 'dark',
			// QROptions
			'version'             => 5,
			'quietzoneSize'       => 4,
			'outputType'          => QROutputInterface::CUSTOM,
			'outputInterface'     => QRSvgWithLogoAndCustomShapes::class,
			'imageBase64'         => false,
			// ECC level H is necessary when using logos
			'eccLevel'            => EccLevel::H,
			'addQuietzone'        => true,
			'svgDefs'             => '
			<linearGradient id="gradient" x1="100%" y2="100%">
				<stop stop-color="#D70071" offset="0"/>
				<stop stop-color="#9C4E97" offset="0.5"/>
				<stop stop-color="#0035A9" offset="1"/>
			</linearGradient>
			<style><![CDATA[
				.dark{fill: url(#gradient);}
				.light{fill: #eaeaea;}
			]]></style>',
		]);

		header('content-type: image/svg+xml');
		return (new QRCode($options))->render($url);

	}
	
}

[shoaib039]

This is my Laravel Controller
Edited: I updated my code here.

[codemasher]

Ahh, now we're getting closer. The problem is that your classes do not adhere to the PSR-4 autoloading standard. The example is self-contained so that it can be run to try things out without hassle. But if you want to include it in your project, you have to split it up and put each class in its own file, with the class name being the file name: QRSvgWithLogoAndCustomShapes.php -> class QRSvgWithLogoAndCustomShapes{} and so on. Additionally, the classes are supposed to reside in your project, with a namespace that matches your directory structure.

[shoaib039]

Thank you very Much. I did same as what you told me to do, now QrCode Generating fine. And i also Modified Source as per my Requiremets. And just one thing left, There is Circle eye in QrCode but i want rounded.

Generated QrCode Eye is in circle form.

I want Like this

Please help me to modify Code :)

[codemasher]

I'm pretty sure that you can figure this out in the same way i had to figure it out. There's the exact shape you need already in this example SVG. All you need to do is to size it up so that it fits into the path in the getFinderPatterns() method and replace the 2 half circles.
There are also several tutorials and docs listed in the SVG output class:

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
• http://apex.infogridpacific.com/SVG/svg-tutorial-path-intro.html#Lesson15