Contact Us

CATEGORIES

Whoops…Nothing found

Try other keywords in your search

JavaScript in Web Browser Resource

 1 Minute

 0 Likes

 16 Views

Starting from 25.2, it is possible to run JavaScript code directly within the currently loaded Web Resource.
This enables more specialized use cases—for example, you can trigger animations directly from a cue or a keyframe.


API Command

The command for this is: null executeJavaScriptOnCurrentWebResource(string script)  , this needs to be used on a Layer basis.


Limitations

It's not possible to synchronize animations across multiple instances of the Browser Resource.
This means that in a multi-client setup—where the Web Browser Resource is used across multiple servers—synchronization cannot be guaranteed.


Example

In this example, we use a Web page that already includes the code for the Animations, we just trigger the function itself.

  1. First we create a Web Browser Resources, assign the Page to load and put it in the Timeline.
  2. Create a NewModule and a New Action. Expanding Your ModulesExpanding Your Actions 
  3. Use the API call executeJavaScriptOnCurrentWebResource to trigger the in the HTML stored animation: 
    Pixera.Timelines.Layer.getInst('Timeline 1.Layer 1').executeJavaScriptOnCurrentWebResource("startAnim()") 
  4. Create a Cue to trigger the Control Action Cue Network Command (pixc) 

Tip

This can also be achieved using key frames on a data layer, which is often the preferred method.
See From Timeline to Control.

 

Downloads


Use Cases

Reload

A common scenario is refreshing the browser window without unloading and re‑loading the entire container.
In plain JavaScript you can do this with: 

location.reload();

Calling location.reload() refreshes the page exactly as if you had pressed F5 in your browser. This is handy when a Web Resource needs to update text or other dynamic values during playout, but you want to avoid a full container reset.

Button Press

With this, it is possible to press buttons without the use of a Mouse.

// If the button has an ID
document.getElementById('myButton').click();
// If the button has a class
document.querySelector('.myButton').click();

In the Example provided, the Button has neither class nor id, but it can also be done like this:

local js_code = [[
    document.querySelector('button[onclick="startAnim()"]').click();
]]
Pixera.Timelines.Layer.getInst('Timeline 1.Layer 1').executeJavaScriptOnCurrentWebResource(js_code)

PIXERA 25.2 INTER 26 | 15. July 2025 | J.B.

Was this article helpful?