Background on BlueMix

Oke so i figuered out how i needed to create a background in my dashboard.
now i was wondering how i can do the same on blue mix.

In very much the same way…
In your bluemix project there is a bluemix-settings.js file that already has httpStatic set to point to a folder called public within the project… - and that already contains an images folder. so you can add your image into there. And then add the template in your flow to point to /images/your_image.jpg.

You will need to use the devops pipeline tools to add the image to that folder and redeploy your project to bluemix - but that is business as usual.

This may look like a stupid question but how do i acces the bluemix-settings.js

You use the devops pipeline tools - by enabling “Continuous Delivery” etc

@mammoet It isn’t a stupid question if you aren’t familiar with the IBM Cloud. To give a bit more of a complete answer…

On the IBM Cloud dashboard page for your application you should see a box in the bottom right corner titled ‘Continuous Delivery’. Within that box is an ‘Enable’ button that you should click, and then click ‘Create’ on the next page. That will create a Toolchain that links a git repository with your application.

Once it has been created, you’ll see a tile labelled “Eclipse Orion Web IDE” - click on that to go to the browser-based IDE for your application. It’ll show you the git repository for your app. You should see bluemix-settings.js in the list, click on it to open it.

You can then edit the file as you wish. But in this instance, the file already has httpStatic set and pointed to the public directory of the repository. You want to add your custom background image to the repository. To do that, in the left-hand panel listing your files, you should see the public directory. Right click on it and select Import->File or Zip archive - you can then upload the file you want to add from your local filesystem.

When you have finished, click the git button (all the way over on the left-hand edge of the screen, the icon between the pencil and cog.

This will show the changes you’ve made. Enter a commit message in the box provided and hit the ‘Commit’ button. The ‘Outgoing’ section on the left should now show the commit you’ve just created. Click the ‘Push’ button… and wait. The toolchain will take the change you’ve made and redeploy your node-red application (which will take a few minutes).

1 Like

I have added images in the public/images folder in the ibm cloud. Can you please tell where exactly to put this code in Node-RED:
`

body { background-image: url("/images/maelstrom1600.jpg"); } `

I want to display it in Node RED Dashboard as soon as it is displayed.

@deekshaha there are lots of threads in this forum covering adding a background image using a ui_template node. Have a search for those - will help you get started

Hi @knolleary. Just went through our discussion.. Firstly, Thanks for the awesome guide, I just followed your steps though I am facing problems while displaying the image in my dashboard.. Hope the attached screenshots provide a better info. Thanks!


What folder did you upload the image to in your node-red application?

I would expect you to have put them in /public/images alongside the other images in there - node-red-app/public/images at master ¡ IBM/node-red-app ¡ GitHub

Have you tried accessing the image directly in your browser to check that bit is working before you do the Dashboard parts?

1 Like

Thanks for your kind response. @knolleary

Yeah.. I have uploaded my file in the same location as you have mentioned..

I tried by using the git link too in the template node but I wasn't able to display the image, so where and what did I miss now..! :sob: