Introduction to Visual Basic Programming Chapter 3 – Introduction to Visual Basic Programming.
CS320n –Visual Programming
description
Transcript of CS320n –Visual Programming
![Page 1: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/1.jpg)
CS320n –Visual Programming
Image Manipulation
![Page 2: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/2.jpg)
Visual Programming Image Manipulation 2
What We Will Do Today• Look at how to alter images using
LabVIEW
![Page 3: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/3.jpg)
Visual Programming Image Manipulation 3
Loading Images VI• Block Diagram of VI that allows user to
load jpg images from a file and displays the image
![Page 4: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/4.jpg)
Visual Programming Image Manipulation 4
Image Data• The image cluster contains a
lot of data• The heart of the image is an
array of ints– each int only uses 1 byte or 8
bits– represents a number from 0 –
255
• three ints in a row represent the red, green, and blue intensity for 1 pixel– elements 0, 1, 2 are for the pixel
at row 0, column 0, the upper left corner
![Page 5: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/5.jpg)
Visual Programming Image Manipulation 5
Image Data
![Page 6: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/6.jpg)
Visual Programming Image Manipulation 6
Image Data
![Page 7: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/7.jpg)
Visual Programming Image Manipulation 7
RGB Colors• What color is that pixel at the top left
corner? Looks very black
• Unbundle image to get at image array
![Page 8: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/8.jpg)
Visual Programming Image Manipulation 8
RGB Colors• First three elements of
image array are 27, 26, and 5
• Intensity of red from 0 to 255– 0 is none, 255 is maximum
• a little red, a little green, almost no blue
• very close to black, all three 0
![Page 9: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/9.jpg)
Visual Programming Image Manipulation 9
Viewing a Single Color• Developed a VI to do this in an early lab
• a single function exists
Controls and indicatoradded.
![Page 10: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/10.jpg)
Visual Programming Image Manipulation 10
Sample Single Colors
Moss? Black.
![Page 11: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/11.jpg)
Visual Programming Image Manipulation 11
How Many Colors• If the encoding of an image allows red,
green, and intensity values of 0 – 255 there are
• 256 * 256 * 256 = 16,777,216 possible colors
• 1 byte per color per pixel
• 3 bytes total per pixel, 24 bits
• a.k.a. 24 bit image
![Page 12: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/12.jpg)
Visual Programming Image Manipulation 12
Altering Images• Some programming tools allow individual pixels
or areas to be affected, recolored.• We will look at altering image by affecting all
pixels in the image• need to work with the color data• can work with the array of colors from image• OR “unflatten” the image data to a 2d array
– go from an array of 1 dimension (like a list) to an array with 2 dimensions, like a table
![Page 13: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/13.jpg)
Visual Programming Image Manipulation 13
Unflatten Image Function• Most interested in the 24-bit pixmap
![Page 14: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/14.jpg)
Visual Programming Image Manipulation 14
Unflattening the ImageImage Wire
Displaying value in element 0,0Shown as a hexadecimal number,base 16.1B = red component, 1 * 16 + 11 * 1 = 271A = green component, 1 * 16 + 10 * 1 = 2605 = blue component, 0 * 16 + 5 * 1 = 5
![Page 15: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/15.jpg)
Visual Programming Image Manipulation 15
One filter – Invert image• Invert the image
– set each pixel = 16,777,215 – original value
• auto indexing really shines
2d array1d array single element
flatten back to image
![Page 16: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/16.jpg)
Visual Programming Image Manipulation 16
Original
![Page 17: CS320n –Visual Programming](https://reader035.fdocuments.in/reader035/viewer/2022062409/56814758550346895db494d7/html5/thumbnails/17.jpg)
Visual Programming Image Manipulation 17
Result