LogoLogo
GitHubBlynk WebsiteLogin to Blynk.Console
  • Introduction
  • Getting Started
    • Supported Hardware
    • Quickstart
      • Next Steps After Quickstart
      • Quickstart Device: Code Overview
      • Troubleshooting
    • Device Activation Methods
      • Manual Device Activation
      • WiFi provisioning
      • Static Token
    • Template Quick Setup
      • Set Up Datastreams
      • Set Up Web Dashboard
      • Set Up Mobile App Dashboard
      • Prepare Your Code
      • Test your Template
    • Send Data From Hardware To Blynk
    • Control Devices (GPIOs and beyond)
    • Events
    • Notifications (Alerts)
    • Sign Up / Sign In
  • Changelog
  • General Concepts
    • Developer Mode
    • Device
    • Device Template
    • Connection Lifecycle
      • Disconnections And Heartbeat
    • Users
      • Multi-tenancy
    • Organizations
    • Automations
      • Forward Device Data
  • Message Usage
  • Integration Guides
    • Node-RED
    • The Things Stack
      • Getting Started
      • Device Grouping
      • Automated Device Onboarding
      • System DataStreams
    • Blues
    • NCD Industrial Vibration Sensor
    • Particle - monitor with Blynk
    • Particle - control with Blynk
    • AWS IoT Core
  • Myriota
  • OpenWeather
  • Blynk.Console
    • Overview
    • Dashboards
      • Dashboard Widgets
    • Devices
      • Device profile
        • Dashboard
        • Device Info & Metadata
        • Notifications & Events
        • Developer tools
          • General
          • Datastreams
          • Testing
          • Actions Log
      • Actions with devices
      • Segments
      • Filters
      • Notifications Settings
      • Device Sharing
    • Locations
      • Location Profile
      • Assigning Devices to the Locations
    • Organizations
      • Create a Sub-Organization
      • Working with Sub-Organizations
    • Users
      • User Profile
    • Device Templates
      • Working With Templates
      • Info
        • Offline Ignore Period
        • Manufacturer
        • Template ID
        • Categories
        • Hotspot Prefix
      • Datastreams
        • Datastream Settings
          • Name
          • Alias
          • Virtual Pin
          • Color
          • Data Type
          • Min Value
          • Max Value
          • Default Value
          • Save RAW Data
          • Invalidate Value
          • Wait for confirmation from device
          • Sync with latest server value every time device connects to the cloud
          • Expose to Voice Assistants
        • Virtual Pin
        • Location
        • Enumerable
      • Web Dashboard
        • Multiple Dashboard Tabs
      • Metadata
        • Metadata Tutorial
      • Connection Lifecycle
      • Events
        • Custom Events
          • Event Settings
          • How to Send/Log Events
          • Content Events
        • Notifications Settings
          • Custom Sounds and Critical Notifications
      • User Guides
      • Assets
    • Widgets (Console)
      • Switch
      • Slider
      • Number Input
      • Image Button
      • Web Page Image Button
      • LED
      • Label
      • Gauge
      • Chart
      • Map
      • Image Gallery
      • Custom Chart
      • Heatmap Chart
      • Video
      • Bitmask Table
      • Gradient Ramp
      • Terminal
      • Segmented Switch
      • Alarm & Sound Widget
      • Modules
    • Blynk.Air
      • Shipment Details
      • Shipment Management
        • New Shipping
      • Device shipment statuses
      • User-Controlled Shipments
    • Settings
      • Organization Settings
        • General
        • Users
        • Locations (Job Site or Facilities)
        • Tags
      • Roles and Permissions
      • Developers
        • OAuth2
        • Webhooks
        • Create New Webhook
      • Integrations
    • User Profile Menu
    • Limits
  • Blynk.Apps
    • Overview
    • Mobile Dashboard Editor
    • Device Header Constructor
      • Header Design
      • Header Mini Widgets
        • Connection Status Widget
        • Last Reported Widget
        • Tabs Widget
        • Datastream Value Widget
        • Image Widget
        • Battery Level Widget
        • Signal Level Widget
        • Tags Widget
      • Header Buttons
    • Pages
    • Widgets (app)
      • Common Widget Settings
      • List of Datastreams types supported by Widgets
    • Widgets Controllers
      • Button
      • Styled Button
      • Icon Button
      • Image Button
      • Slider
      • Vertical Slider
      • Step Slider
      • Vertical Step Slider
      • Joystick
      • zeRGBa
      • RGB Light Control
      • Step H
      • Step V
      • Slope Control
      • Switch
      • Level Slider
      • Level Slider with Switch
    • Widgets Displays
      • Value Display
      • Labeled Value
      • LED
      • Gauge
      • Radial Gauge
      • Enhanced Gauge
      • LCD
      • Simple Chart
      • SuperChart
      • Terminal
      • Video Stream
      • Level H
      • Level V
      • Image Gallery
      • Gradient Ramp
      • Icon
      • Image Animation
      • Lottie Animation
    • Widgets Interface
      • Tabs
      • Menu
      • Map
      • Text Input
      • Numeric Input
      • Time input
      • Segmented Switch
      • Icon Segmented Switch
      • Text
      • Formatted Text
      • Dynamic Spacer
    • Widgets Other
      • Music Player
      • WebPage Button
      • WebPage Image Button
      • Alias Name
    • Main Menu
      • My Profile
      • Organization
      • Settings
      • Help
      • About
      • Log Out
    • Devices
      • Add New Device
    • Automations
    • Notifications & Events
  • Blynk.Edgent
    • Blynk.Edgent overview
    • Blynk.Inject and Blynk.Air
    • OTA: Firmware Over-The-Air updates
  • Blynk.NCP
    • Blynk.NCP overview
    • Supported Connectivity Modules
    • OTA: Firmware Over-The-Air updates
  • Blynk Library - firmware API
    • Installation
      • Install Blynk Library in Arduino IDE
      • Install Blynk Library for Platformio.org
      • Install ESP8266 core for Arduino IDE
    • Configuration
    • Connection Management
    • Device Online/Offline Status
    • Digital/Analog Pins
    • Virtual Pins
    • Widget Properties
    • State Syncing
    • Timers
    • Time (RTC clock)
    • Timezone / Location
    • Log Event
    • Metadata
    • Debug
    • Reboot
    • Over-The-Air Firmware Updates (OTA)
    • Other
    • Limitations and Recommendations
    • Blynk Protocol
  • BLYNK.CLOUD MQTT API
    • Device MQTT API
      • Authentication
      • Topic Structure
      • Datastreams
      • Widget Properties
      • Events
      • Metadata
      • Timezone/Location
      • OTA
      • Miscelaneous
      • Code Examples
  • BLYNK.CLOUD HTTPS API
    • Device HTTPS API
      • Get Datastream Value
      • Get Multiple Datastream Values
      • Get Historical Data From Device
      • Update Datastream Value
      • Update Multiple Datastreams Simultaneously
      • Upload a Set of Timestamped Data
      • Update Widget/Datastream Property
      • Send/Log An Event
      • Get Device Metadata Value
      • Update Device Metadata Value
      • Is Device Connected
      • Upload a File
      • HTTPS API Troubleshooting
    • Platform API
      • Authentication
      • Ogranization API
        • Get Own Organization Info
        • Get Organization Info
        • Search Organizations
        • Create Organization
        • Get Static Tokens
        • Get Organization Tags
        • Get Organization Automations
      • Devices API
        • Get All Devices
        • Search Devices
        • Get Devices by Owner Email
        • Get Devices in user organization
        • Get Recently Activated Devices
        • Get Device Info
        • Get Connection Status
        • Create Device
        • Edit Device
        • Get Datastream Values
        • Update Datastream Value
        • Update Multiple Datastreams Values
        • Import Datastream Values
        • Update Datastream Property
        • Get Datastream Historical Data
        • Get Device Metadata
        • Update Device Metadata
        • Get Device Tags
        • Get Device Timeline Log
        • Log a Device Event
        • Get Actions Log
        • Erase All Data
        • Remove Device Owner
        • Transfer Device
        • Delete Device
      • Users API
        • Get All Users
        • Search Users
        • Create New User
        • Invite User
        • Get User Info
        • Update User Role
      • Templates API
        • Get All Templates
        • Get Template Info
        • Get Template Metadata
        • Get Template Datastreams
        • Get Template Events
    • Security
  • Downloads
    • Blynk Mobile Apps
    • Blynk Library
  • Troubleshooting
    • General Issues
    • Developer Mode
    • Changes from Blynk 0.1
      • Migrating to the new Blynk - Full Guide
    • Glossary
    • Links
  • Commercial Use
    • Deploying Products With Dynamic AuthTokens
    • Deploying Products With Static Tokens
    • Working With Clients
    • Supported topologies
    • Business Plan (White Label Solution)
      • App Publishing Process And Timeline
      • What's Needed To Publish Your Apps And Go Live
      • Branding Materials
      • Custom Email Address For Transactional Emails
      • Application Settings
        • General
        • Design
        • Mobile Apps
        • Sign Up
  • Add-Ons
    • Add-on list
    • Amazon Alexa
    • Google Assistant
    • Localization
    • Database Access
    • Marketing
