I’ve been attempting to establish a connection with the serial port through a web page, and it seems that the supported method for this is using the Serial API.
var Serial = {};
(function() {
'use strict';
/*
* Initiate the Serial object
*/
Serial.debug = true;
// Serial.device;
Serial.log = function(message) {
if(Serial.debug)
{
let pre;
if(!document.querySelector('pre'))
{
pre = document.createElement('pre');
document.body.appendChild(pre);
}
pre = document.querySelector('pre');
pre.innerHTML += `\n${message}`;
}
}
Serial.request = function() {
const requestOptions = {
// Filtering devices with the Arduino USB vendor ID.
filters: [{ vendorId: 0x0403 }],
};
// Prompt user to select an Arduino device.
console.log(navigator);
console.log(navigator.serial);
const port = navigator.serial.requestPort(requestOptions);
// Open port and start reading data.
port.open({ baudrate: 19200 });
const reader = port.in.getReader();
while (true) {
const {done, data} = reader.read();
if (done) break;
console.log(data);
}
}
Serial.port = {
device:{},
connect:function()
{
let loop = () => {
this.device.transferIn(5, 64).then(result => {
Serial.log(result);
loop();
}, error => {
WebUSB.log(error);
});
}
console.log(this.device);
return this.device.open( {baudrate: 19200 })
.then(() => this.device.selectConfiguration(1))
.then(() => this.device.claimInterface(1))
.then(() => this.device.controlTransferOut({requestType: 'class', recipient: 'interface', request: 0x22, value: 0x01, index: 0x02}))
.then(() => {loop})
.then(
result => {
Serial.log('successfull');
}
)
.catch(
error => {
Serial.log(error);
}
);
},
send:function()
{
let d = new Date();
let h = d.getHours();
let m = d.getMinutes();
let s = d.getSeconds();
if(h < 10){h = `0${h}`};
if(m < 10){m = `0${m}`};
if(s < 10){s = `0${s}`};
let data = `show time ${h}${s % 2 == 1 ? ':' : ' '}${m}${s % 2 == 0 ? ':' : ' '}${s}`;
console.log(data);
let textEncoder = new TextEncoder();
WebUSB.port.device.transferOut(4, textEncoder.encode(data));
},
disconnect:function()
{
console.log(Serial.port.device)
Serial.port.device.close()
.then(
result => {
Serial.log('closed');
document.querySelectorAll('button')[1].parentNode.removeChild(document.querySelectorAll('button')[1]);
}
)
.catch(
error => {
Serial.log(error);
}
);;
}
}
})();
/*
*
*/
window.addEventListener('DOMContentLoaded', connect => {
let button = document.createElement('button');
button.innerHTML = 'Connect a USB Device';
button.addEventListener('click', Serial.request);
document.body.appendChild(button);
}, true);However, I have encountered an issue where the call to navigator.serial.requestPort() is failing as it appears that navigator.serial is undefined. Despite having ensured that the serial port is connected to my system, I am facing difficulties. Could it be that certain functions within navigator.serial and SerialPort in the Serial API are not fully implemented? For reference, I am using Chrome version 74.0.3729.131 on Ubuntu 16.04.