Tachometer using Image Widget

[Gunner]

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.

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 limits in Blynk… Well, I can now say it can hold at least up to 209

However the process of getting there was… yep, tedious…

Firstly some info. There are two ways to get brand new images into the Widget. Manually entering a URL or using this “urls” setProperty() command.

Note how this test includes 60 URLs, but unfortunately, for reasons yet unknown, it will only populate up to 34 indexes in the widget… not enough for my project.

Blynk.setProperty(V0, "urls", "http://10.10.3.13:8000/0.jpg", "http://10.10.3.13:8000/1.jpg", "http://10.10.3.13:8000/2.jpg", "http://10.10.3.13:8000/3.jpg", "http://10.10.3.13:8000/4.jpg", "http://10.10.3.13:8000/5.jpg", "http://10.10.3.13:8000/6.jpg", "http://10.10.3.13:8000/7.jpg", "http://10.10.3.13:8000/8.jpg", "http://10.10.3.13:8000/9.jpg", "http://10.10.3.13:8000/10.jpg", "http://10.10.3.13:8000/11.jpg", "http://10.10.3.13:8000/12.jpg", "http://10.10.3.13:8000/13.jpg", "http://10.10.3.13:8000/14.jpg", "http://10.10.3.13:8000/15.jpg", "http://10.10.3.13:8000/16.jpg", "http://10.10.3.13:8000/17.jpg", "http://10.10.3.13:8000/18.jpg", "http://10.10.3.13:8000/19.jpg", "http://10.10.3.13:8000/20.jpg", "http://10.10.3.13:8000/21.jpg", "http://10.10.3.13:8000/22.jpg", "http://10.10.3.13:8000/23.jpg", "http://10.10.3.13:8000/24.jpg", "http://10.10.3.13:8000/25.jpg", "http://10.10.3.13:8000/26.jpg", "http://10.10.3.13:8000/27.jpg", "http://10.10.3.13:8000/28.jpg", "http://10.10.3.13:8000/29.jpg", "http://10.10.3.13:8000/30.jpg", "http://10.10.3.13:8000/31.jpg", "http://10.10.3.13:8000/32.jpg", "http://10.10.3.13:8000/33.jpg", "http://10.10.3.13:8000/34.jpg", "http://10.10.3.13:8000/35.jpg", "http://10.10.3.13:8000/36.jpg", "http://10.10.3.13:8000/37.jpg", "http://10.10.3.13:8000/38.jpg", "http://10.10.3.13:8000/39.jpg", "http://10.10.3.13:8000/40.jpg", "http://10.10.3.13:8000/41.jpg", "http://10.10.3.13:8000/42.jpg", "http://10.10.3.13:8000/43.jpg", "http://10.10.3.13:8000/44.jpg", "http://10.10.3.13:8000/45.jpg", "http://10.10.3.13:8000/46.jpg", "http://10.10.3.13:8000/47.jpg", "http://10.10.3.13:8000/48.jpg", "http://10.10.3.13:8000/49.jpg", "http://10.10.3.13:8000/50.jpg", "http://10.10.3.13:8000/51.jpg", "http://10.10.3.13:8000/52.jpg", "http://10.10.3.13:8000/53.jpg", "http://10.10.3.13:8000/54.jpg", "http://10.10.3.13:8000/55.jpg", "http://10.10.3.13:8000/56.jpg", "http://10.10.3.13:8000/57.jpg", "http://10.10.3.13:8000/58.jpg", "http://10.10.3.13:8000/59.jpg");

The other “url” property command looks like it should work with a little for() loop (assuming you name your images with consecutive numbers)… but it doesn’t appear to do anything??? Why oh Why!!!

String gaugeImage;

    for (int i = 0; i <= 208; i++) {
      gaugeImage= "http://10.10.3.13:8000/";
      gaugeImage+= i;
      gaugeImage+= ".jpg";
      Blynk.setProperty(V0, "url", i+1, gaugeImage);
      delay (5);
    }

Well after some experimenting it appears that IF the index ALREADY has some form of image in it, then no problem, you can replace it with this method. You may have to exit and reenter the App to see the results.

So… I MANUALLY added in 175 copy/pasted identical URL’s of a valid image… Yes, I did that Perhaps my life has no other purpose? Well, at least I don’t just pass the butter

Then a simple Slider that controls the virtual Write command and Zoom, Zoom…

BLYNK_WRITE(V1) {  // Slider set to 0-209 and Send on Release OFF (you will want a Local Server for this)
  Blynk.virtualWrite(V0, param.asInt());  // Image Widget with 209 loaded images
}

