Using Javascript in ticker widgets

[wires]

I started this as a plea for help but discovered a solution to my problem. I could find no documentation in the manuals about using javascript in widgets but was able to piece together enough info from other posts to get going. So here are some things I know now that I wish were documented. (XIBO peeps, please feel free to correct me if I got any details wrong or missed and important stuff.)

1. The output layouts are basically just a big web page with animations, timing, and other fun stuff. You can use the layout preview and your browser’s web inspector like you would on a normal site to identify items in the DOM.
2. Xibo uses jQuery. I’m sure you could use plain javascript to do what you need to, but jQuery is available to use in your layouts.
3. If you want to run your script to manipulate the content on your layout or widget, just put it inside of a $(document).ready(function() {});.

Here is an example of a simple script I used in the ticker widget that is being used to show upcoming events. Any date that has a time of 12:00 AM is an all-day event, so my script simply removes the string “@ 12:00 AM”. In this example, my date/time is displayed in a div with the class of “eDate”.

$(document).ready(function() {
$(“.eDate”).each(function(){
var tempText = $(this).text();
tempText = tempText.replace(‘@ 12:00 AM’,‘’);
$(this).text(tempText);
});
});

I’m not sure what other widgets have the option for using custom javascript or if you can even insert javascript into a layout generically, but it seems like it could be a really powerful tool for those people like me that like to tweak things. I wish there was more documentation on this aspect of Xibo. I hope this helps someone!

[DanBurnham]

thanks @wires i have a feeling this is going to be pretty useful for us!