When you want to send a story via AJAX to a cloud render server, you need to teleport it. The teleportation process has 4 stages:

  • When a story is created with toTeleport=true. In this stage, ABeamer stores configuration data, and takes a snapshot of the HTML/CSS data.
  • Every time the user adds an animation. In this stage, the animation is stored to be teleported before any task is executed.
  • When getStoryToTeleportAsConfig or getStoryToTeleport is invoked. In this stage, it is stored the render and metadata information.
  • Send it by AJAX along with the assets to the cloud render server.

By taking the snapshot before any addAnimation, ABeamer prevents that any inject HTML code done by any task is duplicated, but what happens, if you need to inject HTML or CSS before the initial snapshot is taken?
The most obvious answer it’s to inject the code before the story is created, but in this case, you won’t be able to take benefit from the services provided by ABeamer, such as:

  • Access local server parameters.
  • Access story configuration parameters (ex. width).
  • Use the built-in expression engine.
  • Use of ABeamer plugins functionalities.

See it in action

Starting ABeamer 1.4, it’s possible to delay the initial HTML/CSS snapshot to a later phase, instead of being done when the story is created.

I will use the new gallery example animate-delay-teleportation included in ABeamer 1.4.
In this example, you are doing the research of a brand name, and you want to present the results coming from a JSON file. Instead of creating a story for each possibility, you create a story template and you populate with different values depending of the JSON file.
Since you want to inject HTML code, and you want to teleport the story, you need to load JSON file before the story is created. This way, the snapshot will include the injected HTML code, but then you won’t be able to take benefit from ABeamer services.

Now with the new create story parameter toStartTeleporting: false and the story method startTeleporting(); it’s possible to create the story, without taking the snapshot and at later phase trigger this process.

Let us go step-by-step. The basics:

$ abeamer create foo
# download http://www.abeamer.com/gallery/latest/animate-delay-teleportation/code.zip
# and unzip to foo folder

# run the live server. by default it use port 9000
$ abeamer serve

To see it in action, open http://localhost:9000/foo/index.html.
This will display the data and graph for acme brand name.

Now let us see for lighthouse brand name.
open http://localhost:9000/foo/index.html?var=json%3Dlighthouse.

If you want to test the teleportation in local render server, just type:

$ abeamer render --url http://localhost:9000/foo/index.html ./foo --var json=lighthouse --teleport

And it will generate the foo/story.json with the lighthouse inject into the HTML code.
You can see that on this piece segment from that file:

"html": [
        "",
        "    <div class=\"abeamer-scene\" id=\"scene1\" style=\"display: block;\">",
        "      <h1>Brand Research</h1>",
        "      <div>Name: </div>",
        "      <span id=\"name\">lighthouse</span>",
        "      <div>Reach:</div>",
        "      <span id=\"users\">0</span>",
        "      <canvas id=\"graph\" width=\"200\" height=\"100\"></canvas>",
        "    </div>",
        "  "
      ],

How does it works?

Now that we saw it in action, what is happening?
So in this example, I want to:

  1. Create an ABeamer story with toStartTeleporting: false creation parameter.
  2. Get the server variable parameter named json from the story.
  3. Load the json file based on that variable.
  4. Inject the HTML code based the data received from the json file.
  5. Invoke story.startTeleporting(); to create a HTML/CSS snapshot.
  6. Configure the chart with the data from the JSON file.
  7. Call scene1.addAnimation to add the chart and reach animation.

If you open the foo/js/main.ts, you will see this code fragments:

const story = ABeamer.createStory(/*FPS:*/20, {
    // Uncomment to set into teleportation mode
    //  toTeleport: true, 
    toStartTeleporting: false,
  });

Once you have your template finished, and you are ready to teleport, uncomment the toTeleport.
If you run it from a local render server with the parameter --teleport, it will set the toTeleport creation parameter to true.

Now, in order to receive the server var parameter, and load the json file.

 const json = story.args.vars.json as string || 'acme';

  $.getJSON(`${json}.json`, (data) => {
    ...

Once the data is loaded, we set the brand name, and trigger the initial teleportation snapshot.

  $('#name').text(data.name);
  story.startTeleporting();

Conclusion

Are there another ways to implement this example?
Yes, there are, you can implement your own querystring parser and get that information before you create the story, but this is just a simple example, ABeamer provides several services which required for the story to be created, for all of those cases, delaying the snapshot creation until all the code is injected is the best strategy.