openui5-qrcode

openui5-qrcode is a SAPUI5 Custom Control that allow you to generate and easily embed QR Code inside your SAPUI5 Application

Demo

You can checkout a demo with different configuration parameter here: https://stermi.github.io/openui5-qrcode/test/demo/

Usage

Configure manifest.json

Add the library to sap.ui5 dependencies list and configure the resourceRoots to point where you uploaded the custom library.

"sap.ui5": {
    ...
	"dependencies": {
		"minUI5Version": "1.30.0",
		"libs": {
    		...
			"it.designfuture.qrcode": {}
		}
	},
	"resourceRoots": {
		"it.designfuture.qrcode": "./thirdparty/it/designfuture/qrcode/"
	}
}

Add the custom control inside an XML View

First of all add the namespace to the View

xmlns:df="it.designfuture.qrcode"

And than you can simply add the QRCode custom control

<df:QRCode
	text="OpenUI5 Rocks!"
	width="256"
	height="256"
	colorDark="#000000"
	colorLight="#ffffff"
	correctLevel="2"
/>

Parameters

| Name | Type | Default| Description | :---- | :------------------- | :---- | :--------- | | text | string | "" | Text embedded in the QRCode | width | int | 256 | QRCode's width | height | int | 256 | QRCode's height | colorDark | string | "#000000" | HTML color (black/#ffffff) of the dark part of the QRCode | colorLight | string | "#ffffff" | HTML color (white/#ffffff) of the dark part of the QRCode | correctLevel | int | 2 | Text embedded in the QRCode

Methods

| Name | Description | :---- | :------------------- | | reDraw | Draw the QRCode. If the QR Code does not exist it creates a new one, if it already exist it just refresh it | clear | Clear the QR Code | getText | Return the text of the QR Code | setText | Set a new text of the QR Code | getWidth | Return the width of the QR Code | setWidth | Set the width of the QR Code | getHeight | Return the text of the QR Code | setHeight | Set the height of the QR Code | getColorDark | Return the RGB dark color of the QR Code | setColorDark | Set the RGB dark color of the QR Code | getText | Return the text of the QR Code | getColorLight | Return the RGB light color of the QR Code | setColorLight | Set the RGB light color of the QR Code | getCorrectLevel | Return the Error Correction Level of the QR Code | setCorrectLevel | Set the Error Correction Level of the QR Code

Build

If you would like to extend and customize the control, you can easily do that but re-building the code with just a simple Grunt command:

npm install
grunt build

Credits

Emanuele Ricci

• Email: [email protected]
• Twitter: @StErMi

License

This project is licensed under the Apache 2.0 License - see the LICENSE.md file for details