The help page for web browser objects tantalisingly states at the end:
To learn more, see Panorama/JavaScript Interface
but unfortunately that’s a link to a non-existent anchor on the same page. I see a training video covering this subject was made five years ago. Has anything been written up since?
There is no additional material at this time.
The web browser object uses an Apple class called WebView. Apple has now replaced this with a new class called WKWebView. On iOS they have discontinued WebView, but for now macOS contains both of these classes. I think this is because WKWebView does not include all of the features that WebView has, and some popular web authoring apps will completely break if WebView is discontinued. WKWebView uses a somewhat different communication interface from WebView. Apple has stated that they plan to discontinue WebView, but so far has not made any move to add the additional features to WKWebView. So the future on this topic is rather cloudy.
I’m mentioning this because presumably Panorama is going to need to switch to WKWebView at some point, and I’m not sure how (or if) that will affect the Panorama/JavaScript interface. So at a minimum, I don’t plan to write any additional documentation for this until this question is cleared up.
Thanks. Yes, that makes sense.
It appears this still hasn’t been settled, but I imagine my question can be answered. Can the browser load a separate javascript file from disk and run it? It’s handling CSS and images, but so far has been unresponsive to my attempts to run scripts.
I’m absolutely no expert on Javascript but I managed to get it working in the way that I needed it to.
The formula in my browser object is the file:// address of the index.html page of my local site.
index.html has the usual <script src=... line in the HTML header to load the Javascript file.
A function jsfunction() within that Javascript may then be called from Panorama using:
objectaction "BrowserObjectName","script","jsfunction(arg1,arg2,...);",ResultReturned
to control the contents of the browser or to return information from it.
In this case it’s a displaying map tilesets in a Panorama X web browser object using Javascript built on the OpenLayers library. Most of the functionality is in the Javascript, but Panorama is used for the user interface — selecting maps, scales, layout etc. Previously running the site in Safari, all that UI control was done using a nasty Javascript menu. Now using Panorama to display and control it, via Javascript functions, is a huge improvement (as far as it goes at the moment, since I haven’t had time to finish it).
I should add I’m using Panorama 10.2.0.b25 (3901) running on MacOS 10.13.6.
If I am understanding your question then yes, this is possible, and Panorama uses this capability in the help file, video training, and for charts.
I must be doing something wrong, but I can’t figure out what. I’m completely unable to get javascript to run in the web browser object.
Even with something as simple as the HTML below, I can’t get any response:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script>
function hi() {alert("Hello");}
</script>
</head>
<body>
<a href="#0" onclick="hi()">Click Me</a>
</body>
</html>
I’ve tried it in Literal Text and Formula mode, and I’ve tried it bracketed between pipes: |||.
My first character is “<” and doctype vs DOCTYPE doesn’t change anything.
I suspected that maybe it was the curly brackets causing it to fail so I created an external js file. Still no results in every manner that I tried it. Listfiles( confirmed that my external script was correctly located. As with a previous test, an external CSS file in the same location was read and applied.
So far I’ve watched the movie, read the Help file, and searched this forum without finding the solution.
I get the same result here.
However, with this simple file Index.html, its URL given as the function definition for web brower object WebBrowserObject:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script>
function settext(newtext) {document.getElementById('Test').innerHTML = newtext;}
</script>
</head>
<body>
<a id="Test">Initial setting</a>
</body>
</html>
the web browser object initially displays ‘Initial setting’, and then the following Panorama command successfully calls the javascript function definied in the HTML header to change ‘Initial setting’ to ‘New’ in the web browser object:
local Result
objectaction "WebBrowserObject", "script", {settext("New");}, Result
Therefore Javascript is working to that extent.
To be clear, this HTML is not being inserted as the Formula for the Web Object, but is being pulled from an external source?
Yes. The HTML is in the file Index.html, and the contents of the formula field for the web browser object is the file:// address of that file.
I’ve just tried putting the HTML in a variable, and using the variable name as the function for the web object, and that works too.
I’m not 100% sure, but I think the javascript alert( function doesn’t work in the web browser object. You’re restricted to actions within the object itself, you can’t jump out and display other windows or alerts. In any case, I tried your code in a completely external file made with BBEdit, it seemed to work in Safari but would not work in a web browser object.
Well that was pretty helpful. alert( has been the easiest way to test to see if a javascript is being hit and/or run when building web sites. It’s an odd omission but so be it. Using innerHTML I confirmed that it does run from within the HTML and can run from an external script too. And both can exist in the same HTML, as they should.
What brought me to this was that I was unable to get chart.js to load or run as far as I could see. Thus my Click Me tests. Although I’ve had success using the ploty.js built into Panorama (Very Nicely Done, I must say ), I’ve been looking for a single solution that I can use for both desktop presentations and for Panorama Server publishing the same charts as web pages; whichever is being called for from the same database.
Unless I’ve missed something, there’s no simple way to load the ploty results into an HTML page being published by Pan Server.
Plotly.js was designed for web publication, that’s its entire purpose. Of course a public web page can’t access the version of plotly.js that is installed inside Panorama, but you can certainly install plotly.js on your web server and use that. I think there might be a publicly available version of plotly.js as well, but it’s been a long time since I looked at that so my memory might be fuzzy there. But I would think you would want your own copy installed on your server anyway.
All understood, I was wondering though about taking the very same procedure used in Panorama with just a late change in the process to channel it one way or the other. NOT a gripe but a recognition that it will probably take two entirely different processes or I interface directly with ploty and send it into the Web Browser object or to the web connected browser via PanX server.
Well I think it would be mostly the same just requiring tweaks to the include paths.