WOLFVISION Screensaver and Digital Signage Player User Guide

Browser Resolution: Screensaver at 1080p, Cynap’s Chromium browser at 720p
Compatibility: All Cynap systems except Cynap Pure Mini or Cynap Pure Receiver Cynap Videobar

Product Usage Instructions

System Requirements
Ensure the Cynap unit is properly connected to the display device, powered on, and accessible on the network from your PC/laptop.

Initial Setup

Access Cynap settings by navigating to the IP address of the unit in a web browser.
Go to OUTPUT and then Screensaver, toggle the Screensaver option to On, and set Activation Time.

Screensaver Settings Explained

SCREENSAVER: Master switch for screensaver activation

URL: Online screensaver in HTML5 form
LOCAL SCREENSAVER: Upload local HTML5 files and media resources

INTERACTIVE MODE: Allows control via USB touchscreen
AUTO SCREENSAVER: Time-out before presenting digital signage content

CONTINUE ACTIVE PRESENTATION: Keep session/files available or restart for a new presentation

Frequently Asked Questions (FAQ):

Q: Can the screensaver browser store cookies or history?
A: No, the screensaver browser does not retain any cookies or history.

Introduction

The WolfVision Cynap is a versatile presentation and collaboration system. One of its features is the ability to use the screensaver which is a standalone browser implementation as a digital signage player. This guide will help you activate and optimise this feature.

Please keep in mind
Cynap’s Chromium browser is generally set to 720p – the screensaver browser is set to 1080p.
The browser does not keep any cookies or history and any restart of the screensaver starts like a freshly installed browser.

Availability
All Cynap systems except Cynap Pure Mini or Cynap Pure Receiver

Cynap Videobar
System Requirements

Non-interactive digital signage content

WolfVision Cynap device,* including Cynap Videobar

Display device (monitor or projector)
Internet connection (optional for online content)

Digital signage content (HTML, CSS, images, videos, etc.)

Interactive digital signage content

WolfVision Cynap device,* including Cynap Videobar
USB touch screen to operate content

Internet connection (optional for online content)
Digital signage content (HTML, CSS, images, videos, etc.)

Initial Setup
Before you begin, ensure that your Cynap unit is properly connected to your display device, powered on and is available on your network from your PC/laptop.

Step-by-Step

Connect Cynap to Display:
Use an HDMI cable to connect the Cynap to your monitor or projector.
Power On:
Press the power button on the Cynap unit to turn it on.
Network Connection:
Connect the Cynap to a wired or wireless network to use online content for digital signage or want to upload your personal HTML assets.
Activating the Screensaver
To activate the screensaver on the Cynap, follow these steps:
Access Settings
On the main screen, select the three dotted toolbar icon (bottom right). Then click on the cogwheel (settings icon) and enter your password on the pop-up prompt to get access to your Cynap settings.

Screensaver Settings
Navigate to OUTPUT (left) and then to Screensaver (right) and press [SAVE].

Enable Screensaver:
Toggle the screensaver option to On.

Set Screensaver Activation Time
Set the time duration after which the screensaver will activate when there is no activity.
Note: please do only select a short amount of time, if you are no longer setting up your system, as the screensaver will ignore your input and switch the screensaver ON while closing the settings UI on which you might work on.

Screensaver settings explained

1	SCREENSAVER	Master switch to activate screensaver option
2	URL	Online available screensaver in HTML5 form
3	LOCAL SCREENSAVER	Local HTML5 file(s) and media resources. Select folder for upload onto Cynap that contains index.html
4	INTERACTIVE MODE	Interactive mode allows digital signage content to be controlled via USB touchscreen
5	AUTO SCREENSAVER	Time-out before digital signage content is presented
6	CONTINUE ACTIVE PRESENTATION	Keep session and files available or restart session for a new presentation.

URL versus local screensaver | interactive versus non interactive non-interactive mode
If the interactive mode got disabled, then a change on Cynap’s source selection (a new AirPlay connection, touch on a connected USB touch screen, etc.) will end the screensaver and continue with either continuing the session or start a new session from scratch.

interactive mode
Once the interactive mode got enabled, a screensaver output can be used for manual manipulation via touch screen. Useful for applications where a digital signage solution provides covers diﬀerent types of media and content with various sub pages.

URL (online)
The screensaver URL needs to be pointed to digital signage content on the web.

Screensaver session
Cookies and session settings are not stored (for identiﬁcation of managed output clients) but could be either addressed via its IP address on the server side or via web socket integration.
The browser engine on a Cynap always starts from scratch – you won’t be able to use stored cookies. If you need to send back license keys or source/target information then you have to implement
If Screensaver got enabled and no URL or Local Screensaver got conﬁgured, a Cynap will display a default screensaver on https://screensaver.wolfvision.com

local screensaver (oﬄine)
The local screensaver displays signage content that got stored on Cynap directly. Following requirements:

HTML5 content
A laptop with network access to your Cynap

