First Bytes - LabVIEW

Today’s Session• Introduction to LabVIEW

• Colors and computers

• Lab to create a color picker

• Lab to manipulate an image

Visual Programming Image Manipulation 2

3

LabView• LabVIEW is a graphical programming language

– as opposed to a text based programming language such as Java or C++

– originally developed to collect and analyze data from instrumentation.

– can be used as a general purpose programming language

• There are similarities– must think about what the problem is– what is the program suppose to do?– must plan a solution– must implement and test the solution

• The difference is what you do when implementing solution.– typing vs. working with icons

Colors and Computers• Computers store numbers.

• How to store colors?

• Color models

• RGB

• Look at source code for a web page– search for “color”

Visual Programming Image Manipulation 4

Visual Programming Image Manipulation 5

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

Exercise• Complete LabVIEW program to create a

color picker

Visual Programming Image Manipulation 6

Visual Programming Image Manipulation 7

Loading Images VI• Block Diagram of VI that allows user to

load jpg images from a file and displays the image

Visual Programming Image Manipulation 8

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

Visual Programming Image Manipulation 9

Image Data

Visual Programming Image Manipulation 10

Image Data

Visual Programming Image Manipulation 11

RGB Colors• What color is that pixel at the top left

corner? Looks very black

• Unbundle image to get at image array

Visual Programming Image Manipulation 12

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

Visual Programming Image Manipulation 13

Viewing a Single Color• Developed a VI to do this in an early lab

• a single function exists

Controls and indicatoradded.

Visual Programming Image Manipulation 14

Sample Single Colors

Moss? Black.

Visual Programming Image Manipulation 15

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

Visual Programming Image Manipulation 16

Unflatten Image Function• Most interested in the 24-bit pixmap

Visual Programming Image Manipulation 17

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

Image Manipulation• Program already done to pull out red,

green, and blue components

• Now make changes such as– swapping– brighter– darker– remove one color channel– invert– posterize

Visual Programming Image Manipulation 18

Visual Programming Image Manipulation 19

Original

Visual Programming Image Manipulation 20

Result