Image Gallery

Hello there, I am trying to add to my project an Image Gallery widget and I cant fully understand how it works… I have found some information(peace’s of code) in the information about the widget in the app but they are for Arduino-IDE coded devices and not python…
Any links that can put me on the right direction would be great!
Thanks!

-EDIT:
If there isn’t any examples for python code I would like one example for the esp8266…

1 Like

First, your image needs to be available to the App via whatever network it connects to. You can use whatever URL you need and as long as the Widget sees it, it should work.

For example: On my Local Server I use SimpleHTTPServer and run this in my /etc/rc.local

cd /home/gunner/Blynk/images/
sudo python -m SimpleHTTPServer &

Then I put all my wanted images in the server’s Image folder .

In the App, I point to said file location as such (currently only visible when inside my network)…

Then I can change which image I want shown via code like this…

Arduino/ESP code:

BLYNK_WRITE(V4) {  // Button widget on V4
  if (param.asInt() == 1) {
     Blynk.virtualWrite(V3,1);  // Show image 1 - Widget on V3
  } else {
     Blynk.virtualWrite(V3,2);  // Show image 2 - Widget on V3
  }
}

Python code:

@blynk.VIRTUAL_WRITE(4) # Button Widget on V4
def my_write_handler(value):
    if int(value) == 1:
	blynk.virtual_write(3,1) # Show image 1 - Widget on V3
    else:
	blynk.virtual_write(3,2) # Show image 2 - Widget on V3

As of yet, or at least as far as i have tested, there is no way to send the image URL directly from the script, or to populate the Widgets image collection from the script. So far it must be all manually entered in the App… but then it is still in Beta

1 Like

A post was split to a new topic: Help me to rotating this fan

Hello again,
well what im trying to do is to make the image gallery widget to automatically update the image.
in my Linux http server I have an image /test.png and I update it through a python script(delete the first, add the next picture) and im trying to view every new image in the blynk app. Ive figured out the part that I can view the image in the blynk app, but the problem is that there is some kind of cache in the blynk app and when I update my image file in the Linux folder it wont update in the blynk app.
I tried to remove the image and it still was in the blynk app. Is there a way to flush the cache of the widget or even refresh it?
thanks

I don’t see any need to blank out between images, the act of changing to a new image will automatically replace the old one.

Correct… the image will not automatically refresh just because it is changed at the source.

However, I think the last Beta update (android at least… not sure of iOS) may have released some new Blynk.setproperty() functions of that widget… the ability to load in all the URLs or change a URL from code. So you could either blank out your existing images or change them to something else.

Click on the little [i] info icon in the settings page (upper right corner) of the Image Gallery Widget for more details.

Hmm, I just noticed my images were not showing on one of my projects… it was simply due to my phone automatically switching to my 5G SSID, running on a different network. So perhaps the images are NOT cached in the App?

Well I see so the only way to do it is to change in the code the url with a new one every time the image is updated, ok thanks :slight_smile: happy holidays

Yes, Blynk app has the cache for the image. So if you need to change the image in the real time you have to use setProperty feature. Image cache is crucial for smooth image rendering.

Well I am trying to change the url of the widget everytime the image is updated(every image has a new name based on time and date) and im getting an error

Blynk instance has no attribute ‘setProperty’

Blynklib.py is on the 0.1.3 version, also im using a IOS device(I don’t think though that that’s the case)
the command in the python script is

blynk.setProperty(V15, “url”, 1, image)

(image is the url, the url is correct I tested it)

After some research I found Blynk HTTP RESTful API but I still have a problem… when I run this url

http://ip:port/auth/update/V5?urls=http://ip:port/Desktop/test3.png

nothing happens in the browser (and that’s good) but nothing happens in the app too…
I have tried the link with a button and it worked so the link isn’t the problem. I am pretty sure that the problem is the ?urls=url part. Is there a way to do it like “url”, 1, url instead of “urls”, url ??

that’s the second way that I found a solution for my problem, if you can make any progress for the first way(doing it via py script) it would be much more stable(I think) and helpful for me :slight_smile:
thanks a lot

@Smackflad I am unsure if any of my attempts are benefiting you, but here we go… It does seem that the provision for this new Widget is not fully formed in the API… or we are just missing the proper syntax.

For example, this API setProperty with ‘urls’ WILL work, but it actually erases all prior settings and only populates the initial image position [1] with whatever the final URL is… in my case 4.png

http://10.10.3.13:8080/280f6dd930f24473b2c9bdb139c84b7b/update/V4?urls=http://10.10.3.13:8000/awakish.png,http://10.10.3.13:8000/sleeping.png,http://10.10.3.13:8000/4.png

And again, (for me at least) the image is blank despite the url being correct.

The API setProperty ‘url’ just seems to be in error…

1 Like

Well for me the url doesn’t even change…
I believe that the best way to do It is by the py script.
Also I am 70% sure that because of the fact that the py blynk library is in Alpha there isn’t any setProperty and I am hoping that they will include it in the near future.
Do you have any inside connection with the py development team? Maybe ask them about it? thanks a lot :slight_smile:

@vshymanskyy :wink:

2 Likes

Got it :wink: will add soon.

3 Likes

Thank you :grin:

Hi Dmitry,

This is understandable, but… when we change the image, and click the Refresh button in the app at design time where we define the URL, surely the expectation is to flush the cache and fetch the image again? If, not what is the refresh button for?

I just updated 7 images that I use in an image gallery widget. No URL changes. 2 out of the 7 images have updated themselves. I have clicked the refresh on all 7 and I have tried editing the URL and setting it back again on one that won’t update to no avail.

furthermore, explicitly setting the urls via

Blynk.setProperty(V20, "urls", "https://s3.amazonaws.com/etc/etc");

also does not flush the cached images/

and the cache seems to be global too…

I added a new picture gallery to a new app, added one of the cached URLs, and it shows the old cached copy there also.

I have separately fetched the image via HTTP and verified it has been updated on the server.

I can provide the urls via private message. They are gif files hosted on amazon.

Please provide urls so we can check them. Maybe they are just not available. @BlynkAndroidDev FYI.

Yep, of course, we are caching them, so they wouldn’t be downloaded every time. Ill remove cache for images reload logic in the image widget settings, so it will be possible to refresh them after a change

1 Like