[SOLVED] Add image or my icon to widget blynk

Solved
1

Hello, Are there a way to add image / own icon to widget blynk?

I would like to add icon for my created icon
Example: water drop icon
Fan icon
Gauge icon, humidity icon ph icon etc

2

Depending on your phone’s keyboard app, most have some form of emoji type graphics. You can use those, combined with or instead of, text to apply on Widget’s labels.

2017-05-23 01.06.57.png1440Ă—277 37 KB

2017-05-23 01.10.49.png1440Ă—1606 189 KB

2017-05-23 01.11.04.png416Ă—528 16 KB

3

Thank a lot
and

How we created my icon from SVG file?

Thank you in advance.

4

I don’t know, never tried… that is something you will need to Google around for.

5

Never thought about it. Thanks a lot.

7

Is there a way to set these emojis from the device?

8

No. Also, they are specific to the phone (or KB app I suppose)… and when viewed by another phone or emulator that doesn’t have the exact same ones, either a placeholder or different looking emoji will be displayed.

9

Uh, well, I came back to answer my own question, and actually you can do this. Reference this web site for the unicode strings, and apply them like this:

String msg = "\xF0\x9F\x95\x92 <---that is my clock";
Blynk.virtualWrite(V127, msg); //send it to a value widget
3 Likes
10

Ohhh, nice job! @BlynkSky

Well that explains why they look different on my older Android devices.

I rarely ever mess around with unicodes, so I stand corrected… and now empowered to make use of these Blynk controlled emoticons\emojis… Thanks for the update :+1:

11

Must check this out as I stopped using them in my projects as I thought different phones couldn’t handle the unicode. Have you tried with Android and iOS?

12

Well, this makes for some interesting options… such as “animated” icons…

20170825_010943.gif320Ă—503 396 KB 

void clockDisplay()  // requires RTC setup and a timer call every second
{
  sprintf(currentTime, "%02d:%02d:%02d", hour(), minute(), second());

  // Send 1st hourglass icon and time to Display Widget
  Blynk.virtualWrite(V12, "\xE2\x8F\xB3", currentTime);

  // Send 2nd hourglass icon and time to Display Widget 1/2 second later  
  timer.setTimeout(500L, []() {
    Blynk.virtualWrite(V12, "\xE2\x8C\x9B", currentTime);
  });
}
6 Likes
13

Nice, @Gunner. That is effectively what I did, but I used alternating hearts (for a heartbeat), and a slower cycle. Note that there are differences in appearance, even among android devices. The heartbeat idea I had was tough, because there are few hearts exactly the same size. This creates shifting of the text if the emoji appears first, and also resizing if the width of the value field is constricting. I found it easiest to alternate a red heart with a blank, and append it to the end of the “up-time” display, instead of the beginning. Then make sure the value field is wide enough to handle any realistic up-time display. Also, when larger emoji’s reach full height (happens when text is not constrained by the box) their tops get cut off by the field label, even if the label is " ".

@Costas, I have not tried on IOS, and my wife is out of town with our only IOS devices.

It would be good if someone that has both iOS and Android devices in multiple versions could post screenshots and codes, but that is a lot of work to ask of anyone. Further, it would be good to have a header of constants/#defines containing these values. :stuck_out_tongue: