B4J Question [solved] Jserver+HTML+JS

[udg]

Hi all,
I'd like to use a jserver instance to serve a simple HTML page which collects some basic personal data, then calls an external API to receive back a PNG file to be showed on the calling page (or even a different one, it doesn't matter).
I have previous experience serving HTML pages from a B4J-based server, but my knowledge on HTML and Javascript is very limited, so please help (expecially on the JS stuff)

API: http://goqr.me/api/doc/create-qr-code/
BTW, any other similar service will be ok to me.
Form needs to collect input for some basic personal data (Name, Surname, Phone..)

My final goal is to show an introductory message like "Generate your QrCode online!", followed by the form and a button which activates the fetch/httprequest mechanism toward the API and on its way back shows the generated PNG file (eventualy completed by a message like "This is your QrCode").

It could be ok even a different solution where the HTML page collects data then calls an internal handler which generates the QrCode which inn turn calls a different HTML page which finally displays the generated file. It sounds a bit more complicated, but it will be almost fully B4X..

Thank you for your help, hints, code

 

[tchart]

I wrapped a library https://github.com/nayuki/QR-Code-generator to do this.

Rather than mess around with PNG files (as its use was for jServer) one of the methods returns base64 encoded png that you can embed in your response HTML (see here if you are not familar with base64 images in HTML - https://www.base64-image.de/tutorial). Most of the libraries/code on the forum only writes an image.

There are three methods in the library;

EncodeTextToSvgString - returns the QRcode as a SVG string
EncodeTextToBase64 - returns the QRcode as a base64 image (as a string) you can embed
EncodeTextToPNG - writes the QRcode as a png file

 

[tchart]

And heres a really simple example of using it with a server.

 

[udg]

Thank you very much, @tchart
I'll study your example and will try to modify it in order to coincide with my needs.

Edit: I've just looked at your example code. The "index" handler shows code very similar to what I found yesterday on Internet. Can you explain why it contains:
- <form action="/action_page.php"> (reference to php ?)
- console.log(input); (saving in logs?)
The rest is clear. You prepare a text, send it to next handler "qrgen" and receive back a text that is the <img> tag along with its data which is finally "inserted" in the div.
Using Base64 you keep everything under the text umbrella. Very clever and clean, I like it.

BTW, it is along the way I anticipated as " the HTML page collects data then calls an internal handler which generates the QrCode "..so what can I ask more?

udg

 

[tchart]

Thank you very much, @tchart
I'll study your example and will try to modify it in order to coincide with my needs.

Edit: I've just looked at your example code. The "index" handler shows code very similar to what I found yesterday on Internet. Can you explain why it contains:
- <form action="/action_page.php"> (reference to php ?)
- console.log(input); (saving in logs?)
The rest is clear. You prepare a text, send it to next handler "qrgen" and receive back a text that is the <img> tag along with its data which is finally "inserted" in the div.
Using Base64 you keep everything under the text umbrella. Very clever and clean, I like it.

BTW, it is along the way I anticipated as " the HTML page collects data then calls an internal handler which generates the QrCode "..so what can I ask more?

udg

Udg I copied the form from another site. There was a submit button that would use that form action. You can remove this - I forgot to remove it. There is no need for a form action as we are using events on the input field.

So the onkeyup event calls the JavaScript function which calls the qrgen handler. You've figured the rest out. Using the http request this way saves the user having to navigate mutiple pages and makes it more dynamic.

 

[tchart]

Also another reason I didn't want to generate PNG images was becuase I had planned to use it allow users to configure Google 2FA using QR codes. So for security I wanted them to be generated but not stored on the server.

 

[udg]

There was a submit button that would use that form action.

Well, I guess that will be my case too. I need to collect several input fields in order to have the proper text to be sent to the generator.
Is it allowed a <Form> tag without action but with onsubmit? Something like:

<form onsubmit="myFunction()">
Enter name: <input type="text" id="myInput" name="myInput" value="">
Enter phone number: <input type="text" id="myInput2" name="myInput2" value="">
<input type="submit" value="Submit">
</form>

Then in myFunction I will operate on the values from the form and produce the resulting, final text for the qrgenerator. Is it ok?

 

[Erel]

Online example based on B4X QRGenerator: https://www.b4x.com/android/forum/threads/93092/#content

https://b4x.com:51041/qrgenerator/index.html

Tutorial: https://www.b4x.com/android/forum/t...-qr-code-as-part-of-a-server-solution.123704/

 

[udg]

Hi @Erel , do you mind to explain a bit the inner workings of your solution?
From what i see there's a static index.html page which collects data then makes use of some JS code which at some point should call an handler where you generate the qrcode by means of B4XQrGenerator. Finally the code returns to the page and we see it in its predermined slot.
What I miss is:
- understanding of the JS code
- the handler source

Another interesting point could be how this differ from the solutin suggested by @tchart (qr generators apart).

Thank you

 

[Erel]

Of course. Was writing a tutorial: https://www.b4x.com/android/forum/t...-qr-code-as-part-of-a-server-solution.123704/

 

[udg]

Just one word: great!

 

[udg]

A final post for this thread is somewhat due.
Please find attached an HTML test page (extension renamed to txt for uploading as attachment here) that uses the external service as originally asked.
Its code is ugly, but it works. Great part of it is copied from the Internet and adapted (more or less blindly) by me. It took some time but the goal was to have it working and learn something.

For pratical purposes, the solutions by @tchart and @Erel are IMHO highly preferable since they aren't based on any external service, leading to greater control.

udg