Powered by GitBook
On this page
  • Widget Controls
  • Datastream
  • Change Widget Properties
  • Change widget properties via HTTPs API
  • Updates the Datastream Property and all assigned Widgets
  • Sync hardware to the latest datastream value
  • Change the datastream value with the hardware
  • Change the datastream value with the HTTP API
  • Control hardware with datastream value

Was this helpful?

  1. Blynk.Apps
  2. Widgets Displays

Image Animation

PreviousIconNextLottie Animation

Last updated 7 months ago

Was this helpful?

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

Widget Controls

The widget has the following controls:

  1. 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.

  2. 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.

  3. Play in Loop: Repeats playing the animation from the start.

Datastream

Change Widget Properties

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

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

Change widget properties via HTTPs API

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

Query Parameters

Name
Type
Description

token*

string

pin*

string

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

Query Parameters

Name
Type
Description

token*

string

pin*

string

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("");
 }
}

Select or create a datastream of 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 url, autoplay, and loop of the widget from your hardware, or via an . 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 .

Get from the bottom right of your Blynk console. .

Device from Device info

The datastream (should start with "v")

Get from the bottom right of your Blynk console. .

Device from Device info

The datastream (should start with "v")

data type
HTTP API
URL encoded
More information
auth token
virtual pin
More information
auth token
virtual pin
Lottie animation