Button with my picture

Dashboard
6

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

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