Display qrCode dynamically

Support
#1

hey guys,

Would anyone have an example of how to display a qrcode dynamically.

Today I’m using Jmix 1.5

Or would v2.0 be more viable?

#2

Hello,

You can implement dynamic QR in any version of Jmix. I created an example for Jmix v2.x using the Zxing library.

The main difference is only in the use of the Image component.

Jmix 1.5 - Image :: Jmix Documentation

Controller:

@Route(value = "QrView", layout = MainView.class)
@ViewController("QrView")
@ViewDescriptor("qr-view.xml")
public class QrView extends StandardView {

    @ViewComponent
    private TypedTextField linkField;
    @ViewComponent
    private JmixImage qrImage;

    @Subscribe(id = "generateBtn", subject = "clickListener")
    public void onGenerateBtnClick(final ClickEvent<JmixButton> event) throws IOException, WriterException {
        final String link = linkField.getValue();

        final BufferedImage bufferedImage = generateQR(link);
        ByteArrayOutputStream os = new ByteArrayOutputStream();
        ImageIO.write(bufferedImage, "jpeg", os);

        final StreamResource resource = new StreamResource("qr.jpg", () -> new ByteArrayInputStream(os.toByteArray()));
        qrImage.setSrc(resource);
    }

    public BufferedImage generateQR(String barcodeText) throws WriterException {
        final QRCodeWriter qrCodeWriter = new QRCodeWriter();
        final BitMatrix bitMatrix = qrCodeWriter.encode(barcodeText, BarcodeFormat.QR_CODE, 300, 300);

        return MatrixToImageWriter.toBufferedImage(bitMatrix);
    }

}

Descriptor:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<view xmlns="http://jmix.io/schema/flowui/view"
      title="msg://qrView.title">
    <layout>
        <vbox>
            <hbox alignItems="BASELINE">
                <textField id="linkField" label="msg://link"/>
                <button id="generateBtn"
                        text="msg://generate"
                />
            </hbox>
            <image id="qrImage"
                   width="300px"
                   height="300px"
            />
        </vbox>
    </layout>
</view>

Result:
image

Regards,
Nikita