Button with my picture

Dashboard
11

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));
}
  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