From 920dd176fee4d3c9614fcee627fcd27f074843a5 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Wed, 10 Apr 2024 20:31:32 -0400 Subject: [PATCH] I am done for the night/morning... --- src/lib/ae_stores.ts | 2 + src/lib/element_qr_scanner backup_2.svelte | 683 ++++++++++++++++++ src/lib/element_qr_scanner.svelte | 144 +++- src/lib/element_qr_scanner_dev.svelte | 670 +++++++++++++++++ src/lib/element_qr_scanner_v2.svelte | 560 ++++++++++++++ .../[slug]/leads_add_scan backup.svelte | 7 +- .../exhibit/[slug]/leads_add_scan.svelte | 64 +- .../exhibit/[slug]/leads_manage.svelte | 2 +- 8 files changed, 2092 insertions(+), 40 deletions(-) create mode 100644 src/lib/element_qr_scanner backup_2.svelte create mode 100644 src/lib/element_qr_scanner_dev.svelte create mode 100644 src/lib/element_qr_scanner_v2.svelte diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts index 66f4fd5b..1edf4e68 100644 --- a/src/lib/ae_stores.ts +++ b/src/lib/ae_stores.ts @@ -69,6 +69,8 @@ export let ae_app_local_data_struct: key_val = { 'qry__limit': 20, 'qry__offset': 0, + qr_scanner_version: 'one', + 'ds': {}, 'hub': { 'show_element__cfg': true, diff --git a/src/lib/element_qr_scanner backup_2.svelte b/src/lib/element_qr_scanner backup_2.svelte new file mode 100644 index 00000000..fc89614c --- /dev/null +++ b/src/lib/element_qr_scanner backup_2.svelte @@ -0,0 +1,683 @@ + + + +
+ + + + + + +
+
+ {#if scanning_status == 'not_started' } + + + Scanning stopped + + {:else if scanning_status == 'paused' && show_pause_btn} + + Scanning paused + {:else if scanning_status == 'scanning'} + + {#if show_pause_btn} + + {/if} + + + + + Scanning for QR code... + + + {/if} +
+ +
+
+ + {#if show_qr_manual_text_entry_option} +
+ {#if show_qr_manual_entry} + + + + + +
+ +
+ + {:else} + + {/if} +
+ {/if} + + {#if show_qr_manual_badge_id_entry_option} +
+ {#if show_qr_manual_entry} +
handle_qr_manual_entry} class="flex"> + + + + + + + +
+ {:else} + + {/if} +
+ {/if} + + {#if show_qr_scan_result && qr_scan_result} +
+ Raw Result: + {qr_scan_result} +
+ {/if} + + {debug_comment ?? 'Debugging QR Scanner'} + {#if debug_info} +
+ Debug Info: + {debug_info} +
+ {/if} + + +
+ + + diff --git a/src/lib/element_qr_scanner.svelte b/src/lib/element_qr_scanner.svelte index 67fbd4bb..99882d66 100644 --- a/src/lib/element_qr_scanner.svelte +++ b/src/lib/element_qr_scanner.svelte @@ -8,6 +8,7 @@ import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats} from import { api } from '$lib/api'; import { ae_api } from '$lib/ae_stores'; + // *** Import Aether core components // import Element_input from './element_input.svelte'; // import ae from '/element_input.svelte'; @@ -39,6 +40,9 @@ let disable_submit_badge_id_btn: boolean = true; let user_media_status = 'not_requested'; +let debug_comment: string = 'Debugging QR Scanner'; +let debug_info: any; + // let max_results: number = 50; @@ -58,14 +62,24 @@ let qr_scan_cfg = { fps: qr_fps, qrbox: qr_viewfinder_width }; // 275 seems good onMount(() => { console.log('** Element Mounted: ** QR Scanner'); - // NOTE: We only want to trigger the scanning to start after the page has fully loaded. - navigator.mediaDevices.getUserMedia({video: true}) - .then(successCallback, errorCallback); + // Wait 250ms for everything to fully load + // setTimeout(() => { + // console.log('** Element Mounted: ** QR Scanner - setTimeout'); + + // NOTE: We only want to trigger the scanning to start after the page has fully loaded. + navigator.mediaDevices.getUserMedia({video: true}) + .then(successCallback, errorCallback); + console.log('** Element Mounted: ** QR Scanner - getUserMedia in setTimeout'); + // mounted = true; + // }, 750); + // console.log('** Element Mounted: ** QR Scanner - setTimeout end'); // NOTE: This can only be done after the page has fully loaded. // if (start_qr_scanner) { // handle_start_qr_scanning(); // } + + }); @@ -83,25 +97,58 @@ var successCallback = function(error: any) { console.log('Camera access allowed'); user_media_status = 'allowed'; + debug_comment = 'Camera Access Allowed'; + debug_info = JSON.stringify(error); + + if (html5_qr_code) { + console.log('html5_qr_code object found. Clearing and creating new Html5Qrcode...'); + debug_info = 'html5_qr_code object found. Clearing and creating new Html5Qrcode...'; + html5_qr_code.clear(); + // document.getElementById('qr_scanner_viewfinder').classList.remove('d_none'); + } else { + console.log('html5_qr_code not found. Creating new Html5Qrcode...'); + debug_info = 'html5_qr_code not found. Creating new Html5Qrcode...'; + } + + html5_qr_code = new Html5Qrcode( + 'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] } + ); + + debug_info = 'new Html5Qrcode for element id=qr_scanner_viewfinder'; + + + if (start_qr_scanner) { + console.log('Ready to start QR scanning!'); + debug_info = 'Ready to start QR scanning!'; + handle_start_qr_scanning(); + } + // let subject = 'Camera Access Allowed'; // let message = error; // send_init_confirm_email(subject, message); + console.log('Dispatching qr_camera'); + debug_info = 'Dispatching qr_camera'; + dispatch('qr_camera', { status: 'allowed', }); // NOTE: This can only be done after the page has fully loaded. - if (start_qr_scanner) { - handle_start_qr_scanning(); - } + // if (start_qr_scanner) { + // handle_start_qr_scanning(); + // } }; + var errorCallback = function(error: any) { if (error.name == 'NotAllowedError') { console.log('Camera access not allowed!'); user_media_status = 'denied'; - alert('Error trying to start camera'); - alert(error); + + debug_comment = 'Camera Access Denied'; + debug_info = JSON.stringify(error); + // alert('Error trying to start camera'); + // alert(error); let subject = 'Camera Access Denied'; let message = error; @@ -113,6 +160,14 @@ var errorCallback = function(error: any) { } }; +// $: if (start_qr_scanner && user_media_status == 'allowed' && (scanning_status == 'not_started' || scanning_status == 'paused')) { +// console.log('START QR SCANNING'); +// handle_start_qr_scanning(); +// } else { +// // console.log('STOP QR SCANNING'); +// // handle_stop_qr_scanning(); +// } + // $: if (mounted && start_qr_scanner) { // console.log('START QR SCANNING'); @@ -132,27 +187,44 @@ async function handle_start_qr_scanning() { } else if (user_media_status == 'not_requested') { console.log('Camera access not requested yet!'); return; + } else if (user_media_status == 'allowed') { + console.log('Camera access allowed!'); + debug_info = 'Camera access allowed!'; + } else { + console.log('Camera access status unknown! This should not happen?'); + debug_info = 'Camera access status unknown! This should not happen?'; + return; } qr_scan_result = null; qr_found_text = null; - if (html5_qr_code) { - console.log('html5_qr_code object found. Clearing and creating new Html5Qrcode...'); - // html5_qr_code.clear(); - // document.getElementById('qr_scanner_viewfinder').classList.remove('d_none'); - html5_qr_code = new Html5Qrcode( - 'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] } - ); - } else { - console.log('html5_qr_code not found. Creating new Html5Qrcode...'); - html5_qr_code = new Html5Qrcode( - 'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] } - ); - } + debug_comment = 'Starting QR Scanning...'; - if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) { + // if (html5_qr_code) { + // console.log('html5_qr_code object found. Clearing and creating new Html5Qrcode...'); + // debug_info = 'html5_qr_code object found. Clearing and creating new Html5Qrcode...'; + // html5_qr_code.clear(); + // // document.getElementById('qr_scanner_viewfinder').classList.remove('d_none'); + + // html5_qr_code = new Html5Qrcode( + // 'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] } + // ); + // } else { + // console.log('html5_qr_code not found. Creating new Html5Qrcode...'); + // debug_info = 'html5_qr_code not found. Creating new Html5Qrcode...'; + + // html5_qr_code = new Html5Qrcode( + // 'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] } + // ); + // } + + debug_info = 'Check the state and start if not started...'; + + let current_state = await html5_qr_code.getState() + + if (current_state == Html5QrcodeScannerState.NOT_STARTED) { // console.log('Scanner is not started'); return await html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error) @@ -160,6 +232,8 @@ async function handle_start_qr_scanning() { console.log('Scanning has started'); scanning_status = 'scanning'; + debug_info = 'Scanning has started'; + // let subject = 'QR Scanning Started'; // let message = ignore; // send_init_confirm_email(subject, message); @@ -169,6 +243,9 @@ async function handle_start_qr_scanning() { console.log('There was an error while trying to start the QR scanner'); scanning_status = 'start_error'; + debug_info = 'Error starting scanner: ' + JSON.stringify(err); + + // let subject = 'QR Scanning Start Error'; // let message = err; // send_init_confirm_email(subject, message); @@ -181,6 +258,7 @@ async function handle_start_qr_scanning() { } else { console.log('Scanner is already started'); + debug_info = 'Scanner is already started'; return; } @@ -383,10 +461,10 @@ function send_init_confirm_email(subject, message) { class="ae_container qr_scanning_container" >
{#if scanning_status == 'not_started' } - + Scanning stopped @@ -464,7 +542,15 @@ function send_init_confirm_email(subject, message) { {:else} - + {/if}
{/if} @@ -475,6 +561,14 @@ function send_init_confirm_email(subject, message) { {qr_scan_result} {/if} + + diff --git a/src/lib/element_qr_scanner_dev.svelte b/src/lib/element_qr_scanner_dev.svelte new file mode 100644 index 00000000..b6bb4e31 --- /dev/null +++ b/src/lib/element_qr_scanner_dev.svelte @@ -0,0 +1,670 @@ + + + +
+ + + + + + +
+
+ + + + + + + + + +
+ +
+
+ + {#if show_qr_manual_text_entry_option} +
+ {#if show_qr_manual_entry} + + + + + +
+ +
+ + {:else} + + {/if} +
+ {/if} + + {#if show_qr_manual_badge_id_entry_option} +
+ {#if show_qr_manual_entry} +
handle_qr_manual_entry} class="flex"> + + + + + + + +
+ {:else} + + {/if} +
+ {/if} + + {#if show_qr_scan_result && qr_scan_result} +
+ Raw Result: + {qr_scan_result} +
+ {/if} + + {debug_comment ?? 'Debugging QR Scanner'} + {#if debug_info} +
+ Debug Info: + {debug_info} +
+ {/if} + + +
+ + + diff --git a/src/lib/element_qr_scanner_v2.svelte b/src/lib/element_qr_scanner_v2.svelte new file mode 100644 index 00000000..9841549a --- /dev/null +++ b/src/lib/element_qr_scanner_v2.svelte @@ -0,0 +1,560 @@ + + + +
+ + + + + + +
+
+ + + + + + + + {#if (scanning_status == 'scanning')} + + {/if} + +
+ +
+
+ + {#if show_qr_manual_text_entry_option} +
+ {#if show_qr_manual_entry} + + + + + +
+ +
+ + {:else} + + {/if} +
+ {/if} + + {#if show_qr_manual_badge_id_entry_option} +
+ {#if show_qr_manual_entry} +
handle_qr_manual_entry} class="flex"> + + + + + + + +
+ {:else} + + {/if} +
+ {/if} + + {#if show_qr_scan_result && qr_scan_result} +
+ Raw Result: + {qr_scan_result} +
+ {/if} + + + + +

v2 - Try pressing the "Allow Camera Access" button and then the "Start Scanning" button if it does not start on its own. This fix is not perfect. A permanent solution is actively being worked on in the development version.

+ +
+ + + diff --git a/src/routes/events_leads/exhibit/[slug]/leads_add_scan backup.svelte b/src/routes/events_leads/exhibit/[slug]/leads_add_scan backup.svelte index d4a282f6..5211c92c 100644 --- a/src/routes/events_leads/exhibit/[slug]/leads_add_scan backup.svelte +++ b/src/routes/events_leads/exhibit/[slug]/leads_add_scan backup.svelte @@ -643,11 +643,6 @@ function handle_qr_camera(event) {

Scan

-
- - Bug fix in progress for scanning with some devices -2024-04-10 10:15 AM -
-
diff --git a/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte b/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte index 5211c92c..85673a23 100644 --- a/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte +++ b/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte @@ -10,6 +10,8 @@ import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_ev import { events_func } from '$lib/ae_events_functions'; import Element_qr_scanner from '$lib/element_qr_scanner.svelte'; +import Element_qr_scanner_v2 from '$lib/element_qr_scanner_v2.svelte'; +import Element_qr_scanner_dev from '$lib/element_qr_scanner_dev.svelte'; // TEMPORARY: For testing and development @@ -202,7 +204,14 @@ function handle_qr_camera(event) { Please check your browser's permissions. {/if}

- + @@ -232,10 +241,9 @@ function handle_qr_camera(event) { // event_exhibit_tracking_obj_create_promise = null; $events_sess.leads.show_form__search = true; }} - disabled={!$ae_loc.trusted_access && 2==4} title="Search for a person to add to the leads list." > - + Search to Add Person @@ -249,6 +257,26 @@ function handle_qr_camera(event) { {#if $events_loc.leads.show_content__scan_requirements} +
+ + + Alert + Use Scanner Version: + + +

A bug was found late Monday that affects some mobile devices (cell phones and tablets). Incremental fixes have been added, but this issue has been difficult to address accoss all devices. We recommend most users stick with v1 (default). If you are not having any trouble and have no idea what this message is about, then this is what you want.

+

We recommend you try v2 if you are having trouble with the camera not starting or turning on. This version allows you to manually attempt to Allow Camera Access and to Start Scanning if it does not start on its own. This fix is not perfect. A permanent solution is actively being worked on in the development version.

+

A fix is in progress to address all devices. -2024-04-10 2:25 AM (Prague time)

+ +
+

You will need a device with a camera to scan the QR codes. You will also of course need one or more valid QR codes to scan. @@ -305,7 +333,7 @@ function handle_qr_camera(event) { placeholder="Search for attendee" bind:value={$events_sess.leads.entered_search_str} required - class="input max-w-56" + class="input text-lg w-56" autofocus /> @@ -660,8 +688,7 @@ function handle_qr_camera(event) {

- - + {#if !$ae_loc.qr_scanner_version || $ae_loc.qr_scanner_version == 'one'} - + {:else if $ae_loc.qr_scanner_version == 'two'} + + + {:else if $ae_loc.qr_scanner_version == 'dev'} + + vDEV + + {:else} + ??? + {/if}
{@html $events_sess.leads.qr_scan_result ?? 'No results yet'} diff --git a/src/routes/events_leads/exhibit/[slug]/leads_manage.svelte b/src/routes/events_leads/exhibit/[slug]/leads_manage.svelte index 20dabf69..44ddf249 100644 --- a/src/routes/events_leads/exhibit/[slug]/leads_manage.svelte +++ b/src/routes/events_leads/exhibit/[slug]/leads_manage.svelte @@ -423,7 +423,7 @@ $: if ($events_slct.exhibit_id) { }} disabled={!$events_slct.exhibit_obj.priority} class="btn btn-sm variant-ghost-primary w-48 mb-1 export_data_btn" - title={`TEMPORARILY DISABLED: Download leads data for ${$events_slct.exhibit_obj.name}`} + title={`Download leads data for ${$events_slct.exhibit_obj.name}`} > {#await ae_promises.download__exhibit_tracking_export}