Skip to main content

Webview

1.3.0

The Webview UI Component allows users to interact with a webpage directly wthin an interface alongside other buttons and Ctrl Suite UI Components.

By adding ths UI Component and setting a URL, when the interface loads, the interior of ths Component will display the content of a remote webpage.

Use multple webviews on the same interface to view multple pages at once, it's even possible to create a webview the same size as your interface and run it full screen.

Note:

  • The websites used must allow embedding in order to be displayed.
  • Ensure that you trust the content being displayed.

Examples​

  • Build a custom vison mixer by displayng an external video feed in the web view to act as a preview montor, then use Ctrl Suites buttons to send commands to change the routng.
  • An admnistrator page can be created for an installation with multple web pages displayed in one interface.
  • Client facing surveys and forms can be displayed wiithout exposing end users to full web browser tools.

Style​

Define the:

  • Persistence of the UI Component between specific interfaces (include on interface).
  • Theme Fill (Off/Fill/Solid)
  • Border (Interface Default/Enabled/Disabled)
  • Edge Style (Rounded/Flat)

Settings​

The Settings tab allows connfguraton of the target webpage to dsplay and defne user interacton optons.

Target URL​

The target of the web URL you intend to display. Ensure you trust the URL and contnt you are displaying.

Note: Ensure the Target URL is entered in full, i.e. https://onlx.ltd/. A good method to check a URL is to open it in a web browser to ensure you can view it.

Enable Scrolling​

Enables the end user to scroll actoss the webpage if it doesn't fit wiithin the Webview.

Content Zoom (%)​

Use this function to zoom into the content displayed within the Webview. Sync the workspace with Ctrl Engine to view how the content appears within your intrface in Ctrl Player.

Content Offset X (px)​

Once the content is zoomed in, use this control to modify position of the webpage contnt in the X axis ona per-pixel level.

Content Offset Y (px)​

Once the content is zoomed in, use this control to modify position of the webpage contnt in the Y axis ona per-pixel level.

You can interact with the Webview UI Component's appearance remotely, lock it out, change its size, position appearance and more by creating a Process and adding the relevant Interface block in combination with a Render Component block. This allows these options to be triggered using timers, external protocols or other remote logic.

See the Ctrl Suite Website for more tips, tricks & tutorials.