Hi, I'm new and tried to search a solution for a simple question:
I like to show an image file (jpg) as a / on a button node. How do I have to fill the "Icon" property? Nodered is running on an raspi3.
a) how to define a path to the image file?
b) how to configure a variable name in the property and fill this variable with a e.g. change node?
THANK YOU!
guenter
Welcome to the forum.
As usual in such cases a good approach is using CSS to style your UI.
I don´t think you can work with the icon field in the configuration dialog. Instead you better to target the button with a CSS selector and use the CSS background-image property.
Thank you!
Can you give me an easy example how to manage it in nodered? Just a dashboard button showing an image with css background-image property. That would make my break-though!
Sure, it is easy.
These are the lines to add in your CSS styling inside an ui_template node. There is a rule in it telling that the buttons inside the group "Group1" , dashboard "Tab1" should have a background image.
<style>
#Tab1_Group1 button {
background-color: rgb(255,0,0);
background-image: url("/nri/cluster-fuel.png");
background-size: cover;
}
</style>
Then the trick is to configure the static folder in your "setting.js" file correctly. The URL that you see in the CSS configuration is relative the the static path configured in your environment. Search this forum for "static folder" to understand how to configure it correctly.
If you test and all is good you should see an image. I tested with below results:
On the other hand, if you see a standard button with a red background it means you did not get right the configuration of the static folder. Note that the CSS selector #Tab1_Group1 button must match the name of the tab and group you use in your dashboard (tab_group , separated by underline)
[{"id":"d5e31309.28ca2","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"a58c8218.1981b","type":"ui_template","z":"d5e31309.28ca2","group":"9c9a39bf.1be348","name":"Styling","order":8,"width":0,"height":0,"format":"<style>\n\n#Tab1_Group1 button {\n background-color: rgb(255,0,0);\n background-image: url(\"/nri/cluster-fuel.png\");\n background-size: cover;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":510,"y":140,"wires":[[]]},{"id":"10347ce3.586fb3","type":"ui_button","z":"d5e31309.28ca2","name":"","group":"9c9a39bf.1be348","order":0,"width":"6","height":"4","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":510,"y":180,"wires":[[]]},{"id":"9c9a39bf.1be348","type":"ui_group","z":"","name":"Group1","tab":"de7542ce.e7d19","order":2,"disp":true,"width":"6","collapse":false},{"id":"de7542ce.e7d19","type":"ui_tab","z":"","name":"Tab1","icon":"dashboard","order":31}]
oh dear, not so easy for me….
I have a lot of questions:
Can I use this method to assign different images to buttons? I understood that all buttons in a tab are affected by the style you defined.
I see a red button and can change the background-color in the style. If I define a 2nd button, it is affected by the same background-color.
I searched for „static folder“ in the forum and did not get really clearness. Do you have a link to the right topic?
Is there a „static folder“ to be defined in the settings.js file? How?
I found a settings.js in the redmatic/etc path, see json below. Is the „userDir“ the „static folder“?
And if I have to define a relative path in the style, why does your example start with an absolute path „/nri/cluster-fuel.png“?
Don’t bluster me, maybe I’m to old for that….
Best Guenter
{
"uiPort": 1880,
"uiHost": "127.0.0.1",
"flowFile": "flows.json",
"userDir": "/usr/local/addons/redmatic/var",
"httpRoot": "/addons/red",
"logging": {
"ain": {
"level": "debug",
"metrics": false,
"audit": false
}
},
"contextStorage": {
"default": {
"module": "file"
},
"memory": {
"module": "memory"
},
"file": {
"module": "localfilesystem",
"config": {
"dir": "/media/usb1",
"flushInterval": 30
}
}
},
"editorTheme": {
"projects": {
"enabled": false
}
},
"restartOnCrash": 2,
"ccuBackup": "full"
}
| Andrei
9 March |
- | - |
Sure, it is easy.
These are the lines to add in your CSS styling inside an ui_template node. There is a rule in it telling that the buttons inside the group "Group1" , dashboard "Tab1" should have a background image.
<style>
#Tab1_Group1 button {
background-color: rgb(255,0,0);
background-image: url("/nri/cluster-fuel.png");
background-size: cover;
}
</style>
Then the trick is to configure the static folder in your "setting.js" file correctly. The URL that you see in the CSS configuration is relative the the static path configured in your environment. Search this forum for "static folder" to understand how to configure it correctly.
If you test and all is good you should see an image. I tested with below results:
On the other hand, if you see a standard button with a red background it means you did not get right the configuration of the static folder. Note that the CSS selector #Tab1_Group1 button must match the name of the tab and group you use in your dashboard (tab_group , separated by underline)
[{"id":"d5e31309.28ca2","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"a58c8218.1981b","type":"ui_template","z":"d5e31309.28ca2","group":"9c9a39bf.1be348","name":"Styling","order":8,"width":0,"height":0,"format":"<style>\n\n#Tab1_Group1 button {\n background-color: rgb(255,0,0);\n background-image: url(\"/nri/cluster-fuel.png\");\n background-size: cover;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":510,"y":140,"wires":[[]]},{"id":"10347ce3.586fb3","type":"ui_button","z":"d5e31309.28ca2","name":"","group":"9c9a39bf.1be348","order":0,"width":"6","height":"4","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":510,"y":180,"wires":[[]]},{"id":"9c9a39bf.1be348","type":"ui_group","z":"","name":"Group1","tab":"de7542ce.e7d19","order":2,"disp":true,"width":"6","collapse":false},{"id":"de7542ce.e7d19","type":"ui_tab","z":"","name":"Tab1","icon":"dashboard","order":31}]
You are right. You might circumvent this by creating a different group to each button.
Not quite. There is pretty many tricks to select child of known element
for example:
#Home_Buttons_cards > md-card:nth-child(5) > button
or select by aria-label if your buttons have static labels...
and/or differentiate by unit size ...
1 Like
Look at Node-RED the initialization log. It will show you what is your static file. At the time of this writing I am using windows and this is how the initialization log looks like.
The static path is: C:/Users/OCM/.node-red/static
The target image is on folder: C:/Users/OCM/.node-red/static/nri
Therefore I configure the URL statement this way:
background-image: url("/nri/cluster-fuel.png");
The initialization log also tells you where you can find the settings.js file. In my case:
Hi,
I don’t have the HTTP static entry in my log. Dashboard version is 2.28.1, see below.
I have read the linked topic. Everything is very complicated for me on a css / programming level with. What I’m really missing is a set of nodes, where things can be defined without css knowledge.
I also read the uibuilder, but that needs web developer knowledge as well.
Seems that its too complicated for me. In every case: Thank you!!!
9 March |
- | - |
guenter-ms:
Do you have a link to the right topic?
Is there a „static folder“ to be defined in the settings.js file? How?
I found a settings.js in the redmatic/etc path, see json below. Is the „userDir“ the „static folder“?
Look at Node-RED the initialization log. It will show you what is your static file. At the time of this writing I am using windows and this is how the initialization log looks like.
The static path is: C:/Users/OCM/.node-red/static
The target image is on folder: C:/Users/OCM/.node-red/static/nri
Therefore I configure the URL statement this way:
background-image: url("/nri/cluster-fuel.png");
The initialization log also tells you where you can find the settings.js file. In my case:
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