It allows using a screen saver where Cynap has no network access and if an online screensaver has been set, act as a local backup in case the network connection gets interrupted or the URL linked content is no longer available.

Installation procedure
1st. Create HTML5 content with as many videos and images or subpages you like.
2nd. Then save these ﬁles into a single folder – name the ﬁrst page as index.html.
3rd. click on Choose folder to see the ﬁle prompt and select the folder (but not the index.html ﬁle itself)

CREATE HTML5 CONTENT AND AN IMAGE Create your image and save it in WEBP format.

Save HTML5 content as index.html and image as your-image.webp into a single folder

CLICK CHOOSE FOLDER

SELECT AND UPLOAD FOLDER (Do not select index.html)

There is no notify after uploading the ﬁles on Cynap locally – but please do not forget to press the SAVE button at the bottom!

Update procedure
The uploaded folder needs to be deleted before it can be replaced.

If the online screensaver content is no longer available (network issues, content server issues, etc) then the locally stored screensaver content will be used as a backup.

When the content is available again then Cynap will switch the screensaver from local content back to online content.

Save and share screensaver conﬁguration

All screensaver settings can be stored and shared using a vSolution Link conﬁguration template.
Please refer to the vSolution Link Pro information on the WolfVision website on how to install and operate the vSolution Link Pro management console.

Log into your vSolution Link Pro console and click on the Cynap containing your screensaver settings.
On the menu (right hand side) click on Create Settings Template.
Provide a name for your stored conﬁguration template.

Scroll down and click on the arrow button to open up the Screensaver settings option.
Select Screensaver and then save your template.

Integration into customer setups

Resolution
A common website when using Cynap’s browser is set to 720p to improve readability for its audience.
On Digital signage content the browser resolution is set to 1080p to allow for additional media content – especially when used in combination with a touch screen where users click on content to receive information.

Ending an active digital signage session
The interactive screensaver ignores screensharing sessions to end a screensaver. There are 3 ways to stop the screensaver and re-enter Cynaps presentation mode.

#1	Browser UI access	Click on Deactivate button
#2	USB Touch screen or mouse	Press on EXIT icon
#3	Room control via WolfProt	Login as user and send stop command

#1 access the Cynap UI via browser
(BROWSER UI VIEW OF A RUNNING SCREENSAVER WITH CENTER STOP BUTTON)
- Simply enter the IP address or Cynapname.local to access the UI and click on button labelled [Deactivate] in the center of the screen.
  Information: The conﬁgured screensaver won’t be deactivated it will be simply stopped until the condition to start the screensaver is met once again.

#2 access the Cynap UI via touch screen, USB attached mouse or remote control
(TOUCH SCREEN VIEW OF A RUNNING SCREENSAVER WITH BOTTOM RIGHT STOP BUTTON)
Press the EXIT icon on the bottom right hand side.
#3 Send Cynap-API command

