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

Need Help With My Project
1

Hey folks, Does Blynk Support actual .GIF images in the Image Gallery?
I have searched and read up on using the rotation function, Cant seem to get it to run. I have also used 2 separate images, delayed back and forth, kind of glitchy .
So to recap, GIF’s?

Thanks,
Mike

2

yes GIF files work in the image gallery.

3

Thanks Dale, Cant seem to get one to play. GIF will play in web browser within Blynk with no issues, but does not play in Image gallery (displays only a still image) Still investigating.

https://gdurl.com/fN-f/

Thanks for the confirmation.

Mike

4

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?”

5

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

6

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

Thanks,

7

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.

8

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

9

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

10

Your angle is fixed to 90 ° !

You have to use an increment

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

Ahh, Ok, Let me give it a shot.

Thanks for your time,
Mike

1 Like
12

Hey mike,
I didn’t recognize you ! :smile:

oops , your are not @mikekgr

1 Like
13

Nah, its just me.

1 Like
14

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

15

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

16

Is there more than one picture ?

17

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

Mike

18

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

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.

19

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

20

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