Where to start with custom UI?

[Uke88]

Hello all,

I started using LV about a year ago and I had to get some code working for a project.  We needed a horizontal slider bar which could be increment/decremented.  Awesome, I thought, I'll just add the digital display.  However, that made my front panel look really, really ugly.  So I descided to add two booleans to the left and right of the slider bar along with an indicator above it.  Same basic concept that when a button is pressed it increments/decrements via updating the slider bar's position and in turn the slider bar updates the indictaror.  All of this is done with local variables and references.

I took the brute force approach to solving this problem and it works, I'm just no happy with it in the slightest.  I've been looking into creating custom controls now but I honestly have no idea where to start.  I tried editing the slider bar then editing the inc/dec control.  Once I modded the inc/dec, I tried to drag it back into the horizontal slider bar, but it failed horribly.

Currently, I'm looking for a push in the right direction on where to start my search into custom UI's.  Any advice would be great.

Thanks,

Matt

[swatts]

Hi Matt,

How about showing us an image of what you want. Just to save us going off on a tangent.

Cheers

Steve Watts

[TroyK]

There's a few tricks you can do with just purely control customization that may achieve what you have described.

No code, just a control...

See attached control for example.

[Uke88]

swatts,

I probably should have upload an image of what I'm looking for, but I primarily am interest in learning how to do custom UI's right now.  I feel back asking people to do something for me if I haven't put in effort to learn it myself.

TroyK,

That is exactly what I'm looking for.  Did you make that or did you get it from somewhere?  Is there a tut on how to make those? 

Although I truly appreciate getting the solution to what I want, I'd still like to know how to do it myself for future UI's.  I would really appreciate it if someone could direct me where to start learning how to make a custom UI.

Matt

EDIT:

say I want to change the inc/dec buttons, from when they are pressed they still go left/right instead of down/up respectively, would I just import a new image in for the picutre item?

[Thoric]

Read the comments in this thread for creating custom buttons.

From that you'll get some experience with customised controls, sufficient to understand how to customise others yourself.

[joerg.hampel]

Take a look at this presentation by Grant Heimbach (if you haven't already seen it):

http://www.ieee.li/pdf/viewgraphs/creating_quality_uis_with_labview.pdf

I like the concepts and ideas, and they're easy to adopt.

Regards,

Joerg

[Uke88]

@Thoric

Hell of a post, thanks man!  Question for you though.  When reading, I noticed you were having transparency issues.  From Joerg's link, Grant - the guy who did the power point and videos I believe - said that PNGs can handle the transparency stuff.  Why not use a png file when dealing with powerpoint stuff?

@joerg.hampel

That is an awesome link to beginner concepts and design.  It doesn't go into too much detail on what I'm looking for exactly, but its giving me great ideas on what to do to make my UI better.  Many thanks.

So I think I know what I need to do now. 

I need to select the inc/dec -> edit -> customize -> import pictures from gimp/PP (not too good with gimp, assuming PP is easier?) for pressed and not pressed -> save the customized inc/dec -> replace the one on the horizontal slider with mine

Is that correct?

Matt

[Thoric]

Can't recall what the problems were with the transparency now, but PowerPoint exports images as png, so that's precisely what I was using.

There's another set of guides on here somewhere that are good for customised user interfaces. I'll keep an eye out for it...

[Uke88]

@Thoric

Thanks a lot!  I know that there is a lot of good info around this group, it's just overwhelming to learn because I couldn't find a starting point.  Thus far, you guys have made this painless for me.

Thanks all.

Matt

[TroyK]

Uke88 wrote:

I need to select the inc/dec -> edit -> customize -> import pictures from gimp/PP (not too good with gimp, assuming PP is easier?) for pressed and not pressed -> save the customized inc/dec -> replace the one on the horizontal slider with mine

Is that correct?

Hi Matt,

Yes this is essentially correct, how did you go?

For me it was a long time before I found out how to edit the sub-elements (such as increment/decrement buttons) on a control.

Christina Rogers has posted a lot of useful tips  about customising UIs in this user group and her blog.

Future reference for people finding this thread, here are the full instructions:

Right-click control > Advanced > Customize...

To get into the individual element "Customize Mode":

   Click the little spanner icon

   or Operate > Change to Customize Mode

   or Ctrl+M

Now select the digital display sub-component and from the menu select Edit > Customize Control.

You will now be editing just the numeric control sub-component of the original slider control.

This works with most controls.

Editing it is the same as editing any other control. You can shuffle things around, replace images etc etc.

I highly recommend teaching yourself  to use GIMP. You can start off with an image made in PowerPoint or something like that and then fine tune it in GIMP to start with. But once you learn how to use it you'll go straight for GIMP (or some Adobe product if you have an unlimited budget).

I also use a lot of images from OpenIconLibrary.