[WebVI] Insert Javascript Element in Tab

[soren_jensen]

Milan,

Thanks a bunch for this great MAP demo-project. For anyone reading this, please download the example project made by Milan and give it a go. Its the right way to get started.

It was easy to use and it took me only a few minutes to integrate the first map on a NXG Web TAB structure, awesome thanks !. I have programmed LabVIEW since ver 4.1 but my Javascript abilities are somewhat limited. I had no idea how powerful the JSLI was. Its a great feature to be able to have "two-way" communication with Javascript. Attached is a demo of the solution I made. The map-marker coordinates are fetched via a web-service call to my LabVIEW 2013 web-server (but it could be any server for that matter). The map displays status of some 200+ products deployed in the field world-wide. My next task was to implement a GREEN/YELLOW/RED map icon maker status (in other words on-the-fly map icons), but this required me to dig deeper into the Javascript/JSLI and that was beyond my current knowledge of Javascript. I am working on it, but any help would be greatly appreciated. Is there a white-paper with the need to know knowledge ?, I am still struggling with the ups and downs in this new "LabVIEW" world 

/søren

Observations

* when I have a selection box on the left of the map, then the selection control will move (get pushed) out of the boundaries of the TAB structure if you zoom in on the map. (my workaround was to have the selection box on the right). 

* when resizing the window on the attached png, the map will not scale along with the selection menu. What will happen is that the map will fill 100% of the width of the tab, once the window is made smaller. Later I will post a link to a live demo to show this. I first need to pay for my NXG licence, since my 45 day trial just ran out. But I have now realized how powerfull NXG Web can be, and I need it 😉

[MilanR]

Hi søren_hallberg_jensen,

I updated the Map example to NXG 5 to utilize the HTML Placeholder Container and JavaScript Reference features. As the HTML Placeholder Container is a dedicated control for custom HTML and as there were some minor fixes to the Tab control in NXG 5 it is possible the resize behavior has improved. If you still see unexpected behavior with NXG 5 an example and / or video would be helpful to demonstrate.

I also updated the Map examples to support taking a path to custom marker images. The Custom Markers Google Maps help topic describes the changes needed to provide a custom marker and the change to the JavaScript to support custom markers can be seen on GitHub. The new Map example with these changes is attached.

[soren_jensen]

Hi Milan

Thank you so much. This was a great help.

I installed NXG 5.0 and upgraded my own project with the "Map - Release 2" code you provided. Using the HTML Placeholder, seems to greatly improve the load speed of the map, as a mater of fact, its seems ultra fast now ! This is going to be so much fun... Its great to see LabVIEW conquering the power of Javascript. 

I have successfully used all the features now, including dynamic icon. The earlier described problem with controls being pushed out of the Tab structure when zooming/panning on the map, seem to have been fixed. First impressions of Web NXG 5.0 are, that the entire environment seems much more stable now, its getting ready for prime time ;-).

However, I have NXG installed on a very old and slow computer, and I have observed minor things that must relate to my CPU speed. For instance, if I select "WebApp.gcomp" and deselect one giweb and select a new one and the immediately thereafter click "build" then I get a compile error. If I wait a few seconds between changing selection and clicking build, I don't get a compile error.  I will try to make a video of my findingings and share it with you. Unfortunately some of the content on my HTML5/application I cant be shared in public, so please email me directly at vendersgade@gmail.com, and I will send my video with comments. The non sensitive parts I will add here. 

I am currently trying to learn how to add new javascript-functionality to the map, this is a first for me, but if I have success I will share my code on this thread.

best regards,

soren/Copenhagen