QR code embedded image

[Alex-Jordan]

This lets you declare an image in the publisher file for embedding in your QR codes. For this, I put the PTX logo in the sample article QR codes. A publisher could put some project-specific logo here though.

If you elect to do this, the QR code needs to use a more robust error correcting algorithm, and the QR code image is larger. We still fit to a fixed size in PDF, so the effect is that the little dots look smaller. I'm still able to read them with my phone's camera app.

Posting for initial feedback. If this is good, I'll add documentation.

Pic of PDF from sample article using this:

[Alex-Jordan]

A few notes on the qrcode package implementation of embedded images:

• the image must be square, or else it will be stretched to a square. For this, I extended the PTX logo image to a square with transparent background, but I have to make sure the image is RGBA, not just RGB.
• the image is hard coded to be placed in the center 25% by 25% window, adjusted a little so that the edges of that window align with edges of the QR "pixels". You can't customize it to bee a different size. Or location.

[rbeezer]

I love it! More later.

[kcrisman]

Stupid question: Is this pretty common in other contexts with "branded" QR codes? (Like university websites or something.) I haven't seen them before, but I also don't use QR codes often. If so, this would be a pretty good addition.

I did try it with my (fairly pathetic) QR code reader, and it did work though I had to get close to my screen. Maybe someone should try it from the third row of a classroom when projected on a screen that is a little curved - I imagine that would be a typical use case. (It would be for me, if I used a PTX book in a larger class and had students get an interactive thing on their phones.)

[davidfarmer]

Part of the QR code standard is that a QR code has to work with some percent (maybe 20% ?) corrupted.

Many organizations use that feature to put their logo in the middle of a QR code.

On Thu, 25 May 2023, kcrisman wrote:

Stupid question: Is this pretty common in other contexts with "branded" QR codes? (Like university websites or something.) I haven't seen them before, but I also don't use QR codes often. If so, this would be a pretty good addition.

I did try it with my (fairly pathetic) QR code reader, and it did work though I had to get close to my screen. Maybe someone should try it from the third row of a classroom when projected on a screen that is a little curved - I imagine that would be a typical use case. (It would be for me, if I used a PTX book in a larger class and had students get an interactive thing on their phones.)

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to thisthread.[AABTULDKC74W7QZ6I5ALGILXH7K5JA5CNFSM6AAAAAAYPNUN26WGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJT S5GJDQQ.gif] Message ID: @.***>

[Alex-Jordan]

I see this a lot with QR codes in the wild. The branding gives you at least some idea what you might be getting into if you follow the link.

With no images, there is a ~7% error correcting code algorithm in place, meaning up to 7% of the QR code can be obscured but it will still work with standard readers.

With an image like this, it might obscure up to 6.25% of the QR code. And now it's using a 25% algorithm. So in one sense this is more robust than without the image. The price is a small reduction in the QR pixel size. You can compare by looking at the "Files changed" in this PR to see how much larger some QR images grew.

There is an option to use built-in 7%, 15%, 25%, or 30% algorithm. I tried the 15% with images, and occasionally it was a problem when the underlying URL was very short, and consequently the QR pixels were large and somehow the image did obscure too much.

[kcrisman]

I see this a lot with QR codes in the wild. The branding gives you at least some idea what you might be getting into if you follow the link.

Cool. Like I said, if my phone can do it, any phone can. I would just check it out on a projected screen is all for "real-life" - I've often seen such QR codes ending up with a lot of people getting up from their seats to get close enough.

Message ID: @.***>

[rbeezer]

I still love it! Some notes from a visual inspection.

• Read the top of pretext/pretext.py about the forms of import statements.
• I added a bunch of @label and so QRcode files got better names, which means the ones here have bit-rotted. Sorry. You'll just need to re-generate them.
• I guess documentation may need some advice/warnings about sizes, position, resolution, error-correction, etc.

[jaorduz]

I agree @rbeezer. Documentation may need some warnings about sizes, etc. I have been working with pretext on different OS and versions of Python, and it has some issues with the graphs and embedded code. Do you have some websites or more documentation to check? I would appreciate any help.

[Alex-Jordan]

I force pushed this with updates. That correction to the import. Catch up with the image labeling. And a little documentation in the publisher file reference.

