Add a Javascript Widget to an App Designer App

I am trying to add a Javascript widget to an App Designer app. Is this possible?

Specifically, there are weather widgets you can easily add to a website with a small code snippet. For example:

https://weatherwidget.io/

https://windy.app/widgets

If I place the code snippet in a locally saved HTML document and then select that local HTML document as the HTMLSource in the App Designer HTML component, it does not load the Javascript widget when I run my app. I just get a blank block or text, but not the Javascript widget. However, if I open the local HTML document in my web browser, the widget loads correctly.

Can anyone help?

Answer 1

[Antonio Hortal]

The widgets you mentioned load up their JS code by inserting a <script> tag within their HTML that points to an URL.

<script type="text/javascript" src="https://windy.app/widget2/windy_stats_async.js?v27"></script>

If you check Matlab's documentation on the uihtml object, you'll see that this is a limitation: "HTML files that you specify for the HTMLSource property cannot access third-party JavaScript libraries by way of a Content Delivery Network (CDN). Save libraries in a location that your local file system can access."

So you'd have to download (go to the URL, and copy-paste the code) the JS source to your computer (check the license first!) and have a .html file which loads that JS file in your system

<script type="text/javascript" src="myLocalFile.js"></script>

The only problem is that these widgets make calls to other web serivces to gather the information about the weather. And the uihtml also restricts that: "You cannot link to URL web resources or embed applications from external web pages using the uihtml function." So even if you manage to load the widget with some <button> and other html tags, it will most likely won't show anything of value (no icons, no weather info)

A solution could be to query the weather information from MATLAB directly, for example using webread() as explained in this answer (How to gather data from weather forecast). Then, you could have an uihtml element with your custom HTML/JS code that can receive that data from MATLAB (tutorial on how to do that) and display it. This is quite some effort though, specially if you are a noobie with JS; and definitely/sadly not as simple as just copy-pasting some source code.

[matlabuser77]

I see. Disappointing, but thank you for the thorough answer!