Does Blynk Support .Gif images (Do animated gifs work in Image Gallery)

[DaleSchultz]

hmm, as you said ‘play’ it made me realise you may be trying animated GIFs, mine are static…

Is your question: “Do animated gifs animate in picture gallery?”

[M_Angeles]

Hey Dale, Yes. I don’t believe Blynk supports .GIF images. Not much found using the search. I’m also using 2 static images with a delay, and im unable to get the Blynk.setProperty “Rotation” to work either. Maybe someone else will chime in.
Thanks for your reply,
Mike

[M_Angeles]

Morning folks, is anyone able to add anything? I’m revisiting my project.

Thanks,

[PeteKnight]

I’m not aware of any changes to the Image Gallery widget singe your last post.
As far as I know, GIFs are supported but not Animated GIFs.

If you’re not able to achieve what you want with regular GIFs then maybe try JPEGs.

Pete.

[M_Angeles]

Thanks Pete, wasn’t aware there was such a thing as Non-animated GIF’s. Just read up on them. I’ve been using JPG to get it to work buts it’s “choppy”. for some reason I’m not able to use the Set Property to rotate 180 degrees.

Thanks again for the quick reply,

Mike

[M_Angeles]

Morning folks, Any thoughts on why I’m not able to Rotate using the setProperty command?

Blynk.setProperty(V3, "label",    "  Exhaust  On");
Blynk.virtualWrite(V3, 1);

