jeffpiazza
Feature - split screen kiosk view
We wanted to have BOTH the "now-racing-columnar" and the "ondeck" views on the same monitor at the same time. I could have opened two windows on the monitor and tried to reposition them carefully, etc. but this still makes it hard to switch scenes to, for example, the 'flag' or 'welcome' views.
So, I created a new "split-screen" view. Thankfully, because of good design by DerbyNet, it's as simple as creating a file in the www/kiosks directory. Any file in this directory with a '.kiosk' extension will show up in the list of available things to display in the scene editor and the kiosk dashboard.
Below is the file I'm using. Feel free to incorporate this into a future release, or just leave this issue open so people can find it and copy the code.
If you wanted to have several different split screen views you could create multiple copies of the file (obviously named differently) and change the content of the frames, the relative size or even the number of frames. For example, you could rename this as racing-split-screen.kiosk and then create an awards-split-screen.kiosk where you do a 50/50 split with the awards-presentation.kiosk on one side and the slideshow.kiosk on the other.
The following two lines control what is displayed in the frames (via the 'src=' parameter) and the relative widths of the two frames (via the 'width=' parameter). Note that the width's can't actually add up to 100% (try it, you'll see why). The total needs to be just shy of 100%. I make one of the frames 1% smaller (so 60% & 39% in my case instead of 60/40).
<iframe id="frame1" src="kiosk.php?address=<?php echo $g_kiosk_address; ?>&page=kiosks/now-racing-columnar.kiosk" style="border:0px #FFFFFF none;" width="60%" scrolling="no" frameborder="no" allow="fullscreen"></iframe>
<iframe id="frame2" src="kiosk.php?address=<?php echo $g_kiosk_address; ?>&page=kiosks/ondeck.kiosk" style="border:0px #FFFFFF none" width="39%" scrolling="no" frameborder="no" allow="fullscreen"></iframe>
Save the following code as split-screen.kiosk in www/kiosks:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Split Screen</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function resizeFrames()
{
document.getElementById('frame1').style.height=window.innerHeight-16 + 'px';
document.getElementById('frame2').style.height=window.innerHeight-16 + 'px';
}
window.addEventListener('resize', function(event) {
resizeFrames();
});
</script>
<?php require('inc/kiosk-poller.inc'); ?>
<?php require('inc/stylesheet.inc'); ?>
<link rel="stylesheet" type="text/css" href="css/kiosks.css"/>
</head>
<body>
<?php
// require_once('inc/banner.inc');
// make_banner('DerbyNet Kiosk', /* back_button */ false);
?>
<div class="full_page_center" height="100%">
<iframe id="frame1" src="kiosk.php?address=<?php echo $g_kiosk_address; ?>&page=kiosks/now-racing-columnar.kiosk" style="border:0px #FFFFFF none;" width="60%" scrolling="no" frameborder="no" allow="fullscreen"></iframe>
<iframe id="frame2" src="kiosk.php?address=<?php echo $g_kiosk_address; ?>&page=kiosks/ondeck.kiosk" style="border:0px #FFFFFF none" width="39%" scrolling="no" frameborder="no" allow="fullscreen"></iframe>
</div>
<script>
resizeFrames();
</script>
<?php require_once('inc/ajax-failure.inc'); ?>
</body>
</html>
