Javascript event that triggers python script

Question

I have a python script that generates a QR code (saved as a .png) and a webpage. I am trying to make a javascript button trigger the python script to generate an image, and replace the filler image I have on the HTML page.

Process:

User clicks button --> python script runs --> python returns QR code to webpage

Heres the sample HTML:

<html>
    <body>
        <img id="qrcode_container" src="assets/filler_image.png" width="35%">
        <p></p>
        <button onclick="document.getElementById('qrcode_container').src=
            'assets/sampleQR.png'">Generate Code</button>
    </body>
</html>

But this simply replaces the image with a pre-made one.

Here is the python code:

import pyqrcode, uuid, png
uuid_raw = uuid.uuid4()
uuid_string = str(uuid_raw)
print(real_code)
qrImage = pyqrcode.create(uuid_string)
qrImage.png(uuid_string+'.png', scale=16)

So ideally I would like to have the button on the webpage trigger the script to run, then replace the filler image on the webpage with the new QR code, as well as return the UUID. I've checked out frameworks like Django and Flask, but they seem overkill for a webpage I'm only using to generate an image. Should I use PHP to trigger the event?

You really outta give more information about your stack. Is Javascript running inside Node.js or is it plain javascript running on a static HTML page which is being served by a server? — BhargavPatel
– BhargavPatel, Commented May 5, 2017 at 20:32

gforce301 · Accepted Answer · 2017-05-05 20:34:51Z

1

Just point the new src of your image at the your python script. Assuming your script returns an image.

<html>
<body>
    <img id="qrcode_container" src="assets/filler_image.png" width="35%">
    <p></p>
    <button onclick="document.getElementById('qrcode_container').src=
        '***PATH TO PYTHON SCRIPT HERE***'">Generate Code</button>
</body>

answered May 5, 2017 at 20:34

gforce301

2,9841 gold badge22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BhargavPatel Over a year ago

That would simply download the Python script. He wishes to have the python script execute and generate a new QR code which is rendered in the image tag.

gforce301 Over a year ago

What do you mean "That would simply download the Python script"? If your web server is set up correctly it would "execute" the Python script and "download" the result. I've done exactly what I have in this answer hundreds of times. If the result of a server side script is an image then you can point an image tag directly at the script.

BhargavPatel · Accepted Answer · 2017-05-05 20:37:55Z

1

There can be a hacky solution where you can get Python and Javascript to communicate, but the best solution here, would be to implement a single endpoint and service requests in Python.

Yes, using Django or Flask would be an overkill, but using something like Falcon should suffice. Below is a sample Falcon program that would suffice.

# sample.py
import falcon
import json

class QRResource:
    def on_post(self, req, resp, text):
        # generate QR code at a destination
        output = {
            'path': 'path accessable by user',
            'uuid': "UUID HERE"
        }

        resp.body = json.dumps(quote)

api = falcon.API()
api.add_route('/qr', QRResource())

answered May 5, 2017 at 20:37

BhargavPatel

1731 silver badge7 bronze badges

Collectives™ on Stack Overflow

Javascript event that triggers python script

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related