Send to port 50915 or websocket (ws://Cynap-IP/xxx) following commands.

Execute login command to start a user authenticated session 09CB42 (login command – please consult the Wolfprot PDF to see instructions and an example on how to log-in to execute an authenticated command)
Please use one of the many online ASCII to HEX converter if your application does not allow data conversion or if you execute the command from another Cynap’s Peripheral Command settings.
Screensaver Oﬀ command to stop the screensaver 09CD000100

Example
Login with user password = Password (hex: 50 61 73 73 77 6F 72 64) and stop screensaver all in one single transfer
In hex: 09CB420A010850617373776F726409CD000100

Optimising Performance

To ensure the digital signage runs smoothly, consider the following optimizations:

File Formats:
Use supported ﬁle formats for images (e.g., WEBP, PNG, JPG) and videos (e.g., MP4).
Resolution:
Ensure the content resolution matches your display resolution to avoid scaling issues.

Compression:
Compress large video ﬁles to reduce playback lag.
Update Regularly:
Regularly update the content to keep the signage fresh and engaging.

Local screensaver implementation ideas.

Idea 1: technical support
Add a remote and a local screensaver. The local screensaver needs to show the information if the network gets interrupted for a longer period of time.
Idea 2: instruction video
Idea 3: company image ﬁlm

Idea 4: Slideshow with adverts
Idea 5: Responsible person with contact details for the meeting room
Idea 6: Upcoming events

Idea 7: Customer testimonials
Idea 8: A wall clock showing the current time with optional additional timezones
Idea 9: “Welcome” content that makes new guests feel comfortable

Troubleshooting

If you encounter issues, try the following troubleshooting steps:

Common Issues and Solutions:
Screensaver Not Activating:
Check the activation time setting and ensure there is no ongoing activity (no Cynap window opened). Check if content is active on display (screensaver time check starts as soon as last window closes).
Content Not Displaying:
Verify that the content ﬁles are in supported formats and properly uploaded.

Network Issues:
Ensure the Cynap is connected to a stable network if using online content.
Performance Lag:
Optimise content ﬁle sizes and check the network bandwidth.

Conclusion
Activating and optimizing a screensaver as a digital signage player on the WolfVision Cynap can enhance your presentations and provide dynamic content display. Follow the steps outlined in this guide to set up and maintain your digital signage effectively.
For further assistance, refer to the ofﬁcial WolfVision Cynap documentation or contact WolfVision support.

Creating Digital Signage content
To use the screensaver as a digital signage player, you need to conﬁgure the type of content it will display.
Step-by-Step:

Create HTML5 Content:
In the Screensaver settings, choose the type of content you want to display (e.g., images, videos, online content).
For example showing a single pictureOnline Content
If you prefer using online content, ensure the Cynap is connected to the internet or the onPremise Webserver. Enter the URL or online source for the digital signage content.

Upload Content
For local content, the upload function opens your ﬁle browser. Select the directory containing the full list of ﬁles and press OK to have all the ﬁles uploaded.

Examples

Supported media ﬁles

Images
	JPEG	.jpg	Static legacy format fastest compression, biggest size pixel (photo) optimised
	GIF	.gif	Legacy format (optionally animated) vector optimised
	PNG	.png	Static
		.apng	Animated
	WebP	.webp	Static or animated
	AVIF	.avif	Static or animated not available on older browser (which might be a problem during development).
Videos
	MP4	.mp4
Audio
	MP3	.mp3

Why WebP or AVIF instead of JPEG/GIF? Smaller image size and bandwidth savings.

Example Image Slideshow
This example shows an image that is being replaced with another image after 3 seconds and uses a transition between each image. The set of 10 images will be randomised at start.

Instruction
Copy the text below into a single ﬁle called index.html.
Change the image name to the names of the images you would like to use – or convert/rename your images into their respective WEBP image name.
On Cynap Output Settings: Deactivate INTERACTIVE Screensaver.

Listing Slideshow

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>Slideshow with random order</title>
<style>
body {

display: flex;
justify-content: center;
align-items: center;

height: 100vh;
background-color: #333;
margin: 0;

}
#slideshow {
position: relative;

width: 100%;
max-width: 1900px;
height: 1060px;overflow: hidden;

}
.slide {
position: absolute;

width: 100%;
height: 100%;
opacity: 0;

transition: opacity 1s ease-in-out;
}
.slide.active {

opacity: 1;
}
</style>

</head>
<body>
<div id=”slideshow”></div>

<script>
const imageUrls = [
‘image1.webp’, ‘image2.webp’, ‘image3.webp’, ‘image4.webp’, ‘image5.webp’,

‘image6.webp’, ‘image7.webp’, ‘image8.webp’, ‘image9.webp’, ‘image10.webp’
];
function shuffle(array) {

for (let i = array.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];

}
return array;
}

function createSlideshow() {
const slideshow = document.getElementById(‘slideshow’);
const shuffledImages = shuffle(imageUrls.slice());
shuffledImages.forEach((url, index) => {
const img = document.createElement(‘img’);
img.src = url;
img.className = ‘slide’;
if (index === 0) {
img.classList.add(‘active’);
}
slideshow.appendChild(img);
});
let currentSlide = 0;
setInterval(() => {
const slides = document.querySelectorAll(‘.slide’);
slides[currentSlide].classList.remove(‘active’);
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add(‘active’);
}, 3000); // Change image every 3 seconds
}
document.addEventListener(‘DOMContentLoaded’, create slideshow);
</script>
</body>
</html>

Example Videoplayer 1080p Fullframe
This example plays a video as soon as the screensaver function gets initiated. Since the screensaver runs on the OnBoard Chromium browser, the video is automatically muted (per Google’s rule and browser implementation.

If a user clicks on a video it well be shown in full screen and plays the audio. Click again and the video grid reappears again.

Instruction
Copy the text below into 3 ﬁles called index.html, scripts.js, and styles.css.
Insert 4 clips named video1.mp4, video2.mp4, video3.mp4, and video4.mp4 into the same folder as your HTML5 ﬁles.
On Cynap Output Settings: Set Screensaver to INTERACTIVE.

Interactive Video Player Grid

index.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”video-grid”>
<video src=”video1.mp4″ loop muted></video>
<video src=”video2.mp4″ loop muted></video>
<video src=”video3.mp4″ loop muted></video>
<video src=”video4.mp4″ loop muted></video>
</div>
<script src=”scripts.js”></script>
</body>
</html>
styles.css
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
width: 90vw;
height: 90vh;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
scripts.js
document.addEventListener(‘DOMContentLoaded’, function () {
const videos = document.querySelectorAll(‘video’);
videos.forEach(video => {
video.play();
});
});

History

Version	Data	Changes
1.0	Oct. 16th 2024	Initial release

Documents / Resources

WOLFVISION Screensaver and Digital Signage Player [pdf] User Guide
Cynap, Cynap Videobar, Screensaver and Digital Signage Player, Digital Signage Player, Signage Player, Player

References

User Manual

WOLFVISION Screensaver and Digital Signage Player

Product Information