QR CODE Generator

Wappler General How To
#1

Hi im using this code to generate dynamically a Qr code: https://codepen.io/davidshimjs/pen/NdBYrg

I found this here: Got a few questions on qrcodes , scanning of qrcodes and photos

So my problem is that i cannot pass a dynamic value through the java script, i tryed using the function dmx.parse like as i read it here: https://docs.wappler.io/t/using-app-connect-with-javascript-functions/15765

Here is my code:

qrcode.php

<dmx-value id="var2" dmx-bind:value="'www.google.com'"></dmx-value>

<script src='https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js'></script><script  src="js/qr.js"></script>

qr.js

var qrcode = new QRCode("qrcode");


function makeCode () {		
	var elText = dmx.parse('var2.value');
	
	if (!elText.value) {
		alert("Input a text");
		elText.focus();
		return;
	}
	
	qrcode.makeCode(elText.value);
}

makeCode();

$("#text").
	on("blur", function () {
		makeCode();
	}).
	on("keydown", function (e) {
		if (e.keyCode == 13) {
			makeCode();
		}
	});

I would appreciate any help you can give me. Thanks in advance.

Barcode Generator and Printing Integration
#2

Try maybe putting a closed brackets like this:

dmx.parse('form_updateDrag.submit()')

that’s how I ended up getting my values through to some custom JS i was using on my previous project.

#3

Hi @Philip_J, thnks for your reply, i think i did that without succes:

var elText = dmx.parse('var2.value');
#4

Ok, sorry. It’s been a while since I had that all working and forgotten most of it now :slight_smile:

1 Like
#5

I find that if you are running external/your own JS functions, ‘Flows’ is the way to go. Add a flow to your page and use a Run Javascript action step. You can pass the parameters in the action step too, using the data binding picker or by typing a string/value.

In my project, I have added the function, with some adjustments, so that it allows two parameters. The text (in my case I am passing the text input element that holds the text) to be encoded and the id name of the element where the code will be displayed. You can use the second function to clear the code element:

window.qrcodeS = {};

function makeqrCode(qrtextel, qrdiv) {
    var elText = document.getElementById(qrtextel);
    if (!elText.value) {
        elText.focus();
        return;
    }
    else {
        if (typeof qrcodeS[qrdiv] !== 'undefined') { qrcodeS[qrdiv].clear(); $('#' + qrdiv).html(''); }
        qrcodeS[qrdiv] = new QRCode(document.getElementById(qrdiv), { width: '300', height: '300', useSVG: true });
        qrcodeS[qrdiv].makeCode(elText.value);
    }
}

function clearqrCode(qrdiv) {
    return new Promise(function (resolve, reject) {
        if (typeof qrcodeS[qrdiv] !== 'undefined') { qrcodeS[qrdiv].clear(); return resolve(qrdiv); }
        else { return resolve(qrdiv); }
    });
}
#6

While flows is a better way to call KS functions, in this case, I think what you are missing is calling the makeCode function after page has been loaded.

Its only after that that dmx variables actually have a value to return.

$(function() {
makeCode() ;
}) ;

Above is the shorthand for jQuery’s loaded event.

Lastly, I assume you will most likely be doing this dynamically on say a button click with a dynamic URL… and not on page load.
In that case, using flow is the better option as it allows you to pass dmx values to JS function without having to use dmx.parse or variables in the JS function code.

1 Like
#7

@sid You’re right. I trigger mine through a button press. As it is dynamic data being asked for in the post triggered on blur or enter key you could use a dynamic event on the text input or enter press - triggering the flow that then calls the custom function (which contains the makeCode call). If it is being displayed on page load, and you can be sure that the data has been set by then (if coming from a SC / API call), your suggestion is good. You could still use a flow by adding a Dynamic Event for Ready to the App element of the page - it might make using data binding easier.

Alternatively to the data-binding/dmx.parse you can set the value you want in a global variable (create in App structure by clicking App > Define Global Data) and access it through
dmx.global.get('variable name');
and alter it using
dmx.global.set('variable name', 'new value');
That way the value is available in both the data pickers and the custom js

#8

Hi, thnks @bpj and @sid, I hadn’t thought about using flow, good idea, thanks. I ended up using this API to generate the QR codes since it is faster and easier: http://goqr.me/api/ so my code is simpler now:

<img dmx-bind:src="'https://api.qrserver.com/v1/create-qr-code/?size=250x250&amp;data='+var2.value+'&amp;color=0000ff'">

I hope this post helps others who want to use a QR code system in their applications.

2 Likes
#9

I haven’t used the Global Data thing yet. I don’t think it was there when I started using Wappler. Or maybe I didn’t notice. Anyways, that also is a good place to store values.

#10

Thanks for this tip. Is this service a demo, or is it forever free?
I should do the thing you explained (generation of QR with a dynamic parameter, visualization by the customer, and then if he wants he can save the image with the right click)
But I didn’t understand if it then expires.

#11

Hi, forever is a long time :wink:, I have been using it for a year in an app only for internal use within a company and it works well.
I don’t quite understand what you mean by expiring, once you dynamically generate the Qr code it stays on the screen for as long as you want and it will be generated again if the variable is the same.
If you want something more secure, I recommend using java script within your server.