LabVIEW

cancel
Showing results for 
Search instead for 
Did you mean: 

Populate listbox dynamically

If you switch to the html tab in NXG, you will see that NI is using javascript everywhere.

So if you know javascript, you are one step ahead of others.

 

I'm not expert in javascript, just start to learn a couple weeks.

Here is what I did to add a ring ctrl to html:

In the html file, in the <body>, after NI's javascript, i.e. after

  <div class="ni-front-panel-wrapper">

        <section id="FrontPanelCanvas" class="ni-front-panel">

        ......

        </section>
  </div>

Add:

  <div class="UserList">
        <select id="Users" Label="Users"></select><br>
  </div>

You can use a seperate .css file the define the font name, size, color, ctrl size and position to minimize the change the html file.  To link the .css file, add:

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

in the <head> after NI's links.

To update the ctrl, create a seperate .js file, and add:

  <script src="my.js"></script>

in the <head> after NI's scripts.

In the .js file, define a javascript variable link to html ctrl:

  var userlist = document.getElementById('Users');

Dynamically alter the ctrl style:

  userlist.style.width = 160 + "px";

Dynamically add element to the ring ctrl:

  var opt = document.createElement('option');
      opt.text = "George";
      opt.value= 0;
      userlist.add(opt, null);

for Listbox, take a look the following site:

https://www.w3schools.com/js/default.asp

 

Remember to save your change by click the APPLY button.

 

George Zou
0 Kudos
Message 11 of 21
(2,040 Views)

Dynamically add element to the ring ctrl:

 

 


That "dinamically" is not clear.

I use a diagram variable how do i pass a variable value to the javascript?

0 Kudos
Message 12 of 21
(2,034 Views)
however, can you attach your example?
0 Kudos
Message 13 of 21
(2,032 Views)

I haven't figure out how to exchange data with an NXG ctrl yet.  Still waiting for NI engineer give us an example.

For now, you can write the data to a JSON file, and then use javascript to load it.

I use jquery to get data from LabVIEW/WebService, like:

$.getJSON("http://127.0.0.1:8001/WebDBService/WebGetUserList", .....);

To load a JSON file, just google: javascript read json file from disk.

So my code won't work if no webservice is available.

 

George Zou
0 Kudos
Message 14 of 21
(2,028 Views)

Ok thank you so much.

For the moment I'm just testing NXG...but too many lack for my use of labview.

No DB connection,Even the HTML editor..no FIND function, no way to exchange data between html and block diagram.

But webVI's seems a nice thing.

For the future I dream about NXG to compile even for mobile.

 

0 Kudos
Message 15 of 21
(2,020 Views)

@gepponline wrote:

 

For the future I dream about NXG to compile even for mobile. 


I believe NI's intent is that the solution for mobile will be WebVIs.  Compile it to HTML, then share it via a webserver.  This does actually work and I've tested it on several mobile browsers on Windows/IOS/Android.

Message 16 of 21
(2,008 Views)

I thought it so...so let's hope it will develop a solution form my problems early 🙂

0 Kudos
Message 17 of 21
(2,006 Views)
ouch.... there still the problem that i need to trigger the jquery to load values when i populate the list
0 Kudos
Message 18 of 21
(2,005 Views)

javascript support events.

In my code, when user make a selection on the userlist ring ctrl, I'll call the LabVIEW webservice which pulls the user information from a database:

userlist.onchange = function()

{

    ...

}

 

George Zou
0 Kudos
Message 19 of 21
(1,998 Views)

ok, but the event should be something like "when the list get populated" or "when the file with the list items is created"

0 Kudos
Message 20 of 21
(1,983 Views)