Show Image as icon on dashboard

#1

So I’m currently working on a flow using the opc ua and the dashboard nodes to send information form my windows pc to an opc server. Therefore I created an dashboard and use buttons to send int32 to my server. The next step would be to use an image as icon for the buttons. I already found this topic (Getting image in dashboard) where an image was used as background image. But I still don’t managed to use an image as icon. Has somebody already managed to use image from an pc for icons?

#2

You can easily use any of the several hundred built in material icons or fa-icons (v4.7)

More than that gets a lot more complex. I’ve not done it, but I would guess you may be able to host them on a public directory then use some css magic to attach them to the button.

#3

Thanks for the information. is there a possible way to show the image on the dashboard? Not as an icon, but as picture next to a button?

#4

yes - in a ui_template sized and placed next to a button

Getting image in dashboard
#5

So I tried to change the settings.json file in “C:\Users\user.node-red” for the httpStatic. Therefor I used:

       // When httpAdminRoot is used to move the UI to a different root path, the
       // following property can be used to identify a directory of static content
       // that should be served at http://localhost:1880/.
       httpStatic: 'C:\Users\user\Pictures',

Bu when I want to show an image via http://localhost:1880/my-image.png I just get the error “Cannot GET /my-image.png”

#6

Found the mistake. Using Windows you have to set the link like

httpStatic: 'C:\\Users\\kauzinge\\Pictures',

#7

Good Morning

Maybe helps you as starting point…

I have this on a template which shows an image on the dashboard and if you click on it will open on a full new window.

<div height="210" style="height: 210px;">
<img src="/grab.jpg" width="280"><br/>
<a href="/grab.jpg" target="_blank">Full screen</a>
</div>

```


What makes the 2 first lines on the code are the related to the image show on the dashboard, just defining the proper size and the link of your image should work as u expect.

Should be also some way that you click on the image and send some payload or do some action but don't ask me how...

Regards
#8

image

#9

Hey, thank you for that tip for CSS

#10

So, now I've got the images on the dashboard using a template node and the command:

<div height="150" style="height: 150px;" ng-click="send({payload:'Clicked'});">
<img src="/Block_Gray.png" width="140"><br/>
</div>

So I get the following picture of the dashboard as result:

Now I would like to place the images in two rows. But even if I increase the size of the group to 20 it's still not enough to place two images right next to each other

#11

By default, a <div> element displays as a block - it fills the horizontal space available to it.

If you want to put lots of <div>s in a row, you can set its display css property to inline-block and also set its width:

<div style="display: inline-block; width: 150px; height: 150px;" ng-click="send({payload:'Clicked'});">
<img src="/Block_Gray.png" width="140"><br/>
</div>
#12

bk1989 do you have full code for picture on ui

#13

@ RapinIot1 Here's the code I'm currently using to display an image on the dashboard. You will also have to change the path in the config.

[
    {
        "id": "92c67e1a.214f8",
        "type": "tab",
        "label": "Flow 1"
    },
    {
        "id": "49d71999.9bbfe",
        "type": "ui_template",
        "z": "92c67e1a.214f8",
        "group": "89c38c32.842bf",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<div>\n<div align=\"center\" style=\"display: inline-block; width: 140px; height: 140px;\" ng-click=\"send({payload:'Clicked1'});\">\n<img src=\"/M04.png\" width=\"130\"><br/>\n</div>\n\n<div align=\"center\" style=\"display: inline-block; width: 140px; height: 140px;\" ng-click=\"send({payload:'Clicked2'});\">\n<img src=\"/L01.jpg\" width=\"130\"><br/>\n</div>\n\n<div align=\"center\" style=\"display: inline-block; width: 140px; height: 140px;\" ng-click=\"send({payload:'Clicked3'});\">\n<img src=\"/S04.png\" width=\"130\"><br/>\n</div>\n\n<div align=\"center\" style=\"display: inline-block; width: 140px; height: 140px;\" ng-click=\"send({payload:'Clicked4'});\">\n<img src=\"/S05.png\" width=\"130\"><br/>\n</div>\n\n<div align=\"center\" style=\"display: inline-block; width: 140px; height: 140px;\" ng-click=\"send({payload:'Clicked5'});\">\n<img src=\"/L03.png\" width=\"130\"><br/>\n</div>\n</div>",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "x": 290,
        "y": 131,
        "wires": [
            [
                "ac4101c0.ba8af8"
            ]
        ]
    },
    {
        "id": "ac4101c0.ba8af8",
        "type": "function",
        "z": "92c67e1a.214f8",
        "name": "",
        "func": "if (msg.payload==='Clicked1')\n{\n    msg.payload = '1';\n    return msg;\n}\nelse\nif (msg.payload==='Clicked2')\n{\n    msg.payload = '2' ;\n    return msg;\n}\nelse\nif (msg.payload==='Clicked3')\n{\n    msg.payload = '3' ;\n    return msg;\n}\nelse\nif (msg.payload==='Clicked4')\n{\n    msg.payload = '4' ;\n    return msg;\n}\nelse\nif (msg.payload==='Clicked5')\n{\n    msg.payload = '5' ;\n    return msg;\n}",
        "outputs": 1,
        "noerr": 0,
        "x": 413,
        "y": 130,
        "wires": [
            [
                "10b347e8.32d6e8"
            ]
        ]
    },
    {
        "id": "10b347e8.32d6e8",
        "type": "ui_ui_control",
        "z": "92c67e1a.214f8",
        "name": "ui control",
        "x": 542.4387817382812,
        "y": 129.99441528320312,
        "wires": [
            []
        ]
    },
    {
        "id": "89c38c32.842bf",
        "type": "ui_group",
        "z": "",
        "name": "Stationsübersicht",
        "tab": "ff0416fd.ccd7f8",
        "order": 1,
        "disp": false,
        "width": "9"
    },
    {
        "id": "ff0416fd.ccd7f8",
        "type": "ui_tab",
        "z": "",
        "name": "Home",
        "icon": "device_hub",
        "order": 1
    }
]
#14

thank you so mush i use node red on win10 system. where i have put picture file

which folder . or if i want to put image in folder name "3m" where i have to create "3m" folder

#15

@RapinIot1 For Windows 10, the path to the images should first be edited in the folder
C:\Users\username\ .node-red in the file settings.js. Here I had to change line 94.

    // When httpAdminRoot is used to move the UI to a different root path, the
    // following property can be used to identify a directory of static content
    // that should be served at http://localhost:1880/.
    httpStatic: 'C:\\Users\\username\\Pictures',

This line of code specifies the folder in which the images are stored. Afterwards the pictures can be called up from the Pictures folder.

#16

i get it......thank you so mush for help