# Asking for a favour from someone as I can't get the program to work

**URL:** <https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162>\
**Category:** General\
**Created:** [4 May 2022 09:03 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162 "2022-05-04T09:03:20Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 09:03 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/1 "2022-05-04T09:03:20Z")

</div>

I am running Ubuntu and have "kolourpaint" as my paint program.

I'm trying to design a couple of .... _icons_ for the template node.  
But as hard as I try, I can't get the TEXT to be solid.  
The program is _dithering_ (?) the text and it is pathetic.

I've downloaded the manual and it is not helpful.

And, I now realise I can't import one of them to make all 3 on/in the same picture (for now)  
So there is/are two attachments.

I'm wanting words put on the _template_.

The green/back I want the word `ON`  
The red/black I want `OFF`  
and the yellow/black I want `ENABLE` (Ideally `Press to ENABLE` would be idea, but I won't push the favour for which I am asking.)

And.... (alas) the font colour is a bit ... tricky. ☹  
But a good contrast would be ideal.  
(Maybe outlined?)  
Oh, font: `times new roman`.  
I find that is the best/easiest font to read.

Someone?  
Sorry.. But I don't get why I can't do it with kolourpaint.

![stripes2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4f62ecf539a67ef7493eaf37e2c4b5fcace170aa.png)  
 ![Template2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d4d4510ed58ecb28f3fdc6867753c87d8f141541.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 May 2022 09:12 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/2 "2022-05-04T09:12:28Z")

</div>

the problem with using a raster image is unless it is displayed with EXACT dimensions, you will get visual glitches and artefacts (due to pixel ~ monitor alignment, resizing algorithms, etc)

You should probably do this in SVG. There are free editors for both browser and computer.  
Most popular being InkScape. Search also "online svg editor"

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 09:18 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/3 "2022-05-04T09:18:58Z")

</div>

I made them 1 x 1 scale of what I want.

48 pixels is the default NR dashboard grid size isn't it?

SVG... Oh great. 😉 Another format and program to learn.

Shall search now.

(I miss `delux paint`.... That was a great program)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 May 2022 09:25 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/4 "2022-05-04T09:25:29Z")

</div>

The benefit of SVG is any scaling or resizing is unaffected.

Another benefit is often the SVG will be smaller

Last benefit is you don't have to host the SVG (it can be embedded in the HTML)

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/7605933d03eff12710a57ceec8b9f8cd17d62cdf.jpeg "Raster Bitmap vs Vector Graphics") ](https://www.youtube.com/watch?v=U-X_rosRORg)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 09:26 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/5 "2022-05-04T09:26:35Z")

</div>

I'm stumbling my way through _Inkscape_ now....

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 09:56 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/6 "2022-05-04T09:56:47Z")

</div>

Um, now the wheel has fallen off another part.... 😢

This is the working.....

```auto
[{"id":"1709a3e7928406fe","type":"inject","z":"0918ee609bf69fc7","name":"","props":[{"p":"payload","v":"","vt":"date"},{"p":"topic","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":2760,"y":330,"wires":[["43e71bea3d7f94d6"]]},{"id":"43e71bea3d7f94d6","type":"file in","z":"0918ee609bf69fc7","name":"Stripes","filename":"/home/me/.node-red/public/Pictures/stripes2.png","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":2910,"y":330,"wires":[["960c687fe64763cb"]]},{"id":"960c687fe64763cb","type":"base64","z":"0918ee609bf69fc7","name":"","action":"str","property":"payload","x":3070,"y":330,"wires":[["19fd76a4842c7568"]]},{"id":"19fd76a4842c7568","type":"ui_template","z":"0918ee609bf69fc7","group":"d9a63921.b84ff","name":"","order":10,"width":"2","height":"1","format":"\n\n<img width=\"100%\" height=\"100%\" alt=\"Image not found\" src=\"data:image/png;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":3270,"y":210,"wires":[[]]},{"id":"d9a63921.b84ff","type":"ui_group","name":"Group 3","tab":"273de47d.2d2bac","order":8,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","name":"TEST","icon":"dashboard","order":22,"disabled":false,"hidden":false}]

```

