Taking dynamic screenshots of Hype projects

Tips & Tricks
1

If you want to create dynamic images of your Hype project files for images in newsletters or other placements that need to be updated regularly you can use a screen capture API. In this example we will be using API Flash offering 100 screen captures the month for free. This way of taking screenshots only makes sense if the capture contain some dynamic component, though. In any other case just make an image export directly from the Hype IDE. Just saying to make sure we are on the same page.

Create an account

Upload the following on your PHP capable web host

This example will render the clock found in the Mechanical Letters Example but it could be anything. It could even contain dynamic data. To set the data either pass it along with the $params and use it in you Hype document or have your Hype document fetch directly from somewhere. Hype Data Magic should also help in making things easy along those line :wink: . Create a folder on your web host for this project and create a PHP writable cache folder. Put the following code in a PHP file like index.php and upload it:

<?php
$filename = 'cache/'.date('Y-m-d-h').'-capture.jpeg';

if (!file_exists($filename)) {
	$params = http_build_query(array(
		"access_key" => "YOUR-API-KEY",
		"url" => "https://playground.maxziebell.de/Hype/HelpFiles/MechanicalLetterCountdownTimer/MechanicalLetterCountdownTimer.html",
		"width" => 680,
		"height" => 400
	));

	$image_data = file_get_contents("https://api.apiflash.com/v1/urltoimage?" . $params);
	file_put_contents($filename, $image_data);
}

$fp = fopen($filename, 'rb');
header("Content-Type: image/jpeg");
header("Content-Length: " . filesize($filename));
fpassthru($fp);
exit;
?>

You should end up with the following structure:

╰index.php
  ╰cache/

The parameters for your screen capture can be inferred from you Hype document settings and using the following documentation:

and following tool (requires login):

In my case, the filename is base on the year, month and hour of the day and only if the file isn't present in the cache it will be created costing you one credit on your quota. You can't obviously use my logic as it will break the 100 captures in the free tier (24h * 30 day = 720 captures) if you have constant visitors. So, either you would need to upgrade your tier or use another logic to probe and create the cache…

See it working here (as long as my quota isn't drained):
https://playground.maxziebell.de/Hype/ApiFlash/

2 Likes