cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
JMP is taking Discovery online, April 16 and 18. Register today and join us for interactive sessions featuring popular presentation topics, networking, and discussions with the experts.
Submit your abstract to the call for content for Discovery Summit Americas by April 23. Selected abstracts will be presented at Discovery Summit, Oct. 21- 24.
Craige_Hales
Super User
Tip of the Day Kiosk

capture.pngJSL 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 );

Last Modified: May 17, 2023 9:53 PM