Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add white margin to QR code image #938

Merged
merged 2 commits into from
Feb 9, 2024
Merged

Add white margin to QR code image #938

merged 2 commits into from
Feb 9, 2024

Conversation

ktuite
Copy link
Member

@ktuite ktuite commented Feb 5, 2024

Added 15 px white border to QR code image and added -15px margin to image to account for it.
Also switched this component to the composition API.

Screenshot 2024-02-05 at 11 43 49 AM

What has been done to verify that this works as intended?

Trying it.

Why is this the best possible solution? Were any other approaches considered?

Maybe there are better ways to remove the extra padding.... maybe 15px is too large.

I would LOVE to do some html5 canvas tricks to render some other info into the QR code image, but the bootstrap popover that this QR code is shown in was interacting really poorly with any canvas tags I tried to add.

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

Does this change require updates to user documentation? If so, please file an issue here and include the link below.

Before submitting this PR, please make sure you have:

  • run npm run test and npm run lint and confirmed all checks still pass OR confirm CircleCI build passes
  • verified that any code or assets from external sources are properly credited in comments or that everything is internally sourced

@ktuite ktuite requested a review from matthew-white February 6, 2024 22:26
@ktuite
Copy link
Member Author

ktuite commented Feb 6, 2024

Here's roughly how I was trying to insert a <canvas> into the template so that I would be able to draw the QR code and anything else into it. (Ignore the styling, I was just trying to be able to see it!)

...

<canvas ref="myCanvas" width="300" height="300" style="border:1px solid blue;"></canvas>

...

const myCanvas = ref(null);

...

onMounted(() => {
  const myContext = myCanvas.value.getContext('2d');

  const code = qrcode(0, props.errorCorrectionLevel);
  const json = JSON.stringify(props.settings);
  code.addData(btoa(pako.deflate(json, { to: 'string' })));
  code.make();
  code.renderTo2dContext(myContext, props.cellSize);
});

This appeared to work when I made a new QR code and it appeared in a modal, but the <canvas> would be totally gone from the DOM when it was in a popover, even though it appeared to be finding it in onMounted()

@matthew-white
Copy link
Member

Ah interesting. The popover component is definitely pretty limited right now. The content of the popover is actually rendered twice: once in the Popover element (which is hidden with display: none;), then once in a new element that Bootstrap creates (which I think it inserts as a child of <body>). Bootstrap is only passed HTML, so anything not in the HTML won't appear in the duplicate element that Bootstrap creates. That includes event listeners. Maybe it also includes what you're trying to do with the canvas?

The current approach with Popover has a number of limitations, and I've been waiting for the right moment to improve it. If v2024.2 includes a number of popups, that might be the right time. We'll want to implement popups so that they aren't two different elements: we'll just correctly position the one element. I think what you're trying would work if we did it that way.

matthew-white
matthew-white approved these changes Feb 7, 2024
View reviewed changes
Copy link
Member

@matthew-white matthew-white left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yay for margin and yay for composition API!

@matthew-white
Copy link
Member

Related forum post: https://forum.getodk.org/t/odk-central-qr-code-should-include-a-white-border-and-be-on-screen-on-mobile/34599

@ktuite ktuite merged commit 17c29f7 into master Feb 9, 2024
1 check passed
@matthew-white matthew-white deleted the ktuite/qr_code branch February 9, 2024 02:28
@ktuite ktuite mentioned this pull request May 21, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@matthew-white matthew-white matthew-white approved these changes

Assignees

@ktuite ktuite

Labels
None yet
Projects
ODK Central
Status: ✅ done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ktuite @matthew-white