Image Animation

This widget allows you to display an animated GIF or APNG image. It is possible to use Lottie animation with a different widget. From your hardware or the HTTP API you can change the image URL, and start and stop the animation.

The widget has the following controls:

URL ADDRESS: The URL to either a GIF or APNG (animated PNG) file. The image will be shown in the preview area at the top of the page.
Auto-Play: Play the animation once when the device is initially displayed in the app, or when the datastream value or properties ‘url’, ‘autoplay’, or ‘loop’ are changed.
Play in Loop: Repeats playing the animation from the start.

Datastream

Select or create a datastream of data type string. The datastream value of “play” will cause the animation to play, and the value of “stop” will cause the animation to stop.

You can change the properties of the widget from your hardware using the command:

Blynk.setProperty(vPin, "widgetProperty", "propertyValue");

Where:

vPin is: virtual pin number the widget is assigned to
widgetProperty: property you want to change
propertyValue: value of the property you want to change

Don't put Blynk.setProperty()into the void loop() as it can cause a flood of messages and your hardware will be disconnected. Send such updates only when necessary, or use timers.

Properties you can change

You can change the properties url, autoplay, and loop of the widget from your hardware, or via an HTTP API. Substitute ‘V2’ in the examples below with the datastream virtual pin reference (V0, V1 ...V255) you have configured for this widget. Make sure any string values are URL encoded.

Blynk.setProperty(V2, "url", "https://mechatronicsolutionsllc.com/Blynk%20animated%20image%20beat%20(1).gif"); 
// Change image URL via hardware

Blynk.setProperty(V2, "autoplay", "true"); // Sets the widget to play animation on dashboard open
Blynk.setProperty(V2, "autoplay", "false"); // Sets the widget to not play animation on dashboard open

Blynk.setProperty(V2, "loop", "true"); // Set the image to replay from the beginning
Blynk.setProperty(V2, "loop", "false"); // Set the image to stop at the end of the animation

Updates the Datastream Property and all assigned Widgets

GET https://{server_address}/external/api/update/property?token={your 32 char token}&pin={your vPin}&{property}={value}

The endpoint allows you to update the Datastream Property value via GET request. All widgets (both web and mobile) that are assigned to this datastream will inherit this property. The Datastream Property is persistent and will be stored forever until you change it with another value. In order to clear the property you need to clear the device data in device actions menu.

Example: https://blynk.cloud/external/api/update/property?token=GVki9IC70vb3IqvsV0YD3el4y0OpneL1&pin=V2&autoplay=true

Path Parameters

Name

Type

Description

{server address}*

string

Get from the bottom right of your Blynk console. More information.

Query Parameters

Name

Type

Description

token*

string

Device auth token from Device info

pin*

string

The datastream virtual pin (should start with "v")

property

string

The property of the widget you want to update: autoplay, loop, url

autoplay

string

true or false

loop

string

true or false

url

string

the image URL, should be urlencoded

{"error":{"message":"Invalid token."}}

Sync hardware to the latest datastream value

You can update your hardware to the latest datastream value from Blynk.Cloud after your hardware went offline, and then came online again.

BLYNK_CONNECTED() { // Executes every time Blynk is connected to the Blynk.Cloud 
 Blynk.syncVirtual(V2); // Synchronize variable V2 with the latest value stored in Blynk.Cloud
}

Change the datastream value with the hardware

Use the Blynk.virtualWrite() command to set the datastream value to “play” to cause the animation to play, and the value “stop” to cause the automation to stop playing.

const uint32_t TIMER_INTERVAL_V_MS = 15000;
uint32_t timerLastVn = 0;
uint8_t toggle = 0;


void timerVn(uint8_t vPin) {
 if (timerLastVn > millis()) timerLastVn = millis();
 if ((millis() - timerLastVn) > TIMER_INTERVAL_V_MS) { 
 if (toggle == 1) {
 toggle = 0;
 Blynk.virtualWrite(vPin, "play"); // play animation
 } else { // toggle == 0
 toggle = 1;
 Blynk.virtualWrite(vPin, "stop"); // stop animation
 }
 timerLastVn = millis(); 
 } 
} // timerVn()


void setup() {
} // setup()


void loop() {
 timerVn(V2)
} // loop()

Change the datastream value with the HTTP API

Use the Blynk HTTP API to set the datastream value to play to cause the animation to play, and the value stop to cause the automation to stop playing.

GET https://{server_address}/external/api/update/property?token={your 32 char token}&{pin}={value}

Example: https://blynk.cloud/external/api/update/property?token=GVki9IC70vb3IqvsV0YD3el4y0OpneL1&V2=stop

Path Parameters

Name

Type

Description

{server address}*

string

Get from the bottom right of your Blynk console. More information.

Query Parameters

Name

Type

Description

token*

string

Device auth token from Device info

pin*

string

The datastream virtual pin (should start with "v")

value

string

The desired value of the pin (play or stop)

{"error":{"message":"Invalid token."}}

Control hardware with datastream value

You can configure the hardware to respond to a change in a datastream value by configuring the BLYNK_WRITE() command.

BLYNK_WRITE(V1) {
 // Called when the datastream value for V1 changes
 String value = param.asStr();
 if (value=="play") {
  Serial.println("V1 'play' command received'");
 } else if (value=="stop") {
  Serial.println("V1 'stop' command received'");
 } else {
  Serial.print("Unexpected V1 value of: ");
  Serial.print(value);
  Serial.println("");
 }
}

PreviousIcon NextLottie Animation

Last updated 1 year ago

Was this helpful?

Image Animation

Widget Controls

Datastream

Change Widget Properties

Properties you can change

Change widget properties via HTTPs API

Updates the Datastream Property and all assigned Widgets

Path Parameters

Query Parameters

Sync hardware to the latest datastream value

Change the datastream value with the hardware

Change the datastream value with the HTTP API

Path Parameters

Query Parameters

Control hardware with datastream value