Using flow.get inside a function in a template node

To check if a button that is pressed on a webpage i want to get the last pushed button on a page
To do this i want to save the pressed button with flow.set and when a button is pressed again check the current button input id with the previous by getting it by flow.get
But flow.get is not working. Checking google / forums i found tips with {{ or {{{ and with a $
None of these works
What is the correct way to do this inside a function?
what i have now is this

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bomb</title>
	<style>
body {
            background-image: url(https://www.parkvakanties.nl/media/blog/1016/1016_1000x670.jpg);
            background-repeat: no-repeat;
            background-position: center; 
        }
        .nr-dashboard-theme ui-card-panel {
    background-color: rgba(255,255,255,0);
    border: 0px ;
}
body.nr-dashboard-theme md-content md-card {
    background-color:#12312300 !important;
    border: 0px ;
}
    

	img:visited,
    img:active,
    img:focus {
      outline:none;
    }
	.image {
			 text-align: center;
			 border-style:0;
			 border: 0;
			 border: none !important;
            background: transparent !important
            outline: none;
            
		}
        .sevenseg {

            color: rgba(255, 0, 0, 0.8);
            font-size: 85px;
            font-family: "Seven Segment";
            text-align: center;
            margin-top:10px;
        }

    </style>
</head>

<body>
  <table width="95%" border="0" class="image">
    <tbody>
      <tr>
        <td><img src="/image.png" width="65" height="65" alt=""  data-clicked="0" id="imageOne" ng-click="changeImage($event)" />
        </td>
        <td><img src="/image.png" width="65" height="65" alt=""  data-clicked="0" id="imageTwo" ng-click="changeImage($event)" />
        </td>
      </tr>
      <tr>
        <td><img src="/image.png" width="65" height="65" alt=""  data-clicked="0" id="imageThree" ng-click="changeImage($event)" />
        </td>
        <td><img src="/image.png" width="65" height="65" alt=""  data-clicked="0" id="imageFour" ng-click="changeImage($event)" />
        </td>
      </tr>
    </tbody>
  </table>

  <pre class="sevenseg" >{{msg.payload}}</pre>

  <script>
  var button;
  var lastButton;
    (function(scope) {
        scope.changeImage = function(event) {
        //console.log("Triggered", event)

        button = event.target.id; // current button id
        lastButton = flow.get("lastButton")||0; // get last button id
        
        if (event.target.dataset.clicked == "0")
         {
            scope.send({ payload: { image: event.target.id, selected: true, pannekoek: event.target.src }})
            event.target.dataset.clicked = 1 // increment clicks to 1
            event.target.src = "/imageNeg.png"; // change image src
         }
         else {
             
                scope.send({ payload: { image: event.target.id, selected: false, pannekoek: event.target.src  }})
                event.target.dataset.clicked = 0 // reset clicks to 0
                event.target.src = "/image.png"; // change back to original image src
                //flow.set("lastButton",button);
             
         }

}

})(scope);
  </script>
</body>

</html>

Context is server side (node-red runtime) do you can't access context in client side script.

You would save the last button pressed in your flow not in client code.

Thanks!
sounds hard to solve it then.
isnt it possible then to save something on client side?
how do they do this normally on a website then?

the idea is that they only can change the last pressed button on the webpage

you can .. using some variable outside the scope of your changeImage function.

scope.lastButton;   // last button state

just the syntax is a bit different from normal javascript because the NodeRed Dashboard is based on the front-end language Angular.

Example

[{"id":"b11293a5f92bf98a","type":"ui_template","z":"5847b7aa62131d37","group":"61db9c3f37fc1036","name":"","order":1,"width":"12","height":"7","format":"<!doctype html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<title>Bomb</title>\n\t<style>\nbody {\n            background-image: url(https://www.parkvakanties.nl/media/blog/1016/1016_1000x670.jpg);\n            background-repeat: no-repeat;\n            background-position: center; \n        }\n        .nr-dashboard-theme ui-card-panel {\n    background-color: rgba(255,255,255,0);\n    border: 0px ;\n}\nbody.nr-dashboard-theme md-content md-card {\n    background-color:#12312300 !important;\n    border: 0px ;\n}\n    \n\n\timg:visited,\n    img:active,\n    img:focus {\n      outline:none;\n    }\n\t.image {\n\t\t\t text-align: center;\n\t\t\t border-style:0;\n\t\t\t border: 0;\n\t\t\t border: none !important;\n            background: transparent !important\n            outline: none;\n            \n\t\t}\n        .sevenseg {\n\n            color: rgba(255, 0, 0, 0.8);\n            font-size: 85px;\n            font-family: \"Seven Segment\";\n            text-align: center;\n            margin-top:10px;\n        }\n\n    </style>\n</head>\n\n<body>\n  <table width=\"95%\" border=\"0\" class=\"image\">\n    <tbody>\n      <tr>\n        <td><img src=\"/image.png\" width=\"65\" height=\"65\" alt=\"\"  data-clicked=\"0\" id=\"imageOne\" ng-click=\"changeImage($event)\" />\n        </td>\n        <td><img src=\"/image.png\" width=\"65\" height=\"65\" alt=\"\"  data-clicked=\"0\" id=\"imageTwo\" ng-click=\"changeImage($event)\" />\n        </td>\n      </tr>\n      <tr>\n        <td><img src=\"/image.png\" width=\"65\" height=\"65\" alt=\"\"  data-clicked=\"0\" id=\"imageThree\" ng-click=\"changeImage($event)\" />\n        </td>\n        <td><img src=\"/image.png\" width=\"65\" height=\"65\" alt=\"\"  data-clicked=\"0\" id=\"imageFour\" ng-click=\"changeImage($event)\" />\n        </td>\n      </tr>\n    </tbody>\n  </table>\n\n  <pre class=\"sevenseg\" >{{msg.payload}}</pre>\n\n  <script>\n \n    (function(scope) {\n\n     \n    scope.lastButton; // last button state\n\n    scope.changeImage = function(event) {\n      //console.log(\"Triggered\", event)\n\n      let button = event.target.id; // current button id\n      scope.lastButton = event.target.id; // set last button id\n        \n      if (event.target.dataset.clicked == \"0\")\n        {\n            scope.send({ payload: { image: event.target.id, selected: true, pannekoek: event.target.src }})\n            event.target.dataset.clicked = 1 // increment clicks to 1\n            event.target.src = \"/imageNeg.png\"; // change image src\n            console.log(\"lastButton\", scope.lastButton)\n        }\n        else {\n             \n            scope.send({ payload: { image: event.target.id, selected: false, pannekoek: event.target.src  }})\n            event.target.dataset.clicked = 0 // reset clicks to 0\n            event.target.src = \"/image.png\"; // change back to original image src\n            console.log(\"lastButton\", scope.lastButton)\n\n             \n        }\n\n}\n\n// watch for received msgs\nscope.$watch('msg', function(msgReceived) {\n    if (msgReceived) {\n      // Do something when msg arrives\n     console.log(\"msg received from Node-Red\", msgReceived);\n    }\n  });\n\n\n})(scope);\n  </script>\n</body>\n\n</html>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":340,"y":1240,"wires":[["75d8d7a42c1072d4"]]},{"id":"75d8d7a42c1072d4","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":570,"y":1240,"wires":[]},{"id":"61db9c3f37fc1036","type":"ui_group","name":"test","tab":"74b1d602a9d252c0","order":1,"disp":false,"width":"12","collapse":false,"className":""},{"id":"74b1d602a9d252c0","type":"ui_tab","name":"Bom","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

I have only just started this stuff but why not;

(function(scope) {
    let button = 0
    let lastButton = 0

    scope.changeImage = function(event) {
        button = event.target.id; // current button id
        
        ... whatever you plan on doing with the information

        lastButton = button

    }

you can define them as normal js variables but if you add them to scope .. those variables are going to be part of Angular and will be responsive.

if you use the Example above and add, a div :

<div>Last Image Clicked : {{lastButton}}</div>

With every update of that scope.lastButton variable, the DOM updates automagically.

That is true, but there is nothing in the HTML <body> section that is wanting to show that information so I was, (possibly falsely) assuming that all that was required was to use the info in the <script> section.

1 Like

you are right . . it didnt explain it well. I should have made that distinction and clarified that.
im new to AngularJS and most of the things i picked up are from snippets of code here and there from reading some posts.

So am I. I have to admit that I have been developing a dropdown to select a colour (with coloured option elements) and I gave up with AngularJS and just used JQuery and Javascript

me i learned Vue JS instead because it was used as a template example in uibuilder
and i dont regret two bits the countless hours spent learning it .. its an amazing front-end language
it makes programming and interacting with the DOM so much easier .. all tied together with the useful functions uibuilder offers.

Totally agree!!