The smart page app allows for advanced page display control by use of JavaScript to interact with the page content for completely custom functionality. The Smart Page app allows you to run snippets of JavaScript on any page to perform any sort of interaction you may require.

A basic understanding of HTML and JavaScript is required to use smart pages.

How Does It Work?

Web pages are loaded as normal, however once the page has fully loaded your custom code is injected into the page and executed.  This enables any number of powerful customizations to perform very specific actions.

The code is written in standard JavaScript and is passed down to the VuePilot player via the API

Why Would I Use This?

We are often asked how to perform some sort of action on a page once it loaded in order to change what’s being displayed, some examples may be

• Clicking on a link to open another section of the page
• Expanding a dropdown list to reveal more information
• Entering and submitting information into a form such as login details or session information
• Scrolling to a particular part of a page
• Injecting content into the page, maybe a custom banner or a footer

The Smart Page app aims to solve these requests and allows users to achieve results with a few simple lines of code.

The possibilities for what can be done with Smart Page are endless

PLEASE NOTE

Please note that we do not provide software development support. We can provide basic assistance with regards to the usage of VuePilot, but it is up to the customer to build, develop and debug your Smart Page apps source code.  Knowledge of JavaScript, developer tools and the browser DOM is required in order to use the Smart Page app. We cannot build your apps for you and we cannot debug your JavaScript for you. Customers are responsible for testing and developing their own SmartPage code.

How To Test Your Smart Page Code Before Using The App

When the code in a Smart Page app fails within the VuePilot software, it will do so silently. This can make it very difficult to debug when things don’t work as you won’t receive any feedback.

You can test your code directly from your JavaScript developer console in your browser locally before hand to ensure it works as expected.  Here’s how using Chrome

• Press CTRL-SHIFT-J to bring up the JavaScript console on any webpage.  (other browsers you may need to find it from the menu)
• From the “console” tab, enter in the Smart Page code you wish to test
• Hit enter
• If this does not work, then you’ll need to debug this code before it will work within a Smart Page app. Errors will be shown in this console which will help you develop and re-test your code rapidly before creating a Smart Page app.

Code Execution & Timing

The Smart Page app will inject the code onto the page and execute it as though the code was part of the web pages source code.

When the Smart Page code runs in the VuePilot software, it does so only after the page has fully loaded. This may be several seconds after the page appears to be loaded, depending on the website.  Some heavy dashboard products may take a long time to load or in some rare cases may never finish loading.

If you are experiencing issues with code execution, we recommend testing with a local Chrome browser your own desktop machine and using the JavaScript console in the developer tools. Start with a simple test, such as appending some text to the page and then build up the complexity of code until you find your problem.

You can simulate a similar event in your test environment using the DOMContentLoaded event.

In the following example a large TESTING banner will be placed at the top of the page only after the page has fully loaded

document.addEventListener("DOMContentLoaded", () => {
  const h1 = document.createElement("h1");
  h1.textContent = "TESTING VUEPILOT SMARTPAGE";
  h1.style.color = "white";
  h1.style.textAlign = "center";
  h1.style.backgroundColor = "red";
  h1.style.padding = "20px";
  document.body.insertBefore(h1, document.body.firstChild);
});

Alerts & Confirm

Please note that the VuePilot software disables all native alert and confirm browser functionality as it interferes with the rotation operation, so if you are attempting to test a smart page script, you will not be able to simply pop up an alert to test.

User Agent Overrides

In some more advanced use cases you may require the ability to override the user agent string that is passed to a remote server.

This can be done by using the “User Agent Override” input box. This is an optional feature that should only be used in specific circumstances where the responding server may require a specific agent string. You can leave this box empty otherwise.

Code Examples

The following code samples are examples only. You will need to adapt them to the page you are running them on if targeting specific page elements, like inputs.

Scroll To Bottom Of The Page

You may wish to scroll to the bottom of a page, perhaps after a few seconds.  This can be done by simply using the window.scrollTo method and wrapping it within a setTimeout

In the following example we will scroll to the bottom of the page after 5 seconds (5000 milliseconds)

Code

setTimeout(function() {
  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
}, 5000);

 

Scroll To Bottom Of The Page Slowly (100px At A time)

In this example, you may want to scroll to the bottom of a page but slowly so it is viewable on the way down. This can be done again by simply using the window.scrollTo method and wrapping it within a setInterval

In the following example we will scroll down 100px from the current position every 1 second until we reach the bottom of the page

Code

const height = document.body.scrollHeight;
let currentPos = document.documentElement.scrollTop;

setInterval(() => {
  if(currentPos >= height) return;

  window.scrollTo({ top: currentPos + 100, behavior: 'smooth' })
  currentPos =  document.documentElement.scrollTop;
}, 1000);

 

Inject Content Into The Page

You may wish to inject some form of content on the page, such as a banner or a heading. You can do this by using the insertBefore method

The following example will insert a H1 element, styled with a background color of red and a font color of white immediately after the body tag

Code

const h1 = document.createElement("h1");
h1.textContent = "TESTING VUEPILOT SMARTPAGE";
h1.style.color = "white";
h1.style.textAlign = "center";
h1.style.backgroundColor = "red";
h1.style.padding = "20px";
document.body.insertBefore(h1, document.body.firstChild);

 

Automatic User Login

User login can be performed by detecting if there are user login input elements on the page, then simply filling them in and submitting the form.

WARNING: Please be aware that you should create restricted READ ONLY user accounts if you wish to do this as the script will contain login credentials and will not be encrypted within our database. Do not use administrator accounts or personal accounts with elevated access. We suggest creating an account that only has access to view the required resources with no ability to WRITE or modify data.

In this example (taken from the Grafana login page), the user is directed to a login page displaying two input boxes named “user” and “password” with a login button that does not have a name, but is ARIA labelled. We first check if there is a “password” field on the page, and if so, then we will populate them and click the login button.

Please Note: This is example code, from a web page that has specifically named input elements. You cannot simply copy and paste this code as your web pages form will be different to this one, you will need to adapt this code to your pages form elements (id or aria tags etc).

Code

if (document.getElementsByName("password").length > 0) { 
  document.getElementsByName("user")[0].value = "demo"; 
  document.getElementsByName("password")[0].value = "password"; 
  document.querySelectorAll('input[type=submit]')[0].click();
}

 

Zoom Out / Shrink Page Contents

Programmatically shrink the page down to 70% size for use cases where you cannot attach a keyboard to the screen to perform a regular CTRL+/- zoom operation or when using Google TV devices

Code

(function () {
  // Apply zoom out effect to body
  document.body.style.transform = 'scale(0.7)';
  document.body.style.transformOrigin = 'top left';

  // Adjust width to account for scaling and avoid horizontal scroll
  document.body.style.width = '142.8571%'; // 100 / 0.7

  // Optional: Prevent scrollbars and center content if needed
  document.documentElement.style.overflow = 'hidden';
})();