1- // This could be turned into a transform stream.
2- // See example here: https://github.com/mdn/dom-examples/blob/main/streams/png-transform-stream/png-transform-stream.js
3-
1+ /**
2+ * Represents an image data processor that converts raw image data to a specified pixel format.
3+ * This could be turned into a transform stream and be used in the serial connection handler.
4+ * See example here: https://github.com/mdn/dom-examples/blob/main/streams/png-transform-stream/png-transform-stream.js
5+ */
46class ImageDataProcessor {
57 pixelFormatInfo = {
68 "RGB565" : {
@@ -16,11 +18,19 @@ class ImageDataProcessor {
1618 "bytesPerPixel" : 3
1719 } ,
1820 "BAYER" : {
19- "convert" : null , // TODO
21+ "convert" : ( ) => { throw new Error ( "BAYER conversion not implemented." ) } ,
2022 "bytesPerPixel" : 1
2123 }
2224 } ;
2325
26+ /**
27+ * Creates a new instance of the imageDataProcessor class.
28+ * @param {CanvasRenderingContext2D } context - The 2D rendering context of the canvas.
29+ * @param {string|null } mode - The image mode of the image data processor. (Optional)
30+ * Possible values: RGB565, GRAYSCALE, RGB888, BAYER
31+ * @param {number|null } width - The width of the image data processor. (Optional)
32+ * @param {number|null } height - The height of the image data processor. (Optional)
33+ */
2434 constructor ( context , mode = null , width = null , height = null ) {
2535 this . context = context ;
2636 this . canvas = context . canvas ;
@@ -29,31 +39,62 @@ class ImageDataProcessor {
2939 if ( width && height ) this . setResolution ( width , height ) ;
3040 }
3141
42+ /**
43+ * Sets the image mode of the image data processor.
44+ * Possible values: RGB565, GRAYSCALE, RGB888, BAYER
45+ *
46+ * @param {string } mode - The image mode of the image data processor.
47+ */
3248 setMode ( mode ) {
3349 this . mode = mode ;
3450 this . bytesPerPixel = this . pixelFormatInfo [ mode ] . bytesPerPixel ;
3551 }
3652
53+ /**
54+ * Sets the resolution of the target image.
55+ * @param {number } width - The width of the resolution.
56+ * @param {number } height - The height of the resolution.
57+ */
3758 setResolution ( width , height ) {
3859 this . width = width ;
3960 this . height = height ;
4061 }
4162
63+ /**
64+ * Calculates the total number of bytes in the image data
65+ * based on the current image mode and resolution.
66+ *
67+ * @returns {number } The total number of bytes.
68+ */
4269 getTotalBytes ( ) {
4370 return this . width * this . height * this . bytesPerPixel ;
4471 }
4572
73+ /**
74+ * Checks if the image data processor is configured.
75+ * This is true if the image mode and resolution are set.
76+ * @returns {boolean } True if the image data processor is configured, false otherwise.
77+ */
4678 isConfigured ( ) {
4779 return this . mode && this . width && this . height ;
4880 }
4981
82+ /**
83+ * Resets the state of the imageDataProcessor.
84+ * This resets the image mode, resolution, and bytes per pixel.
85+ */
5086 reset ( ) {
5187 this . mode = null ;
5288 this . bytesPerPixel = null ;
5389 this . width = null ;
5490 this . height = null ;
5591 }
5692
93+ /**
94+ * Converts a pixel value from RGB565 format to RGB888 format.
95+ * @param {number } pixelValue - The pixel value in RGB565 format.
96+ * @returns {number[] } - The RGB888 pixel value as an array of three values [R, G, B].
97+ */
5798 convertRGB565ToRGB888 ( pixelValue ) {
5899 // RGB565
59100 let r = ( pixelValue >> ( 6 + 5 ) ) & 0x1F ;
@@ -66,16 +107,32 @@ class ImageDataProcessor {
66107 return [ r , g , b ] ;
67108 }
68109
110+ /**
111+ * Converts a grayscale pixel value to RGB888 format.
112+ * @param {number } pixelValue - The grayscale pixel value.
113+ * @returns {number[] } - The RGB888 pixel value as an array of three values [R, G, B].
114+ */
69115 convertGrayScaleToRGB888 ( pixelValue ) {
70116 return [ pixelValue , pixelValue , pixelValue ] ;
71117 }
72118
119+ /**
120+ * Converts a pixel value to RGB888 format.
121+ * @param {number } pixelValue - The pixel value to convert.
122+ * @returns {number[] } - The RGB888 pixel value as an array of three values [R, G, B].
123+ */
73124 convertToRGB888 ( pixelValue ) {
74- return [ pixelValue [ 0 ] , pixelValue [ 1 ] , pixelValue [ 2 ] ] ;
125+ return pixelValue ;
75126 }
76-
77- // Get the pixel value using big endian
78- // Big-endian: the most significant byte comes first
127+
128+ /**
129+ * Retrieves the pixel value from the source data at the specified index
130+ * using big endian: the most significant byte comes first.
131+ *
132+ * @param {Uint8Array } sourceData - The source data array.
133+ * @param {number } index - The index of the pixel value in the source data array.
134+ * @returns {number } The pixel value.
135+ */
79136 getPixelValue ( sourceData , index ) {
80137 if ( this . bytesPerPixel == 1 ) {
81138 return sourceData [ index ] ;
@@ -90,6 +147,12 @@ class ImageDataProcessor {
90147 return 0 ;
91148 }
92149
150+ /**
151+ * Retrieves the image data from the given bytes by converting each pixel value.
152+ *
153+ * @param {Uint8Array } bytes - The raw byte array containing the image data.
154+ * @returns {ImageData } The image data object.
155+ */
93156 getImageData ( bytes ) {
94157 const BYTES_PER_ROW = this . width * this . bytesPerPixel ;
95158
0 commit comments