Note: I did not find a general section in the publisher part of the guide about producing QR codes, thumbnails, etc. First, is there one but I just missed it? If there is not already such a section, we should make one. But I think that would be a separate project. It would discuss QR codes more.

[rbeezer]

I did not find a general section in the publisher part of the guide about producing QR codes

I've added a bit about interactives to the Overview, and a stub to the Topics chapter. You could make a subsection of the Topics stub all about the finer points of the QR codes and embedded images. Don't worry if it has no context, presume all the lead-in has been written.

Don't do it here, I'm about to evaluate this for merging.

[rbeezer]

Sorry to be so late on this one, @jaorduz, but we do not do support on pull requests - that happens on the pretext-support Google Group. See Appendix A: Welcome to the PreTeXt Community.

Can you reformulate your question with much more detail and post there? I'm not really sure what you mean by:

it has some issues with the graphs and embedded code

[rbeezer]

Took this for a spin and got the following.

The publisher's @external directory needs to be copied over to the temporary directory where the work happens? Maybe the image file should be specified relative to that directory?

Related: why two PNG versions of the logo file, when it looks like just one is being used?

(rab) rob@atoll:/tmp/s$ ~/mathbook/mathbook/pretext/pretext -vv -d . -c qrcode  -p ~/mathbook/mathbook/examples/sample-article/publication.xml ~/mathbook/mathbook/examples/sample-article/sample-article.xml
PTX:DEBUG   : Parsed CLI args {'verbose': 2, 'config_file': None, 'component': 'qrcode', 'format': None, 'publication_file': '/home/rob/mathbook/mathbook/examples/sample-article/publication.xml', 'stringparams': [], 'extra_stylesheet': None, 'method': '', 'xmlid': '', 'server': None, 'data_dir': None, 'out': None, 'dir': '.', 'abort': False, 'tgz': False, 'validate': False, 'xml_file': '/home/rob/mathbook/mathbook/examples/sample-article/sample-article.xml'}
PTX:DEBUG   : Python version: 3.10 (expecting 3.6 or newer)
PTX:DEBUG   : PreTeXt distribution and xsl directories: /home/rob/mathbook/mathbook, /home/rob/mathbook/mathbook/xsl
PTX:INFO    : parsing possible configuration files: ['/home/rob/mathbook/mathbook/pretext/pretext.cfg', '/home/rob/mathbook/mathbook/user/mbx.cfg', '/home/rob/mathbook/mathbook/user/pretext.cfg']
PTX:DEBUG   : configuration files actually used/read: ['/home/rob/mathbook/mathbook/pretext/pretext.cfg', '/home/rob/mathbook/mathbook/user/pretext.cfg']
PTX:INFO    : dictionary of executables/commands: {'latex': 'latex', 'pdflatex': 'pdflatex', 'xelatex': 'xelatex', 'pdfsvg': 'pdf2svg', 'asy': 'asy', 'sage': '/sage/sage-10.0/sage', 'pdfpng': 'convert', 'pdfeps': 'pdftops', 'node': 'node', 'liblouis': '/usr/local/bin/file2brl'}
PTX:INFO    : verifying and expanding XML source file: /home/rob/mathbook/mathbook/examples/sample-article/sample-article.xml
PTX:INFO    : input XML source file expanded to absolute path: /home/rob/mathbook/mathbook/examples/sample-article/sample-article.xml
PTX:INFO    : verifying and expanding publisher file: /home/rob/mathbook/mathbook/examples/sample-article/publication.xml
PTX:INFO    : input publisher file expanded to absolute path: /home/rob/mathbook/mathbook/examples/sample-article/publication.xml
PTX:INFO    : verifying and expanding input directory: .
PTX:INFO    : input directory expanded to absolute path: /tmp/s
PTX:INFO    : Done examining environment and initializing setup info
PTX:INFO    : manufacturing QR codes from /home/rob/mathbook/mathbook/examples/sample-article/sample-article.xml for placement in /tmp/s
PTX:DEBUG   : QR code id list temporarily in /tmp/tmpvik4b7vv/qrcode-ids.txt
PTX:INFO    : XSL conversion of /home/rob/mathbook/mathbook/examples/sample-article/sample-article.xml by /home/rob/mathbook/mathbook/xsl/extract-qrcode.xsl
PTX:DEBUG   : XSL conversion via /home/rob/mathbook/mathbook/xsl/extract-qrcode.xsl of /home/rob/mathbook/mathbook/examples/sample-article/sample-article.xml to /tmp/tmpvik4b7vv/qrcode-ids.txt and/or into directory None with parameters {'publisher': '/home/rob/mathbook/mathbook/examples/sample-article/publication.xml'}
PTX:INFO    : comprehensive messages, warnings, and errors:
PTX:INFO    : successful application of /home/rob/mathbook/mathbook/xsl/extract-qrcode.xsl
PTX:INFO    : creating URL with content "https://pretextbook.org/examples/sample-article/html/interactive-simple-eigenvector.html" as /tmp/s/interactive-simple-eigenvector.png...
Traceback (most recent call last):
  File "/home/rob/mathbook/mathbook/pretext/pretext", line 812, in <module>
    main()
  File "/home/rob/mathbook/mathbook/pretext/pretext", line 675, in main
    ptx.qrcode(
  File "/home/rob/mathbook/mathbook/pretext/pretext.py", line 2019, in qrcode
    qr_image = qr.make_image(image_factory=qrcode.image.styledpil.StyledPilImage, embeded_image_path=image_path)
  File "/home/rob/mathbook/python-virtual/rab/lib/python3.10/site-packages/qrcode/main.py", line 299, in make_image
    im = image_factory(
  File "/home/rob/mathbook/python-virtual/rab/lib/python3.10/site-packages/qrcode/image/base.py", line 17, in __init__
    self._img = self.new_image(**kwargs)
  File "/home/rob/mathbook/python-virtual/rab/lib/python3.10/site-packages/qrcode/image/styledpil.py", line 51, in new_image
    self.embeded_image = Image.open(embeded_image_path)
  File "/home/rob/mathbook/python-virtual/rab/lib/python3.10/site-packages/PIL/Image.py", line 3131, in open
    fp = builtins.open(filename, "rb")
FileNotFoundError: [Errno 2] No such file or directory: 'media/qrcode/ptx-logo-square.png'

[Alex-Jordan]

Related: why two PNG versions of the logo file, when it looks like just one is being used?

I think one is the original source PTX logo, and the other is a derivative that ha square dimensions. Square is needed for this or else you will see undesirable stretching. Should I remove non-square?

Will test soon about whatever this error was.

[rbeezer]

Yes, lets remove the big/original one. Maybe put it here on this PR as an attachment so we remember where it came from?

I find the qrcode directory name in the external area really confusing, especially since we have a hard-coded directory by that name in the generated area. It could be misc or about anything else.

[rbeezer]

While you have your head in this. There is a derived HTML id to hookup the aria-describedby. Can you use a template to build that id, so it is always consistent, instead of relying on the two productions to always match? You can find examples of this with things like xref-knowl-filename, etc.

[Alex-Jordan]

Will test soon about whatever this error was.

I was using a relative path, and apparently tested from the sample-article folder. So it worked out in that case. Pushed a change to use absolute path to that image.

[Alex-Jordan]

Moved the image to misc/. Here is the original.

[Alex-Jordan]

While you have your head in this. There is a derived HTML id to hookup the aria-describedby. Can you use a template to build that id, so it is always consistent, instead of relying on the two productions to always match? You can find examples of this with things like xref-knowl-filename, etc.

I'm lost with this. This PR does not touch HTML, so I'm not sure what you are referencing about aria-describedby. Do these QR images get used in HTML?

[rbeezer]

Bloody hell, that was #2056. I'll do that then if you don't want to.

I've got my head down attacking born-hidden knowls, I'll get back to this at some point real soon. Thanks for the fixes.

[Alex-Jordan]

OK, since #2056 is closed, I can do that, but not today. I wanted to swoop in and help reduce the open PR count by 1.

[rbeezer]

help reduce the open PR count by 1

Yes, I love it when it stays in single digits! ;-) THANKS!

[rbeezer]

OK, its i!. Do you want to announce/advertise?

Website update right around the start of Drop-In, so it needs to wait just a bit.