Tip of the Day Kiosk

[#1]

JSL to write HTML.

@cbaril  requested a slide deck for the JMP Tip of the Day items to run in kiosk mode. The tips are stored in a JMP install directory as HTML files that will display in a browser. Here's some JSL that will create an index.html file to play the tips in a loop. There really isn't much JSL here: load the file names and insert them into an HTML/JavaScript template, write the result to disk and open it in a browser. Most of the magic is in the CSS and JavaScript; Google was my friend. You'll need to adjust the tip of the day directory for your machine. I only tested with FireFox and a couple of other browsers. You can change the 1.5s transition (two places) and the 10s delay (one place, 10000 ms).

If( JMP Version() < "16", Throw( "This JSL needs JMP 16 or greater" ) );

todd = Match( Left( JMP Version(), 2 ),
	"16", "C:\Program Files\SAS\JMP\16\Tip of the Day\",
	"17", "C:\Program Files\SAS\JMP\17\Tip of the Day\",
	"18", "C:\Program Files\JMP\JMPEA\18\Tip of the Day\",
	Throw( "open the jsl and add the tip file location for JMP " || JMP Version() )
);

If( !Directory Exists( todd ), Throw( "Can't find " || todd ) );
todd = Substitute( todd, "\", "/" );
filelist = Filter Each( {f}, Files In Directory( todd ), Ends With( f, ".htm" ) );
filelist = Transform Each( {f}, filelist, "'file://" || todd || f || "'" );

html = Save Text File(
	"$temp/index.html",
	Eval Insert(
		"
<html>
	<head>
		<style>
			.container_row{
			  display: grid;
			}

			.layerVisible, .layerHidden{
			  grid-column: 1;
			  grid-row: 1;
			}

			.layerVisible {
			  opacity: 1.0;
			  transition: opacity 1.5s ease-in-out;
			}

			.layerHidden {
			  opacity: 0.0;
			  transition: opacity 1.5s ease-in-out;
			}
		</style>
		 <title>JMP ^left(jmpversion(),2)^ tips</title>
	</head>
	<body>
		<div class='container_row'>
			<div class='layerVisible'>
				<iframe id='if_1' src='' style='width: 2500px;height: 2000px;float: left;margin: 20px;'></iframe>
			</div>
			<div class='layerHidden'>
				<iframe id='if_2' src='' style='width: 2500px;height: 2000px;float: left;margin: 20px;'></iframe>
			</div>
		</div>
	</body>

	<script type='text/javascript'>
		/* 
		   http://www.dynamicdrive.com/forums/showthread.php?73827-Java-Script-for-cycling-through-pages 
		   https://stackoverflow.com/questions/59940969/looking-to-do-transitions-between-iframes-using-javascript 
		   https://stackoverflow.com/questions/6780614/css-how-to-position-two-elements-on-top-of-each-other-without-specifying-a-hei 
		   https://stackoverflow.com/questions/507138/how-to-add-a-class-to-a-given-element 
		   (and others for css transition opacity)
		*/
		var pages = [
			^concatitems(filelist,\!",\!")^
		];
		var p = 0;
		var if_front = document.getElementById('if_1');
		var if_back = document.getElementById('if_2');
		function loadIframe() {
			var page = pages[p];
			p = (p+1) % pages.length;
			var a = document.createElement('a');
			a.href = page;
			if_front.src=a;
			if_front.parentNode.classList.add('layerVisible');
			if_front.parentNode.classList.remove('layerHidden');
			if_back.parentNode.classList.add('layerHidden');
			if_back.parentNode.classList.remove('layerVisible');
			var temp = if_front;
			if_front = if_back;
			if_back = temp;
			setTimeout(loadIframe, 10000); // 1/1000 seconds
		}
		loadIframe();
	</script>

</html>"
	)
);

Web( html );