Skip to content

Commit

Permalink
Merge pull request #12 from ttycelery/ttycelery-screensharing-ui-patch
Browse files Browse the repository at this point in the history 
Screen sharing feature UI adjustment and code refactor
  • Loading branch information
@lc-at
lc-at committed Jan 7, 2022
2 parents 2830555 + 01ca4ed commit 97c9d0a
Show file tree
Hide file tree
Showing 7 changed files with 111 additions and 118 deletions.
150 changes: 63 additions & 87 deletions praesentia/static/praesentia.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,25 @@
QrScanner.WORKER_PATH = 'static/qr-scanner-worker.min.js';
QrScanner.WORKER_PATH = 'static/qr-scanner/qr-scanner-worker.min.js';

let qrData = '';
let capture, worker;

$('body').on('paste', event => {
let paste = event.originalEvent.clipboardData || window.clipboardData;
if (paste.files.length > 0) {
processQrImage(paste.files[0]);
}

event.preventDefault();
});

$('#qrImageFile').on('change', event => {
processQrImage(event.target.files[0]);
});

function processQrImage(file) {
function processQrImage(file, ignore_error = false) {
$('#qrData').text('scanning...');
QrScanner.scanImage(file).then((decodedText) => {
$('#qrData').text(decodedText.slice(0, 20) + '...');
QrScanner.scanImage(file, null, worker).then((decodedText) => {
qrData = decodedText;
$('#qrData').text(decodedText.slice(0, 20) + '...');
$('#btnSubmit').focus();
if ($('#autoSubmit').prop('checked')) {
$('#btnSubmit').click();
}
$('#hasQrData').show();
$('#btnStopScreenSharing').click();
}).catch(err => {
swal.fire('Error', 'Cannot read QR code. ' +
'Please make sure that it is an image that contains a QR code.', 'error');
if (!ignore_error)
swal.fire('Error', 'Cannot read QR code. ' +
'Please make sure that it is an image that contains a QR code.', 'error');
$('#qrImageFile').val('');
$('#hasQrData').hide();
$('#qrData').text('-');
});
}
Expand All @@ -52,6 +45,42 @@ function randomizeLatLong() {
};
}

async function scanVideoStream(imageData) {
const image = await createImageBitmap(imageData);
processQrImage(image, true);
};

async function startCapture() {
try {
await capture.startCapture();
$('#btnStartScreenSharing').prop('disabled', true);
$('#btnStopScreenSharing').prop('disabled', false);
} catch (err) {
console.error(err);
}
}


function stopCapture() {
$('#btnStartScreenSharing').prop('disabled', false);
$('#btnStopScreenSharing').prop('disabled', true);

capture.stopCapture();
}

$('body').on('paste', event => {
let paste = event.originalEvent.clipboardData || window.clipboardData;
if (paste.files.length > 0) {
processQrImage(paste.files[0]);
}

event.preventDefault();
});

$('#qrImageFile').on('change', event => {
processQrImage(event.target.files[0]);
});

$('#hurry').click(function () {
if ($('#hurry').prop('checked')) {
const randomLocation = randomizeLatLong()
Expand All @@ -76,6 +105,7 @@ $('#btnSubmit').click(function () {
localStorage.setItem('password', password);
localStorage.setItem('lat', lat);
localStorage.setItem('long', long);
localStorage.setItem('auto_submit', $('#autoSubmit').prop('checked'));
} else {
localStorage.clear();
}
Expand Down Expand Up @@ -110,6 +140,19 @@ $('#getLocation').click(function () {
}
});

$('#qrCodeSourceSelect').on('change', function () {
[$('#qrFileInput'), $('#qrScreenInput')].forEach(e => e.hide());
$('#' + $(this).val()).show();
});

$('#btnStartScreenSharing').click(function () {
startCapture();
});

$('#btnStopScreenSharing').click(function () {
stopCapture();
});

$(document).ready(async function () {
$('#hasQrData').hide();
if (localStorage.getItem('username')) {
Expand All @@ -118,75 +161,8 @@ $(document).ready(async function () {
$('#latitude').val(localStorage.getItem('lat'));
$('#longitude').val(localStorage.getItem('long'));
$('#rememberMe').prop('checked', true);
$('#autoSubmit').prop('checked', localStorage.getItem('auto_submit'));
}
capture = new StreamDisplay(scanVideoStream);
worker = await QrScanner.createQrEngine(QrScanner.WORKER_PATH);
});

$('#btnStartScan').click(function () {
startCapture();
});

$('#btnStopScan').click(function () {
stopCapture();
});

async function startCapture() {
try {
await capture.startCapture();
$('#btnStartScan').prop('disabled', true);
$('#btnStopScan').prop('disabled', false);
} catch (err) {
console.error(err);
}
}

$('#autoSubmit').click(function () {
if ($('#autoSubmit').prop('checked')) {
const username = $('#username').val();
const password = $('#password').val();
const lat = $('#latitude').val();
const long = $('#longitude').val();

if (
username.length <= 0 ||
password.length <= 0 ||
lat.length <= 0 ||
long.length <= 0
) {
$('#autoSubmit').prop('checked', false);
return swal.fire(
'Error',
'Please make sure to fill out all the fields.',
'error'
);
}
}
});

const scanVideoStream = async (imageData) => {
const image = await createImageBitmap(imageData);

QrScanner.scanImage(image, null, worker)
.then((code) => {
$('#qrData').text(code.slice(0, 20) + '...');
qrData = code;
$('#btnSubmit').focus();
$('#hasQrData').show();

stopCapture();

if ($('#autoSubmit').prop('checked')) {
$('#btnSubmit').click();
}
})
.catch((e) => {});
};

function stopCapture() {
$('#btnStartScan').prop('disabled', false);
$('#btnStopScan').prop('disabled', true);

capture.stopCapture();
}

0 praesentia/static/qr-scanner-worker.min.js → ...tatic/qr-scanner/qr-scanner-worker.min.js
View file
File renamed without changes.
0 ...entia/static/qr-scanner-worker.min.js.map → ...c/qr-scanner/qr-scanner-worker.min.js.map
View file
File renamed without changes.
0 praesentia/static/qr-scanner.umd.min.js → ...a/static/qr-scanner/qr-scanner.umd.min.js
View file
File renamed without changes.
0 praesentia/static/qr-scanner.umd.min.js.map → ...atic/qr-scanner/qr-scanner.umd.min.js.map
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions praesentia/static/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@
}
}

#qrInput {
margin-top: 1rem;
padding: 1rem;
#qrContainer {
margin-top: 0.5rem;
padding: 0.5rem 0.8rem;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 3px #ddd;
box-shadow: inset 0 1px 3px #ddd;
Expand Down
73 changes: 45 additions & 28 deletions praesentia/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,48 +45,65 @@ <h1>Praesentia</h1>
location from GPS</button>
</small>
</div>
<br>

<label>QR code source:</label>
<select class="pure-input-1" id="qrCodeSourceSelect">
<option value="qrFileInput">Image file</option>
<option value="qrScreenInput">Screen sharing</option>
</select>

<div id="qrContainer">
<div id="qrInput">
<label>QR Image:</label>
<div id="qrFileInput">
<input type="file" accept="image/*" id="qrImageFile">
</div>
<div class="shareScreen" id="qrInput">
<label> If you want use screen share instead of Image </label>
<button type="button" id="btnStartScan">Start scanning</button>
<button type="button" id="btnStopScan" disabled>
Stop scanning
</button>
<div>
<label class="pure-checkbox" for="autoSubmit">
<input type="checkbox" id="autoSubmit" />
Auto Submit
</label>
</div>
<div id="qrScreenInput" style="display: none;">
<small>
<strong>Note:</strong> This feature is not supported on Android
devices.
<button type="button" id="btnStartScreenSharing" class="pure-button pure-button-secondary">
Start sharing</button>
<button type="button" id="btnStopScreenSharing" class="pure-button pure-button-secondary"
disabled>
Stop sharing</button>
</small>
</div>
<label>
<small>
<strong>ProTip!</strong> You can scan your QR code image from your clipboard, just
<kbd>ctrl</kbd>+<kbd>v</kbd>
it here.
</small>
</label>
</div>

<label>
<small>
<strong>ProTip!</strong> You can scan your QR code image from your clipboard, just
<kbd>ctrl</kbd>+<kbd>v</kbd>
it here.
</small>
</label>
<br>

<label><span id="hasQrData">✓</span> QR Data: <code id="qrData">-</code></label><br>

<div class="pure-g">
<div class="pure-u" style="margin-right: 1rem;">
<button type="button" class="pure-button pure-button-primary" id="btnSubmit">Submit</button>
</div>

<div class="pure-u">
<label class="pure-checkbox" for="rememberMe">
<input type="checkbox" id="rememberMe">
Remember me
</label>
<div class="pure-g">
<div class="pure-u">
<label class="pure-checkbox" for="rememberMe" style="margin-right: 1rem;">
<input type="checkbox" id="rememberMe">
Remember me
</label>
</div>

<div class="pure-u">
<div class="pure-u">
<label class="pure-checkbox" for="autoSubmit">
<input type="checkbox" id="autoSubmit">
Auto submit
</label>
</div>
</div>
</div>
</div>

</div>
</fieldset>
</form>
Expand All @@ -102,7 +119,7 @@ <h1>Praesentia</h1>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='qr-scanner.umd.min.js') }}"></script>
<script src="{{ url_for('static', filename='qr-scanner/qr-scanner.umd.min.js') }}"></script>
<script src="https://unpkg.com/stream-display@latest/dist/stream-display.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ url_for('static', filename='praesentia.js') }}"></script>
Expand Down

0 comments on commit 97c9d0a

Please sign in to comment.