Using the `png` file.

I save a `svg` file (same path) and change the file name, but it doesn't work.  
Yes, I get that there is something in the `template` node needing to be changd.  
I tried changing the `png` to `svg`. Doesn't work.

Here is the other version:

```auto
[{"id":"380ae4bb387b5df7","type":"base64","z":"0918ee609bf69fc7","name":"","action":"str","property":"payload","x":3060,"y":200,"wires":[["9cbd16dc65cadcb8"]]},{"id":"c553bb3272959d44","type":"file in","z":"0918ee609bf69fc7","name":"Enable","filename":"/home/me/.node-red/public/Pictures/ENABLE.svg","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":2910,"y":200,"wires":[["380ae4bb387b5df7"]]},{"id":"9cbd16dc65cadcb8","type":"ui_template","z":"0918ee609bf69fc7","group":"d9a63921.b84ff","name":"","order":10,"width":"2","height":"1","format":"\n\n<img width=\"100%\" height=\"100%\" alt=\"Image not found\" src=\"data:image/svg;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":3270,"y":200,"wires":[[]]},{"id":"181fb98b65a2d183","type":"inject","z":"0918ee609bf69fc7","name":"Inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"/Pictures/wall.jpg","payloadType":"str","x":2770,"y":200,"wires":[["c553bb3272959d44"]]},{"id":"d9a63921.b84ff","type":"ui_group","name":"Group 3","tab":"273de47d.2d2bac","order":8,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","name":"TEST","icon":"dashboard","order":22,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 May 2022 10:53 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/7 "2022-05-04T10:53:19Z")

</div>

Your img tag is missing `xml` part & you should not be base64 encoding.

Here are a whole bunch of examples...

> **[09: SVG with Data URIs | CSS-Tricks](https://css-tricks.com/lodge/svg/09-svg-data-uris/)**
>
> We've covered "inline SVG" - which is dropping the SVG syntax right into HTML. You can use that same inline SVG in other places as well, like in an or

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 10:58 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/8 "2022-05-04T10:58:40Z")

</div>

Thanks Steve.

But when I look at that link I see lines like:  
`<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>`

I get the idea, but can't completely understand it ~~completely~~.

# Got it!

Ok.... It's working, but there's a problem that the size is wrong.  
Despite the fact the `.svg` was made to the size where I am putting it.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 11:14 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/9 "2022-05-04T11:14:15Z")

</div>

If the `.svg` files are `48` pixels high and the dashboard is set to `48` pixels for size.

![Screenshot from 2022-05-04 21-11-31](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/c/0c1a921d506c793e7ab59f28ca77f19b998e44f9.png)

But when they are shown, they seem to be _cropped_ at the bottom.  
`6 + 4`... `= 10`.  
May explain that it seems cropped.

So is it that I need to make the `.svg` files .... `38` pixels in height rather than `48`?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 May 2022 12:22 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/10 "2022-05-04T12:22:11Z")

</div>

I can't see any reason why you would want to use a data uri with an svg. It is already text and can be included direct into any web page. That has the added advantage that it is easier to get to grips with styling including sizes.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 20:41 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/11 "2022-05-04T20:41:53Z")

</div>

I am doing this as I don't know any better.

(Could you explain the better way?)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 May 2022 20:57 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/12 "2022-05-04T20:57:07Z")

</div>

Loads of really good resources that can do a better job than I.

[How to Use SVG Images in CSS and HTML – A Tutorial for Beginners (freecodecamp.org)](https://www.freecodecamp.org/news/use-svg-images-in-css-html/)  
[Adding vector graphics to the web - Learn web development | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)  
[Using SVG | CSS-Tricks - CSS-Tricks](https://css-tricks.com/using-svg/)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [4 May 2022 20:59 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/13 "2022-05-04T20:59:44Z")

</div>

Please don't take that last post of mine to mean _I am too lazy to look_.  
It is more wording the questions and getting good results and therefore: good links.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [3 July 2022 21:00 UTC](https://discourse.nodered.org/t/asking-for-a-favour-from-someone-as-i-cant-get-the-program-to-work/62162/14 "2022-07-03T21:00:43Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.