Using Alpha Colours in LabVIEW

I have been playing with LabVIEW Vision Development Module a bit over the last few months. I have an idea for a project that tracks the movement and vibrations of an object. Using a standard 24 bit RGB colour works, however if the same x;y coordinate is passed over more than once, visually it is difficult to see what is happening.

While making drawings in Inkscape, I am able to change the opacity/alpha level of a colour. This adds an extra 8 bits onto the colour, making it a 32 bit RGBA colour. According to Wikipedia:

The alpha channel is normally used as an opacity channel. If a pixel has a value of 0% in its alpha channel, it is fully transparent (and, thus, invisible), whereas a value of 100% in the alpha channel gives a fully opaque pixel (traditional digital images). Values between 0% and 100% make it possible for pixels to show through a background like a glass (translucency), an effect not possible with simple binary (transparent or opaque) transparency. It allows easy image compositing.

RGBA Colour Palatte

The above image, made in Inkscape, indicates how many dots with an alpha level of 0x2D, gets a more intense colour the more layers are added on top of each other. My project idea will then use this concept to show a type of intensity map.

I ran into my first problem when using the standard LabVIEW 2D Picture. From what I have seen, this is the only indicator in the standard LabVIEW package where you can display and draw pictures. This works well, and I have used it before, but only 24 bit RGB colours can be drawn. Even if you import a png image with alpha colours, they will be lost when displaying the image in a 2D Picture.

This led me to look at other ways that images can be displayed and drawn in LabVIEW. I decided to try using a .NET container with a System.Windows.Forms PictureBox.

LabVIEW .NET container - picturebox

I have used Windows dll’s before and they have generally worked quite well, obviously only on Windows machines. The main problem that I find is getting the versions correct and also finding the methods and properties that you want to use, as the libraries are usually very large. To get around this I turned to some C# and VB examples to see where to get started.

My aim was to get the concept working so that I can use it in a bigger project. I used my mouse cursor position to to draw many filled circles that follow the mouse. These were the steps that I followed:

Add the .NET Container to the front panel and insert a PictureBox control:

I made the container fill the pane so that it was easier to get the mouse position relative to the panel. The PictureBox can be found in the System.Windows.Forms class.

Create a new bitmap the same size as the PictureBox:

It is good practice to create a bitmap inside the PictureBox and then do all your drawing onto the bitmap. This makes saving and clearing the image a lot easier. Once the bitmap is created, add it to the PictureBox as an image. The bitmap can be found in the System.Drawing class.

Create the SolidBrush that we will use to draw the filled circles:

This is where we can define the colour (RGB) as well as the alpha level. Color and SolidBrush are both from the System.Drawing class.

One top tip to remember, when looking for the colour property and method, remember to spell it color and not colour. Windows is American so the spelling can catch you out.

Once you have defined the brush, you can start to draw onto the bitmap using the System.Drawing.Graphics class. In this case, I chose to draw a FillElipse (filled circle), but you can choose one or more of many different drawing tools.

I ran this in a while loop so that I could draw many circles and then when I stopped the application, I called the Bitmap.Save method and saved the bitmap as a png image. By saving it as a png image, you will keep all the alpha colours. The slower you move the mouse, the close the circles are together which implies that the circles are darker, more layered on top of each other.

LabVIEW alpha opacity colours

You can see that I also added a date and path to the image. This is what the image will look like in the .NET PictureBox. If you import the same image into LabVIEW using the Read PNG File function, you get this:

PNG in LabVIEW 2D Picture

As you can see, all the alpha colours have been lost. You can set the alpha level threshold so that anything above that level is set to its equivalent solid colour.

So although it is a bit more work to get the PictureBox working and set up, it is much better to display 32 bit images.

If you want to have a look at the code, please feel free do download it from below. As I mentioned earlier, versions might play a role in the vi working properly so I have developed this using LabVIEW 2013 on a Windows 8 machine.

If you need any assistance or have any tips, please leave a comment and I will get back to you.

Download Alpha Colours LabVIEW code

Greg

LabVIEW: Web Services Part 3

In Part 2 we had a look at connecting hardware and toggling the state on two LED’s using a form and a method VI.

Moving to the next stage of my project, I added a DS18B20 temperature sensor to log the temperature at set intervals. This interval is defined by using a variable constant. The temperature is logged to an SQLite3 database and when queried, displays the temperature profile in a Highcharts chart in the browser. Dates to display are chosen using a jQueryUI datepicker.

Logging temperature:

Temperature is logged every 60 seconds as set by Constants.lvlib:TemperatureLogDelay.vi. This VI is opened and run by reference from within Startup.vi when the server is started. It continues to run in the background as long as the server is running. 

Once the temperature has been read from the LaunchPad, it is logged in an SQLite3 database. I used a library written by Dr James Powell which can be downloaded from the LAVA Code Repository

The temperature is logged alongside the current date and time. The data and time string is used to choose what date range to display in the chart.

Query the temperature:

To query the database for the temperature range that we want to display, I use a jQueryUI datepicker. This gives me the dates that I want to look at and then I add the time in LabVIEW. I use a form with another GET method to pass the dates into LabVIEW and then I run the query there. 

The data gets returned from the query in the form or arrays.

Create JSON file:

Once I have an array of dates and temperatures, I need to reformat the arrays into a JSON string which Highcharts can understand. I start off my formatting each array into the correct format string and then create the complete JSON string. 

This string is then written to a .json file which is read by the javascript to display the chart.

Adding static files:

As we are using more API’s, we need to add these files to the static directories. To the static/css directory, add the jQuery datapicker theme. To the static/js directory, add the Highcharts, jQuery and jQuery datapicker js files. 

Editing chart.html:

The last thing to do is to add the <script> and html code to display the datepicker and chart. 

If no dates are selected, the today’s dates will be chosen by default.

A JSON file is then created from the query results. This file is saved into the static/json directory where it is read from within the script.

The webpage is then updated with the chart showing the temperatures for the dates selected. The settings of the chart and also the type of chart can be changed to whatever you like. Have a look at the Highcharts API for all the options. 

That is all for Part 3. You can find Part 2 here and Part 1 here. The completed project so far can be downloaded from below.

As always, comments and tips are always appreciated. 

Download LabVIEW Web Services Part 3

Greg