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.
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 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:
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.
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:
The following custom script shows 30m | 1 hr | 1.5 hrs | 2 hrs for instant reservations, instead of the default.
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.
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:
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
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 class="temp"></h3>');
$('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);
});
};Replace Subject with Organizer
// Replace Subject with Organizer
window.afterCorrectPositions = function () {
$('.meeting').each(function () {
var organizer = $(this).attr('data-organizer');
$(this).find('h2').html(organizer);
});
};Updated on: 15/08/2024
Thank you!