Blynk.setProperty(V3, "rotation", 90);
delay (375);
  }
  else
  {
Blynk.setProperty(V3, "label", "Exhaust  Off");
Blynk.virtualWrite(V3, 3);

Thanks for your time,
Mike

[Blynk_Coeur]

Your angle is fixed to 90 ° !

You have to use an increment

for (int angle= 0; angle< 90) {
  angle++;
  Blynk.setProperty(V3, "rotation", angle);
}

[M_Angeles]

Ahh, Ok, Let me give it a shot.

Thanks for your time,
Mike

[Blynk_Coeur]

Hey mike,
I didn’t recognize you !

oops , your are not @mikekgr

[M_Angeles]

Nah, its just me.

[Blynk_Coeur]

Don’t forget, if you need delay (375), better use timer instead of for next loop, else you will have blynk disconnection !

[M_Angeles]

Ok, What am i doing wrong here? Compiles fine but wont rotate. only shows 1st. item in gallery. Any thoughts?

void Exhaust_Relay() // Monitor Exhaust
{
val = digitalRead(pin1);
if (val == LOW) {
Blynk.virtualWrite(V3, 1);
Blynk.setProperty(V3, “label”, “Exhaust On”);
for (int angle = 0; angle < 90; angle++);
{
Blynk.setProperty(V3, “rotation”, angle);
delay (500);
}
}
else
{
Blynk.setProperty(V3, “label”, “Exhaust Off”);
Blynk.virtualWrite(V3, 3);
}
}

Thanks for any help,
Mike

[Blynk_Coeur]

@M_Angeles

only shows 1st. item in gallery.

Is there more than one picture ?

[M_Angeles]

Yes, 3 in fact, only 1 and 3 referenced in sketch

Mike

[PeteKnight]

It’s difficult to tell exactly what you’re doing when you post snippets of code like this, but

@M_Angeles

“Exhaust On”

doesn’t seem like either a fully qualified URL, or an Image index as described in the in-app documentation…

Image

Image widget allows you to display any image within your project. You need to provide http/s url to it.
Url should be valid endpoint to the binary data of the image. Url shortener will not work.

Right now image widget supports 2 display options:

Fit: Image will be scaled to fit height or width of the widget size;
Fill: Image will be scaled to fill widget area. Cropping may occur;
You can make image widget interactive by providing multiple links to different images
with different states and change displayed image index from your hardware or via Eventor widget.

For example, select the first icon from the list :

Blynk.virtualWrite(V1, 1); //image indexing starts from 1

You can also change opacity, scale or rotation of the displayed the image :

Blynk.setProperty(V1, "opacity", 50); // 0-100%
Blynk.setProperty(V1, "scale", 30); // 0-100%
Blynk.setProperty(V1, "rotation", 10); //0-360 degrees

also, you can fully replace the list of images from the hardware:

Blynk.setProperty(V1, "urls", "https://image1.jpg", "https://image2.jpg");

or you can change individual image by it index:

Blynk.setProperty(V1, "url", 1, "https://image1.jpg");

Pete.

[M_Angeles]

Pete thanks for the tutorial, but I’ve read it many times. I DO have images uploaded to the Image gallery and was attempting to rotate image using
"Blynk.setProperty(V1, “rotation)”, But documentaion on its use is lacking. “Exhaust on” was clearly a label (Blynk.setProperty(V3, “label”, “Exhaust On”);
Blynk.virtualWrite(V3, 1); references image index 1.
Thanks,
Mike

[Blynk_Coeur]

What I asked is, is there more than one image in V1?
If so, it can’t work with the rotate property.
@PeteKnight, tell me if I’m wrong.

[Gunner]

It has been awhile since I messed with Blynk images so I just slapped this test together… and the setproperty() commands work as implied.

Note, I typically use PNG images, and obviously only one image at a time per Image Widget.

Also, the Animated GIF screen capture is messing with the otherwise smooth image motions.

#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>

BlynkTimer timer;

char auth[] = "**********";  // Local Server
char ssid[] = "**********";
char pass[] = "**********";
char server[] = "10.10.3.13";  // IP for Local Blynk Server
int port = 8080; // Port for Local Blynk Server

int rot = 1;
int skl = 100;
int ArrowAngle;


void setup() {
  WiFi.begin(ssid, pass);
  Blynk.config(auth, server, port);
  Blynk.connect();

/*
In App's Image Gallery Widget, there must either already be a valid image URL already loaded,
or at least had the ADD IMAGE URL "button" pressed once (even if no URL added) before
exiting the Widget's edit mode, or else NO image will be loaded.
*/  
  Blynk.setProperty(V1, "urls", "http://10.10.3.13:8000/Yellow_Fan.png");
  Blynk.setProperty(V3, "urls", "http://10.10.3.13:8000/Arrow.png");

  // Timed Lambda Function - UpTime counter
  timer.setInterval(1000L, []() {  // Run every second
    Blynk.virtualWrite(V0, millis() / 1000);  // Display the UpTime in Seconds
  });  // END Timer Function

  // Timed Lambda Function - Fan Rotation and size
  timer.setInterval(100L, []() {
    Blynk.setProperty(V1, "rotation", rot); //0-360 degrees
    rot = rot + 30;
    if (rot > 360) {
      rot = 0;
    }

    Blynk.setProperty(V1, "scale", skl); //0-100 percent
    skl = skl - 10;
    if (skl < 10) {
      skl = 100;
    }
  });  // END Timer Function
}



void loop() {
  Blynk.run();
  timer.run();
}



BLYNK_WRITE(V2) {  // Rotate the arrow image
  if (param.asInt() == 1) {
    for (ArrowAngle = 0; ArrowAngle <= 90; ArrowAngle += 15) {
      Blynk.setProperty(V3, "rotation", ArrowAngle); // 90 degrees
    }
  } else {
    for (ArrowAngle = 90; ArrowAngle >= 0; ArrowAngle -= 15) {
      Blynk.setProperty(V3, "rotation", ArrowAngle); // 0 degrees
    }
  }
}

[M_Angeles]

GTT, Thank you that helps immensely! I’ll give it a shot and I have no doubt that the commands work as implied. I was just stuck on how to apply.

I appreciate your time, Thanks again
Mike

[Gunner]

I have a little bit more about Image Gallery usage over here…

Tachometer using Image Widget

OK, while assisting another topic, I got hooked again on a Project Idea In the past I have played with a modified Nextion project of someone else’s, containing 209 images of a tachometer with the needle at differing positions from start to finish. [0] [104] [208] NOTE: I did NOT make these images, but I did have to resize/number each one to fit my little 2.4" nextion… and that was tedious. Anyhow, that was Nextion… but this is Blynk!! So the other topic was the question of image li…