LabVIEW

cancel
Showing results for 
Search instead for 
Did you mean: 

Formatting NI Controls NXG WebModule

Hello i'm trying to build an Web Panel for our customer using LabVIEW NXG with the Web Module.

To customize the controls and indicators (objects) there are some examples in css.

But if you dont know the nested structure and attributes of an object you cant manipulate the design. Especially the black border around some of the controls e.g. 

ni-string-control { background-color: transparent; border-color: transparent; }

the background color will be set to transparent - but the border-color will be ignored.

So I'm searching for some attributes of the ni-string-control - but could not find any.

Please help me  ! thanks a lot

0 Kudos
Message 1 of 5
(3,439 Views)

Hi MSplusD,

 

Something to be aware of: this is an advanced use case. Modifying CSS styles from the NI defaults will mean you need to manually update these when upgrading to the next version of the Web Module. The CSS selectors we are using are not stable from release to release, and we don't update your custom CSS if you were to open your WebVI in a new version of LabVIEW NXG.

 

We are making significant WebVI styling changes from Web Module 2.x to Web Module 3.0 (to remove those thick, dark borders, by popular demand) so you could just sit tight and upgrade to see if that gets your UI closer to what you are after.

 

If you still want to tackle this, then I recommend you

  1. read our help topic: http://www.ni.com/documentation/en/labview-web-module/2.0/manual/customizing-appearance-controls-web...  and
  2. watch our NIWeek 2018 presentation/walkthrough [jump to the 26:35 mark to zip to CSS styling]  https://learn.ni.com/center-of-excellence/resources/1144/styling-and-customizing-webvis

Before you give it a go.

 

I've attached at a sample CSS that we created for a Keynote Demo at NIWeek that removes borders and changes background colors for a variety of controls/indicators. It only customizes the specific controls we wanted to customize for our demo. I am attaching it in hopes that it is a good starting point for you to build upon. You can also search our NI knowledge base for help (i.e. there is a KB on Removing Border on WebVI Button). 

 

To use the CSS file I've attached, you will need to:

  1. Download the Zip with my CSS file, and Unzip the attachment.
  2. From your Web Component, Import the CSS file
  3. Edit your Top Level WebVI HTML to include a link to this CSS file
    • <link rel="stylesheet" type="text/css" href="custom.css"> 
  4. Edit the CSS file to replace the NI Control ID values with IDs that match the controls in your Front Panel. You can find those IDs by selecting a WebVI Control in the IDE, looking in the right-side Item configuration pane for the CSS Selector field, copying the read-only ID, and pasting into your CSS file.

 

We are working on making this process more straightforward and well-documented going forward. Presently we are wrestling with the policy for how to best handle this release to release while still trying to track the fast moving Web Technology space.

 

I would love to hear how this goes for you. If you have feedback or suggestions, that will help us plan out what we do on this front in subsequent releases.

Darin Gillis
NI - Chief Product Owner - VeriStand
Message 2 of 5
(3,376 Views)

Hi Darin,

thanks for your feedback !

 

Ok - that's all clear - using css styles will be in our own administration.

 

The NXG WebModule is a very great tool for design Webpages with connection to technical data aquisition. And we won't gave up to implement our ideas with that tool.

Therefore we struggling with the details until it works fine, looking for any documentation that we can find.

So thanks a lot for your link's and your examples !

We have made a workaround with overlapping borders - so it look's not so griddish 🙂

and Looking forward to version 3.0 ... hope it comes soon.

I am working since 1995 with labVIEW (4.0) and NXG is a new experience for me.

With every step in this new environment I've a lot of ideas what can be done.

Until now we design an multiple web page project with skyline server - and this is just the beginning.

If there are any news - we will get them early as possible.

Download All
Message 3 of 5
(3,366 Views)

Hello - back again with some new informations.

I've recogniced the hit's on this thread and think there will be a lot of questions abhout formatting controls and indicators.

I've upgrade to NXG 3.0.1 with WebModule and there are some new  CSS-Commands.

The file main.css is a nice -style- example for a Webpage with expanded windowsize

You can call it by adding the following text into your HTML-Code after the </style>

 

   <!--*******************************************************************************************************
          The following loads the CSS file included in the componet into the WebVI -->

        <link rel="stylesheet" type="text/css" href="styles/main.css">

        <!--******************************************************************************************************* -->

If anyone can give me an link to the documentation of the special NI CSS commands he can make me happy.

0 Kudos
Message 4 of 5
(3,025 Views)

Furthermore, how can we achieve the ID of control in Web VI?

For example, I would like to use this code. How can I replace the ("42") by the NI ID format like ni-control-id = '42'?

 

 

document.getElementById("42").innerHTML

 

 

 Thank you in advance

0 Kudos
Message 5 of 5
(2,139 Views)