Display QRCode in Main UI

Setup, Configuration and Use Widgets
1

Hi,

I have a string item and I would like to create a qrcode from that string and display the qrcode in a page in main ui.
Is there an easy way doing this completely in the UI (without using a seperate tool)?

Thanks!
Marc

2

openHAB has no support for generating QR codes.

Once you have the QR Code as an image, you can place it in the $OH_CONF/html folder and reference it with the URL http://<openhab hostname or IP>:<port probably 8080>/static/<name of image file>

3

Maybe a transformation would be useful for this.

4

If you have a transformation that converts a String to a QR code that would be a great tutorial.

5

In another project I’ve been using https://phpqrcode.sourceforge.net/

6
7

UI is able to do it for binding settings: Binding development question : storage, QR code. We probably miss a wrapper for vue-qrcode used by above mapping, but it should be rather easy to bring as a custom widget or wrapper which will call vue-qrcode with provided value coming out of item state.

2 Likes
8

It would also be useful for this scenario to be able to transform a String channel to a QR code:

Channel documented here:

9

Hi,
I’m just interested in your use cae. What do you want to do with the qr code? Share a guest wifi or something else?

10

Yes, I need the qrcode for the guest wifi sharing. I use openhab to automaticaly recreate the guest wifi password in regular intervals.
I was using HabPanel with a qrcode js library to create and display the qrcode, but as I moved to MainUI a few month ago I was looking for an easy way to add the qrcode.

I try implement as much as possible into openhab which makes it easier for me to keep my cold standby backup and the configuration backup up to date.

11

It wouldn’t be as integrated as something built into OH itself but one approach you could use is to create a webpage using that library and put it in $OH_CONF/html. Stuff put there is served up at http://<hostname or ip>:<port>/static/<filename>. Then you could use a webview to show the page.

You can use an XMLHttpRequest on the REST API to get the state of the Item holding the current password.

12

Not an easy way in the UI, but I have solved it in the following way:

  • Create a shell script and put it in the misc folder:
#!/bin/bash

if [ $# -ne 1 ] || [ ${#1} -le 0 ] ; then
    qrString="Error: No string provided"
else
    qrString=$1
fi

base64String=`qrencode --output=- --type=PNG "${qrString}" | base64 --wrap=0`
echo -n "data:image/png;base64,"${base64String}
  • Create a rule to call the shell script, here for javascript, UI rule:
logger.info("Update guest wifi QR code image");

response = actions.Exec.executeCommandLine(time.Duration.ofSeconds(5), '/etc/openhab/misc/createQR', Items.GuestWifi_QR_Code_Codering.state));
items.GuestQRCode.postUpdate(response);

GuestWifi_QR_Code_Codering is a string item and contains the string representation of the QR code (I get it from the Unifi binding).
GuestQRCode is an image item which I put in a sitemap.
I trigger the rule on a change of GuestWifi_QR_Code_Codering, which in itself gets updated when a new QR code needs to be generated by another rule.

1 Like
13

My first answer also would have included qrencode but the question was about not to use separate tool.

14

Agreed and I understand. Point is, there is no easy way inside the UI at the moment. But there are options that are not very complicated.