The embed

On this page · 3 sections

An app published to an agent is a page of its own at the agent's address. It can also live inside a page of yours: the agent serves studio-embed.js, and one call renders the app into an element of that page, its tags live over the agent's WebSocket.

One call

<script src="https://station-7:8800/studio/studio-embed.js"></script>
<div id="panel"></div>
<script>
    ScadaStudio.mount(document.getElementById('panel'), { agent: 'https://station-7:8800', app: 'line-3', page: 'overview', token: '…' })
        .then(function (mounted) {
            mounted.pages();            // [{ id, name }]
            mounted.setPage('alarms');
            mounted.unmount();
        });
</script>

mount(element, options) loads what it needs from the agent once per page - the component library, the runtime, the engines, the styles - fetches the app's project, opens its sources (the agent's tags over its WebSocket, with the token given or the tab's session), renders the page into the element and starts the page-side flows; the diagrams marked for the agent run there, as always. It returns { runtime, project, pages(), page(), setPage(id), unmount() }.

Option
agent	The agent's address; empty when your page is served by the agent itself.
app	The app's name on the agent - or project, a project object or the URL of a project.json, for a project that is not on an agent.
page	The page to show; the first by default.
token	A token for an agent with auth, for a page that must never ask; without it the tab's session is used, and onAccess(need) is called when the agent refuses.
theme	The project's by default. The themes select on the element and, for some rules, on the page's body, which gets the theme too unless your page set one.
onError(error)	Called instead of the console when the mount fails.

As an element

<scada-studio-app agent="https://station-7:8800" app="line-3" page="overview"></scada-studio-app>

Once the script is on the page, the element mounts itself when it is attached and unmounts when it is removed; it fires mounted (with the same object) and error.

What your page must allow

The agent lists the origins whose pages may call it: put your page's origin into the agent's origins (the security page), or the API and the WebSocket refuse it. If your page carries a Content-Security-Policy, allow the agent's origin for script-src, style-src, font-src, img-src and connect-src (the WebSocket). The embed puts the app's styles on your page; the components are custom elements and keep to themselves.