# Button with my picture

**URL:** <https://discourse.nodered.org/t/button-with-my-picture/92906>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [4 November 2024 17:26 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906 "2024-11-04T17:26:37Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Le-Ze](https://avatars.discourse-cdn.com/v4/letter/l/a87d85/32.png) [@Le-Ze](https://discourse.nodered.org/u/Le-Ze)\
**Post date:** [4 November 2024 17:26 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/1 "2024-11-04T17:26:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [5 November 2024 11:04 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/2 "2024-11-05T11:04:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Le-Ze](https://avatars.discourse-cdn.com/v4/letter/l/a87d85/32.png) [@Le-Ze](https://discourse.nodered.org/u/Le-Ze)\
**Post date:** [5 November 2024 12:18 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/3 "2024-11-05T12:18:20Z")

</div>

Hi.  
I know you can add an icon.  
I want my picture of the button.

> **[Button Template Images - Free Download on Freepik](https://www.freepik.com/free-photos-vectors/button-template)**
>
> Find & Download Free Graphic Resources for Button Template Vectors, Stock Photos & PSD files. ✓ Free for commercial use ✓ High Quality Images #freepik

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [5 November 2024 12:22 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/4 "2024-11-05T12:22:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Le-Ze](https://avatars.discourse-cdn.com/v4/letter/l/a87d85/32.png) [@Le-Ze](https://discourse.nodered.org/u/Le-Ze)\
**Post date:** [5 November 2024 19:41 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/5 "2024-11-05T19:41:55Z")

</div>

picture png  
[https://i.postimg.cc/DfgzhKrP/images.png](https://i.postimg.cc/DfgzhKrP/images.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [5 November 2024 20:58 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/6 "2024-11-05T20:58:20Z")

</div>

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.

![redbutton](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7ad14c95a88aeb63acf060ce31ece524be36bbfb.gif)

Make the button class "round".  
In a CSS template style it:

```auto
.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.

```auto
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](https://discourse.nodered.org/t/css-styling-ui-button-widgets-on-dashboard-2/90969)

---

<div class="post-metadata">

**Author:** ![Le-Ze](https://avatars.discourse-cdn.com/v4/letter/l/a87d85/32.png) [@Le-Ze](https://discourse.nodered.org/u/Le-Ze)\
**Post date:** [8 November 2024 07:59 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/7 "2024-11-08T07:59:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [8 November 2024 08:55 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/8 "2024-11-08T08:55:22Z")

</div>

1. What operating system are you running Node-red on?
2. Are you using Docker?
3. What version of Node-red do you have? (from the hamburger menu)
4. What version of the dashboard do you have? (from Manage Palette)
5. Please show us the part of your settings.js file where you specify httpStatic
6. Show us the image file in that folder.
7. 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.

---

<div class="post-metadata">

**Author:** ![Le-Ze](https://avatars.discourse-cdn.com/v4/letter/l/a87d85/32.png) [@Le-Ze](https://discourse.nodered.org/u/Le-Ze)\
**Post date:** [9 November 2024 09:45 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/9 "2024-11-09T09:45:22Z")

</div>

Hi.  
I have Raspberry 5 Raspios-bookworm.  
I don't use Docker.  
First check JSON If I have no mistake.

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

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [9 November 2024 10:02 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/10 "2024-11-09T10:02:39Z")

</div>

The code you posted does indeed have a mistake.

Also you skipped points 3, 4, 5 & 6.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 November 2024 10:24 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/11 "2024-11-09T10:24:36Z")

</div>

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:

```auto
.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));
}

```

1. How are you serving `"/redbutton.png"`?
2. Did you edit your settings.js to serve static content?
3. 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:1880` then try accessing `http://localhost:1880/redbutton.png` - do you see the image?

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](https://discourse.nodered.org/t/display-image-in-buffer-in-template-node/93001/4)

---

<div class="post-metadata">

**Author:** ![Le-Ze](https://avatars.discourse-cdn.com/v4/letter/l/a87d85/32.png) [@Le-Ze](https://discourse.nodered.org/u/Le-Ze)\
**Post date:** [9 November 2024 13:00 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/12 "2024-11-09T13:00:30Z")

</div>

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](http://192.168.1.11:1880/redbutton.png)  
I see the picture

It doesn't work.  
[https://ibb.co/kM4gzWh](https://ibb.co/kM4gzWh)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 November 2024 13:04 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/13 "2024-11-09T13:04:48Z")

</div>

Your button has:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/9/b91731ca6cf3add6498082efb4bd020ad5232729.png)

↑ `rounded` ↑

Your CSS is

↓ `round` ↓

```auto
.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.

---

<div class="post-metadata">

**Author:** ![Le-Ze](https://avatars.discourse-cdn.com/v4/letter/l/a87d85/32.png) [@Le-Ze](https://discourse.nodered.org/u/Le-Ze)\
**Post date:** [9 November 2024 16:18 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/14 "2024-11-09T16:18:01Z")

</div>

Thank you very much 👍

---

<div class="post-metadata">

**Author:** ![Le-Ze](https://avatars.discourse-cdn.com/v4/letter/l/a87d85/32.png) [@Le-Ze](https://discourse.nodered.org/u/Le-Ze)\
**Post date:** [10 November 2024 07:34 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/15 "2024-11-10T07:34:23Z")

</div>

Hi.  
Can I find instructions on how to make buttons properly?

> **[Switch on — Postimages](https://postimg.cc/CRx9Jy1W)**

> **[obrazek — Postimages](https://postimg.cc/1f74vQBF)**

> **[obrazek — Postimages](https://postimg.cc/4K9KKSz9)**

Why do I have 4 buttons?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 November 2024 08:00 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/16 "2024-11-10T08:00:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 December 2024 08:01 UTC](https://discourse.nodered.org/t/button-with-my-picture/92906/17 "2024-12-10T08:01:41Z")

</div>

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