BLYNK
BLYNK.IO       📲 GETTING STARTED       📗 DOCS       👉 SKETCH BUILDER

Image gallery widget scaling

I have had an issue on the android mobile app since a recent upgrade (running Android V13 on Samsung Galaxy S6 lite and Samsung Galaxy S22 Ultra) with the image scaling in the image gallery widget going crazy. Before I go into the sketch and change the scaling in the code, I wanted to check whether it might be a bug. Have also noticed that the “add new image” button has disappeared. What have I done:

  1. Restarted the app
  2. Cleared the cache
  3. Added a new widget. The scaling issue remains but the “add new image” button returns

The devices are Lolin ESP8266 mini pro V2. I have attached a screenshot. The large red things at the right of the image are trend arrows (but horribly over scaled). These were all displaying fine prior to the recent update.

@BlynkAndroidDev one for you…

Pete,

Hello, @steve1 What version of the app?

Version 1.8.1

Steve

@steve1
Not reproduced by manually. Need more information.

  1. What settings do you have in the widget?
  2. What is your image format? GPJ or PNG? It is one or several images in one widget?
  3. Also what settings are you using in the sketch?

Thanks for the response

  1. Have attached images of one of the widgets
  2. Images are PNG. There are several images in each widget. The images are stored on a raspberry pi.
  3. The sketch routine for the widget shown in the images is below
// Diaplay pressure and temperature trend images (arrows)
void trend() {
  //Pressure trend images
  if (pressureTrendFloat > 0) {
    Blynk.setProperty(V32, "scale", 50);
    Blynk.virtualWrite(V32, 1); // uptrend image
  }
  else if (pressureTrendFloat < 0) {
    Blynk.setProperty(V32, "scale", 50);
    Blynk.virtualWrite(V32, 2); // downtrend image
  }
  else {
    Blynk.setProperty(V32, "scale", 30);
    Blynk.virtualWrite(V32, 3); // steady image
  }

  //Temperature trend images
  if (tempTrendFloat > 0) {
    Blynk.setProperty(V33, "scale", 50);
    Blynk.virtualWrite(V33, 1); // uptrend image
  }
  else if (tempTrendFloat < 0) {
    Blynk.setProperty(V33, "scale", 50);
    Blynk.virtualWrite(V33, 2); // downtrend image
  }
  else {
    Blynk.setProperty(V33, "scale", 30);
    Blynk.virtualWrite(V33, 3); // steady image
  }
  }


I think it would make more sense if you arrayed the actual images that you are trying to display.

Pete.

that’s probably because you had max number of images per your datastream, fe, datastream is 0-2, and you have 3 images

ah - thanks. I now remember the datastream setting for the number of images. An example of the images giving problems are below. I’m not sure how to upload the actual file.
downtrend
steady
uptrend

Are there any screenshots of how it looked before? Which previous version did you use: 1.8.0 or 1.7.x? Or can you attach screenshot of dev mode of this dashboard - so I can understand the bounds of image widgets.

You also circled the moon image - is something wrong with it too?

Hi,
Thanks for coming back. No screenshots unfortunately but I think the problem started 5-6 weeks ago. I have added an image of the page in developer mode which gives a view of what the images looked like in run mode (perhaps slightly smaller). I have also attached an image of another page in developer mode and run mode showing the issue with another image (valve image). The reason I circled the moon image is that its scaling has also changed but the other way (it has scaled down).
I have been playing with the scaling of the images via the scale property in the sketch and I can get them back to where I need them by changing the scale percentage. I just don’t want to change them all and then have to change them all back if an issue is found somewhere. I probably need some direction on this.



1 Like

Thanks, I will look into this issue and update this thread later