rschneider/fitness-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

serial-reader

Browse Source
This commit is contained in:
Schneider Roland 2023-08-25 18:27:54 +02:00
parent 691eb0cf23
commit b7d265d92a
3 changed files with 274 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/views/common/_reception_form_card_number.php
View File

@ -30,11 +30,12 @@ if ( isset($model->card)){
<?php $form = ActiveForm::begin([
'enableAjaxValidation' => false,
'method' => 'get',
'action' => $route
'action' => $route,
'id' => 'reception-card-number-form'
]); ?>
<div class="row" >
<div class='col-md-12'>
<?php echo Html::textInput("number", $number ,['class' => 'form-control', 'placeholder' => 'Kártya/kulcs szám'])?>
<?php echo Html::textInput("number", $number ,['class' => 'form-control', 'placeholder' => 'Kártya/kulcs szám', 'id' => 'input-reception-card-number'])?>
</div>
</div>
<div class="row" >

230
frontend/views/customer/reception.php
View File

@ -9,230 +9,10 @@ use frontend\components\ReceptionWidget;
<h1>Recepció</h1>
<?php
echo ReceptionWidget::widget(['form' => $model, 'route' => ['customer/reception']]) ?>
<script>
const qrcodeReader = {
usbVendorId: 0x0c2e, usbProductId: 0x1094, name: 'qrcode'
};
const rfidReader = {
usbVendorId: 0x09d8, usbProductId: 0x0420, name: 'rfid'
};
<?php if ( !isset($model->card)){ ?>
<?= $this->render('serial', [
'model' => $model,
]) ?>
<?php } ?>
const readers = [qrcodeReader,rfidReader];
let defaultOptions = {
device: {
name: '',
usbVendorId: 0x0,
usbProductId: 0x0
},
onChange: (value) => {
console.info('change', value)
},
onConnect: (e) => {
console.info('connect', e)
},
onDisConnect: () => {
console.info('disconnect', e)
},
onError: () => {
},
onPairRequired: (device) => {
console.info('pair required', device)
}
}
class SerialReader {
connected = false;
port = null;
paired = false;
value = null;
options = null;
constructor(options) {
this.options = options;
}
initialize = async () => {
await this.connect();
}
listen = async (options) => {
const port = options.port;
console.info("listening device", options?.device?.name);
while (port.readable) {
const reader = port.readable.getReader();
try {
while (true) {
const {value, done} = await reader.read();
const str = String.fromCharCode.apply(null, value);
if (done) {
// |reader| has been canceled.
break;
}
options.onChange(str, options.device);
// Do something with |value|...
}
} catch (error) {
// Handle |error|...
options.onError(e, options.device, 'listen');
} finally {
reader.releaseLock();
}
}
}
getPortByDevice = async (device) => {
const ports = await navigator.serial.getPorts([device]);
return ports.find(value => {
const info = value.getInfo();
return info.usbVendorId === device.usbVendorId;
});
}
connect = async () => {
const options = this.options;
this.port = await this.getPortByDevice({
usbVendorId: options.device.usbVendorId
});
if (!this.port) {
options.onPairRequired({device: options.device});
return;
}
this.paired = true;
console.info("opening port", options, this.port);
// Wait for the serial port to open.
await this.port.open({baudRate: 9600});
this.connected = true;
console.info("opened", this.port, options)
await this.listen({
...options,
port: this.port, onChange: (str) => {
options.onChange(str);
}
});
};
isConnected = () => {
return this.connected;
}
isPaired = () => {
return this.paired;
}
getValue = () => {
return this.value;
}
requestPair = async () => {
await navigator.serial
.requestPort({
filters: [{
usbProductId: this.options.device.usbProductId,
usbVendorId: this.options.device.usbVendorId
}]
})
// .requestPort({filters: [{usbVendorId}]})
console.info("connecting");
await this.connect();
}
}
const ready = async () => {
const pikcAPort =
async () =>
{
const vendors = document.getElementById('vendors');
const deviceGroupName = vendors.value;
let filters = undefined;
const usbVendorId = readers.find(reader => reader.name === deviceGroupName)
if (deviceGroupName) {
let vendor = (deviceGroupName == 'rfid') ? rfidReader.usbVendorId : qrcodeReader.usbVendorId;
filters = [{
usbVendorId
}];
}
const requestedPort = await navigator.serial
.requestPort({
filters
})
}
}
const qrcode = new SerialReader({
...defaultOptions,
device: qrcodeReader,
onChange: (value) => {
console.info(value)
}
});
const rfid = new SerialReader({
...defaultOptions,
device: rfidReader,
onChange: (value) => {
console.info(value)
}
});
await qrcode.initialize();
await rfid.initialize();
const btnRfid = document.getElementById("rfid");
const btnQRcode = document.getElementById("qrcode");
btnRfid.addEventListener('click', async () => {
await rfid.requestPair();
});
btnQRcode.addEventListener('click', async () => {
await qrcode.requestPair();
})
const sleep = m => new Promise(r => setTimeout(r, m))
const readStatus = async (millis) => {
const serialPorts = await navigator.serial.getPorts();
const infoDiv = document.getElementById('allowed_devices');
infoDiv.innerHTML = '';
for (let port of serialPorts) {
const {usbVendorId, usbProductId} = port.getInfo();
const infoDiv = document.createElement('div');
infoDiv.innerHTML = '' + usbVendorId + '|' + usbProductId;
infoDiv.append(infoDiv);
}
await sleep(millis);
await readStatus(millis);
}
}
document.addEventListener('DOMContentLoaded', ready);
</script>
<div class="mt-3 ">
<h3>Engedélyezett eszközök</h3>
<div id="allowed_devices"></div>
<label for="vendors">Gyártók</label>
<select name="vendors" id="vendors" class="vendors">
<option value="">Mind</option>
<option value="qrcode">QRCode</option>
<option value="rfid">RFID</option>
</select>
<button class="btn btn-primary" id="rfid">Kártya Olvasó engedélyezése</button>
<button class="btn btn-primary" id="qrcode">QRCode Olvasó engedélyezése</button>
</div>
<?php
// echo "Timezone:" . date_default_timezone_get();
//echo date("Y-m-d H:i");
?>

