Add a Javascript Widget to an App Designer App

7 次查看(过去 30 天)
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:
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?

采纳的回答

Antonio Hortal
Antonio Hortal 2022-11-7
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.

更多回答(0 个)

类别

Help CenterFile Exchange 中查找有关 Develop Apps Using App Designer 的更多信息

产品


版本

R2020b

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!

Translated by