Run JavaScript if a file is created

KirAsh4 · Jul 28, 2016, 8:14 PM

Earlier you mentioned you using PHP, so I kept it in the loop. Use node_helper to call the PHP script. Let the PHP script check for the file and report back to node_helper which in turn reports to the module.

ooom416354 · Jul 28, 2016, 8:32 PM

@KirAsh4 OK, so my PHP script is actually index.php, it’s effectively the page that loads and is my Mirror. In that file I have a reference to the JS file which runs the mta code.

<script src="js/mm-mta.js"></script>

So would I put the following in the PHP page? (sorry if I sound dumb here)

var prev_datestamp = 0;
var expire_time = 15 * 60 * 1000; // 15 minutes

// run every five minutes
if (file exists) {
  if (file.datestamp > previous_datestamp) {

   <script src="js/mm-mta.js"></script>

    previous_datestamp = file.datestamp;
  } else if (now > file.datestamp + expire_time) {

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script> 
      $("#mta").empty();
  </script>
}
}

ooom416354 · Jul 28, 2016, 8:43 PM

@KirAsh4 for reference here’s the full index.php file

index.php

KirAsh4 · Jul 28, 2016, 8:46 PM

Oy, why do it that way … your index.php will never get updated if there’s an upstream change in the code (because we use index.html). You should use the existing infrastructure in MM². Create a new module, have it display in a specific region on the mirror. Every 5 minutes, have the module refresh by doing a call to its node_helper. The node_helper can be a simply python script that checks the specific file in question and reports back to the module.

I thought the PHP script was doing something … it’s not in this case. You don’t need PHP at all for this.

Some places to look for coding ideas:
MM² Module Development Documentation
Look at how modules such as the calendar and newsfeed implement a node_helper which does the background tasks

You could still use PHP to do the file checking for you, but to me that’s a bit of an unnecessary overhead.

ooom416354 · Jul 28, 2016, 8:50 PM

@KirAsh4 LOL - I’m just lost these days with all of this stuff. I should stick to my DB work.

Let me see what I can do with the module documentation, it would be a good experience anyway to learn.

ooom416354 · Jul 28, 2016, 8:54 PM

@KirAsh4 Just out of curiosity, if I were to add the code you provided into the PHP file, would i need to bracket it with <?php then add the code here?>

KirAsh4 · Jul 28, 2016, 9:18 PM

This is hard to answer because I don’t know what your PHP file looks like. I don’t know if you are echo-ing HTML data, or using HEREDOC? I’m flying blind here … (as much fun as that could be)

ooom416354 · Jul 28, 2016, 11:25 PM

@KirAsh4 I had actually uploaded that file a few posts back. For reference here’s the entire thing (forgive the ugliness)

<head>
	<title>Magic Mirror</title>
<html>
	<style type="text/css">
		<?php include('css/main.css') ?>
		<?php include('css//mbta-icons.css') ?>
	</style>
	<link rel="stylesheet" type="text/css" href="css/weather-icons.css">
	<script type="text/javascript">
		var gitHash = '<?php echo trim(`git rev-parse HEAD`) ?>';
	</script>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta name="google" value="notranslate" />
 
</head>
<body>

    <div class="backgroundTint"></div>

	<div class="top left">
		<div class="date small dimmed"></div>
		<div class="time"></div>
		<div class="timeWarning xxsmall"></div>
		<div class="holidays xxsmall dimmed"></div>
		<div class="calendar xxsmall"></div>
		<div class="mbta xxxsmall dimmed"></div>
	</div>

	<div class="top right">
	    <div class="windsun small dimmed"></div>
		<div class="temp"></div>
		<div class="tempfeelslike xxsmall"></div>
		<div class="spacer"></div>
		<div class="tempgraph"></div>
		<div class="weekgraph"></div>
		<div class="summary xxsmall2 dimmed"></div>
		<div class="weatheralerts xxsmall2 dimmed"></div>
	</div>

	<div class="lower-third center-hor">
		<div class="compliment light"></div>
		<div class="weatherCompliment small light"></div>
	</div>

	<div class="bottom center-hor">
		<div class="newsTitle xsmall xxdimmed"></div>
		<div class="news medium"></div>
	</div>

	<div class="farbottom center-hor">
		<div class="newsDots xxxsmall"></div>
	</div>

	<div class="farbottom right">
		<div class="lastupdated luWeather xxxsmall xxdimmed"></div>
		<div class="lastupdated luMBTA xxxsmall xxdimmed"></div>
		<div class="lastupdated luRSS xxxsmall xxdimmed"></div>
		<div class="lastupdated luHolidays xxxsmall xxdimmed"></div>
	</div>

</div>

<!-- Third Parties -->
<script src="js/jquery.js"></script>
<script src="js/ical_parser.js"></script>
<script src="js/moment-with-locales.js"></script>
<script src="js/config.js"></script>
<script src="js/rrule.js"></script>
<script src="js/d3.js"></script>

<!-- Our Stuff -->
<script src="js/main.js?nocache=<?php echo md5(microtime()) ?>"></script>
<script src="js/mm-weather.js?nocache=<?php echo md5(microtime()) ?>"></script>
<script src="js/mm-mbta.js?nocache=<?php echo md5(microtime()) ?>"></script>
<script src="js/mm-mta.js?nocache=<?php echo md5(microtime()) ?>"></script>

</html>
</body>

KirAsh4 · Jul 29, 2016, 1:19 AM

Then yes, write the proper PHP code and stick it in <?php ... ?> tags.

ooom416354 · Jul 29, 2016, 1:19 AM

@KirAsh4 awesome, I will give it a shot. I can’t thank you enough! Much appreciated!