PRESENTA Platform allows to generate data-driven images and PDFs by using an API infrastructure on top of Puppeteer and Chromium.
This is not a novel idea.
What we find interesting though (and not so common) is the concept of “scriptable images” that we’re exploring within our platform.
In simple terms, it’s an image that contains logic (as code for now) in order to transform itself before sending it to the user.
Following some examples.
Let’s say, we want to print a random number on our image, so every request will contain a different number.
We need to define a parameter within the template,
random in this case:
Then, we need to wire that parameter with the code, using the
Every time the image is requested, the code is executed and a new random number is printed out.
This is the proof with a bunch of requests:
In this example we want to change the content according to a parameter value. By default we want to show some content, if the parameter exists, we want to change that content.
Let’s prepare two different contents in our template:
Then, create the condition to change the content according to the parameter
Here the generation by playing with the parameter:
In this example we want to change the dimension of a graphic element based on the value of a parameter, let’s say a progress bar.
So, we need to define the graphic element we want to be dynamic:
Then, use the parameter
progress in the CSS property:
Finally, let’s feed the template with some values:
In this last (slightly more elaborated) example we want to change the look&feel of a graphic image by passing a single parameter to define a different color set. This is the template:
Next, we need to define the attribute we want to make dynamic for each element:
Then, we need to define the source palette and the logic to exploit the parameter:
Here the results according to the passed parameter:
This is an initial exploration, we are very excited so far. We want to explore further, trying to push the limits of this concept.
For questions, reach us on Twitter.