QR Code scanner

(Chris Hardy) #1

Hi guys,

I’ve read a few post on installing a QR code scanner to a website created with hype. I’ve managed to created one using a html widget but I can find a way to get the data scan from the html widget to display in a ‘text’ element in hype.

So for example - I need to be able to go to my first scene, scan a qr code and then the data read from the QR code to be placed in a ‘text’ element in hype. Is it possible?

Any help would be really appreciated,




Can you share what you have so far?

You can set the Inner HTML of any Hype element using:

hypeDocument.getElementById('idofElement').innerHTML = QRtext;

But if you are capturing that text within an HTML widget, you won’t be able to affect the contents of the parent window (this is a security risk) without using the Postmessage system. A bit more info on that here.

(Chris Hardy) #3

Hi Daniel.

Please see my example in the file below. Its basically a QR code scanner within a html widget but its useless in its current form. Thanks


Hey Chris,

It looks like you’ll need to either pass that input field into the parent frame (and a Hype element) using the Postmessage system, or run your QR code JS code within the Hype window. To do that, you would need to run the initialization function as an ‘On Scene Load’ JS function, and then move the rawgit URL to the head area. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

(Mark Hunte) #5

I was just writing this quick example up… ( lol, pretty much what @Daniel has suggested )

I have not changed the initial coding that does the reading or the way the input works.

But I have moved most of it to a Hype function which runs at scene load to add the on change listener to the input.

Also changed the input slightly to give it a name and id, which makes it accessible elsewhere like the hype function.

The QR script git hub link is moved to the head file

I have not really played with QR Codes/readers/scanners so I am not sure this does what you want. ( the original code you are using) but this should give you an idea of using it within hype if you use such an input.

QRReader.hype.zip (47.2 KB)

(Chris Hardy) #6

Excellent :slight_smile: thanks so much for this guys!