How to make font bigger and change the color of label

Dashboard
1

Bonjour, je débute avec Node red, et j'espère que vous allez m'aider sur des problèmes "simples" que je rencontre ,

1, sur ma première page j'ai en entrée "inject" avec le message bonjour, et je l'affiche dans un module "text" ou "template", je compile et cela fonctionne, je trouve bien "bonjour" sur mon dashbord.

ma question est comment faire si je jeux une police plus grosse sur le dashbord ? et éventuellement changer la couleur d'affichage.
merci
( je pense avoir d'autres questions plus tard, mais commençons doucement )

2

...and in English;

Hello, I am new to Node red, and I hope you will help me with some "simple" problems I am having,

On my first page I have "inject" input with the message hello, and I display it in a "text" or "template" module, I compile and it works, I find "hello" on my dashboard .

my question is what if I play a bigger font on the dashboard? and possibly change the display color.
thank you
(I think I have more questions later, but let's start slowly)

3

merci Paul

4

If you look at the readme for the ui_text node, it say's

The Value Format field can be used to change the displayed format and can contain valid HTML and Angular filters.

So you can add html or Angular Filters code to change the way it is displayed.

<h1>{{msg.payload}}</h1>

...or use html or Angular in a ui_template node, which maybe an better option, as the editor is easier to use.

5

thank you, but I do not know the language (I am learning) can you give me an example of a text in big bold red for example. thank you

6

Try this;

<font color="red" size=120%>{{msg.payload}}</font>

[{"id":"2370981c.b4d568","type":"ui_template","z":"c9c4eeb8.bad8e","group":"61d2dced.3db8f4","name":"","order":163,"width":"6","height":"2","format":"<font color=\"red\" size=120%>{{msg.payload}}</font>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":450,"y":1800,"wires":[[]]},{"id":"ca59633e.1993c","type":"inject","z":"c9c4eeb8.bad8e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"This is big red!","payloadType":"str","x":270,"y":1800,"wires":[["2370981c.b4d568"]]},{"id":"61d2dced.3db8f4","type":"ui_group","name":"flowtest","tab":"3c94630c.13381c","order":1,"disp":true,"width":16,"collapse":false},{"id":"3c94630c.13381c","type":"ui_tab","name":"Test","icon":"dashboard","order":9}]

I am no expert on html, but there are lots of information & examples by using google, or searching this forum.

7

Thank you very much, these are simple things (I think) but I have been looking for the solution for quite a while. not easy to find tutorials on this type of basic instruction. My goal is to create a small weather station interface.
I will come back to you, for my next difficulty

8

Good luck with your project, and if you do have any questions, please create fresh topics, and I'm sure that the node-RED community will try and help where they can.

1 Like
9

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