A hype document that greets visitors at reception

[MaxZieb (Loves Hype)]

This sound like it also could be done via remote… if the tablet has an internet connection it is really easy to connect it to a JSON file on a server. The only thing missing would be setting up the fields in:

Introducing a Simple CMS for Hype with JSON Schema

Hey Hype Users, I've crafted a simple CMS that uses JSON Schema to create dynamic forms, with the output saved into a data.json file. The demo is live but with saving disabled to prevent any misuse and ensure the demo data remains clean. Demo SimpleCMS Password: test JSON: https://playground.maxziebell.de/Hype/SimpleCMS/demo1/data.json is the result Thinking ahead, I might externalize the JSON schema into its own file and introduce an option to write JSON directly into a selected HTML file …

Then you can just consume the data and display it using Hype Data Magic for example.

You could load the JSON like this on scene load of the first scene:

fetch(jsonUrl)
  .then(response => {
    if (!response.ok) {
      // If the response status is not OK, throw an error to trigger the catch block
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    if (data && data.error) {
      // If the JSON contains an error property, handle it as an error
      throw new Error(data.error); // This will lead to the catch block being executed
    } else {
      // If data is available and there's no error, use HypeDataMagic to set the data
      HypeDataMagic.setData(data);
      // Switch to the next scene, adjust transition settings as needed
      hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1);
    }
  })
  .catch(error => {
    // Log the error for debugging purposes
    console.error('There was a problem with the fetch operation:', error);

    // Create an error object with the error message
    const errorData = { errorMessage: error.message };

    // Use HypeDataMagic to set the error object
    HypeDataMagic.setData(errorData);

    // Navigate to the "errorMessage" scene in case of an error
    hypeDocument.showSceneNamed("errorMessage", hypeDocument.kSceneTransitionCrossfade, 1.1);
  });

Remember to set the url in head HTML:

<script type="text/javascript">
    // Define the URL of your JSON file (absolute or relative)
    var jsonUrl = 'https://example.com/data.json';
</script>

Also put your display and animation on the second scene and beyond. If you want to refresh regularly you can just jump back to the first scene that loads the data fresh.

Also add a scene called errorMessage to display if something goes wrong. You can jump back to the first scene from there to retry after a while if you want.

The only thing for local testing is the CORS problem. Best all tested form the same online server (meaning upload the Hype export to the same location as the CMS).

Another optional solution to allow local testing is to use a PHP CORS proxy as seen here:

<?php
// Specify the name of the JSON file
$jsonFileName = 'data.json';

// Set headers to avoid CORS restrictions
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

// Check if the JSON file exists in the same directory
if (file_exists($jsonFileName)) {
    // Read the contents of the JSON file
    $jsonData = file_get_contents($jsonFileName);

    // Output the JSON data
    echo $jsonData;
} else {
    // Return an error message if the file does not exist
    echo json_encode(array('error' => 'File not found.'));
}
?>