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?
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.
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?
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"
Found the mistake. Using Windows you have to set the link like
httpStatic: 'C:\\Users\\kauzinge\\Pictures',
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
Hey, thank you for that tip for CSS
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
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>
bk1989 do you have full code for picture on ui
@ 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
}
]
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
@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.
i get it......thank you so mush for help
So how i do give those buttons IDs for adressing them?
I have incoming UDP strings
Hi.
I don't want to make things more confusing than they already are, but you could also look at the ui_MEDIA node.
I am playing with it just now and it is handy for what I am doing: showing a picture on one machine on another's dashboard.
