A hype document that greets visitors at reception

[Dinkster (Marco Dinkel)]

Hello Tumulter,

I've been trying for a few days to create a Tumult document that will greet visitors coming into the house with their names and other details on our tablet at reception.

The document should be on our web space and therefore accessible to everyone. So that all colleagues can easily enter the details from their workstation and the website is always loaded and visible on the tablet via the presentation app. If there are no appointments, the document should play an animation.

The document will later have several pages that serve as templates when one visitor arrives, two visitors arrive, five visitors arrive, etc.

But I can't get the entries to be saved. They always disappear when the document is reloaded. And when the document is accessed from another browser, the initial entries are still there.

Is this even possible the way I imagine it to be?

The script in the :

<script>
        document.addEventListener('DOMContentLoaded', function() {
            var checkExist = setInterval(function() {
                if (document.getElementById('01-time') && document.getElementById('01-name') && document.getElementById('01-company')) {
                    clearInterval(checkExist);
                    attachEventListeners();
                }
            }, 100); // Überprüfe alle 100 Millisekunden

            function attachEventListeners() {
                document.getElementById('01-time').addEventListener('blur', function() {
                    console.log("01-time verlassen");
                    localStorage.setItem('01-time', this.value);
                });

                document.getElementById('01-name').addEventListener('blur', function() {
                    console.log("01-name verlassen");
                    localStorage.setItem('01-name', this.value);
                });

                document.getElementById('01-company').addEventListener('blur', function() {
                    console.log("01-company verlassen");
                    localStorage.setItem('01-company', this.value);
                });
            }
        });
    </script>

The field details:

This is not the actual document, just one with the possible functions:
Besucher.zip (22,9 KB)

There is no error in the console and I get the event messages on leaving the fields. The values of the fields in Local Storage are undefined.

I have no other actions or scripts that are executed when any scenes are started. The ones that are still in the library are not linked.

Anyway, I'm on the verge of going crazy.

So if anyone has any tips or help, that would be great!

Kind regards
Marco

[MaxZieb (Loves Hype)]

You can use HypeReactiveContent and Hype StateKit…

Using Hype Reactive Content in combination with Hype StateKit

Great to hear, the error you have is that you are setting the values in a static fashion while preparing the scene. That is something you would need to remove: [CleanShot 2022-09-27 at 12.34.55@2x] You have also wired up Hype StateKit save on customDataUpdate (smart!): Your code for updates: // add a global save callback on updates HypeReactiveContent.setDefault('customDataUpdate', function(key, val){ hypeDocument.saveState('customData', hypeDocument.customData); }) Explanation: This comb…

[MarkHunte]

If Hype StateKit is using normal local storage, then this

@Dinkster

And when the document is accessed from another browser, the initial entries are still there.

Will still occur.

--

I have used in the past with Chrome extensions localStorage sync which allows a logged in user to see the local storage saved from browser to browser. on different devices. I think it is only for mozilla browsers?

storage.sync - Mozilla | MDN

And may be one aimed at extensions that manage a page ( which is how I used it at the time. )

--

Some sort of database may be a better option.

[Dinkster (Marco Dinkel)]

Hello Max,

thanks for pointing out those extensions. But ... I just can't get it to work. What am I missing?
Besucher.zip (41,7 KB)

[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.'));
}
?>

[MaxZieb (Loves Hype)]

If that is to technical… you can also easily use Google Sheets as a backend data source as seen here:

Hype Data Magic

Example loading data through CSV (parser, comma) This example uses a parsing example and allows quoted content and detects line endings and separators. They also can be manually specified: fetch_hype_data_magic_advanced_CSV_parser_comma.hype.zip (47,8 KB) Example loading data through CSV (parser, semicolon) In this variation, the only difference is that the data is semicolon separated. This is the case when exporting from Apple Numbers: fetch_hype_data_magic_advanced_CSV_parser_semicolon.h…

Recently a fellow Hype user used it and it worked great for dynamic ads. You can also use this slightly modification to use only the first and second row as a key/value store.

Hype Data Parser

If you wish to utilize your CSV table as a basic key-value store Sample data for your CSV, adjust with your key values Key1, Value1 Key2, Value2 Key3, Value3 This parser setup should work fetch("ADJUST-PATH-HERE.csv") .then(function(response){return response.text()}) .then(function(text){ console.log('Raw CSV', text); // Parse the CSV data into an array var parsedArray = HypeDataParser.csvToArray(text, {head: false}); // Initialize an empty object to hold the key-value pairs var keyVa…

[MaxZieb (Loves Hype)]

I am on the road so no laptop. Will look at your file later. I am typing away on my phone all this time.

Schau mal hier…

Besucher-Max.hype.zip (107,4 KB)

[Dinkster (Marco Dinkel)]

Du bist der Knaller! Danke. Da habe ich total falsche Kreise gedreht. Ganz weit entfernt vom Hype-Universum.
Kaffee ist unterwegs...

[MaxZieb (Loves Hype)]

Gerne, Danke!

[Dinkster (Marco Dinkel)]

Gern geschehen.

Nur zwei Dinge:

• wenn man in den Feldern schreibt, und ein Leerzeichen eingibt, erscheint das Wort danach an erster Stelle im Feld
• beim Zugriff von einem anderen Browser auf das Dokument, sind die Eingaben wieder weg -> ich werde das Problem jetzt aber per Fernzugriff auf das Tablet lösen

Besucher

Aber nochmal vielen Danke für’s Geradebiegen.

[MaxZieb (Loves Hype)]

Ah, das liegt daran, dass du den Save State auch beim MouseUp-Event aufrufst… das solltest du vermeiden. Wenn du speichern möchtest, macht das FocusOut-Event am meisten Sinn. Dieser wird jedoch nicht nativ von Hype unterstützt. Du kannst ihn aber mittels HypeActionEvents unterstützen.

Hier ist eine Version mit HypeActionEvents und dem Focusout-Event. Da brauchst du auch keinen Speicher-Knopf mehr... wenn man das Textfeld verlässt, wird gespeichert.

Besucher-focusout-Max.hype.zip (110,3 KB)