LabVIEW Ribbon Interface

[hooovahh]

So this code is not polished at all, but it was something I did as a fun pet project and realize I won't be able to finish it any time soon.  It is a ribbon interface done in a way that could be scaled up.  Ribbon like UIs have been done in LabVIEW here.  

But these UI's relied on button controls, to be configured and made a specific way, and if you needed to update tabs, buttons, or groups, it had to be done manually.  So I wanted to come up with a way to make a ribbon like UI, but all that was required, was to provide the tabs, groups, and buttons, and the UI would be drawn.

The end goal was to make an XControl with value change events when the user presses one of the buttons, but for now this is just a demonstration of what is possible.  The idea was the XControl would also be smart enough to only redraw the parts of the image that were changed.  Like if I changed the top tab background color it wouldn't have to redraw all the bottom parts of the UI.

Here is a video demonstration.  Here I show the default settings, then change some of the color and text settings.

http://screencast.com/t/daan9D78vqV

Some of the challenges that you don't really think about, that the API needs to be able to handle, is the text being of an unknown length, and number of rows.  Things like the top tabs needed to be able to expand right, or down as needed, and all other tabs, and images needed to shift to compensate.  Same thing when it comes to the button and group text.  Here you also have the added complications with the fact that the text might fit in the space already needed, like if the button is wider than the text.

Images are scaled using .NET and the GDI resize.  This is also where images are combined, since some may have alpha layers, much like the included images do.

I knew image scaling might take a while, and wouldn't be the type of thing I would want to redraw as a mouse moved over a button.  So for that reason I draw all the button states on startup, and then just combine the appropriate images for when the mouse is over, or down on a group, button, or tab.  This means a pretty fast response on the UI but means more memory is needed to hold all the button states in memory. 

Doing the gradients efficiently for me meant doing them natively in LabVIEW.  I found some .NET code that would do it, but much slower than LabVIEW just drawing horizontal lines, and using math to determine the next color of the line.

Several times images or parts of images needed to be shifted and translated.  Instead of converting a picture back into image data, then performing the move, then converting back, I used the code posted by Norm here.  It needed to be updated for a few opcodes but for the most part is fantastic and made the image processing quicker.

Other than mashing this into an XControl, I also didn't get around to creating a way to disable or disable and grey out buttons.  This would take more image manipulation magic and possibly more images to hold in memory.  Since disabled buttons are probably going to be somewhat rare, I thought I might draw these on-the-fly instead of on init like all the other button states.

Anyway I hope someone finds something in this helpful, because I doubt I'll be able to do anything with it for a while.  Back saved to 2013, and remember this is very unfinished code, be gentle.

EDIT: Attachment removed, re-uploaded with example images below.

[MikaelH]

Why not add the "Examples Images" as well :-)

[hooovahh]

Why not add the "Examples Images" as well :-)

Because I'm an idiot and didn't test my code after back saving, which didn't include the subfolder that LabVIEW didn't know was a dependency.  Attached is an updated version including the images in the demo.

Ribbon Interface Test With Images.zip

[MikaelH]

just to let you know, your Back-Saving (this and also the Cluster to Tree upload) is behaving a bit strange.

When opening it, looks for SubVIs under the LV2015 folder, and I have to manually browse for them and get a Conflict notification.

[hooovahh]

When opening it, looks for SubVIs under the LV2015 folder, and I have to manually browse for them and get a Conflict notification.

After that does it open and run properly?  I really should install some other versions of LabVIEW, for stuff like this.

[MikaelH]

After that does it open and run properly?  I really should install some other versions of LabVIEW, for stuff like this.

Yes, after browsing and selecting the missing VIs it works fine.

Nice example

[Benoit]

I love the look. i think your idea is realy nice. May I have it on labview version 2011? I can start to make it as an Xcontrol...

[hooovahh]

I've back saved it to 2011, but it will make the code even uglier than it was already, because I used some of the conditional tunnels, and concatenating tunnels, on for loops.  Back saving code that uses these features earlier than 2011, makes functionally equivalent code, but uglies up the block diagram.

 

Making a good XControl is not an easy task.  And in this case you need to try to think efficiently.  If I update the top tab area with a property node, we need to only redraw that.  Same with inserting a new button or group, or tab.

Ribbon Interface Test 2011.zip

[Benoit]

Oh my good... Yeah Clean up... I'll try to work on this in some free time. I think it's possible but you are using external dll... I'm wondering how it will work in a xcontrol. I never try to use dll in XControl.

[hooovahh]

Oh my good... Yeah Clean up... 

Hey I didn't see anyone else posting code on this topic.  Besides I wanted there to be alot of flexibility.

 

 

I think it's possible but you are using external dll... I'm wondering how it will work in a xcontrol. I never try to use dll in XControl.

I'm not using any external DLL, just .NET for the image scaling.  But even so why should that matter in an XControl?  An XControl is just a VI that calls some external interface like any other VI.

 

The image scaling could be done natively but wouldn't support alpha layers which is kinda important for this, and it would be much slower, and the scaled image wouldn't look as good, I've tried.