Dash QR Manager

Dash Python
,
1

Hello everyone!

I just wanted to share a custom component I made for Dash. Dash QR manager is a wrapper around react-google-qrcode and react-qr-reader. It allows you to create and read QR codes in Dash.

GitHub
pypi

cheers!

7 Likes
2

@toumaske Intriguing … this came up yesterday w a contact. Would you happen to have an example of it working in action? I’ve had a couple of people try to use Dash apps with local camera’s (e.g. another contact wanted to create some augmented reality workflow), and the tricky part seemed to be related to ports/network/security between the device and the Dash app running in the browser on the (phone, ipad, etc).

3

Hey @toumaske , this is awesome! Do you know if i can pass some additional data along with the URL? I was thinking something along the lines of json? example below:

json_string = {
    "url": "http://example.com",
    "Id": "1234",
    "Name": "Example",
}

thanks!

4

Hello @dashamateur, Thanks!
here’s how you can encode a json into a qr code:

import dash_qr_manager as dqm
import dash
import dash_html_components as html
import json

app = dash.Dash(__name__)

json_data = {
    'url': 'http://example.com',
    'Id': '1234',
    'Name': 'Example',
}

json_data_string = json.dumps(json_data).replace('"', '\\"')


app.layout = html.Div(
    children=[
        dqm.DashQrGenerator(
            id='qr-code',
            data=json_data_string,
            framed=True,
        )
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)

Result:

WhatsApp Image 2024-02-13 at 18.35.05_6d6f7d3b
WhatsApp Image 2024-02-13 at 18.35.05_6d6f7d3b967×1600 53.5 KB

1 Like
5

Hello @DaveG, apologies for the delayed response… I deployed it on my server using Docker and tested it on my iPhone, using both Safari and Chrome, and it works. Here is the code:

import dash_qr_manager as dqm
import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        dqm.DashQrReader(
            id='qr-code-reader',
            style={'width': '50%'}
        ),
        html.Div(id='qr-code-data')
    ]
)


@app.callback(
    Output('qr-code-data', 'children'),
    Input('qr-code-reader', 'result')
)
def code(qr_code_data):
    return qr_code_data


if __name__ == '__main__':
    app.run_server(debug=True)

Dockerfile:

FROM python:3.11.4-slim-buster
WORKDIR /app
ADD . /app/
RUN pip install --no-cache-dir -r requirements.txt
EXPOSE 8050
CMD ["python", "main.py"]