Custom Name User

Oh god very2 thank you so much...

But I mean is http://markosx.com/marketest/?to=John+Travolta

And Qr code just a name when scanned: John Travolta

Just like that. So a guest invitation can enter the wedding room without writing in guest book. Just scanned by security using qr attendance app

Sorry for my english

sorry I do not understand your question.?

The link param is only to change guest name in this case "john travolta".

Above john travolta I will custom it manually without coding.

And the qr code when scanned just showing text "John Travolta" , not go to
mrmrs - 1

The link params can be whatever you make them.
You do not have to use the exact ones in my code.

It is just showing you how to get the params and use them.

The qr code generation is the same. Just use the url and param that you need.

QR readers from a phone will normally offer to go to the url.

Ah ok i will try to edit your code.

And about qr I use "QR Attendance Control" from playstore

That is why i need a qr code which just auto generated by params. Just show "john travolta" in this case, not go to the link.

If you are scanning with "QR Attendance Control" then I assume it will work as you expect.
QR codes are pretty much the same afaik, the scanning app controls what happens when scanned.

You can probably just use the param as the set url since it is not going to be used

	//https://YOURURL?to=John+Travolta
	
	//-- get the serach param
	
	  var paramsString =    window.location.search
 
//--  get the  qr element
 
	 //-- make params in to object
	 
	let searchParams = new URLSearchParams(paramsString);

//--look for param
 
	var theTo_ = searchParams.get("to") 
//-- set element text based on param
	
	 
	  hypeDocument.getElementById('theto').innerHTML = theTo_
	 
	  var qrel = hypeDocument.getElementById('qrcode')

//-- generate new qr code using madaffandi url + querystring
	var qrcode = new QRCode(qrel, {
		text: theTo_,
 		width: hypeDocument.getElementProperty(qrel, 'width'),
		height: hypeDocument.getElementProperty(qrel, 'height'),
		colorDark : "#000000",
		colorLight : "#ffffff",
		correctLevel : QRCode.CorrectLevel.H
	});
1 Like

Still show the link not name.

See above

When I use qr code generator on the web it's work

I enter John Travolta on the field an when I scan with qr code attendance it show name only like I mean

I do not have an android or the app s cannot test it.
See my edit above

Pretty sure my edit above should work.
But if not then try this one using the google qrcode generator direct url to get the qr code.

userQR2.hype.zip (19.8 KB)

But as I say there is no real difference in how they work if you use the edit I did above.

One thing to remember with this is that requesting the qr code needs internet connection.

4 Likes

it is work like what I want when I upload your hype file. This is the result: https://tinyecosystem.picasso.id/?to=Jason+Statham

But when I make it in my file It's not working.
How to input qrcode.min.js to hype app?

Screen Shot 2021-06-08 at 9.41.18 PM
below is my file.

Screen Shot 2021-06-08 at 9.41.32 PM
below is your file.

You can always just right-click on a Hype file and inspect package contents. The JS file is in the resources' folder. Another option is to export the file and the just snap the desired JS file from the exported resource folder. There is also a trick to use and preview and the right click on the filename on top, but certainly Hype could add a reveal in finder option.

2 Likes

Big thanks for You all....
Hype team is very exelent. Good App, good forum, good team. :wink:

5 Likes

How if I want to place two qr code and two name which the same in one file?

I try to copy "theto" and "qrcode" object it's not working.

Then I copy
"theto" and rename to "thetoopen"
and "qrcode" rename to "qrcodeopen"
and change the html code to this:

	//https://greenhouse.picasso.id/?to=John+Travolta
	
	//-- get the serach param
	
	  var paramsString =    window.location.search
 
//--  get the  qr element
 
	 //-- make params in to object
	 
	let searchParams = new URLSearchParams(paramsString);

//--look for param
 
	var theTo_ = searchParams.get("to")
//-- set element text based on param
	
	 
	  hypeDocument.getElementById('theto').innerHTML = theTo_
	  hypeDocument.getElementById('thetoopen').innerHTML = theTo_

//--  get the  qr element
	  var qrel = hypeDocument.getElementById('qrcode')
	  var qrelopen = hypeDocument.getElementById('qrcodeopen')

//-- generate new qr code using madaffandi url + querystring
	var qrcode = new QRCode(qrel, {
		text: theTo_,
 		width: hypeDocument.getElementProperty(qrel, 'width'),
		height: hypeDocument.getElementProperty(qrel, 'height'),
		colorDark : "#738766",
		colorLight : "#f0f0f0",
		correctLevel : QRCode.CorrectLevel.H
	});
	
		var qrcode = new QRCode(qrelopen, {
		text: theTo_,
 		width: hypeDocument.getElementProperty(qrel, 'width'),
		height: hypeDocument.getElementProperty(qrel, 'height'),
		colorDark : "#738766",
		colorLight : "#f0f0f0",
		correctLevel : QRCode.CorrectLevel.H
	});

Which wrong? sorry I am not a developer. :slight_smile:

The coding is simple.

But you do not say what you query that holds the two names will be ? So I have assumed

https://YOURURL?to1=John+Travolta&to2=Jason+Statham

The simplest way is to use classes for the elements.
Also put the element sets in a group and give the groups a class name and some Additional HTML Attributes.

The code will then look for the group class qrbox and iterate each one it finds.
It will look for the Additional HTML Attributes of each and use these to know which URLSearchParams to use for each.

//https://YOURURL?to1=John+Travolta&to2=Jason+Statham
	
	
	var theElements = document.querySelectorAll('.qrbox')
	 
	 var paramsString =    window.location.search
	  
	 let searchParams = new URLSearchParams(paramsString);
	 	  
	theElements.forEach(qrFunction);

function qrFunction(item, index) {
  	var guestNameParam = item.dataset.name 
	var qrBoxID = item.dataset.qr
	var colorDark = item.dataset.colordark
	var colorLight = item.dataset.colorlight

 var theTo_ = searchParams.get(guestNameParam ) 
	
 thisGuestEl = item.querySelector('.theto')
 var qrel =  item.querySelector('.qrcode')
  
 console.log(colorDark) 
 	 
	thisGuestEl.innerHTML = theTo_
	 
//-- generate new qr code using madaffandi url + querystring
	var qrcode = new QRCode(qrel, {
		text: theTo_,
 		width: hypeDocument.getElementProperty(qrel, 'width'),
		height: hypeDocument.getElementProperty(qrel, 'height'),
		colorDark : colorDark,
		colorLight : colorLight,
		correctLevel : QRCode.CorrectLevel.H
	});
}

userQR3.hype.zip (33.5 KB)


2 Likes

No I mean:
https://YOURURL?to1=John+Travolta

Same name and same qr code:

Screen Shot 2021-06-14 at 7.57.45 AM

The left image is for opening popup, and the right image is inside of invitation.

What I posted will actually do that. You just need to change both the data-name attributes to use the same to param

Also to save people guessing please post your example you are editing. and maybe explain more....

what I mean is like yours, but just used one param not two.
It like this: https://YOURURL?to=John+Travolta
Not like this: https://YOURURL/?to1=John+Travolta&to2=Jason+Statham

And the result like this:
Screen Shot 2021-06-14 at 1.00.03 PM
Same name, and same QR Code.

This is my file:
userQrDuplicate.hype.zip (35.5 KB)

Not at my comp. now but see my last post. It tells you how to do this use your normal param and change the data-name to reflect it.

2 Likes