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…

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…

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</…

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: [Dashboard] Now I wo…

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(…

bk1989 do you have full code for picture on ui

Node-RED

Node-RED Forum

Show Image as icon on dashboard

Dashboard

dceejay 15 June 2018 10:27 4

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

Getting image in dashboard

Topic		Replies	Views
Getting image in dashboard Dashboard	50	52053	17 February 2019
Dashboard button node Icon Property to show jpg image Dashboard	8	2237	10 March 2021
Trying to get a button image in dashboard Dashboard	12	3703	25 March 2020
Image integration in the dashboard Dashboard	35	502	12 July 2024
Image display on dashboard Dashboard node-red-dashboard	6	868	17 November 2023

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Show Image as icon on dashboard

Related topics