@@ -9,16 +9,9 @@ const ctx = canvas.getContext('2d');
99// https://developer.chrome.com/articles/serial/
1010// https://wicg.github.io/serial/
1111
12- // Set the buffer size to the total bytes. This allows to read the entire bitmap in one go.
13- const bufferSize = 2 * 1024 * 1024 ; // Max buffer size is 16MB
14- const flowControl = 'hardware' ;
15- const baudRate = 115200 ; // Adjust this value based on your device's baud rate
16- const dataBits = 8 ; // Adjust this value based on your device's data bits
17- const stopBits = 2 ; // Adjust this value based on your device's stop bits
18- const parityBit = 'even' ; // Adjust this value based on your device's parity bit
1912
2013const imageDataProcessor = new ImageDataProcessor ( ctx ) ;
21- const connectionHandler = new SerialConnectionHandler ( baudRate , dataBits , stopBits , parityBit , flowControl , bufferSize ) ;
14+ const connectionHandler = new SerialConnectionHandler ( ) ;
2215
2316connectionHandler . onConnect = async ( ) => {
2417 connectButton . textContent = 'Disconnect' ;
@@ -43,9 +36,9 @@ connectionHandler.onDisconnect = () => {
4336 imageDataProcessor . reset ( ) ;
4437} ;
4538
46- function renderBitmap ( imageData ) {
47- canvas . width = imageDataProcessor . width ;
48- canvas . height = imageDataProcessor . height ;
39+ function renderBitmap ( width , height , imageData ) {
40+ canvas . width = width ;
41+ canvas . height = height ;
4942 ctx . clearRect ( 0 , 0 , canvas . width , canvas . height ) ;
5043 ctx . putImageData ( imageData , 0 , 0 ) ;
5144}
@@ -62,7 +55,7 @@ async function renderFrame(){
6255 if ( ! bytes || bytes . length == 0 ) return false ; // Nothing to render
6356 // console.log(`Reading done ✅. Rendering image...`);
6457 const imageData = imageDataProcessor . getImageData ( bytes ) ;
65- renderBitmap ( imageData ) ;
58+ renderBitmap ( imageDataProcessor . width , imageDataProcessor . height , imageData ) ;
6659 return true ;
6760}
6861
0 commit comments