Add QR code to Share Modal

[LeadSongDog]

Many OL books are too old to have an ISBN, but it should be easy to add a QR code on each displayed A, W, and E page which encodes the URL for that page, equivalent to what is done on google books "About this book" pages. There, for instance, https://chart.googleapis.com/chart?chs=400x400&cht=qr&chl=https://books.google.com/books?id=5xUMrOol9L4C&source=qrcode generates an easily-scanned QR that links to https://books.google.com/books?id=5xUMrOol9L4C

These QR code images (or entire pages) could be printed out on plain or sticky labels for insertion as back matter. I'd love to be able to do this in my older books.

Of course, there are standalone generators that don't require the use of google's implementation. Several (in python even) are right here on github.

[LeadSongDog]

There's an effort ongoing by http://www.wikimedia.org.au/wiki/User:Gnangarra to provide stable qr coding for every wikidata item. They're thinking wall plaques, but book plates/spine labels would be a fine use case.

[xayhewalo]

@LeadSongDog Do you know what the current state of wikimedia QR project?

@mekarpeles I'm defaulting to asking you to be assignee. Note, being the assignee doesn't necessarily mean you are responsible for doing the work, just responsible for gathering/providing information to address the issue. From the Wiki.

The assigned owner is not necessarily the person who will fix the issue (it is not necessarily even established, at that point, if or when the issue will be fixed at all), but rather they are the person who will do as much or as little as needed to handle the issue (asking questions, soliciting input, establishing and updating the priority, checking if it is a duplicate, etc).

Once an issue is labeled State: Work In Progress, the owner is the individual doing the work, or leading/coordinating the group that is doing the work.

I've added labels per context: let me know your thoughts

[LeadSongDog]

@guyjeangilles I haven't been engaged with it, but it seems to be quite functional as an interactive tool. For instance, going to https://qrpedia.org one finds an invitation to paste an URL for a WP article. Doing so, one gets something of the sort: https://qrpedia.org/qr/php/qr.php?size=800&download=Open_Library%20QRpedia&e=L&d=http%3A%2F%2Fen.qrwp.org%2FOpen_Library Downloading that, one gets That QR code image encodes a link to the article Open Library on en.qrwp.org (which redirects users to the corresponding article on en.wikipedia.org)

Some background reading: https://en.wikipedia.org/wiki/QRpedia (the basic QRpedia page) https://en.wikipedia.org/wiki/Wikipedia:WikiProject_QRpedia (project to use QR at WP) https://outreach.wikimedia.org/wiki/GLAM/QR_codes (about QRpedia use in GLAM: Galleries, Libraries, Archives, and Museums) https://code.google.com/p/qrwp/ (code for qrwp)

The codebase from google.code was imported to https://github.com/googlecode-mirror/qrwp seven years ago and seems not to have changed since. MIT licensed.

The neat thing about QRpedia codes (vice regular QR codes) is that they respond to the language setting of the user's device, linking to the article in a language the user understands: this is great for GLAM applications where tourism and multiculturalism are big factors.

[EoinHo]

I may be able to help with this issue. What is the process to move this forward?

[pranjii]

Can I get this issue?

[Philippos01]

Hello, me and my collegue @dbouris are very interested in this one. Can someone give us more precise information and whether this feature is still considered a good addition to the project.

[Ultare1717]

Hello!! Me and my group are interested in working on this? Is this still available? Thanks!!

[mekarpeles]

@Ultare1717 -- it would be great if we could take the "Share" feature that we have on the books page and extend it so it also works on the Author page -- one thing we could also do is add a QR code to this share popup. Want to give this a shot?

[github-actions[bot]]

Assignees removed automatically after 14 days.

[jimchamp]

@Ultare1717, let me know if you and your group are still working on this. If so, I will reassign you.

[mekarpeles]

It would also be nice (on mobile PWA/TWA -- since the url bar is hidden) to be able to copy the link to the page you're on in order to share it, from the share modal

[merwhite11]

