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

General
1

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. :frowning:
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
Template2

2

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"

1 Like
3

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. :wink: Another format and program to learn.

Shall search now.

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

4

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)

1 Like
5

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

6

Um, now the wheel has fallen off another part.... :cry:

This is the working.....

[{"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:

[{"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}]
7

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

Here are a whole bunch of examples...

1 Like
8

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.

9

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

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?

10

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.

11

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

(Could you explain the better way?)

12

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)
Adding vector graphics to the web - Learn web development | MDN (mozilla.org)
Using SVG | CSS-Tricks - CSS-Tricks

1 Like
13

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.

14

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