@@ -11,63 +11,52 @@ const ctx = canvas.getContext('2d');
11
11
// SEE: https://developer.chrome.com/articles/serial/#transforming-streams
12
12
// SEE: https://developer.chrome.com/articles/serial/#signals
13
13
14
- config = {
15
- "RGB565" : {
16
- "bytesPerPixel" : 2
17
- } ,
18
- "GRAYSCALE" : {
19
- "bytesPerPixel" : 1
20
- } ,
21
- "RGB888" : {
22
- "bytesPerPixel" : 3
23
- }
24
- } ;
25
-
26
- const imageWidth = 320 ; // Adjust this value based on your bitmap width
27
- const imageHeight = 240 ; // Adjust this value based on your bitmap height
28
- const mode = 'RGB565' ; // Adjust this value based on your bitmap format
29
- // const mode = 'GRAYSCALE'; // Adjust this value based on your bitmap format
30
- const totalBytes = imageWidth * imageHeight * config [ mode ] . bytesPerPixel ;
31
14
32
15
// Set the buffer size to the total bytes. This allows to read the entire bitmap in one go.
33
- const bufferSize = Math . min ( totalBytes , 16 * 1024 * 1024 ) ; // Max buffer size is 16MB
16
+ const bufferSize = 1024 * 1024 ; // Math.min(totalBytes, 16 * 1024 * 1024); // Max buffer size is 16MB
34
17
const flowControl = 'hardware' ;
35
18
const baudRate = 115200 ; // Adjust this value based on your device's baud rate
36
19
const dataBits = 8 ; // Adjust this value based on your device's data bits
37
20
const stopBits = 2 ; // Adjust this value based on your device's stop bits
38
21
39
- const imageDataProcessor = new ImageDataProcessor ( ctx , mode , imageWidth , imageHeight ) ;
22
+ const imageDataProcessor = new ImageDataProcessor ( ctx ) ;
40
23
const connectionHandler = new SerialConnectionHandler ( baudRate , dataBits , stopBits , "even" , "hardware" , bufferSize ) ;
41
24
42
- connectionHandler . onConnect = ( ) => {
25
+ connectionHandler . onConnect = async ( ) => {
43
26
connectButton . textContent = 'Disconnect' ;
27
+ cameraConfig = await connectionHandler . getConfig ( ) ;
28
+ const imageMode = CAMERA_MODES [ cameraConfig [ 0 ] ] ;
29
+ const imageResolution = CAMERA_RESOLUTIONS [ cameraConfig [ 1 ] ] ;
30
+ imageDataProcessor . setMode ( imageMode ) ;
31
+ imageDataProcessor . setResolution ( imageResolution . width , imageResolution . height ) ;
44
32
renderStream ( ) ;
45
33
} ;
46
34
47
35
connectionHandler . onDisconnect = ( ) => {
48
36
connectButton . textContent = 'Connect' ;
37
+ imageDataProcessor . reset ( ) ;
49
38
} ;
50
39
51
- function renderBitmap ( bytes , width , height ) {
52
- canvas . width = width ;
53
- canvas . height = height ;
54
- const imageData = imageDataProcessor . getImageDataBytes ( bytes , width , height ) ;
40
+ function renderBitmap ( imageData ) {
41
+ canvas . width = imageDataProcessor . width ;
42
+ canvas . height = imageDataProcessor . height ;
55
43
ctx . clearRect ( 0 , 0 , canvas . width , canvas . height ) ;
56
44
ctx . putImageData ( imageData , 0 , 0 ) ;
57
45
}
58
46
59
47
async function renderStream ( ) {
60
48
while ( connectionHandler . isConnected ( ) ) {
61
- await renderFrame ( ) ;
49
+ if ( imageDataProcessor . isConfigured ( ) ) await renderFrame ( ) ;
62
50
}
63
51
}
64
52
65
53
async function renderFrame ( ) {
66
54
if ( ! connectionHandler . isConnected ( ) ) return ;
67
- const bytes = await connectionHandler . getFrame ( totalBytes ) ;
55
+ const bytes = await connectionHandler . getFrame ( imageDataProcessor . getTotalBytes ( ) ) ;
68
56
if ( ! bytes || bytes . length == 0 ) return false ; // Nothing to render
69
57
// console.log(`Reading done ✅. Rendering image...`);
70
- renderBitmap ( bytes , imageWidth , imageHeight ) ;
58
+ const imageData = imageDataProcessor . getImageData ( bytes ) ;
59
+ renderBitmap ( imageData ) ;
71
60
return true ;
72
61
}
73
62
@@ -81,7 +70,7 @@ connectButton.addEventListener('click', async () => {
81
70
}
82
71
} ) ;
83
72
refreshButton . addEventListener ( 'click' , ( ) => {
84
- renderFrame ( ) ;
73
+ if ( imageDataProcessor . isConfigured ( ) ) renderFrame ( ) ;
85
74
} ) ;
86
75
87
76
saveImageButton . addEventListener ( 'click' , ( ) => {
0 commit comments