@jimchamp @mekarpeles I'm happy to work on this if @Ultare1717 is not still in the midst.

[jimchamp]

Thanks @merwhite11! Let me know if you have any questions.

[merwhite11]

@jimchamp Awesome. I'll read everything over and paraphrase back to you to make sure I'm understanding everything correctly.

[merwhite11]

@jimchamp alright, I do have a few questions you could help clarify -- thanks !

Reqs:

• The share modal on Books page should have a QR code that links to the current Book page.
• The Author’s page should have a share modal with a QR code that links to the current Author page.

Questions:

• Can you clarify the use-case of the QR code in the share modal?
  • A user will print out the QR code and stick in the physical book so it will link to its OL book page?
  • Or is it intended to be sent digitally en lieu of a URL to the book page?
  • Re: @mekarpeles comment It would also be nice (on mobile PWA/TWA -- since the url bar is hidden) to be able to copy the link to the page you're on in order to share it, from the share modal — isn’t this user story already handled by the Copy URL button in the Share modal?

How QR Code Will Work:

• User will scan a QR code (directly from share modal?)
• Device decodes QR code into a URL → [languagecode.qrwp.org/PATH](http://languagecode.qrwp.org/PATH)-TO-WIKIPEDIA-ARTICLE.
• From the share modal on the book/author page, a user scans the code and is taken to the book page (that they’re currently on) or the corresponding Wikipedia article. Please clarify the intended destination.

QR CODE ADDED TO SHARE MODAL

SHARE MODAL ADDED TO AUTHORS PAGE

[jimchamp]

Thanks @merwhite11!

I think that adding the share modal to author pages is out of scope for this issue, but I have created #9141 to track that feature request.

The QR code should link to the current page. Some use cases for this are:

• Printing a QR code that can be affixed to a book (or where ever, really...).
• Creating a means to share book pages with co-located individuals (meaning, I could use my phone to scan the QR code from a co-worker's device, without them having to send a link via another application)

You are correct about Mek's requirement already being handled by the "Copy URL" button. This button was added sometime after Mek made the request here.

To keep things simple, clicking the QR code share option can open a new tab which only contains the QR code.

One last thing: The share modal is getting very cluttered in mobile views. I think that it makes sense to split the share options into two rows for smaller screens. The implementation should be pretty straight-forward with flexbox.

[merwhite11]

@jimchamp Thank you for the details, that simplifies things a bit! I think I'm understanding it now --

Revised reqs

• Add a QR code option to the share modal on Books page
• When QR code option is clicked -> will open a new tab which will contain only QR code
• When scanned by user device, QR code will link to current book page (aka current book page URL is encoded in QR code)
• Share modal will need to have two rows for smaller screens

[merwhite11]

Hi @jimchamp , I have some more questions, for whenever you get a chance !

Methods - I looked into the QRpedia recommended by @LeadSongDog and couldn’t figure out how to use it as an API. Might be totally missing something there, but here are two methods that I got working in a basic local examples

• Using node-qrcode : EXAMPLE
  • index.html: runs script.js
  • script.js: qrcode method creates a png image and stores as file
  • server.js: /qrcode endpoint serves image from file
  • Could I use npm install in docker container to test this ?
• Using QR generator API : EXAMPLE
  • server.js: makes axios req to API endpoint, pipes qr image response
  • script.js (opt): creates a button that creates QR code url and adds it to img src in index.html (can’t get this one to work)

• In OpenLibrary

  • macros/ShareModal.html

       <li>
           //create new class for qr btn
          <a class="qr-code-btn" title="$_('Copy url to clipboard')" data-ol-link-track="Share|QRCode">
            <img
            alt="$_('QR code icon')"
            class="share-link"
            src="$static_url('images/copy_url.png')"
            loading="lazy"
            >
          </a>
          <div class="share-source">$_("QR Code")</div>
        </li>

  • js/modals/index.js

    //create a function for qr-code-btn that generates qr code image and opens in new tab
    
    function openQRCode(){
        $('#social-modal-content .qr-code-btn').on('click', async function () {
            event.preventDefault();
    
            //with node-qrcode method
            const qrCodeUrl = '/generate-qrcode?url=' + encodeURIComponent(page_url);
    
            try {
                // Fetch the QR code data URL from the server
                const response = await fetch(qrCodeUrl);
                const qrCodeDataUrl = await response.text();
                // Display
               $.colorbox({
                    html: '<img src="' + qrCodeUrl + '" alt="QR Code" style="width: 150px; height: 150px;">',
                    maxWidth: '90%',
                    maxHeight: '90%'
            });
            } catch (error) {
                console.error('Error fetching QR code:', error);
                alert('Error fetching QR code');
            }
        });
            //with api method -- in a try / catch block as well
            const qrCodeUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + encodeURIComponent(page_url);
            $.colorbox({
                html: '<img src="' + qrCodeUrl + '" alt="QR Code" style="width: 150px; height: 150px;">',
                maxWidth: '90%',
                maxHeight: '90%'
            });
    
        })
    }

