Image Gallery

It will be available in 2.27.2 beta soon, like you proposed in urls set property command or refreshing image in its settings.

3 Likes

I’m sorry but that includes IOS devices or only Android? Thanks

only Android

That’s odd, this post is for iOS also in android it updates automatically when the url change, at least for my 2 android devices that I’ve checked.
I suppose that if there is a lib update instead of app update it might be beneficial for the iOS devices too. Idk if that’s possible though.

the caching is taking place on the server. So when the caching is improved it works for all clients.

1 Like

Hi all,

We just uploaded new beta release with 2.27.2 version with a fix to this issue:

  • “set property urls” command should refresh images memory cache
  • editing/refreshing image in image widget’s settings will refresh its memory cache too
3 Likes

Good job Alexander !!

Hey BlynkAndroidDev, I’m still running into this issue in the current beta version… Clicking refresh or editing the url in the image gallery widget still won’t refresh the image cache. I haven’t tried it by setting the properties from hardware yet but I’d worry it’s not working there either.

Using Android version 2.27.10

(thanks for all your work! Absolutely loving the app!)

Hello. I tried to update an image with set_property in the Image Gallery. But I realized, that they are cached! (( And I found this article. Have you done this update? Or how can I test it with beta? Thanks.

1 Like

Hi, how are you updating properties? Image widget should invalidate images via set property url for a specific url, or set property urls for all image’s list

Hello,
also having an issue with “any” image showing up in the image galley after the image capture.
the url shows up in the serial monitor, but not in the Blynk App.

I run this code on a button tap:

void takePhoto()
{
digitalWrite(LED, HIGH);
  delay(200);
  uint32_t randomNum = random(50000);
  Serial.print("Captured image data:" );
  Serial.println("http://"+local_IP+"/capture?_cb="+ (String)randomNum);
  Blynk.setProperty(V1, "urls", "http://"+local_IP+"/capture?_cb="+(String)randomNum);
  digitalWrite(LED, LOW);
  delay(1000);
}

@William_Warren please edit your post, using the pencil icon at the bottom, and add triple backticks at the beginning and end of your code so that it displays correctly.
Triple backticks look like this:
```

Pete.

1 Like

I think you’d be better doing something like this:

  uint32_t randomNum = random(50000);
  String image_url = "http://"+local_IP+"/capture?_cb="+ (String)randomNum;
  Serial.print("Captured image data:" );
  Serial.println(image_url );
  Blynk.setProperty(V1, "urls",image_url);

Also, when you copy the url from your serial monitor and paste it into a browser, does it display the image?
If so, then does that same url display the image when you past it into the browser on your phone?

Pete.

The image does not show in the Browser.
I tried my original code, and then the code you suggested. Neither one shows image in app or browser.
this is the url:
http://192.168.0.111/capture?_cb=19774

And Here is my entire code block:



#include "esp_camera.h"
#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>

// Select camera model
#define CAMERA_MODEL_AI_THINKER // Has PSRAM

#include "camera_pins.h"

#define PHOTO 14
#define LED 4

char auth[] = "ypyXXitKv6dL7mTJ5D0_yP_FJQb_QM5X";

const char* ssid = "network";
const char* password = "password";

String local_IP;
int count = 0;
void startCameraServer();

void takePhoto()
{
  digitalWrite(LED, HIGH);
  delay(200);
  uint32_t randomNum = random(50000);
  String image_url = "http://"+local_IP+"/capture?_cb="+ (String)randomNum;
  Serial.print("Captured image data:" );
  Serial.println(image_url );
  Blynk.setProperty(V1, "urls",image_url);
  digitalWrite(LED, LOW);
  delay(1000);
}

void setup() {
  Serial.begin(115200);
  pinMode(LED,OUTPUT);
  Serial.setDebugOutput(true);
  Serial.println();
  
  camera_config_t config;
  config.ledc_channel = LEDC_CHANNEL_0;
  config.ledc_timer = LEDC_TIMER_0;
  config.pin_d0 = Y2_GPIO_NUM;
  config.pin_d1 = Y3_GPIO_NUM;
  config.pin_d2 = Y4_GPIO_NUM;
  config.pin_d3 = Y5_GPIO_NUM;
  config.pin_d4 = Y6_GPIO_NUM;
  config.pin_d5 = Y7_GPIO_NUM;
  config.pin_d6 = Y8_GPIO_NUM;
  config.pin_d7 = Y9_GPIO_NUM;
  config.pin_xclk = XCLK_GPIO_NUM;
  config.pin_pclk = PCLK_GPIO_NUM;
  config.pin_vsync = VSYNC_GPIO_NUM;
  config.pin_href = HREF_GPIO_NUM;
  config.pin_sscb_sda = SIOD_GPIO_NUM;
  config.pin_sscb_scl = SIOC_GPIO_NUM;
  config.pin_pwdn = PWDN_GPIO_NUM;
  config.pin_reset = RESET_GPIO_NUM;
  config.xclk_freq_hz = 20000000;
  config.pixel_format = PIXFORMAT_JPEG;
  

  if(psramFound()){
    config.frame_size = FRAMESIZE_UXGA;
    config.jpeg_quality = 10;
    config.fb_count = 2;
  } else {
    config.frame_size = FRAMESIZE_SVGA;
    config.jpeg_quality = 12;
    config.fb_count = 1;
  }

  // camera init
  esp_err_t err = esp_camera_init(&config);
  if (err != ESP_OK) {
    Serial.printf("Camera init failed with error 0x%x", err);
    return;
  }

  sensor_t * s = esp_camera_sensor_get();
  // initial sensors are flipped vertically and colors are a bit saturated
  if (s->id.PID == OV3660_PID) {
    s->set_vflip(s, 1); // flip it back
    s->set_brightness(s, 1); // up the brightness just a bit
    s->set_saturation(s, -2); // lower the saturation
  }
  // drop down frame size for higher initial frame rate
  s->set_framesize(s, FRAMESIZE_QVGA);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");

  startCameraServer();

  Serial.print("Camera Ready! Use 'http://");
  Serial.print(WiFi.localIP());
  local_IP = WiFi.localIP().toString();
  Serial.println("' to connect");
  Blynk.begin(auth, ssid, password);
}

void loop() {
  // put your main code here, to run repeatedly:
  Blynk.run();
  if(digitalRead(PHOTO) == HIGH){
    takePhoto();
    }
  
}```

I suspected as much.

Your takePhoto() function seems to be generating a random number between 0 and 50,000 and appending that to your base url and sending this to the serial monitor and Blynk.
But, I see no code to actually capture an image from the camera or save it with this same url

How is the capture/save process actually initiated, and how is the captured image named in your code?

Pete.

I tap a button in the app.
The camera flashes each time i press the button.

That’s a very messy way to do it. You’d be much better using a virtual pin in the app and using the BLYNK_WRITE(vPin) callback to take the photo.

But, which lines of code do you think are responsible for taking the photo and saving it with your chosen filename?

Pete.

takePhoto?

Pete.

Trying to work on saving now.