3D Map - Color Code and Cursor Tracking

[cotani]

Hi, I need some help trying to implement some user interface functionality for a program I am developing.

This will be a tuning tool for automotive ECU. The program will be reading in two signals (Y-axis is RPM, X-Axis is manifold pressure) and use a 2D interpolation to output a Z value to be used in a calculation. There are two pieces I'd like to add to this. 

1. Color code the cells based on the cell value in relation to the max and in of the entire 2D-Array

2. Have a live currsor that tracks the current cell of the 2D array and highlights the cells that are being used in the interp calculation so it makes it easier for the user to make changes and calibrate the tables. 

3. BONUS: An easy way to be able to select a range of cells and increment them by a set amoun or scale them all by an imput amount (like scale range by 90%).

Basicly, I'd like to recreate some of the user interface functionality of the software shown below in the second picture and the video linked below. 

VIDEO:    https://www.youtube.com/watch?v=OkVUJCy0sJ4

VIDEO:   https://www.youtube.com/watch?v=oeZc-ka6ago      (at 16:45 you can see a good example of the currsor tracking through the cells as teh two inputs change)

-As you drive and the RPM and loading changes there is a blue ball that tracks on the table the current x-y location of the 2D map and the four coresponding cells around the ball are highlighted to show witch of these cells are being used in the calculation so the user can easily alter these cells in real time to tune the output he is looking for. I'd like to be able to highlight, or blink either a single cell closest to the current value, or the 4 corners around it and have it update real time as the user drives the car. 

Any ideas of how to implement this kind of functionality? The current VI is attached. I should note the x-array and y-array won't necessarily always be constant spacing between cells.

Thank you for any help in advance!

[cotani]

Okay, so I made some progress on this. I was able to use an intensity graph to visually color code the relative position of the cells. Is there a way to make the 2D array translucent and overlay the color array intsity graph behind it? is there a better way to do this. 

I was able to get the closest current cell value to update as black and track around live on the intensity graph. I did this by temporarily setting the cell's value to 0. Is there a way to somehow highlight the actual cell on the 2D-Array instead? 

The code is attached. I added a random sine wave input to simultate some signals for the x and y input. The Y array now runs in reverse order which made it tricky to get some of the functions to work properly so I had to use a 2D transpose and 1D reverse array to get it back in the right form. There's probably a better way to do this. 

Any help is great appreciately and rewarded with Kuddos!  

[RichieTheBard]

Overlapping front panel elements is not a recommendable practice and could results on crashes of the application and poor performance. You  would have to see if you can programatically alter the properties of the individual cells, to change their background color on each iteration, or to simplify the programming maybe each time the value of a cell is updated.

[thoult]

The caveat about overlapping front panel elements is relevant for graphs, but it's a common enough technique. For instance, overlapping a table control with a transparent indicator is often the only way to reduce flicker.

Probably more common is using a color box with a transparent indicator over the top. Here's a quick example, albeit using strings (based on another tool I wrote). A random number is generated and a random colour picked for each cell in this case:

[cotani]

Thank you for the replies! 

Thoult's post was very helpful and I was able to create an array of numeric and color box clusters to give me the ability to display color coded number box and have the ability to programaitcly update them.  I know have it randomly color coded just to see how the apperance is. The VI is attached. 

Now I need help color scaling boxes based on their relative value to the max and min of the array. I'd like it to run from red to yellow to green with the colors interpolated inbetween similar to how the color intensity graph looked that I posted earlier (the last picture of this post). 

Any ideas on how to accomplish this?

[thoult]

Interpolation of colours is reasonably straight forward. For simple linear interpolation given a number of colour stops:

- Define your colour stops in terms of data value and colour integer (color box constant or integer...I always work in hex for these)

- Convert the colours to RGB values (there's a VI for this on the conversion palette)

- Order these in ascending data value, and find the fractional index at which your new value occurs using Threshold 1D Array

- Use Interpolate 1D Array to find the corresponding RGB channel values from the colour stop channel arrays and the fractional index

- Convert back to numeric using the VI on the numeric conversion palette.

A nice concise example is aestet's post here.

There are a few other ways of doing it, but that's probably the easiest to explain, especially with a nice example.

[cyotani]

Thanks Thoult! Aestet's exampled that you linked is exactly what I was looking for.

I have the color coding down now and am just trying to optimize the refresh to reduce overhead. I'll post up the code I'm working with when I get finalized and hopefully get some feedback on how to optimize it. 

[cotani]

Okay, so I now have th color scale and cursor tracking functionality working nicely. The problem is that I have a race condition for the Z-array. At the begining of my loop I am checking the number array to see if the user changed any value and to perform a color cell update if they did. At the end of the loop I am updating the array with the current currsor cell to white to display to the user which cell the vehicle is opperating in. 

In this current form, the user can not update any value of the z-array because they are overwritten by to their orginal value with the currors update function at the end.

Any idea for how to properly set this up? Most recent VIs are attached.