Hi,
I'm a complete beginner and doing my 2 project.
I use Dashboard 1.
How to make a button with my picture png ?
Thank you very much.
If you are just starting, I would recommend you move to dashboard 2, as dashboard 1 is deprecated and not supported.
You can add an icon to the dash-2 button node.
Hi.
I know you can add an icon.
I want my picture of the button.
Exactly how do you want the button to look?
The buttons on the page you linked to look like CSS styling rather than an image.
picture png
https://i.postimg.cc/DfgzhKrP/images.png
This is for @flowfuse/node-red-dashboard, AKA Dashboard 2, and the button is 2x2 grid units. If you want it larger you will have to experiment with the widget config and the CSS width and height settings below.
You can use CSS to make your button a constant size and round whatever the screen size.
Make the button class "round".
In a CSS template style it:
.round button {
border-radius: 50%;
background-image: url("/redbutton.png");
background-size: cover;
max-height: calc( 2 * var(--widget-row-height));
min-height: calc( 2 *var(--widget-row-height));
max-width: calc( 2 *var(--widget-row-height));
min-width: calc( 2 *var(--widget-row-height));
}
You need to specify in settings.js a location for Node-red to find static content. Obviously adjust the pathname to suit your Node-red setup.
httpStatic: '/home/pi/.node-red/node-red-static/',
and put your image in that folder. (I called mine redbutton.png)
There are various buttons including round ones described here
3 Likes
Hi.
I have been worried for 3 days and it doesn't work.
I have done everything you wrote.
I don't know where I make a mistake.
Can you please json?
Thank you very much.
- What operating system are you running Node-red on?
- Are you using Docker?
- What version of Node-red do you have? (from the hamburger menu)
- What version of the dashboard do you have? (from Manage Palette)
- Please show us the part of your settings.js file where you specify httpStatic
- Show us the image file in that folder.
- Please export your button node and CSS template node. Paste them here using the
</>button.
ps I did try to mention everything you need to do to get the picture button working, but I forgot to say restart Node-red after changing settings.js.
Hi.
I have Raspberry 5 Raspios-bookworm.
I don't use Docker.
First check JSON If I have no mistake.
[{"id":"dc3aa5374a70eb0a","type":"tab","label":"Flow 3","disabled":false,"info":"","env":[]},{"id":"aa938bee7528adaa","type":"group","z":"dc3aa5374a70eb0a","name":"test button","style":{"label":true},"nodes":["3bec95ecad12db59","048f8d9a5b35f2a0"],"x":34,"y":359,"w":172,"h":142},{"id":"3bec95ecad12db59","type":"ui-button","z":"dc3aa5374a70eb0a","g":"aa938bee7528adaa","group":"592bb444d5bcd375","name":"¨Button","label":"START","order":3,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"rounded onehigh","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":120,"y":400,"wires":[[]]},{"id":"048f8d9a5b35f2a0","type":"ui-template","z":"dc3aa5374a70eb0a","g":"aa938bee7528adaa","group":"","page":"028ba4cab9c762af","ui":"","name":"CSS","order":0,"width":0,"height":0,"head":"","format":".round button {\n border-radius: 50%;\n background-image: url(\"/redbutton.png\");\n background-size: cover;\n max-height: calc( 2 * var(--widget-row-height));\n min-height: calc( 2 *var(--widget-row-height));\n max-width: calc( 2 *var(--widget-row-height));\n min-width: calc( 2 *var(--widget-row-height));\n}","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":110,"y":460,"wires":[[]]},{"id":"592bb444d5bcd375","type":"ui-group","name":"Kuchyn","page":"028ba4cab9c762af","width":"4","height":"1","order":3,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"028ba4cab9c762af","type":"ui-page","name":"Stranka 1","ui":"91060802dbd1f808","path":"/stranka1","icon":"home","layout":"grid","theme":"f749ebad164367d5","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"91060802dbd1f808","type":"ui-base","name":"Muj panel","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"default"},{"id":"f749ebad164367d5","type":"ui-theme","name":"default theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
The code you posted does indeed have a mistake.
Also you skipped points 3, 4, 5 & 6.
By looking at your flow I see you are using FlowFuse Dashboard AKA Dashboard 2.0 but in your original post you stated:
I use Dashboard 1
I guess you have updated? You should tag this post with dashboard-2 to remove confusion
Next, your CSS is:
.round button {
border-radius: 50%;
background-image: url("/redbutton.png");
background-size: cover;
max-height: calc( 2 * var(--widget-row-height));
min-height: calc( 2 *var(--widget-row-height));
max-width: calc( 2 *var(--widget-row-height));
min-width: calc( 2 *var(--widget-row-height));
}
- How are you serving
"/redbutton.png"? - Did you edit your settings.js to serve static content?
- Have you tested the URL in your browser - to check that the image is actually being served?
- e.g. if your Node-RED is at
http://localhost:1880then try accessinghttp://localhost:1880/redbutton.png- do you see the image?
- e.g. if your Node-RED is at
Alternatively, you could serve the image using http-in > read file > http-response nodes to avoid setting up http static. There is an example in the dashboard-2.0 ui-template docs see this recent post: Display image in buffer in template node - #4 by Steve-Mcl
Hi.
I have a node-red in 4.0.5
@Flowfuse/Node-Red-Dashboard 1.18.1
http://192.168.1.11:1880/redbutton.png
I see the picture
It doesn't work.
https://ibb.co/kM4gzWh
Your button has:
↑ rounded ↑
Your CSS is
↓ round ↓
.round button {
border-radius: 50%;
background-image: url("/redbutton.png");
background-size: cover;
max-height: calc( 2 * var(--widget-row-height));
min-height: calc( 2 *var(--widget-row-height));
max-width: calc( 2 *var(--widget-row-height));
min-width: calc( 2 *var(--widget-row-height));
}
Either change the CSS or change the class name in the button so they are the same.
Thank you very much 
Hi.
Can I find instructions on how to make buttons properly?
Why do I have 4 buttons?
Your questions are too vague and to broad I'm afraid.
Ps please don't post links to images via a website filled with advertising. Just paste the images directly into your post alongside your text.
