The extra spaces are valid, I just find it clearer to not have extra spaces so it is clear what associates with what. It was the missing </font> at the end.
1 Like
Yeah, ok.
As I wrote - honestly - I typed that reply without seeing your correct answer first.
Fair enough I missed closing the <font> which was still open.
Trying to fix all those mistakes is going to take a long - LONG - time.
I shall en-queue it to be done though so I get the correct way in my flows.
Save the html to a file and load it into a decent editor like VScode. Then you can get the editor to highlight all of the issues.
Thanks.
I have one of the 3 listed installed.
I guess I will have to study how to use it.
So, what I understand is I copy the JSON file form the other machine here, edit it with (basically) search/replace, save it, and then put it back on the remote machine.
Yeah?
Sorry for dumb question, but I want to be sure.
No, that wont help you. You need to be editing the html/javascript that is going into your Dashboard.
For that, you will have to open the Dashboard Template if that is what you are using and copy the code from there which is likely to be a hybrid of html, javascript and Angular so you probably want to install an Angular helper extension into VSCode.
Unfortunately, one of the restrictions that comes with using Dashboard is the inability to use your browser's developer tools for certain tasks. If you look at the web page sources for example, you will see that it is an empty page since the actual content is delivered over a websocket. Normally, you would be able to use that view to spot html errors.
Was that meaning the program or the file I was going to copy?
The file. Trying to edit the json file will not help.
Thanks.
(Yeah, another dumb question - forgive me)
As I see it, I have written the code and put this invalid HTML code in nodes.
My take was I can search the flows/tabs and find the bad code and replace it with the correct code.
The flows are ..... saved as the (I don't know the name) .JSON file.
So, looking in the .node-red directory, I see this:
pi@TimePi:~/.node-red $ lf
lib/ flows_TimePi_cred.json package.json
node_modules/ flows_TimePi.json package-lock.json
public/ npm_modules.txt settings.js
pi@TimePi:~/.node-red $
I shall try to get around to doing that. Alas there is a queue in front of this.
And yeah, you know the story with the WiFi.
Alas, there are bigger ones happening as well.
Fun Fun Fun.
All part of learning I guess.
Editing the JSON file is complex and error prone. Also, one mistake will corrupt the flow.
Never a good idea to edit the flow file directly, let Node-RED do that as it has loads of error checks built in to keep the file valid.
You can edit the code from within the Node-RED admin UI (if you are using the Dashboard Template node for example) - my suggestion was to help you if you have a lot of code to go through as you implied. The ACE editor in the admin UI does have some error checking built in so it does try to help but it can't reach the heights of a dedicated code editor.
And I appreciate it. I am just not familiar with doing that, thus my dumb questions.
I may have to resign myself to going through the flows and use the search for for the bad code and then go in and edit the nodes myself.
Again: Thanks.
No worries. When doing HTML just remember that it is XML like and every opening tag should have a closing tag to match. In addition, remember not to cross the streams (little ghostbusters reference there!) - don't overlap opening and closing tags:
Wrong:
<font ...> <div> .... </font> </div>
Right
<div> <font ...> .... </font> </div>
Better still is not to use the old <font> tag at all. There is no really reason to use it anymore since CSS does everything it could do and far more and does it better.
<div class="my-font-class"> ... </div>
or even
<i class="fa fa-book fa-2x" style="color:pink;"></i>
1 Like
It has been pointed out by others, but let me write it explicitly hoping you understand what the exact problem is. HTML is a structure of tags. You know those Russian Matryoshka dolls? Those wooden figures stacked inside each other? You can see HTML the same way. Every tag you open needs to be closed in the end. If you compare it to those wooden dolls if you were to look at them from the top and take off the uppermost half, the one underneath it has to be closed too.
So back to your code. If you open a <font>, and add more tags in between, all those tags in between have to be closed and finally you add your own closing </font>.
I added some more whitespace just for the visualisation below, but look if you can see the differences between your code, and the correct code Nick gave you.
Yours:
<font color="black">
<i class="material-icons md-48">
check_circle_outline
</i>
Nick/Others:
<font color="black">
<i class="material-icons md-48">
check_circle_outline
</i>
</font>
Each tag you open has to be closed, and it has to be closed by using the same tag, but in the closing form (so a backslash in front of it). Meaning that if you open a <font> tag, you have to close it with a </font>. In your posts in between, you mashed your opening <i> inside the opening font tag. That's invalid syntax and doesn't work. It might have had the brackets missing (making it <font color="black" i class="..."> but that doesn't make it suddenly correct). Inside an opening tag you may add attributes (the color=, class=, and so on), but not other tags. To add another tag that's "inside" the font, add it after the opening tag, but before the closing tag.
And as @TotallyInformation's screenshot showed, using an editor like Visual Code will allow you to paste in your HTML code (like what you add in that msg.icon = '...') and let you visually see where attributes are in the wrong place, or closing tags are missing.
I'll copy that message and add it to the list of stuff to study/read.
Afelix,
Yes, and I acknowledged that. I stupidly forgot to close the <font> tag. Believe me I am taking this in.
Alas I just hope the altymers, alzymers, alsymers, (what ever) doesn't negate what I learn.
(only kind of joking about that. It kinda sucks when memory isn't what it used to be.)
Ok, I'm putting my hand up. Why the ></i> at the end? The > is stumping me.
I see the <i opening and there is the </i> at the end.....
Oh!
Ok. So the <i> and </i> aren't ....... inseperable (?) It is:
<i (start) stuff here > (end of the <i.....
That's legal. So is the </i> splitable too?
Just that I thought these were markers. You don't usually split a marker.
Ah!
Ok. So:
I have this:
// msg.icon = '<font color = "black" i class="material-icons md-48">check_circle_outline</i>';
msg.icon = '<i class="material-icons md-48" check_circle_outline> style:"color:black"></i>';
I am trying to take the first line (old/wrong way) to the correct way.
The way I have it, the icon is corrupt. I'm guessing the closing > of the <i is in the wrong place.
Moving it to:
msg.icon = '<i class="material-icons md-48"> check_circle_outline style:"color:black"></i>';
Is better but the icon is still corrupt. Probably something to do with how the MD icons work as compared to the FA ones.
Ok, I have been told. I shall go away and look at the stuff posted. This is more if anyone else is going through the same stuff as me just now.
Scroll up to my earlier explanation that included attributes. The opening tag can contain attributes, written as key=value and if value is a string which it usually is key="string_value". The closing tag on the other hand can not.
At this point, as it appears to keep coming back to the question of what is valid syntax and what not, I would advise you to get a beginner tutorial or manual for HTML and follow the first steps there until you understand what you are doing. Iâm typing this on my phone so I donât have direct links ready, but you can google for âw3schools htmlâ or âcodeacademy htmlâ for some decent starter resources.
The way you are choosing to do this (javascript as opposed fo setting values in the node settings in the editor) requires you to have that (basic) understanding of both JavaScript and HTML.
2 Likes
and a great way to learn some basic HTML and CSS is to use the httpStatic folder setting in Node-RED. By setting that in settings.js to a folder on your PC, you can use that folder to serve up static web pages. Great for following HMTL tutorials without the need to run up a separate server.
On a pi with default Node-RED settings for example, set the static folder to /home/pi/.node-red/public (you will need to create that folder first). Then create an index.html file in that folder and add some simple content that will display:
<h1>Hi There!</h1>
Now navigate to your Pi's web address but don't put anything after the port number in the URL. You should see your index page. index.html is a "magic" file name that is automatically served up by Node-RED (actually by the static page server which is an extension to ExpressJS) and is used if you don't give an explicit name in the URL.
Try creating some other html files so that you understand the relationship between the operating system folder and the URL.
1 Like
Sorry to bother you but.......
On the reply:
I have changed what I would have done to this:
msg = {payload:'<i class="fa fa-bullseye fa-2x" style ="color:lime;"></i>'};
Which to me looks correct.
All I get is a while bullseye on my dashboard.
Not lime.
I'm working on it too, but just at this point am missing something.
Just to put ALL the cards on the table, this is what I have:
(in a function node)
msg = {payload:'<i style="color:red;" class="fa fa-bullseye fa-2x"></i>'};
return msg;
Doesn't work.
Just to be sure I even tried your original one:
msg = {payload:'<i class="fa fa-book fa-2x" style="color:pink;"></i>'};
return msg;
Injected into a text node with {{msg.payload}} in the value format field.
Alas, that also only gives a white book. No colour.
I would guess that the manual style is being trumped by a color setting elsewhere.
This is where you need to get to grips with the rather overawing developer tools. Pressing F12 in your browser should bring them up. Generally the 1st tab shows you the structural layout of the HTML code and the styling - you can select a specific element on screen and see what is influencing the CSS for that element.
As an experiment, you could try changing the code to this:
msg = {payload:'<i class="fa fa-book fa-2x" style="color:#000 !important;"></i>'};
return msg;
Which should give you the icon in black. The !important should raise the priority of the CSS to override everything else. However, because you are looking at a framework that dynamically replaces elements, outcomes are not always as predictable as you would like. Actually, you are looking at 2 dynamic frameworks here: Angular and Font Awesome. So there is a lot of scope for things to go sidewards.
Ok, thanks.
Alas, I wish it was that easy. I'm not having a go at you, but there is something else playing games.
Here's what I did as a result of what you just posted.
(very small flow)
[{"id":"3061b0cf.4397","type":"inject","z":"990b038a.be3e18","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":260,"y":1930,"wires":[["6039cc7f.2c40d4"]]},{"id":"6039cc7f.2c40d4","type":"function","z":"990b038a.be3e18","name":"","func":"//msg = {payload:'<font color = \"lime\"> <i class=\"fa fa-book fa-2x\"></i></font>'};\n\nmsg = {payload:'<i class=\"fa fa-book fa-2x\" style=\"color:#000 !important;\"></i>'}\n\n\nreturn msg;","outputs":1,"noerr":0,"x":450,"y":1930,"wires":[["c6e2f9dc.074c6"]]},{"id":"c6e2f9dc.074c6","type":"ui_text","z":"990b038a.be3e18","group":"adbf5528.d3bcd8","order":0,"width":0,"height":0,"name":"","label":"Working","format":"{{msg.payload}}","layout":"row-spread","x":600,"y":1930,"wires":[]},{"id":"adbf5528.d3bcd8","type":"ui_group","name":"Group 5","tab":"ce4bcacd.5cc46","order":5,"disp":true,"width":6},{"id":"ce4bcacd.5cc46","type":"ui_tab","z":"","name":"VTEMP","icon":"dashboard","order":32,"disabled":false,"hidden":false}]
Now, the f12 trick you mentioned.
Here's the kicker (rub?)
I had tried that and it is not good.
Here's a screen shot/s:
I loaded Chrome and tried it. Same. 
These are a jumble of words to me, but I can see the "patterns".
"Not working". You can see the name in the debug window.
(Though I didn't see it at first, when I did the second one, I back noted the colour)
You can see the RGB value on the right side of the screen.
There is also no colour name on the left. (just under ">Not working<"
See in the second picture there is the color lime - pointed to by arrow.
And it is on the right side of the screen. (another arrow)
I'm not blaming you. I'm just showing how confused I am because though it should work.....
Something, somewhere has other ideas.
Yeah, my problem. I get it.
I'm asking for help. Not the solution. Though that would be nice. I have no problems putting in the time to learn.
Just that despite all the reading/watching (and stuff) about how things work: They don't always do that.
I shall try what you said on another machine to get yet another view of what is happening.
I am not sure that will help or simply further confuse the situation.
Imported the 3 nodes to a whole other machine.
Deployed, injected and looked.
WHITE book.
