Adding Custom Scripts to Meeting Room Displays

| We created these hooks to use internally, so send us a quick message if you're interested in working on something custom together! However, the APIs might not make a lot of sense from an end user's perspective, since they weren't really designed for public consumption. ### Adding Custom Scripts to Displays In the advanced configuration editor, you can add a custom script to your display by adding a `script` key, and setting the value as your custom script (the code itself, not a URL). We originally created this for internal use, so we could make custom tweaks to user's displays or test ideas customers had to extend their display. However, we've included snippets for a few use cases that have come up frequently at the bottom of this article. ### The afterCorrectPositions hook The name for this isn't that intuitive, but what it basically does, is execute some code every time the screen is updated. If you're creating a script that needs to run over and over, and not just once, you'll probably want to use the `afterCorrectPositions` hook to execute your custom code. The App's lifecycle is basically two parts: **Get updated calendar data** `->` **List events on the display** Then: **Every 10 seconds, reposition events and ensure the current meeting is selected, properly highlighted, etc.** Since we originally called that final step **"correct positions"**, we have a hook that's executed after the event list is updated, called `afterCorrectPositions`. The boilerplate for this is: ``` window.afterCorrectPositions = function () { // Your custom code here } ``` ### Some Example Scripts Here we will include some example scripts that may or may not be useful to you, so that you can better understand a custom script. ###### Only show one previous meeting Before we had an option to only show `N` meetings at the top of the screen which had already passed, we had a custom script to do this: ``` /* Only show the last previous meeting */ window.afterCorrectPositions = function () { $('.meeting.passed').hide();$('.meeting.passed').last().show(); } ``` ###### Show different custom reservations lengths The following custom script shows `30m | 1 hr | 1.5 hrs | 2 hrs` for instant reservations, instead of the default. ``` window.afterCorrectPositions = function () { $('.ib[data-length="60"]').attr('data-length', 120).html('2 hrs'); $('.ib[data-length="45"]').attr('data-length', 90).html('1.5 hrs'); $('.ib[data-length="30"]').attr('data-length', 60).html('1 hr'); $('.ib[data-length="15"]').attr('data-length', 30).html('30min'); }; ``` ###### Add current weather for Toronto Here you can pull the weather for Ontario and display it on your Meeting Room display. You can edit the `lat` & `long` to switch locations, but note that the units are hard-coded, and you may have to edit those as well. ``` window.afterCorrectPositions = function () { /* Get temperature for Toronto, Ontario, Canada */ if ((+ new Date()) - (window.weatherLastUpdated || 0) > 20 * 60 * 1000) $.get('https://newsapp.displayjoy.com/darksky?lat=43.6532&lon=79.3832&units=auto').done(function (data) { try { data = JSON.parse(data) } catch(e){} if (data && data.currently && data.currently.temperature) { console.log(data.currently.temperature + '˚C'); window.weatherLastUpdated = + new Date(); if (!$('.bottom.right h3.temp').length) $('.bottom.right h1').before('. '); $('h3.temp').html(data.currently.temperature + '˚C'); } }); } ``` ###### Add a screensaver to potentially reduce burn-in This should not be an issue for most modern LCD panels, but if you're on an OLED TV or another device that might experience burn-in, this could be useful. It moves the screen around slightly a couple times every minute: ``` /** * "Screensaver" to reduce burn-in */ window.afterCorrectPositions = function () { $('.top.right').css('padding-top', (Math.floor(Math.random() * 10)) + 'px'); $('.top.right').css('padding-left', (Math.floor(Math.random() * 10)) + 'px'); $('.top.right').css('opacity', (1 - (Math.floor(Math.random() * 5) / 100))); }; ``` ###### Do not show attendees for meetings If you're privacy focused and want to hide the attendees for each meeting (without completely blocking the organizer from appearing) you can use this script ``` // Do not show attendees for meetings window.afterCorrectPositions = function () { $('.meeting').each(function () { var organizer = $(this).attr('data-organizer'); $(this).find('h4 label').html(organizer); }); }; ```

Still puzzling over something?