QUESTIONS

• I am testing the ‘qr-code-btn’ with the same logic that’s in copy-url-btn and can’t get it to respond. Not sure what I’m missing with the logic. Compiling with: docker compose run --rm home npm run-script watch and

  docker compose run --rm home npm run-script watch-css

• Does the qr-code need to open in a new tab? I feel like a modal would be easier

• Let me know which method you think would work better, or if there's another option !

Thanks for the help

[jimchamp]

I don't think that any JS will be needed for this. Similar to the social links, the new QR code icon should be a link to something like: /qrcode?path={path} or /qrcode/{path} where path is the page's key (like /books/OL123M or /authors/OL234A). Using a query parameter for this will probably be easier.

I was able to generate a QR code in my local environment using this library. To install this in your local environment, do the following:

1. Add a new entry to requirements.txt for qrcode, using the latest version. requirements.txt is in the project's root directory.
2. Install the library in your web container by running docker compose exec web pip install qrcode

Now, you should be able to import qrcode.

Here's the code for the /qrcode handler that I created for testing:

class test_qrcode(delegate.page):
    path = '/qrcode'

    def GET(self):
        img = qrcode.make('localhost:8080')
        with io.BytesIO() as buf:
            img.save(buf, format='PNG')
            web.header("Content-Type", "image/png")
            return delegate.RawText(buf.getvalue())

After adding this and restarting the web container (docker compose restart web), http://localhost:8080/qrcode serves this QR code:

Hopefully this is helpful. Feel free to ask folks in Slack if you need help passing the path to the handler.

Edit: You can add the new handler to https://github.com/internetarchive/openlibrary/blob/master/openlibrary/plugins/openlibrary/api.py

[merwhite11]

@jimchamp Thank you Jim ! I got the icon hooked up to the get req in api.py and it's opening up the qr code image in the new tab. Thanks for paving the way. I'm working on getting the share modal to switch to 2 rows for smaller screens now.

Just checking, should the QR image in the new tab have a download/print button/option?

[jimchamp]

Just checking, should the QR image in the new tab have a download/print button/option?

Let's keep it simple. People can use their browsers to download or print the image.

Thanks!

[merwhite11]

@jimchamp Hello, almost ready to make the PR and running the tests.

The import qrcode and import io statements I have on my branch of api.py are causing this test to fail: docker compose run --rm home make test. Should I comment them out for the PR?

I have added qrcode to requirements.txt and have been running docker compose exec web pip install qrcode on my local.

I'm also failing the static builds, if you could advice on that --

[jimchamp]

After checking out your branch and installing qrcode in web, I see that the Python tests are passing when I run them in the web container: docker compose exec make test

The bundlesize check is still failing for me, though: ✖ static/build/modal-links.3ca7e95e0546c2b999dd.js 6.08KB > 6KB gzip

That's ok for now. Can you remove any unrelated code changes from your branch and open a PR?

[merwhite11]

Ok, these are the errors I was worried about from running docker compose run --rm home make test, but went ahead and made the PR.