Trying to get a button image in dashboard

Dashboard
1

Hi folks

Very new to code red so bit of a steep learning curve for me. Iv'e got a bit of time on my hands so I am trying to make a smart thermostat following Peter Scargill's excellent information. Problem is I'm stuck at how to code png images as buttons in the template node which will then show up in dashboard.

Here is a sample of the script i'm using:

 <md-button  class="vibrate filled touched smallfont rounded greybuttons" ng-click="send({payload: 'd'})"> 
                <img style="outline : none;" 
                             ng-src="{{(msg.payload)?'/home/pi/node-red/public/myicons/png/48x48/actions/arrow-down-2.png':'/home/pi/node-red/public/myicons/png/48x48/actions/arrow-left-2.png'}}" 
                              height="36px"
                />
</md-button>

All I get is is a grey square with an icon that looks like a broken page (pretty sure this means that the file cant be found or isnt in the right place or something really stupid that i'm doing wrong). I've tried putting the png image in various locations with no luck. To try to make it easier my flow consists of just one template node and nothing else.

Hope one of you chaps can help me with this simple issue.

Thanks

3

Have a look at the network tab in the developer tools of your browser. Usually F12 will open the tools (depends on your OS and browser though), select the networks tab, you will have to reload the browser.

Then scan down the list of loaded resources to find the red ones - see what url it is trying to load.

Now you need to think about the difference between accessing a file on the server vs how the browser will get a file. You have provided local file paths but the browser needs URL's.

Assuming that you set up your static folder correctly as /home/pi/node-red/public in settings.js and assuming that you have not changed the httpRoot setting, the url will be /myicons/png/48x48/actions/arrow-down-2.png or /myicons/png/48x48/actions/arrow-left-2.png.

If you have changed the root, you will probably be able to prefix the URL with a single dot which should, I think work.

4

Thanks for that, I'll give it a go tomorrow.

5

here is a screen grab of the settings:

Browser info
Browser info1289×950 109 KB

Still no joy im afraid. I tried what you suggested. My static folder is all good.

6

I've deleted all of my flows and dashboard items and have placed one template node in one flow to keep everything simple. I have the following code in the template node:

<div height="150" style="height: 150px;">
<img src="/home/pi/test1.png" width="140"><br/>
</div>

Still can't get the image test1 to display in the dashboard (test1 is a simple 48 x 48 pixel image in the pi directory)

I must be really missing something simple :roll_eyes:

7

Have you set your static folder in settings.js and restarted node-RED

8

This works for me @Surefire01

  1. I have httpStatic: '/home/pi/.node-red/images/', in settings.js

  2. placed my logo.png file in a images folder within my node-RED user directory, ie home/pi/.node-red/images/logo.png

  3. In a ui-template node I have;

<img src="/logo.png" align="middle" style="width: 485px;
                           height:auto;
                           max-height: 100%;
                           max-width: 53%;
                           display:block">
9

Right, I might be on to something. I opened the setting file in a text editor on the pi. Here is the httpstatic line:
`
//httpStatic: '/home/nol/node-red-static/',

I think I need to change it to something like this:

httpStatic: '/home/pi/node-red/images/',

When I remove the comments (//) at the beginning and change the path and try to re-save the file I get a permission denied error. How can I edit this file and re-save it.

Thanks for your patience chaps.

10

OK, I have figured out how to change the file permissions and have re-saved the text file setting.js to include the following:

   // 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: '/home/pi/.node-red/images/',

I have set placed my png image in the images folder above (i called mine test1.png)
and have this code in a template node:

<img src="/test1.png" align="middle" style="width: 485px;
                           height:auto;
                           max-height: 100%;
                           max-width: 53%;
                           display:block">

Restarted everything but guess what, still no image displayed in dashboard. Don't want to give up but loosing heart a little.

11

That shouldn't happen!
I'm assuming that you have a Raspberry pi?
If so, did you install node-RED using the recommended script for Raspberries and ran the script exactly as it says in the docs?
If you had a permissions error trying to save the settings file as user Pi, I'm wondering if you installed it using sudo.
To be sure, I would run the installation script again, it will not wipe out your flows, but it will make sure that your permissions are correct.

12

The node red package I was using came on the NOOBS memory card that I purchased with the Pi.

I went to the Node red getting started page for raspberry pi and performed the following as per the instructions:

sudo apt install build-essential git

Then:

bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)

It seem to install fine but I still can't edit the settings.js file without changing permissions.

Have I re-installed correctly?

13

Chaps, chaps,chaps,

Humble pie time for me, stupid basic error on my part: the script said:

<img src="/test1.png" align="middle" style="width: 485px;
                           height:auto;
                           max-height: 100%;
                           max-width: 53%;
                           display:block">

And my file was named: Test1.png (note the capital T instead of a lower case t)

Needless to say I can now get a picture in my dashboard. Thanks for all your time and effort, and once again really sorry :roll_eyes:

14

Haha, happens to us all :laughing:

15

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.