LabVIEW

cancel
Showing results for 
Search instead for 
Did you mean: 

[WebVI] Insert Javascript Element in Tab

Highlighted

How can I insert element in Labviews NXG Tab using the text editor ? I can insert them easily by adding them in the <body>, but I didn't succed in embeeding something like : 

 

<a href="#" onclick="Page_Debug();"><img src="extern-resource/debug.png" alt="Debug" style="width: 80px; height: 80px; position:absolute; top:340px ;left:1015px ">
</a>

 

in a tab, for example. Is it possible, and if it is, how is it possible ? Thanks in advance.

0 Kudos
Message 1 of 13
(1,077 Views)
Highlighted

Hi Joannick_DAM,

 

Unfortunately there is not a good way to insert custom HTML snippets into the tabs of a tab control.

 

Looking specifically at your example snippet, it would be possible to drop a Hyperlink control into the tab of a Tab Control on the panel and use that to run custom JavaScript when clicked. You can use the javascript url scheme which is similar to the idea of creating urls in the form of bookmarklets.

 

javscripturl.PNG

 

In a deployed page when the URLs are clicked they will execute the code snippet.

 

However inside the LabVIEW NXG 2.1.1 editor they will not execute as links are not followed inside the editor.

 

In LabVIEW NXG 3.0 (and possibly in the LabVIEW NXG 3.0 tech preview) javascript scheme links should run inside the editor as well.

 

 


Milan
Message 2 of 13
(987 Views)
Highlighted

following up on this older thread - and now in NXG web 4.0, I would like to ask if there is an easy way to embed a google map inside a tab-structure, and naturally have it hide/show when the correct tab is selected.

 

for instance this map inside a tab on a tab structure.

 

<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3083.9251931399904!2d-74.4527296846353!3d39.38..."
width="500" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>

0 Kudos
Message 3 of 13
(620 Views)
Highlighted

Hi søren_hallberg_jensen,

 

With NXG 4 an approach that can be used is to drop a control to use as a placeholder, add a class attribute to the placeholder control in the configuration pane, and use the JavaScript Library Interface (JSLI) to call a function that can manipulate the contents of the control. In future versions of LabVIEW NXG Web Module we would like to have a dedicated Placeholder HTML Container that is designed to have the contents manipulated.

 

MilanR_0-1582665895261.png

 

MilanR_1-1582665936009.png

 

Attached is an example that demonstrates the above.

 

Note: Manipulating the contents of a control is not yet a well-supported use case and is something you have to make sure to test thoroughly in your application. Simple controls such as the Text front panel item or the URL Image control make for reasonable placeholder controls. You may want to limit or test interactions that can effect the content of a control. For example, you should avoid setting the terminal value, using property nodes to change the value, etc on the placeholder control once you manipulate the content.

 


Milan
Message 4 of 13
(613 Views)
Highlighted

Hi MilanR

 

My apologies for the delayed answer. Thanks for creating this project and taking time to explain everything nicely. I sure did learn a lot of new stuff when looking into your code. 

 

I'm still struggling to embed the google map on a NXG tab control. I will post an update if I can figure it out. I do agree with you that it may be a bit early to try such a task. 

 

Thanks again for helping.

 

/søren

 

 

in head tag

<SCRIPT LANGUAGE="javascript">

function initMap() {
var uluru = {lat: -25.344, lng: 131.036};
var map = new google.maps.Map( document.getElementById('map'), {zoom: 4, center: uluru});
var marker = new google.maps.Marker({position: uluru, map: map});
}

</SCRIPT>


in body tag

<div id="map" style="height:600px;width:900px;margin:0 auto;"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqi9TS_VGua218hbX4b7-rLywEbVsDBGE&callback=initMap">
</script>

0 Kudos
Message 5 of 13
(529 Views)
Highlighted

Hi søren_hallberg_jensen,

 

I made an example for LabVIEW NXG 4 WebVIs that is a starting point for embedding a Google Map. There are two example libraries in the attached zip. One that uses the Leaflet library and the Open Street Maps data set and another example that uses Google Maps. You can also see a built version of the Map example hosted on GitHub pages. Hopefully that provides a good starting point for integrating Google Maps!

 


Milan
Message 6 of 13
(502 Views)
Highlighted

Hi Milan,

 

Regarding your great maps example, is there any way to use similar method but with Google Charts?

In google charts you need to pass a data table, as I understand it is not supported in NXG.

Just checking before start struggling with it.

 

Thank you,

Gil

0 Kudos
Message 7 of 13
(459 Views)
Highlighted

well, I've created a wrapper similar to yours and created the data table there.

 

Thanks,

Gil

Message 8 of 13
(452 Views)
Highlighted

Hi Gil,

 

It sounds like you were able to modify the Map example to use Google Charts which is great to hear!

 

I'm curious how your experience was with interfacing with a JavaScript library. Were there parts that were confusing or that you had to workaround? Were there parts that you enjoyed or were a clear experience? What aspects of the example were the most helpful?

 

I'm also curious about the usage of Google charts. Are there certain features / chart types that your application needed which are not present in the Web Module?


Milan
0 Kudos
Message 9 of 13
(432 Views)
Highlighted

Hi Milan,

 

Interfacing with javascript was just fine when I followed your example (adding the js wrapper and modified its structure). This is how I could integrate javascript without previous knowledge. Some workaround was when I had to pass strings array, so I passed comma separated string and split it to array in javascript.

 

My main reason for using google charts is the tooltip function so you can comment the values on the plot.

Also add the option for additional charts such as pie chart etc.

 

 

Thanks,

Gil

Message 10 of 13
(419 Views)