API: Display HTML & Documents on External Screen
Trigger and control full-screen viewing of several document formats, including .html pages and .pdf, on an external screen or projector.
In this article
Requirements
- Integration of our JavaScript API into your webpage
- Sample code to run within the app and download for integration into your own project is available here.
- Best practices for working with the JavaScript API are available here.
- App Settings
- Content > JavaScript API > Access JavaScript API = By Import
- Screensaver > External Monitor Mode = Interactive or Standard Mirroring
- Physical Hardware
- External screen or projector connected via HDMI to the iPad through a Digital AV Adapter or hub or to a connected Apple TV for wireless Airplay.
Triggers via API Functions
Check Current Background Color
This function checks the current background color or image shown prior to a file being opened or if a file is not proportioned to fit the screen dimensions.
Format | kp_ExternalScreen_getBrowserBgColor(callback); |
Parameters | callback - [string] the name of the callback to be triggered after the function has been executed |
Callback format | callback(backgroundColor); |
Callback return values |
|
Set New Background Color
This function sets a new background color or image shown prior to a file being opened or if a file is not proportioned to fit the screen dimensions.
Format | kp_ExternalScreen_setBrowserBgColor(backgroundColor, callback); |
Parameters |
|
Callback format | callback(success); |
Callback return values |
|
Open HTML File or PDF
This function opens the HTML file or PDF specified by the 'filePath' parameter on the external display.
If referencing a locally stored file, the file path is relative to the Kiosk Pro documents folder. If referencing a remotely stored file, use the full URL. If the app cannot find the file at the specified path, then the method will fail.
Format | kp_ExternalScreen_openDocument(filePath, сallback); |
Parameters |
|
Callback format | callback(jobWasAccepted); |
Callback return values |
|
Video Within a HTML Player
Although there is nothing to prevent you from using this call to display an HTML file with an embedded video player, we strongly recommended against this as it can lead to inconsistent results. Instead, we recommend using kp_ExternalScreen_playVideo to trigger video playback on the external display directly.
Open Image File
This function displays the specified image on the external screen.
Format | kp_ExternalScreen_showImage(filepath, contentMode, callback); |
Parameters |
|
Callback format | callback(success); |
Callback return values |
|
Trigger JavaScript
This function triggers another JavaScript call on the HTML page currently displayed on the external screen, which can be used to update content or trigger an action.
Format | kp_ExternalScreen_doJScript(script); |
Parameters | script - [string] the JavaScript function to be called on the page being displayed |
Check Number of Pages in PDF
This function triggers a callback returning the number of pages in the PDF document currently being displayed on the external screen.
Format | kp_ExternalScreen_requestNumberOfPdfPages(callback); |
Parameters | callback - [string] the name of the callback to be triggered with the result |
Callback format | callback(numberOfPages); |
Callback return values | numberOfPages - [integer] indicating the total number of pages in current PDF document. For other types of documents, this method always returns 0 |
Check Current Page Number in PDF
This function triggers a callback returning the current page number of the PDF document currently being displayed on the external screen.
Format | kp_ExternalScreen_requestNumberOfCurrentPdfPage(callback); |
Parameters | callback - [string] the name of the callback to be triggered with the result |
Callback format | callback(pageNumber); |
Callback return values | pageNumber - [integer] indicating the page number of page being displayed in the current PDF document. For other types of documents, this method always returns 0 |
Go to Specific Page in PDF
This function triggers navigation to the specified page of the PDF document currently being displayed on the external screen. For other types of documents, this method does nothing.
Format | kp_ExternalScreen_showPdfPage(pageNumber, callback); |
Parameters |
|
Callback format | callback(success); |
Callback return values |
|
Notifications via API Callbacks
When File is Opened Successfully
This callback is triggered when a request to open a document on the external screen is called and the document opens successfully.
Format | kp_ExternalScreen_didOpenFileSuccessfully(sourceDocumentPath, usedDocumentPath); |
Return Values |
|
When File Fails to Open
This callback is triggered when a request to open a file on the external screen is called and the document fails to load.
Format | kp_ExternalScreen_didOpenFileWithError(sourceDocumentPath, usedDocumentPath, error); |
Return Values |
|
Sample Code
- This sample code relies on the JavaScript APIs built into Kiosk Pro and will not run successfully in other browsers or within our in-app help interface.
- To run sample code, set the app's homepage to kioskgroup.com/external-screen-api
- To download a .zip of sample code, click here.
Change Log
- Added in initial version of Enterprise.
- Major revision of underlying code base in version 7.3.
- Added new contentMode options to the 'kp_ExternalScreen_showImage' call in version 11.0.