Feature/qr barcode reader #8153
+387
−7
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -65,7 +65,8 @@ | |
| "relationshipfield", | ||
| "datetimefield", | ||
| "multifieldselect", | ||
| "s3upload", | ||
| "codescanner" | ||
| ] | ||
| }, | ||
| { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,235 @@ | ||
| <script> | ||
| import { ModalContent, Modal, Icon, ActionButton } from "@budibase/bbui" | ||
| import { Input, Button, StatusLight } from "@budibase/bbui" | ||
| import { Html5Qrcode } from "html5-qrcode" | ||
|
|
||
| export let value | ||
| export let disabled = false | ||
| export let allowManualEntry = false | ||
| export let scanButtonText = "Scan Code" | ||
|
There was a problem hiding this comment. NAB: Change casing to "Scan code" for consistency with other buttons |
||
|
|
||
| import { createEventDispatcher } from "svelte" | ||
| const dispatch = createEventDispatcher() | ||
|
|
||
| let videoEle | ||
| let camModal | ||
| let manualMode = false | ||
| let cameraEnabled | ||
| let cameraStarted = false | ||
| let html5QrCode | ||
| let cameraSetting = { facingMode: "environment" } | ||
| let cameraConfig = { | ||
| fps: 25, | ||
| qrbox: { width: 250, height: 250 }, | ||
| } | ||
| const onScanSuccess = decodedText => { | ||
| if (value != decodedText) { | ||
| dispatch("change", decodedText) | ||
| } | ||
| } | ||
|
|
||
| const initReader = async () => { | ||
| if (html5QrCode) { | ||
| html5QrCode.stop() | ||
| } | ||
| html5QrCode = new Html5Qrcode("reader") | ||
| return new Promise(resolve => { | ||
| html5QrCode | ||
| .start(cameraSetting, cameraConfig, onScanSuccess) | ||
| .then(() => { | ||
| resolve({ initialised: true }) | ||
| }) | ||
| .catch(err => { | ||
| console.log("There was a problem scanning the image", err) | ||
| resolve({ initialised: false }) | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| const checkCamera = async () => { | ||
| return new Promise(resolve => { | ||
| Html5Qrcode.getCameras() | ||
| .then(devices => { | ||
| if (devices && devices.length) { | ||
| resolve({ enabled: true }) | ||
| } | ||
| }) | ||
| .catch(e => { | ||
| console.error(e) | ||
| resolve({ enabled: false }) | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| const start = async () => { | ||
| const status = await initReader() | ||
| cameraStarted = status.initialised | ||
| } | ||
|
|
||
| $: if (cameraEnabled && videoEle && !cameraStarted) { | ||
| start() | ||
| } | ||
|
|
||
| const showReaderModal = async () => { | ||
| camModal.show() | ||
| const camStatus = await checkCamera() | ||
| cameraEnabled = camStatus.enabled | ||
| } | ||
|
|
||
| const hideReaderModal = async () => { | ||
| cameraEnabled = undefined | ||
| cameraStarted = false | ||
| if (html5QrCode) { | ||
| await html5QrCode.stop() | ||
| html5QrCode = undefined | ||
| } | ||
| camModal.hide() | ||
| } | ||
| </script> | ||
|
|
||
| <div class="scanner-video-wrapper"> | ||
| {#if value && !manualMode} | ||
| <div class="scanner-value field-display"> | ||
| <StatusLight positive /> | ||
| {value} | ||
| </div> | ||
| {/if} | ||
|
|
||
| {#if allowManualEntry && manualMode} | ||
| <div class="manual-input"> | ||
| <Input | ||
| bind:value | ||
| on:change={() => { | ||
| dispatch("change", value) | ||
| }} | ||
| /> | ||
| </div> | ||
| {/if} | ||
|
|
||
| {#if value} | ||
| <ActionButton | ||
| on:click={() => { | ||
| dispatch("change", "") | ||
| }} | ||
| {disabled} | ||
| > | ||
| Clear | ||
| </ActionButton> | ||
| {:else} | ||
| <ActionButton | ||
| icon="Camera" | ||
| on:click={() => { | ||
| showReaderModal() | ||
| }} | ||
| {disabled} | ||
| > | ||
| {scanButtonText} | ||
| </ActionButton> | ||
| {/if} | ||
| </div> | ||
|
|
||
| <div class="modal-wrap"> | ||
| <Modal bind:this={camModal} on:hide={hideReaderModal}> | ||
| <ModalContent | ||
| title={scanButtonText} | ||
|
There was a problem hiding this comment.
2 ways to solve this would be: |
||
| showConfirmButton={false} | ||
| showCancelButton={false} | ||
| > | ||
| <div id="reader" class="container" bind:this={videoEle}> | ||
| <div class="camera-placeholder"> | ||
| <Icon size="XXL" name="Camera" /> | ||
| {#if cameraEnabled === false} | ||
| <div>Your camera is disabled.</div> | ||
| {/if} | ||
| </div> | ||
| </div> | ||
| {#if cameraEnabled === true} | ||
| <div class="code-wrap"> | ||
| {#if value} | ||
| <div class="scanner-value"> | ||
| <StatusLight positive /> | ||
| {value} | ||
| </div> | ||
| {:else} | ||
| <div class="scanner-value"> | ||
| <StatusLight neutral /> | ||
| Searching for code... | ||
| </div> | ||
| {/if} | ||
| </div> | ||
| {/if} | ||
|
|
||
| <div slot="footer"> | ||
| <div class="footer-buttons"> | ||
| {#if allowManualEntry} | ||
| <Button | ||
| group | ||
| secondary | ||
| newStyles | ||
| on:click={() => { | ||
| manualMode = !manualMode | ||
|
There was a problem hiding this comment. NAB: since this is just a toggle, if you've enabled manual mode already and then press this again, it will unset it which feels a bit strange. I reckon we should probably just hide the button if we're already in manual mode, so |
||
| camModal.hide() | ||
| }} | ||
| > | ||
| Enter Manually | ||
|
There was a problem hiding this comment. NAB: change casing to "Enter manually" to be consistent with other buttons. |
||
| </Button> | ||
| {/if} | ||
|
|
||
| <Button | ||
| group | ||
| cta | ||
| on:click={() => { | ||
| camModal.hide() | ||
| }} | ||
| > | ||
| Confirm | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </ModalContent> | ||
| </Modal> | ||
| </div> | ||
|
|
||
| <style> | ||
| #reader :global(video) { | ||
| border-radius: 4px; | ||
| border: var(--border-light-2); | ||
|
There was a problem hiding this comment. This is a hardcoded light border so it looks off in dark themes. Let's use border: 2px solid var(--spectrum-global-color-gray-300);instead so that it looks better in any theme. |
||
| overflow: hidden; | ||
| } | ||
| .field-display :global(.spectrum-Tags-item) { | ||
| margin: 0px; | ||
| } | ||
| .footer-buttons { | ||
| display: flex; | ||
| grid-area: buttonGroup; | ||
| gap: var(--spectrum-global-dimension-static-size-200); | ||
| } | ||
| .scanner-value { | ||
| display: flex; | ||
| } | ||
| .field-display { | ||
| padding-top: var( | ||
| --spectrum-fieldlabel-side-m-padding-top, | ||
| var(--spectrum-global-dimension-size-100) | ||
| ); | ||
| margin-bottom: var(--spacing-m); | ||
| } | ||
| .camera-placeholder { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| border-radius: 4px; | ||
| border: var(--border-light-2); | ||
|
There was a problem hiding this comment. This is a hardcoded light border so it looks off in dark themes. Let's use border: 2px solid var(--spectrum-global-color-gray-300);instead so that it looks better in any theme. |
||
| background-color: var(--spectrum-global-color-gray-200); | ||
| flex-direction: column; | ||
| gap: var(--spectrum-global-dimension-static-size-200); | ||
| } | ||
| .container, | ||
| .camera-placeholder { | ||
| width: 100%; | ||
| min-height: 240px; | ||
| } | ||
| .manual-input { | ||
| padding-bottom: var(--spacing-m); | ||
| } | ||
| </style> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
NAB: setting draggable to true here is redundant as it's only a flag used to disable DND if set to false. Setting illegal children is also redundant since this component doesn't take child components anyway.