Interactive Exhibit Using Xibo - Help

Get Help
1

Hi there!

I’m designing an interactive sign for an exhibit using Xibo, and I’m at a point where nothing is working out the way I want, so i need a hand. At its most basic point, this sign consists of 3 buttons on a webpage, each button going to a video that needs to be shown in full screen.

Trial #1 -
I created a layout with a single embedded webpage that set each video (which was stored locally on the display’s computer) into a HTML video tag. When a user clicked a button, the page would block the interactive DIV and make the corresponding video DIV visible, and play. When the end of the video was reached a listener caught it, and hid the video DIV and made the interactive DIV more visible. This functioned exactly as intended, except for the following problems:

Problem 1: The videos played back laggy. I tried all the diagnostic methods I could think of, and can only conclude that the Xibo client seems to be uploading the local video to the server and streaming it back to the display, instead of just playing the local video directly on the display.

Problem 2: The embedded web timeline element needs a duration, even when it’s the only item in the timeline. This means there’s a possibility that the sign will reset while a guest is watching a video. Setting this duration to longer, on the order of a whole day works, but we often use the same signage for private events in the evening. We need these event graphics to be scheduled and have priority on the sign at certain times of the evening. My understanding is that long duration elements screw with how well the scheduler works.

Trial #2:
In order to avoid Problem 2 above, I created an embedded webpage such that when a button is clicked, a new browser window opens up and plays the video in full screen mode. When the end of the video is reached, it closes the window. This makes the element duration unimportant, because all that’s being reset, in theory, is the unseen interactive Xibo window. Functionally this works, except for the problem below:

Problem #1: Xibo is always on top… so the new browser was open in full screen behind it.

I’ve tried variations of Trial 1, but ultimately both problems always exist. Right now, my best bet is to avoid Xibo entirely and just do a local webpage, combined with the Windows Task Scheduler. That works exactly as I want, except that it means that any updates to the videos or signage has to go through me, instead of the designer in charge of Xibo - not to mention it adds extra steps to preparing this sign for private event use.

Can you point me in the direction of any other method I might achieve a properly interactive sign using just Xibo and web assets? Thanks for any help you can provide!

Steve

2

Xibo isn’t designed to deal with interactivity yet.

It’s on our roadmap, but it’s not something we have currently, so it’s not expected to work.

Problem 1:
If you’re embedding local video in a webpage, Xibo has zero input in to how that’s rendered. It’s an Internet Explorer browser and your code. Xibo doesn’t stream video anywhere.

Problem 2:
You can set a long duration there if you want. As long as your later events that should override are scheduled with higher priority and the Expire Modified Layouts flag is enabled in the CMS Display Settings Profile, then it won’t cause you issues. It can cause issues where people set very long durations and then update a layout without having expire modified layouts enabled, and then wonder why their changes aren’t shown.

Xibo will always be on top by design. Or at least it tries as hard as it can to be, otherwise things like notifications and popups would sit on top of your sign, which isn’t desirable.

3

Hi Alex,

Thanks so much for taking the time to answer my question! Actually, knowing that the higher priority tag works gives me a way of doing it. Thanks!

Yeah when I used an embedded tag, the Xibo playback was choppy. However, when I played that same code locally on the machine via an IE browser, it was crystal clear. So I opened the Xibo client and tried manually opening an IE browser and playing the video in the background with the same code, and it played cleanly. Basically, every other way I played that video on the display was clean, except when Xibo itself was managing it through the embedded code.

Anyway, with this new information I’m going to try embedding the buttons into a Xibo web element, but point them each to another local webpage on the machine that contains the video playback code. Hopefully that will result in smoother playback.

Thanks again for your help, it’s much appreciated!

Steve

P.S. When I was playing with the embedded CSS, I discovered that when Xibo actually creates the local web page the display runs with, it includes some additional CSS after the user-defined stuff. Since this is added after the user stuff, it takes precedence and overwrites it. There were a couple properties I found, but the big one was the ‘background-color’ property. The only way to get a user-defined background-color to work with the embedded web element was to add a ‘!important’ at the end. BTW we are running version 1.7.8.

S

4

1.7.8 is pretty old, so I can’t always remember all the caveats to older versions.

Certainly there are some hardware acceleration flags you can add to speed up the browser rendering. I’d try those.

5

Yeah, I think that is exactly what’s happening here! I should have thought of this earlier, but I monitored the performance while playing videos: With the Xibo client managing the video playback, the CPU usage jumped to near 80% of our 1.4Ghz, 4 core ComputeStick. However, with the client open and the video playing on a separate browser, the usage wasn’t about 6%.

Anyway, I’ll look into this further, but our IT guys say an upgrade is on the horizon for us… fingers crossed! :slight_smile: Again, thanks for the help!

Steve

6

If you pop those keys in the 1.7 series Player should still use them.

7

Hi there,

were you able to complete your project successfully?

D

8

Hi Desire and Alex!

Actually YES - we were able to get it working on Xibo version 1.7.8. It took a little doing, but it’s working beautifully. I’ll break it down for you here:

  • First of all, the hardware acceleration thing Alex mentioned above totally works to make the videos play back better on a device like a ComputeStick. If the folder indicated doesn’t exist, just create it with the same name, and insert the Registry Key as instructed. It did the trick.

  • We achieved the interactive using an Embedded HTML element. However, that element has some quirks that need to be known to use it properly. Xibo uses what’s added to these fields to build a webpage, but even that’s not quite correct. It’s more accurate to say that Xibo’s embedded HTML feature creates a fully functioning webpage first, and the user-defined content here gets added to that page. Additionally, the default stylesheet and files are loaded at the footer of the webpage, and not the header. So they take priority over some user-defined items. An example would be the background color of your page - if you define background color in the stylesheet, it gets defined again at the footer by Xibo, which takes priority. Another example is the loading of an outdated jquery javascript file. All that said, the following is important: 1) the “HTML to Embed” field actually gets put into a body div called ‘Content’ - it is not the only code that defines the body of your webpage. 2) The “Custom Style Sheets” field actually goes into the “Head” of the webpage. 3) The “HEAD content to Embed (including script tags)” is actually put at the end of the Body, outside of the ‘Content’ div mentioned above.

  • We had to modify the Embedded HTML webpage PHP constructor to direct the page to a more current version of JQuery, in order to take advantage of AJAX calls for usage tracking.

  • The video and web assets are saved locally on the ComputeStick, in the “Xibo Library” folder, and that path is used when filling out the links in the embedded html fields. So, updates to those files need to be manually propagated to the ComputeStick.

Otherwise, if you’re interested in the actual code I used to create the interactive, let me know and I’ll pass it to you! It essentially uses HTML video tags, and the CSS display: block/none parameter to hide and un-hide the chosen video.

Thanks Alex, for all the help!

Steve