266
frontend/views/customer/serial.php Normal file
View File

@ -0,0 +1,266 @@
<style>
.warning-component {
padding: 12px;
border-radius: 6px;
margin-top: 12px;
}
</style>
<script>
const qrcodeReader = {
usbVendorId: 0x0c2e, usbProductId: 0x1094, name: 'qrcode'
};
const rfidReader = {
usbVendorId: 0x09d8, usbProductId: 0x0420, name: 'rfid'
};
const readers = [qrcodeReader, rfidReader];
const ports = {};
class SerialReader {
connected = false;
port = null;
value = null;
options = null;
constructor(options) {
this.options = options;
}
listen = async () => {
const options = this.options;
const port = options.port;
console.info("Listening port")
while (port.readable) {
const reader = port.readable.getReader();
try {
while (true) {
const {value, done} = await reader.read();
const str = String.fromCharCode.apply(null, value);
if (done) {
// |reader| has been canceled.
break;
}
options.onChange(str);
// Do something with |value|...
}
} catch (error) {
console.info("Error while listening port", error);
// Handle |error|...
// options.onError(error, options.device, 'listen');
} finally {
console.info("stopped listening port");
reader.releaseLock();
}
}
}
connect = async () => {
const options = this.options;
const port = options.port;
console.info("opening port", options, this.options.port);
await port.open({baudRate: 9600});
this.connected = true;
console.info("opened", options);
};
}
const pageLoadedAt = new Date().getTime();
const openCardNumber = (cardNumber) => {
if ( (new Date().getTime() - pageLoadedAt ) < 400 ){
return;
}
const input = document.getElementById('input-reception-card-number');
const form = document.getElementById('reception-card-number-form');
input.value = cardNumber;
form.submit();
}
const ready = async () => {
const startSerialReader = async (port) => {
const info = port.getInfo();
const id = info.usbVendorId + "_" + info.usbProductId;
const serialReader = new SerialReader({
port,
id,
onChange: (cardNumber) => openCardNumber(cardNumber)
}
);
ports[id] = serialReader;
await serialReader.connect();
serialReader.listen().then(() => console.info("listen finishend"))
}
const pickPort = async () => {
const vendors = document.getElementById('vendors');
const deviceGroupName = vendors.value;
console.info("vendorgroup selected", deviceGroupName);
let filters = readers
.filter(reader => reader.name === deviceGroupName).map(reader => ({'usbVendorId': reader.usbVendorId}));
console.info("Calling requestPort with filters", filters);
try {
const requestedPort = await navigator.serial
.requestPort({
filters: filters
});
await startSerialReader(requestedPort);
readStatus(0).then();
} catch (e) {
alert('Nem választott eszközt!')
}
}
const btnRfid = document.getElementById("rfid");
const btnQRcode = document.getElementById("qrcode");
const btnSelectDevice = document.getElementById("selectDevice");
// btnRfid.addEventListener('click', async () => {
// await rfid.requestPair();
// });
//
// btnQRcode.addEventListener('click', async () => {
// await qrcode.requestPair();
// });
btnSelectDevice.addEventListener('click', async () => {
await pickPort();
});
const sleep = m => new Promise(r => setTimeout(r, m))
const readStatus = async (millis) => {
const serialPorts = await navigator.serial.getPorts();
const infoDiv = document.getElementById('allowed_devices');
infoDiv.innerHTML = '';
const table = document.createElement("table");
table.classList.add('table');
table.classList.add('table-bordered');
const header = document.createElement("thead");
const tbody = document.createElement("tbody");
const headerRow = document.createElement('tr');
header.appendChild(headerRow);
const createTd = (text) =>{
const td = document.createElement('td');
td.innerText = text;
return td;
}
headerRow.appendChild(createTd("Vendor"))
headerRow.appendChild(createTd("Product"))
headerRow.appendChild(createTd("Típus"))
table.appendChild(header);
for (let port of serialPorts) {
const {usbVendorId, usbProductId} = port.getInfo();
const tableRow = document.createElement('tr');
const devices = readers.filter(reader => (reader.usbVendorId === usbVendorId));
let readerGroup = "Ismeretlen";
if (devices && devices.length) {
readerGroup = devices[0].name;
}
tableRow.innerHTML =
'<td>' + usbVendorId + '</td><td>' + usbProductId + '</td><td>' + readerGroup+'</td>';
tbody.appendChild(tableRow);
}
table.appendChild(tbody)
infoDiv.appendChild(table);
console.info("ports", serialPorts);
console.info("qr found", serialPorts.find(port => qrcodeReader.usbVendorId === port.getInfo().usbVendorId));
const displayWarningRfid = !serialPorts.find(port => rfidReader.usbVendorId === port.getInfo().usbVendorId);
const displayWarningQRCode = !serialPorts.find(port => qrcodeReader.usbVendorId === port.getInfo().usbVendorId);
console.info("displayWarningQRCode", displayWarningQRCode);
const warningComponentRfid = document.getElementById("warning-component-rfid");
const warningComponentQrcode = document.getElementById("warning-component-qrcode");
const setClassName = (element, className, active) => {
if (element) {
if (active) {
element.classList.add(className);
} else {
element.classList.remove(className);
}
}
}
setClassName(warningComponentRfid, 'show', displayWarningRfid);
setClassName(warningComponentRfid, 'hide', !displayWarningRfid);
setClassName(warningComponentQrcode, 'show', displayWarningQRCode);
setClassName(warningComponentQrcode, 'hide', !displayWarningQRCode);
if ( millis ){
await sleep(millis);
await readStatus(millis);
}
}
const start = async () => {
const serialPorts = await navigator.serial.getPorts();
for (const port of serialPorts) {
await startSerialReader(port)
}
}
readStatus(1000).then();
start().then(() => console.info("Startup process ready"))
}
document.addEventListener('DOMContentLoaded', ready);
</script>
<div class="mt-3 ">
<h3>Engedélyezett eszközök</h3>
<div class="alert-danger warning-component " id="warning-component-rfid">
Rfid olvasó nem található
<br>
<ul>
<li>Válaszd ki az 'Eszköztipusok' lenyiló listából az RFID olvasót</li>
<li>Nyomd meg az olvasó engedélyezée gombot</li>
<li>A felugró ablakban válaszd ki ismét az rfid olvasót</li>
<li>Nyomd meg a csatlakozás (connect) gombot</li>
</ul>
</div>
<div class="alert-danger warning-component" id="warning-component-qrcode">
QRCode olvasó nem található
<br>
<ul>
<li>Válaszd ki az 'Eszköztipusok' lenyiló listából az QRCode olvasót</li>
<li>Nyomd meg az olvasó engedélyezée gombot</li>
<li>A felugró ablakban válaszd ki ismét az QRCode olvasót (Pl.: HF680)</li>
<li>Nyomd meg a csatlakozás (connect) gombot</li>
</ul>
</div>
<div id="allowed_devices"></div>
<label for="vendors">Eszköztipusok</label>
<select name="vendors" id="vendors" class="vendors">
<option value="">Mind</option>
<option value="qrcode">QRCode</option>
<option value="rfid">RFID</option>
</select>
<button class="btn btn-primary" id="selectDevice">Olvasó engedélyezése</button>
<!-- <button class="btn btn-primary" id="rfid">Kártya Olvasó engedélyezése</button>-->
<!-- <button class="btn btn-primary" id="qrcode">QRCode Olvasó engedélyezése</button>-->
</div>