There are 4 LiveRender templates available to you:
- Progress bar
- Activity gauge
- Speedometer
- Ticker
Progress bar
This template allows you to display a personalized, animated progress bar using custom user data through the use of a Custom field.
Animated progress bars are usually built using two images: a background image, which includes the progress bar background as well as the white space around it to accommodate the indicator 'knob' (this is the first image on the left that is uploaded in your LiveRender element), and a 'knob' image that will be overlayed below the progress bar in the animation:
Example:
Bar:
Knob:
Note: If needed, you can use additional images, like a second knob that is displayed at a different location than the first knob.
Note also that the progress bar can move horizontally and vertically!
In order to modify the default template and create a custom progress bar using your own images, you need to know what properties and values are used in the JSON. Following are the most important elements of the image you will need to specify the animation in your JSON:
- Output minimum — The minimum width of the progress bar (line 59 in JSON)
- Output maximum — The maximum width of the progress bar (line 60 in JSON)
- Progress bar color — Expressed in hexadecimal format (line 43 in JSON)
- Progress bar opacity — Value is between 0 (fully transparent) and 1 (fully opaque) (line 44 in JSON)
- Progress bar height — The height of the progress bar in pixels (line 28 in JSON)
- Progress bar X position — The horizontal position of the left top corner of the knob (line 26 in JSON)
- Progress bar Y position — The vertical position of the left top corner of the progress bar (line 27 in JSON)
- Knob X position — The horizontal position of the left top corner of the progress bar (line 58 in JSON)
- Knob Y position — The vertical position of the top of the knob (line 64 in JSON)
Example of JSON code Progress Bar
{
"element_type": "liverender",
"caching": "cdn",
"input_parameters": [
"dim1"
],
"animation" {
"sourceframes": [
{
"copyslide": "30"
}
],
"loop": "false"
},
"no_animation_fallback": {
"source": "animation",
"frame": "last"
},
"frames": [
{
"start": "0",
"end": "30",
"render": [
{
"type": "drawrectangle",
"x": "24",
"y": "0",
"h": "62",
"w": {
"easing": "easeInOut",
"parameters": {
"input": {
"source": "dim1",
"min": "0",
"max": "1000"
},
"output": {
"min": "1",
"max": "554"
}
}
},
"color": "#669900",
"opacity": "0.3",
"source": "dim1"
},
{
"type": "overlayimage",
"x": {
"easing": :easeInOut",
"parameters": {
"input": {
"source": "dim1",
"min": "0",
"max": "1000"
},
"output": {
"offset": "1",
"min": "1",
"max": "554"
}
}
},
"y": "64",
"source": {
"type": "slide",
"id": 2
}
}
]
}
],
"cache_policy": {
"dim1": {
"granularity": "11.08"
}
}In the first part of the Render node, you will indicate how the rectangular background image is being generated. The background image is always the first image that is uploaded in your LiveRender element.
Note: if you set the number of frames to 30 for this animation, the below Render code will be applied to all of the 30 frames that make up the progress bar and the size of the progress bar for each of the frames is dynamic and defined by the source Custom field value.
{
"type": "drawrectangle", => the type of animation, in this case a rectangle is drawn, showing the progress
"x": "24", => the horizontal starting position of the progress bar in the image, expressed in pixels
"y": "0", => the vertical starting position of the progress bar, expressed in pixels.
"h": "62", => the height of the rectangle
"w": { => the dynamic width of the rectangle
"easing": "easeInOut", => how the transition is happening. In this case the transition will speed up towards the end
"parameters": { => these are the parameters that define the dynamic width of the progress bar
"input": {
"source": "dim1", => the source value that will determine the width of the bar. In this case dim1, which corresponds to the first Custom field set up in the account settings
"min": "0", => the minimum and maximum values that are accepted for this source field. In case of a progress bar the source needs to be a numeric field
"max": "1000"
},
"output": {
"min": "1", => the minimum size in pixels of the dynamic bar
"max": "554" => the maximum size in pixels for the bar. If our image was 600 by 100, and the bar starts at pixel 24 and needs to stay also 23 pixels away from the right border of the image, there are 554 pixels available to show the progress bar
}}},
"color": "#669900", => the color given to the bar
"opacity": "0.3", => opacity. If set to 1 it is completely opaque, if set to 0 it is transparent
"source": "dim1" => the source value that determines the progress on the bar
},
The second part of the Render node is used to define the behavior of the second image, the arrow or knob that is moving along the progress bar. This arrow is added as an overlay image to the background image:
{
"type": "overlayimage", => the type of animation. An image is placed over the rectangular bar.
"x": {
"easing": "easeInOut", => means the progress bar will speed up at the end
"parameters": {
"input": {
"source": "dim1", => the Custom field used as a source for the dynamic position of the arrow
"min": "0", => the minimum and maximum values that are accepted for this source field. In case of a progress bar the source needs to be a numeric field.
"max": "1000"
},
"output": {
"offset": "1",
"min": "1", => the minimum position in pixels the dynamic arrow can take
"max": "554" => the maximum position in pixels the dynamic arrow can take
}}}
"y": "64", => the y position of the arrow just below the progress bar, which is 64 pixels high
"source": {
"type": "slide", => the image will slide
"id": 2 => the images are referenced with an ID. The second one from the left has ID=2. If you want to add additional images to the animation you will have to copy this JSON code for images with ID=3, 4 and 5, and adapt the code so the image is rendered correctly.
}
The third element in the Render Node is the cache:
"cache_policy": {
"dim1": {
"granularity": "10" => defines the granularity of the animation. If values between 0 and 1000 are accepted and the granularity is set to 10 then all values from 0 to 9 are shown the same animation. From 10 to 19 will also be the same animation, and so on. These animations are cached, so the smaller the granularity, the more animations are cached.
Activity gauge
The activity gauge requires 2 images, one for the background and one for the rotating sliver. Both images need to be exactly the same size. The sliver image will rotate around the center point, so it's important to place the sliver on the track of rotation in order to get the desired result. It should also have background transparency, as it will be placed on top of the background image and rotated upon itself to extend the arc to the appropriate value.
Example:
and 
When modifying the default activity gauge template to use your own custom images, it is important to know what the different values represent. Following are the most important values from your images used in the animation code:
- The x position of the left top corner of the rectangle containing the value(line 59 in the JSON)
- The y position of the left top corner of the rectangle containing the value (line 60 in the JSON)
- The height of the rectangle (line 61 in the JSON)
- The width of the rectangle (line 62 in the JSON)
- The color of the text in the rectangle (line 63 in the JSON)
- The horizontal offset of the first character of the text to the border (line 67 in the JSON)
- The vertical offset of the first character of the text to the border (line 68 in the JSON)
- The appended text such as % (line 69 in the JSON)
- The prepended text, such as $ sign (line 70 in the JSON)
- The font of the text (line 86 of the JSON)
- The color of the text (line 87 of the JSON)
- The text alignment (line 88 of the JSON)
- The text size (line 89 of the JSON)
Example of the JSON for Gauge
{
"element_type": "liverender",
"caching": "cdn",
"input_parameters": [
"dim1"
],
"animation": {
"sourceframes": [
{
"copyslide": "40"
}
],
"loop": "false"
},
"no_animation_fallback": {
"source": "animation",
"frame": "last"
},
"frames": [
{
"start": "0",
"end": "40",
"render": [
{
"type": "recallframe",
"frame_id": "last"
},
{
"type": "overlayimage",
"condition": {
"operand": "rotate",
"operator": "GT",
"value": 0
},
"x": "0",
"y": "0",
"rotate": {
"easing": "linear",
"parameters": {
"input": {
"source": "dim1",
"min": "0",
"max": "1000"
},
"output": {
"offset": "-15",
"min": "0",
"max": "360"
}
}
},
"source": {
"type": "slide",
"id": 2
}
},
{
"type": "drawrectangle",
"x": "37",
"y": "55",
"h": "50",
"w": "90",
"color": "#fff"
},
{
"type": "overlaytext",
"x_offset": "88",
"y_offset": "95",
"append": "%",
"prepend": "",
"force_text": {
"easing": "linear",
"parameters": {
"input": {
"source": "dim1",
"min": "0",
"max": "1000"
},
"output": {
"offset": 0,
"min": 0,
"max": 100
}
}
},
"font": "Roboto.ttf",
"color": "#666",
"alignment": "c",
"size": "24"
}
]
}
],
"cache_policy": {
"dim1": {
"granularity": "7.2"
}
}
}Let's split up the JSON code and explain the different configuration sections. The first part of the JSON is common to all LiveRenders and is explained here.
The first element in the Render node for the Gauge defines the type of animation used:
{
"type": "recallframe", => type of animation
"frame_id": "last" => refers to the point where the animation defined in the recallframe will start. Last means it will start from the last frame before the recallframe is declared.
},
Next is the configuration of the rotating image:
{
"type": "overlayimage", => the type of rendering, which is an image that is an overlay over the background image
"condition": {
"operand": "rotate", => this indicates that the overlay image will rotate over the background image. How this rotation is done, is defined in the section below.
"operator": "GT", => Fixed values, leave it as is
"value": 0 => The starting value of the operator
}
"x": "0", => The position in the X axis for the rotation image in pixels.
"y": "0", =>The position in the Y axis for the rotation image in pixels.
"rotate": {
"easing": "linear", => the type of rotation. Linear means an even progress of the rotation, no slowing down of the animation at the end.
"parameters": {
"input": {
"source": "dim1", => Custom field 1 is used as the source of the data for this animation
"min": "0", => the minimum accepted value
"max": "1000" => the maximum accepted value for this field
},
"output": {
"offset": "-15", => The degrees at which the image starts at the beginning of the animation. -15 means at a -15 degree angle.
"min": "0", => the minimum starting point for the rotation is 0 degrees
"max": "360" => the maximum rotation is 360 degrees
}}},
"source": { => the source of this element of the animation
"type": "slide",
"id": 2 => the second image is used for the rotation
}
Then the overlay text is configured defining how to display the value in a rectangle. The rectangle is optional:
{
"type": "drawrectangle", => the type of rendering, here a rectangle is drawn
"x": "37", => The x position of the rectangle
"y": "55", => The y position of the rectangle
"h": "50",=> The height of the rectangle
"w": "90", => The width of the rectangle
"color": "#fff"
},
{
"type": "overlaytext", => the type of rendering, here as an overlay text
"x_offset": "88", => (integer) x coordinate for the text, in pixels, using the alignment as a reference point
"y_offset": "95", => (integer) y coordinate for the text, in pixels, using the alignment as a reference point
"append": "%", => the metric to append to the value that will be displayed in this image
"prepend": "", => the text to prepend to the value that will be displayed in this image
"force_text": {
"easing": "linear",
"parameters": {
"input": {
"source": "dim1", => the Custom field used as the input
"min": "0", => the minimum accepted value that can be displayed
"max": "1000" => the maximum accepted value that can be displayed
},
"output": {
"offset": 0, => The degrees at which the overlay text starts
"min": 0, => the minimum value displayed
"max": 100 => The maximum value displayed
}}},
"font": "Roboto.ttf", => The font type applied to the text? Use a font from the account
"color": "#666", => The font color applied to the text
"alignment": "c", => The text alignment, here center. Other values are l for left, r for right. These are used as the reference point for the offset of the text.
"size": "24" => The font size applied to the text
}]}
The last element in the Render Node is the cache:
"cache_policy": {
"dim1": {
"granularity": "10" => defines the granularity of the animation. If values between 0 and 1000 are accepted and the granularity is set to 10 then all values from 0 to 9 are shown the same image. From 10 to 19 will also be the same animation, and so on.
Important notes:
If you see gaps between the initial starting position and the painted gauge (or any gap at all), then there are two possibilities:
- There's an insufficient number of frames: If the frame count is low, given that the animation is built using keyframes at precise percentage points, it's possible that the jump in degrees between one frame to another is more than what the sliver image is covering. Try to increase the number of frames for the animation.
- The sliver is too narrow: sometimes the provided sliver doesn't cover enough angle it creates gaps. Upload a sliver that's wider.
Speedometer
The Speedometer uses at least 2 images: A background image and the needle:
and 
Please Note: The needle image needs to be the same size as the background image, and the needle's center point should be in the exact center of the image. The background should be transparent, as it will be overlayed on the background image for the animation.
Also, when modifying the default template, upload your custom images and make sure the overall height and width of the element match that of your background image.
An example of the JSON code for the animated speedometer will follow :
{
"element_type": "liverender",
"caching": "cdn",
"input_parameters": [
"dim1"
],
"animation": {
"sourceframes": [
{
"copyslide": "30"
}
],
"loop": "false"
},
"no_animation_fallback": {
"source": "animation",
"frame": "last"
},
"frames": [
{
"start": "0",
"end": "30",
"render": [
{
"type": "overlayimage",
"condition": {
"operand": "rotate",
"operator": "GT",
"value": 0
},
"x": "0",
"y": "0",
"rotate": {
"easing": "linear",
"parameters": {
"input": {
"source": "dim1",
"min": "0",
"max": "1000"
},
"output": {
"offset": "222",
"min": "0",
"max": "272"
}
}
},
"source": {
"type": "slide",
"id": 2
}
}
]
}
],
"cache_policy": {
"dim1": {
"granularity": "5.44"
}
}
}
Let's split up the JSON code and explain the different configuration sections. The first part of the JSON is common to all LiveRenders and is explained here.
First in the Render section is the configuration of the rotating image:
{
"type": "overlayimage", => the type of rendering, which is an image that is an overlay over the background image
"condition": {
"operand": "rotate", => this indicates that the overlay image will rotate over the background image. How this rotation is done, is defined in the section below.
"operator": "GT", => Fixed values, leave it as is
"value": 0 => The starting value of the operator
}
"x": "0", => The position in the X axis for the rotation image in pixels.
"y": "0", =>The position in the Y axis for the rotation image in pixels.
"rotate": {
"easing": "linear", => the type of rotation. Linear means an even progress of the rotation, no slowing down of the animation at the end.
"parameters": {
"input": {
"source": "dim1", => Custom field 1 is used as the source of the data for this animation
"min": "0", => the minimum accepted value
"max": "1000" => the maximum accepted value for this field
},
"output": {
"offset": "222", => The degrees at which the image starts at the beginning of the animation. 222 means at a 222 degree angle.
"min": "0", => the minimum starting point for the rotation is 0 degrees
"max": "272" => the maximum rotation is 272 degrees
}}},
"source": { => the source of this element of the animation
"type": "slide",
"id": 2 => the second image is used for the rotation
}
The second element in the Render Node is the cache:
"cache_policy": {
"dim1": {
"granularity": "5.44" => defines the granularity of the animation. If values between 0 and 1000 are accepted and the granularity is set to 5.44 then all values from 0 to 5.43 are shown the same image. From 5.44 to 10.88 will also be the same animation, and so on.
Ticker
This will display a ticker or counter that counts towards the value retrieved from the input Custom field.
The ticker consists of an image sprite, like the following one:
When modifying the default template to create a custom ticker with your own images, you'll want to recreate this sprite image including 0-9, and the '.' and ',' digit separators. To help you get started, these are the most important values you'll need from your design:
- The width of a digit
- The height of a digit
- The width of the separation between 2 digits
- The x position of the first digit
- The y position of the first digit
- Padding around the digits
Following is an example of the JSON code:
{
"element_type": "liverender",
"caching": "server",
"input_parameters": [
"dim1"
],
"animation": {
"sourceframes": [
{
"copy slide": "43"
}
],
"loop": "false",
"smart_delay_on_first_frame_in_sec": 3
},
"no_animation_fallback": {
"source": "animation",
"frame": "last"
},
"frames": [
{
"start": "0",
"end": "42",
"render": [
{
"type": "ticker",
"source": "dim1",
"min": "0",
"max": "1000",
"digits_input": {
"image_source"; {
"id": 2
},
"image_format": "simple",
"width": 50,
"height": 70,
"separator_width": 5
},
"digits_output": {
"align": "left",
"x_position": 10
"y_position": 50,
"padding": 4,
"digit_count": "5",
"hide_left_zeros": true,
"number_format":"decimal_with_comma"
},
"transition": {
"type": "flat"
},
"freeze_on_digit_for_n_cycles_: 4
}
]
}
],
"cache_policy": {
"dim1": {
"granularity": 1
}
}
}Let's split up the JSON code and explain the different configuration sections. The first part of the JSON is common to all LiveRenders and is explained here.
The following code in the Render node is used to configure the generation of the Ticker:
Render [
{
"type": "ticker", => indicates the type of animation
"source": "dim1", => the Custom field that is used as the data source for the animation
"min": "0", => the minimum accepted value
"max": "1000", => the maximum accepted value for this field
"digits_input": {
"image_source"; { => the image that is used as the source of the animation, here with ID=2, which is the second image that has been uploaded
"id": 2
},
"image_format": "simple",
"width": 50, => the width of a digit
"height": 70, => the height of a digit
"separator_width": 5 => the space between two digits, expressed in pixels
},
"digits_output": {
"align": "left", => how the digits are aligned: left, center, right), x_position (integer) and y_position (integer) set the reference point where the digits will be placed. If align is set to left, then the reference point will be the top left corner of the ticker. If set to the right, then the reference point corresponds to the top right corner. If set to center, then your x_position and y_position will define where the center of the ticker will be placed.
"x_position": 10 => the x position depends on the selected alignment
"y_position": 50, => the y position depends on the selected alignment
"padding": 4, => is the space between each digit block
"digit_count": "5", => the maximum number of digits displayed
"hide_left_zeros": true, => hide leading zeros. If set to false, then you will see instances like these: 0001234 or 054536. If set to false, then only 1234 and 54536 will be displayed. Note that this setting is dependent upon digit_count above.
"number_format": "decimal_with_comma" => If set to decimal_with_comma, then the input is divided - for example: 3020525 will display as 30,205.25. If set to integer_with_comma, then 3020525 will display as 3,020,525
},
"transition": {
"type": "flat" => There are three possibilities. flat (goes from 0 to N increasing gradually) - jackpot (goes from RANDOM to N by setting the first digit, then second digit, etc) and airport (essentially like flat except that there is a nice little animation to make it look like and airport information board.
},
"freeze_on_digit_for_n_cycles_: 4 =>This is an integer that defines how long the key frames are shown. In general, it's best to leave it at 1 for flat and jackpot animations, otherwise the animation will look slow. For airport, you should set it to 3 to 5.
}]