The number below the tach is just a Display Widget set to the same vPin as the slider and set with a colour gradient option.

End result…

Here is the QR code… It should contain the 209 URLs, which will not do you any good, as they are for a path on my own local network (so don’t complain that it is not working for you ).

EDIT - images now avalable in a Zip file via Dropbox here - https://www.dropbox.com/s/i3ob2bqfzqpisxr/Tachometer%20images.zip?dl=0

And this is the method I used to make them available to my Blynk Local Server via a simple file server that is also installed on my RPi…

simplehttpserver

With the for() loop code I provided above, and a little figuring out of your own images, names and URLs, you can replace the already entered indexes with your own proper URLs (HINT - you do NOT need all 209, and if you need more just add some prior to running the code).

This should save you some time manually entering filler indexes. You are welcome

[PeteKnight]

Nice!
All we need now is a sound widget so you can add an increasingly loud and throaty noise to go with each image widget an we can spend our evenings making vroom-vroom sounds.

Pete.

[Gunner]

@PeteKnight

we can spend our evenings making vroom-vroom sounds.

I admit I was doing a bit of that myself… My cat was not impressed

[Blynk_Coeur]

I had an idea, I tried this solution, but urls don’t work

 for (int i = 15; i < 21; i++) {
      gaugeImage = "http://192.168.0.100:8000/hvac/hvac_off_";
      gaugeImage += i;
      gaugeImage += ".png" ;
      Images = Images + '\u0022' + gaugeImage + '\u0022' + ",";
    }

    gaugeImage = "http://192.168.0.100:8000/hvac/hvac_off_21.png"; //the last
    Images = Images + '\u0022' + gaugeImage + '\u0022';

    Serial.println(Images);

    Blynk.setProperty(V16, "urls", Images);

string “Images” contains :
“http://192.168.0.100:8000/hvac/hvac_off_15.png",“http://192.168.0.100:8000/hvac/hvac_off_16.png”,“http://192.168.0.100:8000/hvac/hvac_off_17.png”,“http://192.168.0.100:8000/hvac/hvac_off_18.png”,“http://192.168.0.100:8000/hvac/hvac_off_19.png”,“http://192.168.0.100:8000/hvac/hvac_off_20.png”,"http://192.168.0.100:8000/hvac/hvac_off_21.png”

and widget :

but no image !!!

[Gunner]

I have learned with the image setProperties that…

"urls" will automatically start at index 1 and move forward depending on the number of URL strings in the command… Thus you cannot run multiple commands, else it keeps overwriting the last command.

No idea on the 34 index limit I ran into… except possibly an issue with the length of the command itself?? Perhaps an IDE limit?

"url" (no ‘s’ ) can pick and place a URL in any index spot, but only if it was already populated with something ahead of time. I guess this makes sense in order to prevent an index 12 being created when there is no index 1-11 already present or something like that.

But if it could be modified to allow first time URL entry into an index, then the sky’s the limit (well, and image caching memory I guess).

[Gunner]

@Blynk_Coeur

but no image !!!

I did find that I needed to exit and restart the App to see the results

[Costas]

@Gunner could you make the tacho images publicly available?

[Gunner]

I don’t have a secure, long term, way to do so… But I believe I originally got them from one of the links referenced in the YouTube video I linked to at the beginning of this Topic.

EDIT… I just remembered… nope, they were NOT available that way either. I had to manually extract them, one at a time, from the Nextion .HMI file.

I will see if I can create something via Dropbox.

[Costas]

GitHub?

[Gunner]

Heh… I actually know very little about using GitHub… Learning new stuff is sometimes baby steps for me during moments of high level alertness, in between long bouts of mind numbing grogginess.

[Costas]

The benefit of GitHub over Dropbox is that with the correct url syntax (not the one you would think) then end users can tap into the image directly from a Blynk QR code.

[Gunner]

Oh… Well, short of me learning all that, feel free to incorporate all this into something for your own GitHub page if you want.

I am already overwhelmed thinking about all the different photoshopping and design of imagery I want to experiment with, in order to make some interesting new displays.

Unlikely to be able to properly generate scaled text , but at least properly large display fonts anyone? We can fit four little image widgets across the current App desktop. Enough for 9999

Yes, too lazy to grab actual images of numbers…

[Blynk_Coeur]

@Gunner

I did find that I needed to exit and restart the App to see the results

no more images

[Costas]

@Blynk_Coeur r u Android or 'tother OS?

[Blynk_Coeur]

Android and beta blynk app

[Gunner]

Oh… this actually works on my iPhone 4s… not as smooth, but works This is just a static image, I have no idea how to get a gif from iOS