Madmin
/
Erant-OldApp
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

fix res, aspectratio

This commit is contained in:
Ota Prokopec 2022-11-22 18:53:10 +01:00
parent 671392bc85
commit 2b29fda778
5 changed files with 86 additions and 4286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4292
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -24,10 +24,6 @@
"@beyonk/svelte-mapbox": "^8.1.4",
"html5-qrcode": "^2.3.0",
"mapbox-gl": "^2.10.0",
"qr-scanner": "^1.4.1",
"qrcode-scanner-svelte": "^1.0.0",
"scan-qr-svelte": "^0.0.3",
"svelte-qr-scanner": "^1.1.0",
"svelte-routing": "^1.6.0",
"yallist": "^4.0.0"
}

17
src/lib/Components/QR/QRinput.svelte
View File

@ -1,16 +1,15 @@
<script>
import { createEventDispatcher } from 'svelte'
let value = ''
const dispatch = createEventDispatcher()
let className = ''
export { className as class }
let value = ''
</script>
<div class="w-full h-full flex relative overflow-hidden">
<div class="h-full w-full absolute flex justify-center gap-4 flex-wrap flex-col items-center bg-[#3A3A3A] p-[12.5%]">
<div class="h-[40vh] w-[40vh] max-w-[75vw] max-h-[75vw] rounded-[20px] bg-white flex justify-center items-center">
<!--image-->
</div>
<input bind:value type="text" placeholder="The code..." class="block p-3 border rounded-[15px] w-[40vh] max-w-[75vw] mt-4" />
<button class="w-[40vh] max-w-[75vw] rounded-[15px] bg-white z-10 h-[52px] bg-[#4263EB] text-white text-[24px]" on:click={() => dispatch('submit', value)}>Continue</button>
<div class={'h-auto w-full relative flex justify-center gap-4 flex-wrap flex-col items-center p-[20px] ' + className}>
<div class="h-[300px] w-[300px] max-w-[75vw] rounded-[20px] bg-white flex justify-center items-center">
<!--image-->
</div>
<input bind:value type="text" placeholder="The code..." class="block p-3 border rounded-[15px] h-[52px] max-w-[75vw] w-[383px] mt-4" />
<button class="w-[383px] max-w-[75vw] rounded-[15px] bg-white z-10 h-[52px] bg-[#4263EB] text-white text-[24px]" on:click={() => dispatch('submit', value)}>Continue</button>
</div>

25
src/lib/Components/QR/QRscanner.svelte
View File

@ -5,17 +5,22 @@
let className = ''
export { className as class }
const load = () => {
const height = document.getElementById('reader').offsetHeight
const width = document.getElementById('reader').offsetWidth
onMount(() => {
const bodyHeight = document.body.offsetHeight
const bodyWidth = document.body.offsetWidth
const readerWidth = document.getElementById('reader').offsetWidth
const readerHeight = document.getElementById('reader').offsetHeight
const aspectRatio = readerWidth / readerHeight
const reverseAspectRatio = readerHeight / readerWidth
const mobileAspectRatio = reverseAspectRatio > 1.5 ? reverseAspectRatio + (reverseAspectRatio * 12) / 100 : reverseAspectRatio
const html5QrCode = new Html5Qrcode('reader')
const config = {
fps: 10,
qrbox: { width: (3 / 4) * width, height: (1 / 2) * height },
aspectRatio: width / height,
fps: 20,
qrbox: { width: (3 / 4) * readerWidth, height: (1 / 2) * readerHeight },
aspectRatio: bodyWidth < 600 ? mobileAspectRatio : aspectRatio,
}
const html5QrCode = new Html5Qrcode('reader')
// @ts-ignore
html5QrCode.start({ facingMode: 'environment' }, config, (text, result) => {
html5QrCode.stop()
@ -24,11 +29,11 @@
result,
})
})
}
})
</script>
<div class={'w-full h-full flex relative overflow-hidden ' + className}>
<div id="reader" use:load class="w-full h-full flex justify-center items-center overflow-hidden" />
<div class={'w-full h-full flex absolute overflow-hidden ' + className}>
<div id="reader" class="w-full h-full flex justify-center items-center overflow-hidden" />
<div class="h-full w-full absolute">
<slot />
</div>

34
src/routes/qrRoute.svelte
View File

@ -9,23 +9,25 @@
let switched = 'scan'
</script>
{#if switched === 'scan'}
<InfoBar class="mt-[40px] top-0 absolute z-10" on:click={() => navigate(-1)}>Scan our QR code or type in code to load the experience</InfoBar>
<QRscanner
on:scan={(e) => {
location.href = e.detail /*maybe e.detail.text or result*/
}}
>
<div class="h-full w-full absolute flex justify-center gap-4 flex-wrap flex-row items-center">
<ScanFrame />
<div class="w-full h-full relative">
{#if switched === 'scan'}
<div class="h-auto w-full justify-center flex flex-wrap flex-row">
<InfoBar class="mt-[40px] top-0 relative z-10" on:click={() => window.history.back()}>Scan our QR code or type in code to load the experience</InfoBar>
<QRscanner on:scan={(e) => (location.href = e.detail)}>
<div class="h-full w-full relative flex justify-center gap-4 flex-wrap flex-row items-center">
<ScanFrame />
</div>
</QRscanner>
<SwitchBar {switched} on:switch={(e) => (switched = e.detail)} class="mb-[40px] bottom-0 max-w-[95%] absolute z-10" />
</div>
</QRscanner>
{:else if switched === 'input'}
<InfoBar class="mt-[40px] top-0 absolute z-10" on:click={() => navigate(-1)}>Type code or type in code to load the experience</InfoBar>
<QRinput on:submit={(e) => navigate(e.detail)} />
{/if}
<SwitchBar {switched} on:switch={(e) => (switched = e.detail)} class="mb-[30px] absolute bottom-0 z-10" />
{:else if switched === 'input'}
<div class="h-max min-h-full w-full bg-[#3A3A3A] justify-center flex flex-wrap flex-row">
<InfoBar class="mt-[40px] top-0 relative z-10" on:click={() => window.history.back()}>Type code or type in code to load the experience</InfoBar>
<QRinput class="mb-[40px]" on:submit={(e) => navigate(e.detail)} />
<SwitchBar {switched} on:switch={(e) => (switched = e.detail)} class="mb-[40px] mt-auto bottom-0 max-w-[95%] relative z-10" />
</div>
{/if}
</div>
<style>
:global(#qr-shaded-region) {