cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
The Discovery Summit 2025 Call for Content is open! Submit an abstract today to present at our premier analytics conference.
See how to use to use Text Explorer to glean valuable information from text data at April 25 webinar.
Choose Language Hide Translation Bar
View Original Published Thread

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 );

TipOfTheDay.mp4
Video Player is loading.
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
    • Chapters
    • descriptions off, selected
    • captions off, selected
      (view in My Videos)