Basic widgets

Last updated

Each element within a template, such as text, images, videos, and other content, is called a widget. Widgets contain content and can be positioned, resized, and configured as needed. GoBright View distinguishes between basic widgets, which primarily display static content, and custom widgets, which are designed to display dynamic content from external sources.

 

To add a new widget, click the Add Widget button located on the right-hand side of the template.

mceclip0.png

Let's take a closer look at the basic widget types available within GoBright View.
mceclip1.png

 

Text
The Text widget allows you to add and display text within a template. Text can be formatted and customized using various styling options, similar to those available in a standard text editor. 
mceclip2.png

 

Image
The Image widget allows you to upload and display images within a template. Uploaded images are automatically stored in the Media Library for future use. Images can also be used as patterns by repeating them horizontally, vertically, or in both directions across the template.
mceclip3.png  

Video⁴
The Video widget allows you to upload and display video content within a template. Uploaded videos are automatically stored in the Media Library, making them available for reuse in other templates, playlists, or slides.
mceclip4.png   YouTube⁴
The YouTube widget allows you to embed and display a YouTube video within a template. Simply enter the video's YouTube URL or provide the YouTube video ID (shortcode), and the video will be displayed automatically.
mceclip5.png  

Vimeo4 6
The Vimeo widget allows you to embed and display a Vimeo video within a template. Simply enter the video's Vimeo URL or provide the Vimeo video ID (shortcode), and the video will be displayed automatically.
mceclip6.png  

iframe1 2 3 5 6 8
The Webpage widget allows you to display content from a custom URL directly within a template. Simply enter the desired webpage URL, and the page will be shown within the widget. Please note that the entire webpage will be displayed as-is, including elements such as cookie banners, pop-ups, advertisements, and other content that may appear on the page.
mceclip7.png  

HTML1 7
The HTML widget allows you to add and display custom HTML code within a template. This provides full control over the widget's content and layout, making it possible to create custom designs, embed external content, or add advanced formatting that is not available through standard widgets.


¹ webOS devices offer limited support for certain browser features, including some modern CSS and JavaScript functionality. In addition, the hardware performance of these devices is limited, which means that resource-intensive content, such as complex animations or scripts, may not perform as expected. Keep this in mind when designing and planning content for webOS devices.
Please refer to CanIUse.com for a complete index of features and browser support.

webOS Signage Browser Engine
webOS Signage 9.0 Chromium 120
webOS Signage 8.0 Chromium 108
webOS Signage 6.0 Chromium 79 (By updating the device's firmware, it can be upgraded to Chromium 94)
webOS Signage 4.x Chromium 53
webOS Signage 3.x Chromium 38

 

Android player app version Browser Engine
From v13.42 Chromium 106

 

Windows player app version Browser Engine
v5.9.9 and lower Chromium 79
v5.10.4 Chromium 108

² When using an iframe, keep in mind that some websites prevent embedding. Those websites cannot be displayed within the GoBright View Portal and/or devices.

³ It is not possible to show websites that need a log in. 

⁴ Playing more than one video at a time is not supported. We advise planning all videos within one zone to prevent multiple videos playing at once. 

5 On webOS the website certificate check can be disabled, more information

6 Vimeo does not work on webOS 3.0 / webOS 3.2

7 CSS styles defined in a HTML widget are applied to all HTML widgets on the same slide

8 Some website won't load in an iframe and as such cannot be displayed in the GoBright Portal. On players however, these websites will load properly in most cases, so it's worth to just try this out.

Widgets can be selected either directly in the template editor by clicking on them or by selecting their name from the widget list on the right-hand side of the screen. Once a widget is selected, you can move, resize, and configure it.

 

Let's first select a widget so we can adjust its position and size within the template.

The unselected widget indicated by the grey striped outline

The selected widget indicated by the blue striped outline and pointed cursor

When selected, more details and options become available.

Settings

The name of the widget can be set by clicking on it

Clicking the duration opens a popup with some options.

 

The scaling determines how the widget will be displayed within its layer. Each widget starts on its recommended setting, but can always be changed according to your needs. 

The duration can be set to Fixed time (recommended) or controlled by widget*. When a widget has multiple pages (the News widget, for example) then this setting determines the duration of each page.

Animations can also be set. These default to none or fadeIn/fadeOut.

When scheduling the animation for a widget at the same time as the slide animation, the slide animation has priority.

For example, when you set up a bounce animation on the text widget.

The text widget animation will only play when the animation in the slide settings is set to none as shown on the image to the left.

*Only use 'Controlled by widget' for a video or ticker widget.

Basic tab

Each widget has its own options. You can find and set these within the Basic tab.

Each widget has its own basic settings. 

Layer tab

There are two ways to position and scale each widget, using the mouse or by entering the specific amount within the layer tab.

 

Using the X and Y fields, we can position the widget horizontally and vertically. The width and height fields decide the size of the widget.

Switching to percentages allows to use percentages (of the screen) instead of pixels. This way a widget can easily set full screen by setting:

X: 0% Width: 100%
Y: 0% Height: 100%


The rotation field rotates the widget to a specific angle.

Padding creates space between the content of the widget and the widget itself. Fill in an amount of pixels (the size) and then select the sides you want the padding applied to using the buttons.

More settings

There are more options to further customize the widget. This includes the playing mode, borders, shadow and background settings.

mceclip1.png

The play mode can either be set to Loop or Once. 

A border can be applied. Set a width (thickness), choose the side(s), set the color and radius. 

Use one of the shadow options to let the widget pop.

The background can be set to a color, gradient or image.

These options can be applied to any widget.

Now you know all about the basic (default) widgets. Please continue learning about Custom Widgets.

 

2 out of 2 found this helpful

Articles in this section

Related articles