Lucas Nogueira
2 years ago
parent
0c407140f5
commit
ad8338e7ad
@ -1,7 +1,4 @@
|
|||||||
package com.tauri.api
|
package com.tauri.api
|
||||||
|
|
||||||
import app.tauri.plugin.PluginManager
|
|
||||||
|
|
||||||
class MainActivity : TauriActivity() {
|
class MainActivity : TauriActivity() {
|
||||||
var pluginManager: PluginManager = PluginManager(this)
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,128 @@
|
|||||||
|
<script>
|
||||||
|
import { scan } from "tauri-plugin-barcode-scanner-api";
|
||||||
|
|
||||||
|
export let onMessage;
|
||||||
|
|
||||||
|
let scanning = false;
|
||||||
|
let windowed = true;
|
||||||
|
|
||||||
|
function startScan() {
|
||||||
|
scanning = true;
|
||||||
|
scan({ windowed })
|
||||||
|
.then((res) => {
|
||||||
|
scanning = false;
|
||||||
|
onMessage(res);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
scanning = false;
|
||||||
|
onMessage(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="full-height">
|
||||||
|
<div class:invisible={scanning}>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="scanner-windowed" bind:checked={windowed} />
|
||||||
|
<label for="scanner-windowed">Windowed</label>
|
||||||
|
</div>
|
||||||
|
<button class="btn" type="button" on:click={startScan}>Scan</button>
|
||||||
|
</div>
|
||||||
|
<div class="scanning full-height" class:invisible={!scanning}>
|
||||||
|
<div class="scanner-background">
|
||||||
|
<!-- this background simulates the camera view -->
|
||||||
|
</div>
|
||||||
|
<div class="container full-height">
|
||||||
|
<div class="barcode-scanner--area--container">
|
||||||
|
<div class="relative">
|
||||||
|
<p>Aim your camera at a QR code</p>
|
||||||
|
</div>
|
||||||
|
<div class="square surround-cover">
|
||||||
|
<div class="barcode-scanner--area--outer surround-cover">
|
||||||
|
<div class="barcode-scanner--area--inner" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.invisible {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-height {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #fff;
|
||||||
|
font-family: sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
.square:after {
|
||||||
|
content: "";
|
||||||
|
top: 0;
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 100%;
|
||||||
|
}
|
||||||
|
.square > div {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.surround-cover {
|
||||||
|
box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.barcode-scanner--area--container {
|
||||||
|
width: 80%;
|
||||||
|
max-width: min(500px, 80vh);
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.barcode-scanner--area--outer {
|
||||||
|
display: flex;
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
.barcode-scanner--area--inner {
|
||||||
|
width: 100%;
|
||||||
|
margin: 1rem;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 0.5),
|
||||||
|
inset 0px 0px 2px 1px rgb(0 0 0 / 0.5);
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scanner-background {
|
||||||
|
background: linear-gradient(45deg, #673ab7, transparent);
|
||||||
|
background-position: 45% 50%;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue