First own UI node


#1

Hi,
I´m trying to develop my first UI Node,
I want to generate something like this:

but nothing happened.

If I leave the if condition, it shows me the image.

grafik

So my question, how can I change the image depending on the payload?
and make it possible to send a new payload when clicking?


#2

does anyone have an idea?


#3

Hey @Georg25,

For your first question, you might have a look at another discussion. But in that case the server-side flow decides which image has to be showed...

Bart


#4

Hi Bart,

thanks for the tip.

module.exports = function(RED) {
	function checkConfig(node, conf) {
		if (!conf || !conf.hasOwnProperty("group")) {
			node.error(RED._("ui_pic.error.no-group"));
			return false;
		}
		return true;
	}
	var pic = null; 
	function HTML(config) {		
	// define HTML code
		(function(scope) {
			scope.$watch('msg',function(msg){
				if(msg) {
					pic= config.offPicture;
				}
			});
		})(scope);

		//var state = config.onvalue;
		//pic = config.onPicture;
		var html = String.raw`
		<div>
			<md-button ng-click="sendVal()" ng-model="msg.targetValue">
				<img  src="/${pic}"> 
			</md-button>
		</div>`
		return html;
	};

If I make it this way the following error message appears:


#5

Hi @Georg25,

The function(scope) { ... } Javascript code from your example will now be runned on the server-side (i.e. in your flow), since it is located inside the HTML function. Indeed that HTML function is used to determine which html/javascript code needs to be send to the client-side (i.e. to the dashboard in the browser). Since the AngularJs scope is not defined on the server, you will get that error...

So you need to tell Node-RED that your Javascript code needs to be runned in the client-side (not in the server-side!). Think you have to put your code inside the initController, as you can see in this discussion.

But on the client-side you don't have the config (since that is the data from the config screen of your node on the server-side flow), so you will have to get the offPicture from elsewhere e.g. from the msg.payload ....

Bart


#6

ok but that was not the plan. Is not there an easy way to get the payload? And make an if-case with it?


#7

Hmmm, it might be that I'm mistaken. Have not published yet a single dashboard node either...

In this discussion you can see that the scope stuff is inside the html raw string, where you have also your config data available. And then you can put your IF into your scope function...