In this article, you will learn an elegant way to integrate your custom applications into a playlist using digital signage widgets. You will learn in detail what it is all about and what advantages the technology brings. Finally, you can try out the practical application yourself using our downloads.
Weather Widget on a Digital Signage Screen
Integrated Applications
Have you ever considered realizing the following software within a digital signage environment?
Room assignment with access to Exchange or Google Calendar
The applications can run as widgets independently of the operating system used by your digital signage player. These are easy and inexpensive to implement because they don't require any special programming knowledge. But let's clarify the terms first.
What is a Widget?
Widgets generally represent applications that are integrated into other programs. For example: a clock display on the user interface of a smartphone or desktop computer.
The explanation of so-called web widgets is a bit more complex because there are several variants.
Web Widgets
Widgets for homepages embed in a web page as an independent element. They provide access to resources that the actual web page for various reasons should not or is not allowed to reach. Typical widgets on websites represent Google Ads, user comments, social media buttons or weather ads.
There is one drawback to this: these types of web widgets may slow down the loading of the web page.
Packaged Web Apps
Web widgets are also called web pages that are packed in a zip container along with their media content. These have the extension WGT instead of ZIP.
Original Application Purpose
The W3C adopted Web Widgets in 2012 as the official standard for so-called Packaged Web Apps. Among other things, this format was intended to simplify app development, especially for smartphones.
Developers should no longer develop and maintain an extra app for different devices. The existing website should also serve as an app for offline use. For social media such as Twitter, Instagram, or even smaller Internet service providers, providing apps would have been simplified. However, packaged websites did not succeed on smartphones. De facto, there are only two relevant mobile operating systems and regular apps were already widely used and accepted.
Digital Signage Widgets
In the Digital Signage market, we face a different starting situation. Almost every vendor does its own thing and hardly adheres to standards.
Packaged web widgets for offline use of web technologies offer several elementary advantages for our application profiles.
Operating system-agnostic applications.
Extremely flexible to use due to parameter passing.
No web cache or individual downloads necessary.
More efficient templates with animations and interactions.
Large pool of experienced service professionals available.
Increased security.
No hindrance from same-origin policy.
Therefore, we call them Digital Signage Widgets or HTML5 Widgets.
What are Digital Signage Widgets?
Digital signage widgets are packaged web applications that integrate transparently in a DS playlist as standalone applications. These can be room booking schedulers, client call-up systems, customer counters, social media integrations or interactive kiosk applications in general.
Operating System-Agnostic Applications
Displaying a video on a screen is not rocket science these days. Our customers demand interoperability, interfaces, and request custom applications. Implementing these in a timely and cost-effective manner is a challenge.
Shortly after the start of the Corona pandemic in 2020, so-called customer counters were increasingly used with digital signage playlists. To implement customer counters, client call systems or conference room schedulers within a digital signage solution without web widgets is of course possible, but more complicated.
The application is only one part of the task. After all, an existing digital signage solution still has to schedule and administer this app in a content management system.
At which times do the normal advertising loop run?
What happens when a user touches a screen area during the advertising loop?
On which days we offer the application?
When do we jump back to the normal playlist?
Other questions would be:
On which operating system are the screens based?
How does the app access internal functions and sensors of the player?
What happens when we replace a device?
Without Digital Signage Widgets
You first need to find a developer who is skilled in Windows, Linux, Android, etc. Software.
The developers, in turn, need access to interface — the so-called API, to integrate the app into the content management. Even if the manufacturer offers this, people from outside the field may have to dig into more or less detailed documentation.
In addition, as many companies consider their interfaces a national secret, annoying non-disclosure agreements become necessary. Coordinating all of this takes time.
If you want to replace your players with devices running a different operating system, for example switching from Windows to Android, you'll have to port or re-write the applications. Even with an operating system update, you may have to customize them. That costs money.
With Digital Signage Widgets
Any web programmer writes a digital signage widget that runs on any operating system. The content management software transparently processes the widget like an image or video.
Call systems, customer counters, room occupancy schedulers or interactive kiosk applications can be easily integrated into a digital signage playlist within a very short time. Without specific interfaces or nagging non-disclosure agreements.
If you decide to replace your players with better models over the years, there is a much wider choice of devices. Nevertheless, there is hardly any migration effort involved.
Digital signage widgets thus give you one more piece of independence.
What are the Benefits of Digital Signage Widgets?
Digital signage widgets based on HTML. That is why they work independently of the operating system, and thanks to parameter passing they are extremely flexible. Widgets allow templates with animations, interactive kiosk applications and increase security against external websites. Furthermore, anyone with knowledge in HTML and JavaScript can develop these widgets.
Extremely flexible due to passing Parameters
Since digital signage widgets based on HTML5, all the capabilities that websites offer are available. Besides interactivity and animations, which I describe below, they also enable so-called parameter passing.
What does this look like in practice?
You provide a weather widget to your customers. The user drags the item into their playlist and communicates the location to the widget in a form. As soon as the weather widget is to be displayed for the first time, it fetches the current weather data for that location and stores it.
You can thus offer dynamic weather reports to multiple locations with a single widget. Without extra work or having to generate daily weather videos for each location with a lot of server power! Even the input form generates itself automatically in compatible content management systems.
The same applies similarly, of course, to social media widgets, news via different RSS feeds, room reservation schedules or digital door signs linked to Google Calendar, etc.
Below is a simple example to try out with a news ticker as part of a multi-zone playlist, including a channel logo.
Offline, Web Cache and Copyrights
Many digital signage systems offer the option to link to a website. However, access to the Internet can fail. In that case, ugly error messages, a blank screen or placeholders appear.
The integrated browser checks image and video content in web pages depending on the quality of the web cache, configuration, and the connection on each access to decide whether they need to be re-downloaded. This costs time, complicates handling and increases the error sources. If the Internet connection fails, it is necessary to wait until a so-called timeout occurs. Meanwhile, viewers may see a screen without content.
Digital signage widgets get around these issues. They download the entire widget, including content. The digital signage player displays media content without any waiting time. The web application gets instant access to image and video resources.
Do you want to show content that is only available for a limited period of use? Copyrights? Encrypt the WGT! The player will receive the necessary password on a separate channel.
Animated Templates
One challenge with digital signage solutions is the so-called user-generated content
Suppose you run a drugstore and want to regularly display offers for different products on your in-store TV. Creating, commissioning and then uploading media each time with an external drawing program is tedious.
The professional way: Image Templates
Professional users usually have media agencies create a template for your corporate design. The template contains placeholders for text and images. Now, when you want to create an offer, you or your employees will use the template.
Depending on the digital signage software used, this can be done quickly and easily. It also eliminates the need for complex drawing programs with a high learning curve.
And how does it work with Videos or Animations?
However, the above procedure has a catch: it can only be done promptly and conveniently with images. Animations require more complex techniques. Adobe Flash used to be the preferred choice for this use case, but Flash has since fallen out of favor — rightly so — and has disappeared.
Some providers create videos from templates. But the procedure is time-consuming. Moreover, if it is to be rendered on servers, the technical implementation becomes sophisticated, error-prone and as a result expensive.
Digital signage widgets solve the problem elegantly. HTML, CSS and JavaScript inherently provide a wealth of animation and programming techniques. That leads us to the next advantage.
Many experienced Developers available
As mentioned in the last paragraph, widgets use widely available techniques such as HTML, and CSS. Therefore, any reasonably experienced web developer has, theoretically, the necessary knowledge to create widgets.
There are far more web and UI programmers than specialists in Java, C#, Kotlin, Swift or C/C++. Moreover, widgets enable lightweight animated templates and increase digital signage security on their network.
Increased Security
A web page on the Internet provides a much larger attack surface for compromise. Because digital signage widgets run locally on the display device, fewer vulnerabilities conceptually exist to attack. A cracker first needs access to the device's memory.
No Same-Origin Policy
For security reasons, modern web browsers prohibit the reloading of JavaScript or data from domains different from yours. This represents a critical attack vector for websites on the Internet.
However, the SOP bothers if the website simply has to process a third-party RSS feed in its web page. Digital signage widgets provide a remedy. Since these are executed locally, it can be ensured that the integrated web browser ignores the SOP and still executes them safely.
Practical Example as RSS Ticker
Enough of the theory. Let's take a look at a concrete but simple digital signage widget.
It is a simple news ticker. I describe the technique in detail in the post about HTML Tickers.
Download this RSS-Ticker.wgt and open it with a standard zip viewer. There are three files inside:
index.html: The entry point. In our case, this is where the complete logic and view of the application is located.
icon.png: The Icon for this Widget.
config.xml: The configuration file. This is mandatory to be present. Among other things, the external parameters for the widget are specified here.
Remark: Stay fair and do not link direct to this demo RSS widget in your playlists.
The config.xml
The config.xml is the heart of the widget. Here we specify which file starts the application (index.html), which file represents the icon (icon.png) and which parameters the app is expecting. In our case, we want to set the color of the font and background, font size and a link to a user-defined RSS feed.
What does it look like in Action?
You will need a SMIL compatible digital signage player for this. If you don't have any suitable digital signage hardware from IAdea or QBic Technology at hand now: Download our free SMIL player for your operating system. It runs on Windows, Linux, Android, and macOS (Intel/Rosetta2).
A dialog box will open the first time you start it. Enter the following as the content URL: https://smil-control.com/samples/digital-signage-widgets/index.smil
After a short time, you will see a simple sequence of numbers with a SmilControl broadcast logo. At the bottom, a dark blue news ticker with a transparent background runs through the image.
Take a look at the video below.
If you want to experiment on it locally yourself, download the complete SMIL demo (151 KiB) including the media files.
Conclusion Digital Signage Widgets
HTML5 Widgets bring an enormous value to digital signage solutions and increase your independence at the same time. HTML, JavaScript, and CSS are omnipresent cross-vendor standards. This simplifies the development of third-party applications and saves significantly time and costs. In addition, a much wider choice of service providers is available. It is worth it in any case.
Of course, the content management must support the use of widgets. However, this is a one-time process and, according to my experience, uncomplicated to implement.
Contact me if you have further questions or want to extend your software for widgets.
